CSS 指层叠样式表 (Cascading Style Sheets)
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
:
如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
http:/ /www.iis7.com/b/wzjk/
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开
:
css样式三种调用使用方式：
插入样式表的方法有三种:
外部样式表(External style sheet)：语法：
内部样式表(Internal style sheet)：在头部写样式
内联样式(Inline style)：直接在元素中写(不推荐)
*全局标记{ }
：
为了避免Internet Explorer 中无法调整文本的问题，使用 em 单位代替像素。
em的尺寸单位由W3C建议。
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
因此，1em的默认大小是16px，可以换算。
:
css背景样式：
background-color：背景颜色
background-image：url("图片")：背景图片(默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体)
background-repeat：背景平铺 on-repeat不平铺 -x横向平铺-y垂直平铺
background-position：背景定位属性
background-attachment:背景附件属性 fixed(固定背景属性)
background：# url（#）有背景有图片输入 列子
：
css文本样式值：
font-size：#px； 文字大小
font-family：字体样式,如:微软雅黑
font-style：文字状态如 斜体等
font-weight：文字粗细
text-align：文本对齐
font-variant ：字体之间的转变，以小型大写字体或者正常字体显示文本。
line-height：行高 上下距离会有变化，也可以用于行与行之间的空间(%)
text-decoration：文本装饰 underline下划线 none去除下划线
text-decoration: overline：上划线
text-decoration:line-through：删除线
text-transform: uppercase：英文大写
text-transform:lowercase：英文小写
text-transform:capitalize：首字母大写
text-align：设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐
text-indent：第一行的文本缩进
text-shadow：文本阴影，(1.左右2.上下3.模糊程度4.颜色)
letter-spacing：字符之间的空间
direction：文字方向
word-spacing：增加在字符之间空白的空间
white-space:nowrap:在元素内禁止文字环绕
字体属性定义字体，加粗，大小，文字样式。
font-family 属性设置文本的字体系列。
font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。
font-style：这个属性有三个值：normal(正常)，italic(斜体)，oblique(斜体)
font-size 属性设置文本的大小。
能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。
请务必使用正确的HTML标签，就

-

表示标题和

表示段落：
字体大小的值可以是绝对或相对的大小。
绝对大小：设置一个指定大小的文本，不允许用户在所有浏览器中改变文本大小
确定了输出的物理尺寸时绝对大小很有用
相对大小：相对于周围的元素来设置大小，允许用户在浏览器中改变文字大小
：
css列表样式：
在HTML中，有两种类型的列表：

• 无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
  

1. 有序列表 - 列表项的标记有数字或字母
   list-style-type：列表符号
   list-style-image：图像符号(可以自定义)
   list-style-position：位置符号
   list-style:复合属性(可以多种属性在一起)
   list-style: none：清除默认小黑点
   circle圆圈
   disc正方形
   ：
   CSS 盒子模型(Box Model)
   所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
   CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
   盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
   margin(外边距) - 清除边框外的区域，外边距是透明的, Margin可以使用负值，重叠的内容。Margin: # auto(自动)居中：放大缩小 #上下自动
   border(边框) - 围绕在内边距和内容外的边框。top上, left左, right右, bottom下，(color颜色, width宽, solid实线，dashed虚线)
   padding(内边距) - 清除内容周围的区域，内边距是透明的。
   Content(内容) - 盒子的内容，显示文本和图像。
   最终元素的总宽度计算公式是这样的：总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
   元素的总高度最终计算公式是这样的：总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
   border-style：用于设置元素所有边框的样式，或者单独地为各边设置边框样式，如下所示：
   none : 默认无边框
   dotted : 定义一个点线边框
   dashed : 定义一个虚线边框
   solid : 定义实线边框
   double : 定义两个边框。 两个边框的宽度和 border-width 的值相同
   groove : 定义3D沟槽边框。效果取决于边框的颜色值
   ridge : 定义3D脊边框。效果取决于边框的颜色值
   inset : 定义一个3D的嵌入边框。效果取决于边框的颜色值
   outset : 定义一个3D突出边框。 效果取决于边框的颜色值
   。。。。。。。。。。。
   border-right：分割线
   border：用于把针对四个边的属性设置在一个声明。
   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：设置元素的上边框的宽度。
   为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick(厚的) 、(中等)medium（默认值） 和 thin(薄的)。
   ：
   CSS 轮廓（outline）
   轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
   轮廓（outline）属性指定元素轮廓的样式、颜色和宽度
   outline：在一个声明中设置所有的轮廓属性
   outline-color：设置轮廓的颜色
   outline-style：设置轮廓的样式
   outline-width：设置轮廓的宽度
   ：
   CSS margin(外边距)
   margin(外边距)属性定义元素周围的空间。
   margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
   margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
   margin可以使用负值，重叠的内容。
   auto ：设置浏览器边距，这样做的结果会依赖于浏览器
   length：定义一个固定的margin（使用像素，pt，em等）
   % ：定义一个使用百分比的边距
   为了缩短代码，有可能使用一个属性中margin指定的所有边距属性。这就是所谓的简写属性，所有边距属性的简写属性是 margin :
   margin：属性可以有一到四个值：(边距是顺时针旋转：上右下左)
   margin：在一个声明中设置所有外边距属性。
   margin-bottom：设置元素的下外边距。
   margin-left：设置元素的左外边距。
   margin-right：设置元素的右外边距。
   margin-top：设置元素的上外边距。
   ：
   CSS padding（填充）
   length：定义一个固定的填充(像素, pt, em,等)
   %：使用百分比值定义一个填充
   padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。
   当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
   单独使用 padding 属性可以改变上下左右的填充。
   为了缩短代码，它可以在一个属性中指定的所有填充属性，这就是所谓的简写属性。所有的填充属性的简写属性是 padding :
   padding：属性可以有一到四个值：(边距是顺时针旋转：上右下左)
   padding：使用简写属性设置在一个声明中的所有填充属性
   padding-bottom：设置元素的底部填充
   padding-left：设置元素的左部填充
   padding-right：设置元素的右部填充
   padding-top：设置元素的顶部填充
   :
   CSS 尺寸 (Dimension)
   尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。
   height：设置元素的高度。
   width 设置元素的宽度。
   line-height：设置行高。
   max-height：设置元素的最大高度。
   max-width：设置元素的最大宽度。
   min-height：设置元素的最小高度。
   min-width：设置元素的最小宽度。
   ：
   CSS Display(显示) 与 Visibility（可见性）
   display：属性设置一个元素应如何显示。
   visibility：属性指定一个元素应可见还是隐藏。
   隐藏元素 - display:none 或 - visibility:hidden
   隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。
   display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
   visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了但仍然会影响布局。
   display(不占空间)：隐藏。none不显示 block显示
   visibility(占空间)：隐藏。 hidden不显示 visitle显示
   display:inline：可以把块级元素变成内联元素
   display:block：可以把内联元素变成块级元素，不允许有它内部的嵌套块元素。
   块级元素(block)特性：
   总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
   宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
   内联元素(inline)特性：
   和相邻的内联元素在同一行;
   宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
   块级元素主要有：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
   内联元素主要有：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 -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
   我们常将

• 元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。
  :
  CSS Position(定位)
  position 属性指定了元素的定位类型。
  position 属性的五个值：
  static：默认值，没有定位，元素出现在正常的流中，静态定位的元素不会受到 top, bottom, left, right影响。
  absolute：绝对定位，相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于，元素和其他元素重叠。
  relative：相对定位，相对其正常位置，(相对灵活，按元素自己的位置)
  fixed：固定定位，即使窗口是滚动的它也不会移动
  sticky：可以把它称之为粘性定位，依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换
  元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法
  z-index：指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面），一个元素可以有正数或负数的堆叠顺序，具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
  clip:rect：裁剪元素，先有定位
  overflow:scroll：内容溢出时，显示隐藏内容
  overflow:hidden：内容溢出时，隐藏
  overflow:auto：自动处理溢出内容
  overflow-x：指定如何处理右边/左边边缘的内容溢出元素的内容区域。值：auto，hidden，scroll，visible，no-display，no-content
  overflow-y：指定如何处理顶部/底部边缘的内容溢出元素的内容区域。值：auto，hidden，scroll，visible，no-display，no-content
  :
  CSS float(浮动)
  浮动，可以让行内和块变成行内块
  浮动，会使元素向左或向右移动，其周围的元素也会重新排列。
  浮动，往往是用于图像，但它在布局时一样非常有用
  元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
  一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
  浮动元素之后的元素将围绕它。
  浮动元素之前的元素将不会受到影响。
  如果图像是右浮动，下面的文本流将环绕在它左边
  如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻
  1.

浮动清除
2.overflow：hiddc，auto
：
光标悬停时，外形变化
cursor:move：四方拉伸
cursor:e-resize：左右拉伸
cursor:w-resize：左右拉伸
cursor:n-resize：上下拉伸
cursor:s-resize：上下拉伸
cursor:ne-resize：右上角+左下角
cursor:sw-resize：右上角+左下角
cursor:nw-resize：左上角+右下角
cursor:se-resize：左上角+右下角
cursor:auto：文本
cursor:text：文本
cursor:default：原形
cursor:help：原形+问号
cursor:pointer：手指
cursor:progress：原形+加载
cursor:wait：加载
cursor:crosshair：十字
：
CSS 伪类(Pseudo-classes)：
光标经过显示状态：
a:link：未访问过的链接
a:hover：当用户鼠标悬停在链接上时
a:visited：用户已访问过的链接
a:active：链接被点击的那一刻
a:focus：选择元素输入后具有焦点
所有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：选择所有有效值的属性
:focus input:focus：选择元素输入后具有焦点
:first-letter p:first-letter：选择每个

元素的第一个字母
:first-line p:first-line：选择每个

元素的第一行
:first-child p:first-child：选择器匹配属于任意元素的第一个子元素的

元素
:before p:before：在每个

元素之前插入内容
:after p:after：在每个

元素之后插入内容
:lang(language) p:lang(it)：为

元素的lang属性选择一个开始值
：
CSS 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式
"first-line" 伪元素只能用于块级元素。
注意： 下面的属性可应用于 "first-line" 伪元素：
font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
:first-letter 伪元素
"first-letter" 伪元素用于向文本的首字母设置特殊样式：
注意： "first-letter" 伪元素只能用于块级元素。
注意： 下面的属性可应用于 "first-letter" 伪元素：
font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if "float" is "none")
text-transform
line-height
float
clear
:before：伪元素可以在元素的内容前面插入新内容。
:after：伪元素可以在元素的内容之后插入新内容。
：
CSS 布局 - 水平 & 垂直对齐
要水平居中对齐一个元素(如