CSS属性
属性：属性是指定选择符所具有的属性，它是css的核心，css2共有150多个属性。
属性值：属性值包括法定属性值及常见的数值加单位，如25px，或颜色值等。
文本属性
文本大小font-size
- 属性值为数值型时，必须给属性值加单位，属性值为0时除外。
- 单位还可以是pt，9pt=12px。
- 为了减小系统间的字体显示差异，IE Netscape Mozilla的浏览器制作商于1999年召开会议，共同确定16px/ppi为标准字体大小默认值,即1em.默认情况下，1em=16px,0.75em=12px。
- 使用绝对大小关键字
xx-small =9px
x-small =11px
small =13px
medium =16px
large =19px
x-large =23px
xx-large =27px
文本颜色color
用十六进制(是计算机中数据的一种表示方法)表示颜色值：
0 1 2 3 4 5 6 7 8 9
0 1 2 3 4 5 6 7 8 9 A B C D E F
颜色模式：光色模式
R G B
FF 00 00
颜色值的缩写：
当表示三原色的三组数字同时相同时，可以缩写为三位;
当用十六进制表示颜色值时，需要在颜色值前加“#” # fa 00 00
文本类型font-family:字体一,字体二,字体三
浏览器首先会寻找字体1、如存在就使用改字体来显示内容，如在字体1不存在的情况下，则会寻找字体2，如字体2也不存在，按字体3显示内容，如果字体3 也不存在；则按系统默认字体显示；
当字体是中文字体时，需加双引号；
当英文字体中有空格时，需加双引号如（“Times New Roman”）
当英文字体只有一个单词组成是不加双引号；如：（Arial）；
Windows中文版本操作系统下，中文默认字体为宋体或者新宋体，英文字体默认为Arial.
文字加粗font-weight
- normal： 正常的字体。相当于数字值400
- bold： 粗体。相当于数字值700。
- bolder： 定义比继承值更重的值
- lighter： 定义比继承值更轻的值
- 用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-style是否为斜体
- normal： 指定文本字体样式为正常的字体
- italic： 指定文本字体样式为斜体。对于没有设计斜体的特殊字体，如果要使用斜体外观将应用oblique
- oblique： 指定文本字体样式为倾斜的字体。人为的使文字倾斜，而不是去选取字体中的斜体字
italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果.
文字行高line-height
- normal： 允许内容顶开或溢出指定的容器边界。
- 用长度值指定行高。不允许负值。
- 用百分比指定行高，其百分比基于文本的font-size进行换算。不允许负值。
- 用乘积因子指定行高。不允许负值。
当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐；
当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上；
当单行文本的行高大于容器高时，可实现单行文本在容器中垂直中齐以下（IE6及以下版本存在浏览器兼容问题）
文字属性缩写
文字属性简写：font:12px/24px "宋体";
font属性的简写：字号，行高，字体
font-size:12px; line-height:24px; font-family:”宋体”；
font属性的简写：
说明:font的属性值应按以下次序书写(各个属性之间用空格隔开)
顺序: font-style font-weight font-size / line-height font-family
注意：
- 简写时 , font-size和line-height只能通过斜杠/组成一个值，不能分开写。
- 顺序不能改变 ,这种简写法只有在同时指定font-size和font-family属性时才起作用,而且,你没有设定font-weight , font-style , 他们会使用缺省值（默认值）。
水平对齐方式text-align
- left： 内容左对齐。
- center： 内容居中对齐。
- right： 内容右对齐。
- justify： 内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理。（CSS3）
- start： 内容对齐开始边界。（CSS3）
- end： 内容对齐结束边界。（CSS3）
- match-parent： 这个值和
inherit表现一致，只是该值继承的start或end关键字是针对父母的direction值并计算的，计算值可以是 left 和 right 。（CSS3） - justify-all： 效果等同于
justify，不同的是最后一行也会两端对齐。（CSS3）
文本修饰text-decoration
- text-decoration-line： 指定文本装饰的种类。相当于CSS2.1的
text-decoration属性，可取值：none | underline | overline | line-through | blink- none:没有修饰
- underline:添加下划线
- overline:添加上划线
- line-through:添加删除线
- blink:定义闪烁的文本。
- text-decoration-style： 指定文本装饰的样式。
- text-decoration-color： 指定文本装饰的颜色。
首行缩进text-indent
- 用长度值指定文本的缩进。可以为负值。
- 用百分比指定文本的缩进。可以为负值。
- each-line： 定义缩进作用在块容器的第一行或者内部的每个强制换行的首行，软换行不受影响。（CSS3）
- hanging： 反向所有被缩进作用的行。（CSS3）
字间距、词间距letter-spacing、word-spacing
letter-spacing
- normal： 默认间隔。计算值为
0 - 用长度值指定字符间隔。可以为负值。
word-spacing
- normal： 默认间隔。计算值为
0 - 用长度值指定单词间隔。可以为负值。
- 用百分比指定单词间隔。可以为负值。（CSS3）
列表属性
定义列表符号样式list-style-type
- disc： 实心圆(CSS1)
- circle： 空心圆(CSS1)
- square： 实心方块(CSS1)
- decimal： 阿拉伯数字(CSS1)
- lower-roman： 小写罗马数字(CSS1)
- upper-roman： 大写罗马数字(CSS1)
- lower-alpha： 小写英文字母(CSS1)
- upper-alpha： 大写英文字母(CSS1)
- none： 不使用项目符号(CSS1)
- armenian： 传统的亚美尼亚数字(CSS2)
- cjk-ideographic： 浅白的表意数字(CSS2)
- georgian： 传统的乔治数字(CSS2)
- lower-greek： 基本的希腊小写字母(CSS2)
- hebrew： 传统的希伯莱数字(CSS2)
- hiragana： 日文平假名字符(CSS2)
- hiragana-iroha： 日文平假名序号(CSS2)
- katakana： 日文片假名字符(CSS2)
- katakana-iroha： 日文片假名序号(CSS2)
- lower-latin： 小写拉丁字母(CSS2)
- upper-latin： 大写拉丁字母(CSS2)
使用图片作为列表符号list-style-image
- none： 不指定图像，默认内容标记将被
<list-style-type>代替。 - 使用绝对或相对地址指定列表项标记图像。如果图像地址无效，默认内容标记将被
<list-style-type>代替。
定义列表符号的位置list-style-position
- outside： 列表项目标记放置在文本以外，且环绕文本不根据标记对齐
- inside： 列表项目标记放置在文本以内，且环绕文本根据标记对齐
边框属性border
border:边框宽度 边框风格 边框颜色;
例如：border:5px solid #ff0000
边框：border,网页中很多修饰性线条都是由边框来实现的。
边框宽度：border-width:
边框颜色：border-color:
边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)可单独设置一方向边框，
可单独设置一方向边框，
border-bottom:边框宽度 边框风格 边框颜色;底边框
border-left:边框宽度 边框风格 边框颜色;左边框
border-right:边框宽度 边框风格 边框颜色;右边框
border-top:边框宽度 边框风格 边框颜色;上边框
背景属性background
背景颜色 background-color
- 指定颜色。
背景图片的设置 background-image
-
none： 无背景图。
-
使用绝对或相对地址指或者创建渐变色来确定图像。
-
背景图片的显示原则
- 容器尺寸等于图片尺寸，背景图片正好显示在容器中
- 容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；
- 容器尺寸小于图片尺寸，只显示元素范围以内的背景图。
网页上有两种图片形式：插入图片、背景图；
插入图片：属于网页内容，也就是结构。
背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等。
背景图片平铺属性background-repeat
- repeat-x： 背景图像在横向上平铺
- repeat-y： 背景图像在纵向上平铺
- repeat： 背景图像在横向和纵向平铺
- no-repeat： 背景图像不平铺
- round： 当背景图像不能以整数次平铺时，会根据情况缩放图像。（CSS3）
- space： 当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围。（CSS3）
背景图的位置性background-position
- 用百分比指定背景图像在元素中出现的位置。可以为负值。参考容器尺寸减去背景图尺寸进行换算。
- 用长度值指定背景图像在元素中出现的位置。可以为负值。
- center： 背景图像横向或纵向居中。
- left： 背景图像从元素左边开始出现。
- right： 背景图像从元素右边开始出现。
- top： 背景图像从元素顶部开始出现。
- bottom： 背景图像从元素底部开始出现。
background-position:值1 值2;
两个值 ：第一个值表示水平位置的值，第二个值：表示垂直的位置。
当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置。
说明：向左方向，向上方向是负值
背景属性的缩写语法：background:属性值1 属性值2 属性值3；
背景缩写：background:url（背景图片的路径及全称） no-repeat center top #f00；
网页上常用的图片格式（压缩图片）
- jpg :有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )如果网页中
- gif：有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像;
- png:有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的 源文件格式，适用于颜色数量较少的图像;
背景图的固定性background-attachment
- fixed： 背景图像相对于视口（viewport）固定。
- scroll： 背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
- local： 背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。（CSS3）
表格属性
单元格间距border-spacing
- 用长度值来定义行和单元格的边框在横向和纵向上的间距。不允许负值
合并相邻单元格边框border-collapse
- separate： 边框独立
- collapse： 相邻边被合并
无内容时单元格的设置empty-cells
- hide： 指定当表格的单元格无内容时，隐藏该单元格的边框。
- show： 指定当表格的单元格无内容时，显示该单元格的边框。
显示单元格行和列的算法(加快运行的速度)table-layout
- auto： 默认的自动算法。布局将基于各单元格的内容，换言之，可能你给某个单元格定义宽度为100px，但结果可能并不是100px。表格在每一单元格读取计算之后才会显示出来，速度很慢
- fixed： 固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。也就是说，内容可能被裁切
css属性继承
可继承的：
- display
- margin
- border
- padding
- background
- height
- min-height
- max- height
- min-width
- max-width
- overflow
- position
- left
- right
- top
- bottom
- z-index
- float
- clear
- table-layout
- vertical-align
所有元素可继承：
- visibility
- cursor
内联元素可继承：
- letter-spacing
- word-spacing
- line-height
- color
- font
- font-family
- font-size
- font-style
- font-variant
- font-weight
- text- decoration
- text-transform
块状元素可继承：
- text-indent
- text-align
列表元素可继承：
- list-style
- list-style-type
- ist-style-position
- list-style-image
表格元素可继承：
- border-collapse