CSS属性及元素分类

CSS字体样式属性（字体属性）

font-size：字号大小

        font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少，具体如下：

相对长度单位	说明
px	像素单位以像素点个数为基础最常用的单位
em	相对于当前对象内文本的字体尺寸

font-family:字体

        font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：

p {font-family : “微软雅黑”；}

        可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
PS:
1.现在网页中普遍使用14px+。
2.尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。

3.各种字体之间须使用英文状态下的逗号隔开。
4.中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
5.如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family：“TimesNew Roman";。
6.尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

CSS Unicode字体

        在CSS中设置字体名称，直接写中文是可以的，但是在文件编码(GB2312、UTF-8等）不匹配时会产生乱码的错误，xp系统不支持类似微软雅黑的中文。
        方案一：你可以使用英文来替代，比如font-family：Microsoft Yahei"，
        方案二：在CSS直接使用Unicode编码来写字体名称可以避免这些错误，使用Unicode写中文字体名称，浏览器是可以正确的解析的。
        font-family :" \5FAE\8F6F\96C5\9ED1"， 表示设置字体为“微软雅黑”，
        body{ font-family : "\5B8B\4F53" , "Arial"}
  可以通过escape()来测试属于什么字体。

字体名称	英文名称	Unicode 编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B64E66
幼园	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

  为了照顾不同电脑的字体安装问题，尽量只使用宋体和微软雅黑中文字体

font-weight：字体粗细

        字体加相除了用b和strong标签之外，可以使用CSS来实现，但是CSS是没有语义的。
        font-welght属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900(100的整数倍）
PS:
  数字400等价于normal，而700等价于bold，但是我们更喜欢用数字来表示

font-style:字体风格

        字体倾斜除了用！和em标签之外，可以使用CSS来实现，但是CSS是没有语义的。
font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
  normal：默认值，浏览器会显示标准的字体样式，
  ltalic：浏览器会显示斜体的字体样式。
  oblique: 浏览服会显示倾斜的字体样式。

font：综合设置字体样式（重点）

        font属性用于对字体样式进行综合设置，其基本语法格式如下：

选择器 { font：font-style font-weight font-size/line-height font-family；}

  使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开

注意：其中不需要设置的属性可以省略(取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

CSS外观属性（文本属性）

color：文本颜色

color属性用于定义文本的颜色，其取值方式有如下3种
1、预定义的颜色值，如red、gieen、blue等。
2.十六进制，如#FF0000、#FF8600、#290794等。实际工作中，十六进制是最常用的定义颜色的方式。
3.RGB代码，如红色可以表示为  rgb（255.,0,0) 或 rgb(100%,0%,0%)。
需要注意的是：如果使用RGB代码的百分比颜色值，取值为的也不能省路百分号，必须写为0。、

line-height：行间距

        line-height属性用于设置行间距，就是行与行之间的距离，那字符的垂直间距，一般称为行高，line-heiht常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px
一般情况下，行距比字号大7 8像素左右就可以了。

text-align：水平对齐方式

        text-align属性用于设量文本内容的水平对齐、相当于html中的aliga对齐属性、其可用属性值如下：
    left：左对齐（默认值）
    right：右对齐
    center：居中对齐

text-indent：首行缩进

        text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值，建议使用em作为设置单位。
        1em就是一个字的宽度如果是汉字的段落，1em就是一个汉字的宽度

text-decoration 文本的装饰

text-decoration 通常我们用于给链接修改装饰效果

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线，下划线也是我们链接自带的
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。

元素分类

块级元素（block-level）

        每个块元素通常都会独前占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。        

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<o1>、<li>等，其中<div>标签是最典型的块元素。

        DIV是最常用的块元素规现距距、方方正正、很好营理，被人们称为”可靠的同志”但是体格庞大独占一行块级元素的特点：
（1）总是从新行开始
（2）高度、行高、外边距以及内边都可以控制。
（3）宽度默认屋容器的100%
（4）可以容纳内联元素和其他块元素

行内元素（inline-level）

        行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一股不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

常见的行内元素<a>，<strong>，<b>、<em>，<>，<del>、<s>、<ins>，<u>、<spa>等，其中<span>标签是典型的行内元素

行内元素是通用集体出没，能够排成行伍因练有素、整齐划一。

行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高，宽无效，但水平方向的paddingi和miargin可以设置，重直方向的无效。
（3）默认宽度就是它本身内容的度。（4)行内元素只能容纳文本或则其他行内元素。

行内块元素（inline-block）

行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。
注童：在行内元素中有几个特殊的标签 -- <img/>、<input/>、<td>这些标签虽然可以设置宽度高度
但是在现代浏览器内特性默认展示模式为行内（inline）元素

标签显示模式转换 display

块转行内：display: inline;
行内转块：display: block；
块、行内元素转换为行内块：display：inline-block;