css属性

1、css属性
1）每个css样式都必须由两部分组成：选择符（Selector）和声明（Decleration）
注：声明又包括属性（Properyt）和属性值（Value）
2）css属性：属性是指定选择符具有的属性，他是css的核心，css2共有150多个属性；
3）css属性值 ：属性值包括法定属性值和常规的数值加单位或颜色值(colorValue)；如（25px）。

2、关于文本的css声明补充

1. 文字大小：{font-size:value;}
   说明：
   a、属性值为数值型时，必须给属性值加单位 (px)，属性值为0时除外；
   b、单位还可以是pt; 9pt=12px;
   c、为了减小系统的字体显示差异，IE、Netscape Mozilla的浏览器制作商于1999年召开会议，共同确定16px/ppi为标准字体大小，默认值即1em,默认情况下，1em=16px, 0.75em=12px;
   d、使用绝对大小关键字
   xx-small =9px
   x-small =11px
   small =13px
   medium =16px
   large =19px
   x-large =23px
   xx-large =27px

2. 文本颜色：{color：#colorValue;}
   十进制：0,1,2,3,4,5,6,7，8，9
   二进制：0,1
   八进制：0,1,2,3,4,5,6,7
   十六进制：0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f
   R G B
   00 00 00
   Fa FF FF #faffff
   CC CC CC
   F0 F0 F0
   0F 0F 0F #0f0f0f
   ff 00 00
   ff ff 00 #ff0
   说明：用十六进制表示颜色值时前面要加#号；
   每表示三原色的三组数字同时相同时，可以缩写为3位。

3. 文本字体：{font-family:字体；}
   Windows中文版本操作系统下，中文默认字体为宋体或者新宋体，英文字体默认为Arial.
   说明：
   当字体是中文字体时，需加双引号；
   当英文字体中有空格时，需加双引号如（“Times New Roman”）
   当英文字体只有一个单词组成是不加双引号；如：（Arial）；
   设置多个字体的语法：{font-family:字体1，字体2，字体3；}
   注：当同时设置中英文字体的时候，中文字体要写在英文字体之后；
   说明：浏览器首先会寻找字体1、如存在就使用改字体来显示内容，如在字体1不存在的情况下，则会寻找字体2，如字体2也不存在，按字体3显示内容，如果字体3 也不存在；则按系统默认字体显示；

4. 加粗：{font-weight:bolder(更粗的)/bold（加粗）/normal（常规）/100—900;}
   说明：在css规范中，把字体的粗细分为9个等级，分别为100——900，其中100对应最轻的字体变形，而900对应最重的字体变形，
   一般400=normal，700=bold。
   100-500 常规显示
   600-900 加粗显示

5. 倾斜：font-style：italic(倾斜度小)/oblique（倾斜度大）/normal（取消倾斜，常规显示）;

6. 设置小型的大写字母 {font-variant:normal/ small-caps ;}
   取值为：normal(正常的字体)
   small-caps(小型的大写字母字体)
   说明： 对小写英文内容起作用。

7. 首行缩进：{text-indent：Value;}
   说明：
   （1）text-indent可以取负值；
   （2）text-indent属性只对第一行起作用。

8. 水平对齐方式{text-align:left / right / center / justify;}
   左对齐 右对齐 居中对齐 两端对齐

9. 垂直对齐方式{vertical-align:top/bottom/middle/baseline;}
   上 下 居中 基线

10. 行高{line-height：normal/value;}
    说明：
    （1）当单行文本行高等于容器高时，可实现单行文本在容器中垂直中齐效果；
    （2）当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上任意位置定位;
    （3）当单行文本的行高大于容器高时，可实现单行文本在容器中垂直以下任意位置定位。
    倍行高：{line-height:2;} 2倍 ，{line-height:1.5em;}1.5倍；注：当使用倍行高时，单位不加PX

11. 复合式写法：{font：style variant weight size/ line-height family；}
    倾斜 小型大写字母 加粗 字号 / 行高 字体
    说明：按以上顺序;size 、line-height和family固定不可和其他属性位置互换；
    注：当字号大小，字体和行高缩写时，字号和行高要用斜杠合并成一个属性值，且同时有字号大小和字体时，才能缩写。

12. 控制英文大小写 {text-transform:none(默认值)/capitalize(每个单词首字母大写)/uppercase (都为大写字母) /lowercase ( 都为小写字母 ) }

13. 文本修饰：
    {text-decoration:none:没有修饰(取消修饰)/underline:添加下划线/overline:添加上划线/line-through:添加删除线/blink：闪烁}
    说明：
    blink：闪烁(高版本浏览器不支持blink属性);}
    underline overline line-through这三个属性值是可以同时存在的,用空格分隔；

14. 字间距{letter-spacing：Value;}控制字间距；

15. 词间距{word-spacing:Value;}控制英文单词词间距

16. 文本流控制{layout-flow:horizontal/vertical-ideographic;}（只支持IE浏览器）
    说明：
    （1）horizontal 自左向右；
    （2）vertical-ideographic;自上而下；

3、关于列表的css声明

1. 定义列表符号样式：
   list-style-type：disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)；

2. 使用图片作为列表符号：
   list-style-image：url(所使用图片的路径及全称)；

3. 定义列表符号的位置：
   list-style-position:outside(外边)/inside(里边)；

关于列表的属性语法（缩写）list-style：属性值1 属性值2 属性值3；

例：{list-style:url(images/aa.jpg) inside;}
list-style:none; 取消列表符号

4、关于背景的css声明

1. 背景颜色
   background-color:#colorValue;

2. 背景图片的设置
   语法：background-image：url(背景图片的路径及全称)；
   说明：
   （1）网页上有两种图片形式：插入图片、背景图；插入图片为网页内容，背景图为网页的表现;默认情况下，背景图上面可以显示其他内容和图片，而插入图片上面是不能显示
   其他内容和图片的。
   （2）背景图片的显示方式
   a、背景图片大小小于元素大小，默认平铺；
   b、背景图片大小等于元素大小，完全显示；
   c、背景图片大小大于元素大小，只显示元素范围大小的背景图；

3. 背景图平铺设置
   语法：background-repeat：no-repeat（不平铺）/repeat(平铺)/repeat-x（横向平铺）/repeat-y（纵向平铺）;

4. 背景图片的位置
   语法：background-position:left/right/center(水平方向上的对齐方式) top/center/bottom(垂直方向上的对齐方式) 或数值
   背景属性的缩写语法：background:属性值1 属性值2 属性值3；
   例：background:url(背景图片的路径及全称) no-repeat center top；

5. 背景图的固定
   语法：background-attachment：scroll(滚动)/fixed(固定)；

6. 网页上常用的图片格式（压缩图片）
   （1）jpg：有损压缩格式，靠损失图片本身的质量来减小图片体积，适用于颜色丰富的图像；
   （2）gif:有损压缩格式，靠损失图片的色彩来减小图片体积，支持透明，支持动画，适用于颜色数量少的图像；
   （3）png:有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，是fireworks的源文件格式，适用于颜色数值少的图像（一般用于透明图）

5、浮动属性

1. 首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流
   
   无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。

显然标准流已经无法满足需求，这就要用到浮动。

浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。
页面浮动多个DIV的规律：

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也

就是说A的顶部总是和上一个元素的底部对齐。

div的顺序是HTML代码中div的顺序决定的。

靠近页面边缘的一端是前，远离页面边缘的一端是后。

经过上边的学习，可以看出：元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列

2. 语法：float:none/left/right;
   有三个取值：
   left:元素左浮动
   right:元素右浮动
   none:默认值，不浮动。

浮动的目的：就是让竖着的元素进行横向排列，也就是能让元素和元素并排显示

浮动的显示规则：浮动对象会像左或者右移动直到遇到边框（border）、填充值（padding）、外边界（margin）或者另一个块元素为止。

float:定义网页中其它文本如何环绕该元素显示

3. 清除浮动语法：
   clear : none | left | right | both
   none：默认值。允许两边都可以有浮动对象
   left：不允许左边有浮动对象
   right : 不允许右边有浮动对象
   both : 不允许有浮动对象

有一点是要记住的那就是
对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素
清除浮动可以理解为打破横向排列。

有三种情况float:不生效
1）当宽+宽大于父级元素的宽时；
2）只给一个元素加了float时；
3）单词写错