一、CSS属性组成和作用
1）每个css样式都必须由两部分组成：选择符和声明
注：声明又包括属性和属性值
2）css属性：属性是指定选择符具有的属性，他是css的核心，css2共有150多个属性；
3）css属性值：属性值包括法定属性值和常规的数值加单位或颜色值(colorvalue)；如（25px）
二、CSS属性类型
1、font-family: 字体类型;
{font-family:字体1，字体2，字体3；} 例：font-family:"微软雅黑","宋体";
说明：
浏览器首先会寻找字体1、如存在就使用改字体来显示内容，如在字体1不存在的情况下，则会寻找字体2，如字体2也不存在，按字体3显示内容，如果字体3 也不存在；则按系统默认字体显示；
当字体是中文字体时，需加双引号；
当英文字体中有空格时，需加双引号如（“Times New Roman”）
当英文字体只有一个单词组成是不加双引号；如：（Arial）；
Windows中文版本操作系统下，中文默认字体为宋体或者新宋体，英文字体默认为Arial，新推出的版本也默认为微软雅黑
2、文本大小
{font-size:数值;} 例：div{font-size：12px；}
说明：
1） 属性值为数值型时，必须给属性值加单位，属性值为0时除外。
2）单位还可以是pt（磅），在印刷领域广泛使用9pt=12px;
3）为了减小系统间的字体显示差异，IE Netscape Mozilla的浏览器制作商于1999年召开会议，共同确定16px/ppi为标准字体大小默认值，即1em.默认情况下，1em=16px,0.75em=12px;
度量单位：
1、Pixels 像素（px）的大小取决于用户显示器的尺寸及像素深度。由于1个像素等于屏幕上单个点的宽度和高度，所以这种度量方式最适合显示器。
2、Points 一个点（pt）的大小等于1英寸的1/72。这种度量方式来源于打印-设计背景，最适合于媒体，但同样广泛应用于显示器。
3、Inches 一英寸（in）等于72个点，是最适合于打印的度量方式。
4、厘米 厘米（cm）是另外一种特别适合于打印的度量方式，一厘米大约等于28个点。
5、Millimeters 一毫米（mm）等于1/10厘米（或者大约3个点）。毫米同样是非常适合于打印的度量单位。
6、Picas pica（pc）是另外一种打印度量单位，它等于12个点的长度。
7、Ems em（em）等于当前字体大小，因此是CSS中最有用的度量单位之一，em用来描述相对尺寸大小。
8、Exs ex（ex）同样与当前字体大小相关；与小写字母x的高度相等。Ex的使用范围较窄，最常用的方式是作为近似值使用，用来帮助设置包含文本的盒子的宽度。
9、Percent 该度量单位（%）与em相关，这是因为Percent是em的100倍大小（在用于字体时）。1em等于当前的字体大小你，同样的大小在百分比中为100。在不涉及字体时，Percent与属性被访问的容器的大小有关。
4）em:表示元素字体高度，em值是根据父元素值来确定；em单位可省略；如：font-size:12px;line-height:2; 则行高为24px；
5）使用绝对大小关键字
xx-small =9px
x-small =11px
small =13px
medium =16px
large =19px
x-large =23px
xx-large =27px
3、文本颜色：{color:颜色值;}
例：div{color：red ；}
说明：
（1）用十六进制表示颜色值：
0 1 2 3 4 5 6 7 8 9 A B C D E F
颜色模式：光色模式 FF 00 00
例如：color:#F00
（2）RGB : color:rgb(0,204,204);
（3）rgba(00,255,255,0.6 ) css3新增属性，rgb三原色，a表示透明度 color:rgba(0,204,204,0.6);
十六进制写法：
由红、绿、蓝三色组成；
当用十六进制表示颜色值时，需要在颜色值前加“#”
则： #fa0000
当表示三原色的三组数字都相同时，可以缩写为三位;
（4）用颜色名表示：（16种）
black 纯黑 silver 浅灰 navy 深蓝
blue 浅蓝 green 深绿 lime 浅绿
teal 靛青 aqua 天蓝 maroon 深红
red 红色 purple 深紫 fuchsia 品红
olive 褐黄 yellow 明黄 gray 深灰
white 亮白
4、加粗：
{ font-weight:bolder/bold/normal/100—900;}说明：
bolder(更粗的)/bold（加粗）/normal（常规）
在css规范中，把字体的粗细分为9个等级，分别为100——900，其中100对应最轻的字体变形，而900对应最重的字体变形，
一般500常规字体
600-900加粗字体
5、字体
{font-style：italic(倾斜度小)/oblique（倾斜度大）/normal（取消倾斜，常规显示）;}
italic和oblique都表示倾斜，不过oblique的幅度要大一点。但一般浏览器对它们的区分不是很明显。
6、文本是否大小写
{font-variant:normal(正常的字体)/small-caps(小型的大写字母字体)}
说明：
对英文内容起作用
复合式写法：
font：style variant weight size family；
总体设置字体，按以上顺序； style和weight可以互换位置， size和family不可和其他属性位置互换；
如: font:normal normal bold 24px “黑体”;
说明：
font的属性值应按以下次序书写(各个属性之间用空格隔开)
顺序: font-style | font-variant(小体大写字母) | font-weight | font-size / line-height | font-family
这种简写法只有在同时指定font-size和font-family属性时才起作用,而且,你没有设定font-weight , font-style , 以及font-varient , 他们会使用缺省值。
*文字属性简写：font:12px/1.5em “宋体”;
font:font-size/line-height font-family;
简写时 , font-size和line-height只能通过斜杠/组成一个值，不能分开写。
文本类属性
7、水平对齐方式
{text-align:left/right/center/justify;}说明：
justify对内容以两端边界线对齐显示
8、垂直对齐方式
{vertical-align:top/bottom/middle;}9、行高
{line-height:normal/数值;}说明：
1）当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐；
2) 当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上任意位置的定位；
3) 当单行文本的行高大于容器高时，可实现单行文本在容器中垂直中齐以下任意位置的定位。（IE6及以下版本存在浏览器兼容问题）
倍行高：{line-height:2;} 2倍 ，
{line-height:1.5;}1.5倍；
注：当使用倍行高为单位时，不加PX；按字体大小的倍数而设置。
11、首行缩进：
{text-indent:数值；}设置第一行的缩进值，负值是向前进（可以直接设置长度，或设置百分比）
说明：
1）text-indent可以取负值，可实现隐藏文本，悬挂缩进。
2）text-indent属性只对第一行起作用，若第一行不是文本则没变化。
12、字符间距
{letter-spacing:value;} 控制英文字母和汉字的字距
说明：
每个文字以及字母之间的间隔，
13、词间距
{word-spacing:normal/数值;}控制英文单词词距。（通用于英文词和词之间的间距）
说明：
完整的单词之间的间隔，不是字母之间
14、文本流控制
{layout-flow:horizontal/vertical-ideographic;}（只支持IE浏览器）
说明：
1）horizontal:自左向右
2）vertical-ideographic:自上而下，自右向左
15、控制文本大小写
text-transform: none(默认值)/capitalize(每个单词首字母大写)/uppercase (都为大写字母)/lowercase ( 都为小写字母 )
16、文本阴影 text-shadow
例：{text-shadow: 5px 5px 5px #FF0000; }
分别表示：水平偏移值，垂直偏移值，模糊的半径，阴影的颜色）
列表类属性
1、定义列表符号样式：
list-style-type：disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)；
2、使用图片作为列表符号：
list-style-image：url(所使用图片的路径及全称)；
3、定义列表符号的位置：
list-style-position:outside(外边)/inside(里边)；
list-style:none;去掉列表样式；
综合设置： border:3px red solid;
边框： border:粗细（数值+单位） 颜色 线型（solid/dashed/dotted/double） ;
右边框：border-right:粗细（数值+单位） 颜色 线型（solid/dashed/dotted/double）;
左边框：border-left:粗细（数值+单位） 颜色 线型（solid/dashed/dotted/double）;
上边框：border-top:粗细（数值+单位） 颜色 线型（solid/dashed/dotted/double）;
下边框：border-bottom:粗细（数值+单位） 颜色 线型（solid/dashed/dotted/double）;
solid:实线，dashed:虚线，dotted:点状线，double:双线
边框宽度：border-width:
边框颜色：border-color:
边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)/double(双线)
Css3新增：
border-image：可以在一个元素的四个边及四个拐角显示图片
border-radius：圆角边框（第七章）
背景属性
1、背景颜色
语法：选择符{background-color:颜色值;}
简写：background:color值;
2、背景图片的设置
语法：background-image：url(背景图片的路径及全称)；
说明：
网页上有两种图片形式：插入图片、背景图；
插入图片：属于网页内容，也就是结构。
背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等。
3、背景图片的显示原则
1）容器尺寸等于图片尺寸，背景图片正好显示在容器中;
2）容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；
3）容器尺寸小于图片尺寸，只显示元素范围以内的背景图
4、背景图片平铺属性
语法：选择符 {background-repeat:no-repeat/repeat/repeat-x/repeat-y }
no-repeat:不平铺
repeat：平铺
repeat-x：横向平铺
repeat-y ：纵向平铺
5、背景图片的位置
语法：background-position:值1 值2;
选择符{background-position:left/center/right/数值 top/center/bottom/数值;}
水平方向上的对齐方式（left/center/right）或值
垂直方向上的对齐方式(top/center/bottom)或值
说明：
两个值 ：第一个值表示水平位置的值，
第二个值表示垂直的位置。
当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置。
向左方向，向上方向都是负值
6、背景属性的缩写语法：
background:属性值1 属性值2 属性值3；背景缩写：
background:#背景色 url（背景图片的路径及全称） no-repeat center top；7、背景图的固定
语法：选择符{background-attachment:scroll(滚动)/fixed(固定);}
说明：
fixed 固定，不随内容一块滚动；
scroll 随内容一块滚动。
8、background-size: 数值/百分比/auto/cover/contain
说明：
数值：设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 “auto”。
百分比：以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 “auto”。
Cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
Contain：把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
9、网页上常用的图片格式（压缩图片）
1）jpg:有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )
2）gif：有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像;
3）png:有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的 源文件格式，适用于颜色数量较少的图像;
浮动元素
float:定义网页中其它文本如何环绕该元素，
有三个属性值：
left:元素活动浮动在文本左面
right:元素浮动在右面
none:默认值，不浮动。
Clear：规定元素的哪一侧不允许其他浮动元素。
属性值
none：默认值。允许浮动元素出现在两侧。
both：在左右两侧均不允许浮动元素。
left：在左侧不允许浮动元素。
right:在右侧不允许浮动元素。
解决高度塌陷
方法一：给父元素添加声明overflow:hidden;
方法二：在浮动元素下方添加空div,并给该元素添加声明：
{clear:both;height:0;overflow:hidden(或font-size:0;)}