003-CSS核心属性

摘要：文本大小说明属性值为数值型时，必须给属性值加单位，属性值为时除外。字间距控制英文字母或汉字的字距。列表元素可继承。

文本大小 {font-size:12px/14px/16px}

说明：
1）属性值为数值型时，必须给属性值加单位，属性值为0时除外。
2）单位还可以是pt，9pt=12px;
3）为了减小系统间的字体显示差异，IE Netscape Mozilla的浏览器制作商于1999年召开会议，共同确定16px/ppi为标准字体大小默认值,即1em.默认情况下，1em=16px,0.75em=12px; 1rem 相对于根元素的倍数
4)使用绝对大小关键字

</>复制代码 
   xx-small   =9px
   x-small    =11px
   small      =13px
   medium     =16px
   large      =19px
   x-large    =23px
   xx-large   =27px

文字颜色{color: white}
说用十六进制表示颜色值：

</>复制代码 
   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

颜色值的缩写：

</>复制代码 
   当表示三原色的三组数字同时相同时，可以缩写为三位;
   当用十六进制表示颜色值时，需要在颜色值前加“#”

文本字体{font-family: "字体1", "字体2"}

</>复制代码 
   说明：
       *当字体是中文字体时需加引号；
       *当英文字体中有空格时需加引号如“Times New Roman”；
       Windows中文版本操作系统下，中文默认字体为宋体或者新宋体，英文字体默认为Arial.
 
 
   加粗 {font-weight: bold/normal/100-900}     
   倾斜 {font-style: italic/oblique}
       1）在css规范中把字体的粗细分为9个等级，分别从100-900，
       其中100对应最轻的字体变形，而900对应最重的字体变形。
       100-500常规字体600-900加粗字体

对齐方式

水平/垂直:

</>复制代码 
   {text-align:left/right/center/justify（justify个别浏览器不兼容，)
   {vertical-align:top/bottom/middle/baseline;}(只有inline-block（能设置大小，默认排在一行）元素类型支持)

行高

</>复制代码 
   说明：
       1）当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐；
       2) 当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上任意位置.
       3) 当单行文本的行高大于容器高时，可实现单行文本在容器中垂直中齐以下任意位置.（IE6及以下版本存在浏览器兼容问题）

文本修饰

</>复制代码 
 text-decoration:
     说明：none:没有修饰
     underline:添加下划线
     overline:添加上划线
     line-through:添加删除线
     blink：闪烁（不兼容）

首行缩进

{text-indent}说明：

</>复制代码 
   1）text-indent可以取负值；
   2）text-indent属性只对第一行起作用。

字间距{letter-spacing:value;}

</>复制代码 
   控制英文字母或汉字的字距。

词间距{word-spacing:value;}

</>复制代码 
   控制英文单词词距。

文字方向文本流控制{layout-flow:horizontal/vertical-ideographic;}说明：

</>复制代码 
 1）horizontal:自左向右
 2）vertical-ideographic:自上而下

文字属性 {font: bold italic 16px/1.5 Arial}

</>复制代码 
font属性的简写：字号，行高，
字体说明:font的属性值应按以下次序书写(各个属性之间用空格隔开)
顺序: font-style     font-weight     font-size / line-height      font-family

列表样式定义列表符号样式：

</>复制代码 
 1)list-style-type:disc(实心圆)/circle（空心圆）/square(实心方块 )none(去掉列表符号)；
 2)使用图片作为列表符号：list-style-image:url(所使用图片的路径及全称);
 3)定义列表符号位置：list-style-position:outside/inside;list-style:none;简写

边框属性border:3px solid red;

</>复制代码 
   边框border:线型（solid/dashed/dotted/double/none） 粗细（数值+单位） 颜色;    
   线型：solid:实线，dashed:虚线，dotted:点状线，double:双线，none:没有边框;    
    border-width:边框的粗细;    
    border-style:边框的线形;     
    border-color:边框的颜色;  
    border-top：上边框    
    border-bottom:下边框    
    border-left:左边框    
    border-right:右边框

背景属性）

</>复制代码 
 1）背景颜色语法：选择符{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:left/center/right/数值 top/center/bottom/数值;}
     background-position:值1    值2;
     水平方向上的对齐方式（left/center/right）或值    
     垂直方向上的对齐方式(top/center/bottom)或值两个值 ：第一个值表示水平位置的值，第二个值：表示垂直的位置。当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置都在中间。 
     
 注：当元素小图片大，写图片的某个位置时：说明：向右方向，向下方向是负值

CSS继承概念：

所谓继承，就是父元素的规则也会适用于子元素。继承得来的规则没有特殊性。比如给body设置为color:Red;那么他内部的元素如果没有其他的规则设置，也都会变成红色。

</>复制代码 
  
  内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font-family、font-size、font-style、font-weight、text-decoration、text-transform.块状元素可继承：text-indent和text-align。
  列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
  表格元素可继承：border-collapse。