CSS简介：属性值

颜色属性

1. color:color属性允许你指定元素中文本的颜色可以采用以下三种方法之一来指定任何颜色：RGB值、十六进制编码、颜色名称
2. background-color: CSS在处理每个HTML元素时都假设它们位于一个无形的盒子中，而background-color属性设置的正是这个盒子的背景色
3. opacity:opacity属性允许你指定元素及其子元素的透明度。该属性值是一个介于0.0~1.0之间的数字（以此推算，0.5表示50%的透明度，0.15表示15%的透明度）
4. rgba:该属性允许你像RGB值那样指定颜色，不过它增加了一个用来表示透明度的值。这个值称为alpha值，它是一个介于0.0~1.0之间的数字。rgba值只会影响应用它的元素（不会作用于这个元素的子元素）
5. hsl:该属性是一种全新并且直观的方式来指定颜色，这种方式通过色调、饱和度和明度值来确定颜色。该属性的值以hsl开头，位于其后的括号内是以下几种值：色调、饱和度、明度
6. hsla:该属性允许你利用色调、饱和度、明度来指定颜色，并增加了一个表示透明度的值。

文本属性

1. font-family:该属性允许你为这些元素中的任意文本指定字体
2. font-size:该属性用于指定字体的大小。可以采用多种方式来指定字体大小，最常用的方式有：像素、百分数、EM值
3. font-weight:该属性允许你创建粗体文本。该属性通常选用一下两个值：normal、bold。
4. font-style:该属性可以创建斜体文本，有三个可选值：normal、italic、oblique。
5. text-transform:该属性用来改变文本的大小写，可以选用以下值之一：uppercase、lowercase、capitalize。
6. text-decoration:可选用以下值：none（该值会把应用在文本上的装饰线删除）、underline（该值会在文本底部增加一条实线）、overline（该值会在文本顶部增加一条实线）、line-through（该值会用一条实线穿过文字）、blink（该值会使文本动态闪烁）
7. line-height:该属性是指某一行字母下缘的底端到下一行字母上缘的顶端之间的距离。行间距的初始值最好设定在1.4em~1.5em。
8. letter-spacing:该属性来控制字母之间的间距
9. word-spacing:该属性来控制单词间距
10. text-align:该属性用于控制文本的对齐方式，该属性可以选用以下值：left、right、center、justify。
11. vertical-align:该属性用于控制文本的对齐方式，该属性可以选用以下值：baseline、sub、super、top、text-top、middle、bottom、text-bottom。
12. text-indent:该属性允许你将元素中的首行文本进行缩进。可以采用许多方式来指定首行的缩进量，但通常采用像素值或em值
13. text-shadow:该属性用于创建投影，投影指的是比文本颜色更暗的版本，它位于文本的后方并略有偏移。该属性还可以通过添加亮度比文本稍高的阴影来创建浮雕效果。创建投影需要指定三个长度值和一种颜色值，（第一个长度值表明阴影向左或向右延伸的距离，第二个长度值表明阴影向上或向下延伸的距离，第三个长度值为可选项，它用于指定投影的模糊程度。最后一项是投影的颜色值）
14. ：first-letter，:first-line :这两个为一个元素中的首字母或者首行文本另外指定一个值。从技术角度来看，这两个并不是属性，被称为伪元素。
15. 链接样式
    :link :该伪类允许你为那些尚未访问过的链接设置样式
    :visited :该伪类允许你为那些已经单击过的链接设置样式
16. 响应用户
    :hover :该伪类在用户将定位设备（比如光标）悬停于某个元素上时生效
    :active :该伪类在用户在元素上进行操作时生效
    :focus :该伪类在元素拥有焦点时生效
    当使用多个伪类时，应当遵循以下顺序：:link; :visited; :hover; :focus; :active

盒子属性

1. 盒子的大小
   width,height : 默认情况下，一个盒子的大小刚好容纳下其中的内容，并根据其中内容的变化而变化。如果自定义盒子的大小，就需要用到width和height属性。指定盒子大小的最常用的方式是像素、百分数或者em值
2. 宽度限制
   min-width,max-width : min-width属性指定一个盒子在浏览器窗口较窄时可以显示的最小宽度，max-width属性指定一个盒子在浏览器较宽时所能伸展的最大宽度
3. 高度限制
   min-height,max-height : min-width属性指定一个盒子在浏览器窗口较窄时可以显示的最小高度，max-width属性指定一个盒子在浏览器较宽时所能伸展的最大高度
4. 内容溢出
   overflow : 该属性告诉浏览器当盒子的内容超过盒子本身时如何显示。它有两个属性值可以选择
   hidden :该属性会直接把溢出盒子空间的内容进行隐藏
   scroll :该属性会在盒子上添加一个滚动条，这样用户可以通过滚动条来查看其余的内容
5. 边框宽度
   border-width: 该属性用来控制边框的宽度。该属性值可以是像素值，也可以是以下值：thin,medium,thick。可以通过下面4种属性分别对各个边框大小进行控制：
   border-top-width、border-right-width、border-left-width、boder-bottom-width
6. 边框样式
   border-style: 该属性用来控制边框的样式。该属性值可以是以下值：solid（一条实线）、dotted（一串方形点）、dashed（一条虚线）、double（两条实线）、groove（显示为雕入页面的效果）、ridge（显示为在页面上凸起的效果）、inset（显示为嵌入页面的效果）、outset（看起来像是要凸出屏幕）、hidden/none（不显示任何边框）。可以通过下面4种属性分别对各个边框样式进行控制：
   border-top-style、border-right-style、border-left-style、boder-bottom-style
7. 边框颜色
   border-color: 该属性用来控制边框的颜色。可利用RGB值、十六进制码、或是CSS颜色名称。可以通过下面4种属性分别对各个边框颜色进行控制：
   border-top-color、border-right-color、border-left-color、boder-bottom-color
8. 快捷方式
   border: 该属性允许你在一个属性中同时指定边框的宽度、样式和颜色
9. 内边距
   padding: 该属性用来指定元素的内容与元素边框之间保持多大的空隙
   可使用以下属性分别只对能够各个方向的内边距：
   padding-top、padding-right、padding-left、padding-bottom
   注意：如果已经为一个盒子指定了宽度，那么内边距就会增加到这个盒子的宽度上
   padding属性的值不会被子元素继承
10. 内边距
    padding: 该属性用来控制盒子之间的空隙
    可使用以下属性分别只对能够各个方向的内边距：
    margin-top、margin-right、margin-left、margin-bottom
    注意：如果已经为一个盒子指定了宽度，那么外边距就会增加到这个盒子的宽度上
    margin属性的值不会被子元素继承
11. 内联元素与块级元素的转换
    display: 该属性允许你将一个内联元素转换成一个块级元素，反之亦然，而且该属性还可以用于从页面上隐藏元素。该属性可以选用以下值：
    inline、block、inline-block、none
12. 盒子的隐藏
    visibility: 该属性允许从用户的视线中隐藏盒子，但它保留了元素原来占用的空间。该属性可以选用以下值之一：
    hidden、visible
13. 边框图像
    border-image: 该属性将图片应用到盒子的边框上。
    该属性需要三种信息：（1）.图片的URL（2）切割图片的位置（3）如何处理直边，可以使用以下值：stretch（伸展图片）、repeat（重复图片）、round（类似于repeat，但如果重复图片遇到边界时不合适，round值会根据边框的大小动态调整图片的大小直至正好可以铺满整个边框）

详情戳这里，讲的很详细哦https://www.w3cplus.com/content/css3-border-image
http://www.zhangxinxu.com/wordpress/2010/01/css3-border-image

14.盒子的投影
box-shadow: 该属性允许你在盒子的周围增加投影，格式如下：
E {box-shadow: inset x-offset y-offset blur-radius spread-radius color};
E {box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影}，具体请看

http://www.cnblogs.com/sapho/p/5481257.html

15.圆角
border-radius: 该属性允许在盒子上创建圆角，可使用以下属性为一个盒子每个角分别指定值：
border-top-right-radius、border-top-left-radius、border-bottom-right-radius、border-bottom-left-radius
还可以使用快捷方式一次指定以上四个属性（按顺时针顺序：上方、右侧、下方、左侧）

列表、表格和表单属性

1. 项目符号样式
   list-style-type : 该属性允许你控制项目符号的形状或样式。该属性可应用到< ol >元素、< ul >元素、< li >元素的规则中去
   对于无序列表，该属性可使用以下值：none、disc、circle、square（不知道什么含义的自行百度啦）
   对于有序列表，该属性可使用一下值：decimal、decimal-leading-zero、low-alpha、upper-alpha、lower-roman、upper-roman
2. 项目图像
   list-style-image : 该属性可将一个图像作为项目符号使用。该属性可应用到< ul >元素、< li >元素的规则中去
   该属性的值以字母url开头，后面跟着一对圆括号。在括号里面，图像的路径在双引号中给出。例如：url（“image/star.png”）
3. 标记的定位
   list-style-position : 该属性用于表明标记显示的位置，是在包含主题内容的盒子的内部，还是在其外部
   该属性可以选用以下两个值：outside（该值表明标记位于文本块的左侧）、inside（该值表明标记位于文本块的内部，同时文本块会被缩进）
4. 列表快捷方式
   list-style : 该属性允许你按任意顺序表示标记的样式、图像和位置属性
5. 空单元格的边框
   empty-cells : 如果在一个表格中含有空单元格，那么你可以使用empty-cells属性来指定是否空单元格的边框
   该属性可以选用以下三个值
   show: 用于显示空单元格的边框；hide: 该值用于隐藏空单元格的边框；inherit: 如果一个表格嵌套在另一个表格中，那么inherit值表明单元格遵循外部表格的规则
6. 单元格之间的空隙
   border-spacing : 该属性允许你控制相邻单元格之间的距离。该属性值通常以像素指定，如果你希望分别指定单元格间的横向距离与纵向距离，你可以一次指定两个值
   border-collapse : 该属性来合并相邻的边框。该属性的可选值是：
   collapse : 该值表示尽可能将单元格相邻的边框合并为一个单独的边框（这时border-spacing属性会被忽略并且单元格会被挤压在一起，empty-cells属性也会被忽略）
   separate : 该值表示将相邻的边框分离（此时border-spacing属性会生效）
7. 光标样式
   cursor: 该属性用于控制显示给用户的光标的类型。
   auto、crosshair、default、pointer、move、text、wait、help、url（“cursor.gif”）

布局

1. 关于元素定位的核心概念
   构建块 : CSS采用盒子模型来处理每个HTML元素。盒子可以是一个“块级”盒子，也可以是一个“内联”盒子
   包含元素 : 如果一个块级元素位于另一个块级元素内部，那么这个外部的框就成为包含元素或父级元素
   
2. 控制元素的位置
   CSS中包含以下三种用于控制页面布局的定位机制：普通流、相对定位和绝对定位。在CSS中通过position属性表明定位机制。还可以使用float属性来让元素浮动
3. 普通流
   position :static 在普通流中，每个块级元素都在下一个元素的上方
   
4. 相对定位
   position :relative相对定位的元素以其在普通流中所处的位置为起点进行移动。使用位移属性（top或bottom以及left或right）指定该元素需要从其在普通流中的位置移动多少距离，盒子的位移属性值通常设置为像素值、百分数或em值
   
5. 绝对定位
   position :absolute 如果将盒子设置了该属性，那么它就会脱离普通流，不再影响页面中其他元素的位置。盒子的位移属性用于指定元素相对于它的包含元素应该显示在什么位置
   
6. 固定定位
   position :fixed 固定定位是指元素相对于浏览器窗口进行定位。因此，当用户滚动页面时，这类元素的位置保持不变
7. 重叠元素
   position :z-index 当你使用相对定位、固定定位或者绝对定位时，盒子是可以重叠的。如果盒子出现重叠，那么在HTML代码中，后出现的元素将位于页面中先出现元素的上层。如果要控制元素的层次，可以使用z-index属性。该属性的值是一个数字，数值越大，元素的层次就越靠前
8. 浮动元素
   float： 该属性允许你将普通流中的元素在它的包含元素内尽可能地向左或向右排列。
   位于包含元素中的其他内容会在浮动元素的周围流动
   注意：使用float属性的同时，你还应该使用width属性来指定浮动元素的宽度，否则，显示效果就会不一致，浮动的盒子可能会占满其包含元素的整个宽度
9. 清除浮动
   clear： 该属性用于表明一个盒子的左侧或者右侧不允许浮动元素，该属性可以取以下值：left（盒子的左侧不能接触同一个包含元素内的其他任何元素）、right（盒子的右侧不能接触同一个包含元素内的其他任何元素）、both（盒子的左侧右侧都不能接触同一个包含元素内的其他任何元素）、none（盒子的两侧都可以接触元素）
   关于浮动元素更多的问题：点击

http://www.ruanyifeng.com/blog/2009/04/float_clearing.html

1. 固定宽度布局：要创建一个固定宽度布局，通常需要为页面中主体盒子的宽度指定一个像素值（有时也会指定高度）

图像

1. 在CSS中控制图像的大小
   可在CSS中利用width属性和height属性控股只一个图像的大小，就像控制其他任何和字的大小一样
2. 使用CSS将图像居中
   相对于< img >元素的align特性来说，越来越多的网页设计人员使用float属性来对齐图像。可以采用以下两种方式实现对齐：1、将float属性添加到用于控制图像大小的类中 2、使用诸如align-left或者align-right的名称创建新类，将图像在页面内向左或向右对齐，这些类的名称与表示图像大小的类一起使用
3. 使用CSS将图像居中
   默认情况下，图像属于内联元素。这意味着它们与周围文本一起流动。为使图像居中，我们应该将其转换成块级元素，通过将display属性的值设置为block就可以完全转换。
   图像被转换成块级元素后，可采用以下两种方法将其水平居中：1、对于图像的包含元素，可将其text-align属性设置为center。2、对于图像本身而言，可以使用margin属性并将其左右外边距的值设置为auto。
4. 背景图像
   background-image：该属性允许你在任何HTML元素之后放置图像。背景图像可以填满整个页面或是填充页面的一部分。默认情况下，背景图像会自动重复并充满整个盒子
5. 重复图像
   background-repeat：该属性可选用以下四个值：
   repeat：背景图像在水平方向和垂直方向上都进行重复，也是默认显示方式
   repeat-x：背景图像只在水平方向上进行重复
   repeat-y：背景图像只在垂直方向上进行重复
   no-repeat：背景图像只显示一次
   6.background-attachment：
   该属性用于指定背景图像在用户滚动页面时的移动方式，是位置固定不变，还是随页面滚动。它可以选用以下两个值中的一个：
   fixed：背景图像固定在页面中的一个位置
   scroll：背景图像随用户上下滚动页面而上下移动
   7.背景图像定位background-position：
   如果背景图像不进行重复，你可以使用background-position属性来指定背景图像在浏览器窗口中的位置。该属性通常会有一对值，第一个值表示水平位置，第二个值表示垂直位置。如果只指定一个值，那么第二个值默认为center。
   还可以使用一对百分数。这些值表示与浏览器窗口（或是包含盒子）左上角的距离，左上角相当于0% 0%。
   8.background：
   该属性就像前面介绍的其他所有背景属性以及background-color属性的简写形式。
   该属性必须按照以下顺序来指定，但如果不行指定某个属性，可将其忽略。background-color、background-image、background-repeat、background-attachment、background-position
   9.图像翻转与子画面
   利用CSS，可在用户将光标悬停在一个链接或按钮上时为链接或按钮创建另一个样式（称为翻转），还可以在用户单击它时创建第三种样式