CSS (HTML美容师)
1、CSS定义
CSS—Cascade Style Sheet层叠样式表（装修标签）
1998/5/12，CSS level2成为W3C标准；用来装饰HTML/XML的标记集合
2、特点：
样式表由样式规则组成，以告诉浏览器如何显示一个文档
每个规则的组成包括一个选择符---通常是一个HTML的元素---和该选择符所接受的样式
每个元素可以定义多个属性，每个属性带有一个值，共同的描述选择符如何呈现
3、CSS样式
样式规则格式：选择符{属性:值}
单一选择符的复合样式声明应该用分号分割：选择符{属性1:值1; 属性2:值2}
4、CSS的调用方式
在Head中调:<head ><style type = “text/css”>h1{ font-size:20pt;color:blue}</head> <body><h1>hello</h1></body>
在Body中调用<h1 style=”font-size:20pt;color:blue”>hello</h1>
调用css文件 <head> <link REL= stylesheet href=”0.3.css” type=”text/css”></head>
5、CSS的优先级问题
按照最靠近元素的定义来显示;如果两个css文件冲突,以后面的为准
6、CLASS & ID
类选择符（点与class相对应）：Class(p.code{}----<p class=”code”>….</p>)<per>保留格式</pre>
一个选择符能有不同的Class，因而允许同一个选择符具有不同的样式
不同的选择符也可以同时定义一样的样式 .code{} 任何标签属性class=“code”
ID选择（#与id相对应） #code1{}-----标签属性id=“code1”
CSS组合/注释
可以一次性定义多个选择符的样式
H1,H2,H3{color:red;font-family:serif}//h1,h2,h3 相同的格式
P A{} //位于p中以A标记的格式
7、字体属性
属性 含义 属性值
font-family 字体 各种字体
font-style 字体样式 italic、oblique
font-variant 小体大写 small-caps
font-weight 字体粗细 bold、bolder、lighter…
font-size 字体大小 absolute、relative、%
color 字体颜色 颜色值
8、颜色与背景属性
属性 含义 属性值
Color 颜色 颜色值
Background-color 背景色 颜色值
Background-image 背景图案 图片路径
Background-repeat 背景图案重复方式 Repeat-x | repeat-y | no-repeat
Background-attachment 背景的滚动 Scroll | fix
Background-position 背景图案初始位置 % | n em | top | left | right | bottom …
9、文本属性
属性 含义 属性值
word-spacing 单词间距 n em （12pixels的M常用于印刷的单位）
letter-spacing 字母间距 n em
text-decoration 装饰样式 underline| overline| line-through| blink
vertical-align 垂直方向位置 sub| super |top |text-top|
middle| bottom| text-bottom
text-transform 转为其他形式 capitalize| uppercase| lowercase
text-align 对齐 left| right| center| justify
text-indent 缩进 n em| %
line-height 行高 pixels、n em、%
10、装饰超链接 伪类选择符
对链接的修饰
A:link 未访问时的状态
A:visited 访问过后的状态
A:active 鼠标点中不放时的状态
A:hover 鼠标划过时的状态
11、边距属性
属性 含义 属性值
margin-top 上边距 n em | %
margin-right 右 n em | %
margin-bottom 下 n em | %
margin-left 左 n em | %
12、填充属性
属性 含义 属性值
padding-top 上填充 n em | %
padding-right 右 n em | %
padding-bottom 下 n em | %
padding-left 左 n em | %
13、边框属性
属性 含义 属性值
Border-top-width 上边框宽度 n em | thin | medium | thick
Border-right-width 右 同上
Border-bottom-width 下 同上
Border-left-width 左 同上
Border-width 四边 同上
Border-color 边框颜色 Color
Border-style 边框样式 Dotted | dash | solid | double | groove | ridge | inset | outset
Border-top |right|bottom|left 上(右|底|左)所有属性 Border-width | border-style | color
14、图文混排（用表格处理）
属性 含义 属性值
Width 宽度 n em | %
Height 高度 n em
Float 文字环绕 Left | right
clear 去除文字环绕 Left | right | both
15、列表属性
属性 含义 属性值
Display 是否显示 Block | inline | list-item | none
White-space 空白部分 Pre | nowrap | normal（是否合并)
List-style-type 项目编号 Disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none
List-style-image 项目前图片 Img-url
List-style-position 第二行位置 Inside | outside
List-style 全部属性 Keyword | position | url
16、鼠标属性
属性值 含义 属性值 含义
Auto 自动 N-resize 上箭头
Crosshair "+" Se-resize 右下
Default 默认 Sw-resize 左下
Hand 手形 S-resize 下箭头
Move 移动 W-resize 左箭头
E-resize 右箭头 Text "I"
Ne-resize 右上 Wait 沙漏
Nw-resize 左上 help 帮助
17、定位属性
属性 含义 属性值
Position 位置 Absolute|relative|static
Left | top 横向|纵向位置 N em | %
Width | height 宽度|高度 同上
Clip 剪切 Shape | auto
Overflow 内容超出时 Visible | hidden | scroll | auto
Z-index 立体效果 Integer
visibility 可见性 Inherit | visible | hidden
18、滤镜属性
属性值 含义 属性值 含义
Alpha 半透明 Invert 底片
Blur 模糊 Light 灯光投影
Chroma 指定颜色透明 Mask 透明膜
Dropshadow 投射阴影 Shadow 阴影
Fliph 水平翻转 Wave 波纹
Flipv 垂直翻转 Xray X射线
Glow 光效 Grayscale 灰度
分享到：
相关推荐
CSS笔记 CSS（Cascading Style Sheets），即层叠样式表，是一种用于描述网页样式的语言。CSS的出现拯救了混乱的HTML，让HTML专注于结构呈现，而样式交给CSS处理。 一、CSS简介 1.1 CSS的发展历程 从HTML被发明...
CSS 笔记 CSS（Cascading Style Sheets）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。它可以静态地美化网页，也可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行...
HTML与CSS笔记 HTML（HyperText Markup Language，超文本标记语言）是构成网页内容的骨架，用于创建网页的结构，并通过不同的标签来描述网页的各个部分。CSS（Cascading Style Sheets，层叠样式表）则负责网页的...
这份"史上最经典的HTML+CSS笔记"无疑是学习这两门技术的重要参考资料。以下将根据标题、描述以及可能包含的子文件内容，对HTML和CSS的基础知识进行详细阐述。 HTML是网页内容的结构语言，用于定义网页的各个元素...
css笔记整理（精简） 初识CSS CSS语法 CSS样式引入 css选择器 CSS中的块级元素与行内元素 background 背景(集合样式) font 文字(集合样式) border 边框(复合样式，集合样式) CSS 框模型概述
**CSS笔记一** 在网页设计领域，CSS（Cascading Style Sheets）是不可或缺的一部分，它负责定义HTML或XML（包括SVG、MathML等各种XML方言）文档的呈现方式。本笔记将深入探讨CSS的基础知识，包括选择器、盒模型、...
总结，"黑马前端css笔记.zip"包含了CSS3的重要知识点，如选择器扩展、媒体查询、响应式设计、渐变效果、布局技术（Flexbox和Grid）以及动画过渡等。这些内容对于前端开发人员深入理解和运用CSS3至关重要，能帮助他们...
- **网站**：《Webstandards Solutions》、《网站重构》、《CSS禅意花园》、《点石成金》，都是优秀的在线资源，涵盖了从标准规范到设计美学的广泛内容。 - **名人与网站**：了解万维网的创始人Tim Berners-Lee，...
### HTML CSS 笔记知识点详解 #### 页面自动刷新 页面自动刷新是指网页可以在设定的时间间隔后自动重新加载，实现页面内容的更新。这种技术在早期的网页开发中较为常见，通常用于实现简单的内容轮播或者定时获取...
在网页设计中，`div+css`是一种常见的布局技术，用于实现网页的结构化和美化。`div`是HTML中的一个通用容器元素，用于组织和包裹其他HTML元素，而`css`则是层叠样式表，用来定义网页的样式、布局和视觉效果。`div+...
**CSS（层叠样式表）全面手册** 在网页设计领域，CSS（Cascading Style Sheets）是不可或缺的一部分，它用于定义HTML或XML（包括SVG、XHTML等）文档的呈现方式。通过使用CSS，我们可以控制网页元素的颜色、字体、...
- 外部 CSS：通过 `<link>` 标签引用一个外部的 CSS 文件，如 `<link href="my.css" type="text/css" rel="stylesheet"/>`，这种方式有利于样式复用和代码组织。 - 内部 CSS：将 CSS 代码写在 HTML 的 `<style>` ...
### CSS 笔记：滤镜、阴影与圆角 #### 一、CSS滤镜(Filter) 在Web开发过程中，为了使页面更加美观或者实现特定的视觉效果，开发者常常需要使用到CSS滤镜。CSS滤镜是一种可以对元素进行颜色或图像处理的效果工具。...
html和css基础总结，适合入门web和初学者
这份"naofantian HTML_CSS笔记"提供了作者naofantian在进行毕业设计时积累的知识点和经验分享。 首先，HTML（HyperText Markup Language）是用于创建网页内容的标记语言。它通过各种标签来定义网页的结构，如`...
CSS笔记
CSS笔记主要涵盖了如何定义和应用CSS样式，以及常见的样式属性。 **一、CSS引入方式** 1. 内联样式：在HTML元素的`style`属性中直接写CSS样式，例如`;">文本</p>`。 2. 内部样式表：将CSS写在HTML文档的`<head>`...
这个名为“CSS_Demo”的压缩包文件是与一篇名为《CSS笔记》的文章配套的代码示例，文章作者通过CSDN平台分享了关于CSS的学习心得和实践案例。这篇文章的链接是：...