CSS基础：
1./* */ 注释
2.#para1{} <p id="para1"> </p>
3.p.center{} <p class="center"> </p> /*仅限p有效*/ .center{} <p class="center"> </p>
1.CSS 背景属性
background 简写属性。用于把所有用于列表的属性设置于一个声明中
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-repeat 设置背景图像是否及如何重复。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-position 设置背景图像的起始位置。
2.CSS文本属性 描述
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距
3.CSS字体属性
Property 描述
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。
4.CSS链接样式
a:link - 正常，未访问过的链接 a:link {background-color:#B2FF99;}
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时 a:hover {text-decoration:underline;}
a:active - 链接被点击的那一刻
5.CSS列表属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型
6.CSS Box Model
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
7.CSS 边框属性
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。
8.CSS 轮廓（outline）属性
outline 在一个声明中设置所有的轮廓属性 outline-color outline-style outline-width inherit
outline-color 设置轮廓的颜色 color-name hex-number rgb-number invert inherit
outline-style 设置轮廓的样式 none dotted dashed solid double groove ridge inset outset inherit
outline-width 设置轮廓的宽度 thin medium thick length inherit
9.CSS 里的 visibility 属性，通常其值被设置成 visible 或 hidden。 visibility 还可能取值为 collapse
visibility: hidden 相当于 display:none，能把元素隐藏起来，但两者的区别在于：
1、display:none 元素不再占用空间。
2、visibility: hidden 使元素在网页上不可见，但仍占用空间。
块级元素(block)特性：总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
块级元素主要有：address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
内联元素(inline)特性:和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
内联元素主要有：a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
可变元素(根据上下文关系确定该元素是块元素还是内联元素)：
applet ,button ,del ,iframe , ins ,map ,object , script
CSS中块级、内联元素的应用：利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。
主要用的CSS样式有以下三个：
display:block -- 显示为块级元素
display:inline -- 显示为内联元素
display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
10.CSS定位属性
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 auto length % inherit
clip 剪辑一个绝对定位的元素 shape auto inherit
cursor 显示光标移动到指定的类型 url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 auto length % inherit
overflow 设置当元素的内容溢出其区域时发生的事情。 auto hidden scroll visible inherit
overflow-y 指定如何处理顶部/底部边缘的内容溢出元素的内容区域 auto hidden scroll visible no-display no-content
overflow-x 指定如何处理右边/左边边缘的内容溢出元素的内容区域 auto hidden scroll visible no-display no-content
position 指定元素的定位类型 absolute fixed relative static inherit
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 auto length % inherit
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 auto length % inherit
z-index 设置元素的堆叠顺序 number auto inherit
11.CSS 中所有的浮动属性
clear 指定不允许元素周围有浮动元素。 left right both none inherit
float 指定一个盒子（元素）是否可以浮动。 left right none inherit
12.CSS3 中包含了四种组合方式:(例如：)
div p 后代选择器(以空格分隔)
div>p 子元素选择器(以大于号分隔）
div+p 相邻兄弟选择器（以加号分隔）
div~p 普通兄弟选择器（以破折号分隔）
13.CSS伪类/元素
:checked input:checked 选择所有选中的表单元素
:disabled input:disabled 选择所有禁用的表单元素
:empty p:empty 选择所有没有子元素的p元素
:enabled input:enabled 选择所有启用的表单元素
:first-of-type p:first-of-type 选择的每个 p 元素是其父元素的第一个 p 元素
:in-range input:in-range 选择元素指定范围内的值
:invalid input:invalid 选择所有无效的元素
:last-child p:last-child 选择所有p元素的最后一个子元素
:last-of-type p:last-of-type 选择每个p元素是其母元素的最后一个p元素
:not(selector) :not(p) 选择所有p以外的元素
:nth-child(n) p:nth-child(2) 选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n) p:nth-last-child(2) 选择所有p元素倒数的第二个子元素
:nth-last-of-type(n) p:nth-last-of-type(2) 选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n) p:nth-of-type(2) 选择所有p元素第二个为p的子元素
:only-of-type p:only-of-type 选择所有仅有一个子元素为p的元素
:only-child p:only-child 选择所有仅有一个子元素的p元素
:optional input:optional 选择没有"required"的元素属性
:out-of-range input:out-of-range 选择指定范围以外的值的元素属性
:read-only input:read-only 选择只读属性的元素属性
:read-write input:read-write 选择没有只读属性的元素属性
:required input:required 选择有"required"属性指定的元素属性
:root root 选择文档的根元素
:target #news:target 选择当前活动#news元素(点击URL包含锚的名字)
:valid input:valid 选择所有有效值的属性
:link a:link 选择所有未访问链接
:visited a:visited 选择所有访问过的链接
:active a:active 选择正在活动链接
:hover a:hover 把鼠标放在链接上的状态
:focus input:focus 选择元素输入后具有焦点
:first-letter p:first-letter 选择每个<p> 元素的第一个字母
:first-line p:first-line 选择每个<p> 元素的第一行
:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的 <p> 元素
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
:lang(language) p:lang(it) 为<p>元素的lang属性选择一个开始值
14.CSS 属性选择器 *=, |=, ^=, $=, *= 的区别
1.attribute 属性中包含 value:
[attribute~=value] 包含独立的单词为 value，例如： [title~=flower] " title="tulip flower" />
[attribute*=value] 属性中做字符串拆分，只要能拆出来 value 这个词就行，例如： [title*=flower] " title="ffffflowerrrrrr" />
2.attribute 属性以 value 开头:
[attribute|=value] 属性中必须是完整且唯一的单词，或者以 - 分隔开：，例如： [lang|=en] --> <p lang="en"> <p lang="en-us">
[attribute^=value] 属性的前几个字母是 value 就可以，例如：[lang^=en] --> <p lang="ennn">
3.attribute 属性以 value 结尾:
[attribute$=value] 属性的后几个字母是 value 就可以，例如： a[src$=".pdf"]
15.CSS 计数器属性
content 使用 ::before 和 ::after 伪元素来插入自动生成的内容
counter-increment 递增一个或多个值
counter-reset 创建或重置一个或多个计数器
