(五).CSS 长度和颜色设置，CSS 基本选择器，盒子模型（显示模式），常用CSS属性：字体样式，文字颜色，文本样式

1 CSS 长度和颜色设置

1.1 CSS 中的长度单位

px 像素
em 字体大小倍数 
%  百分比：设置宽高参照父元素宽高，设置字体大小参照默认字体大小

字体默认大小 16px

1.2 CSS 中的颜色设置方式

① 使用颜色名表示颜色

red、green、blue...

② rgb 方式表示颜色

    /* 
        rgb: 计算机三原色
        red     红色    0～255
        green   绿色    0～255
        blue    蓝色    0～255
    */

    .item02 {
        background-color: rgb(50, 255, 100);
        /* 
            三个颜色数值相同时，是灰色
        */
        background-color: rgb(100, 100, 100);
        background-color: rgb(200, 200, 200);
        background-color: rgb(255, 255, 255); /*白色*/
        background-color: rgb(0,0,0)/*黑色*/

        /* 使用百分比 表示各种颜色的占比*/
        background-color: rgb(10%,40%,10%);
    }

③ hex 十六进制方式表示颜色

    /* 
        十进制：
        0 1 2 3 4 5 6 7 8 9 10 11 12 ... 19 20 21 ...

        二进制：
        0 1 10 11 100 101 110 111 1000 ...

        十六进制：
        0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12 ... 1a 1b ... 1f 20 21 ...

        ff(十六进制) = 255(十进制)

        十六进制表示颜色的原理与rgb方式一致
        使用6个十六进制数字表示颜色，每两个表示一种颜色
    */

    .item03 {
        background-color: #ccff22;
        background-color: #cc00ff;
        background-color: #af2;

        /* 十六进制简写 */
        /* 表示一种原色的两个数字是相同，可以简写：必须三组原色各自相同 */
        /*#22ff22*/
        background-color: #2f2;
        /* 不可简写 */
        background-color: #ccab66;
        /* #999999 */
        background-color: #999;
    }

2 CSS 基本选择器

2.1 四种基本选择器

① 标签名选择器

标签名 {}

② 类名选择器

<div class="box"></div>
<p class="box item"></p>

.类名 {}

1. 多个元素可以设置相同的类名
2. 一个元素可以设置多个类名

③ ID 选择器

<div id="box"></div>

#ID名 {}

元素的ID名必须是唯一的！

④ 全局（通配）选择器

* {}

可以选择页面中所有的元素

2.2 基本选择器之间的优先级

1. ID选择器 > 类名选择器 > 标签名选择器 > 全局选择器
2. 如果选择器优先级相同，后面的覆盖前面的
3. 行内式设置的样式大于任何选择器设置的样式

3 盒子模型（显示模式）

3.1 元素的显示模式

① 块级元素 block

一个元素的显示模式如果是块级（block），该元素称为块级元素。块级元素具有如下特点：

1. 块级元素独占（所在父元素）一行
2. 块级元素可以设置宽度和高度

② 行内元素 inline

一个元素的显示模式如果是行内（inline），该元素称为行内元素。行内元素具有如下特点：

1. 行内元素不会独占一行
2. 行内元素无法设置宽度和高度

③ 行内块元素 inline-block

一个元素的显示模式如果是行内块（inline-block），该元素称为行内块元素。行内块元素具有如下特点：

1. 行内块元素不会独占一行
2. 行内块元素可以设置宽度和高度

3.2 HTML 元素的默认显示模式

① 默认显示模式是 block 的元素：

格式排版标签： h1 ~ h6、p、hr、br、pre、div
列表标签： ul、ol、li、dl、dt、dd
表格标签： table、caption、thead、tbody、tfoot、tr
表单标签： form、option

② 默认显示模式是 inline 的元素：

文本标签： em、strong、sub、sup、del、ins、span
超链接标签： a
表单标签： label

③ 默认显示模式是 inline-block 的元素：

图片标签： img
表格标签： td、th
表单标签： input、button、select、textarea
框架标签： iframe

3.3 修改元素的显示模式

给元素设置 CSS 属性 display ，就可以修改元素的显示模式，该属性的值如下：

block			设置为块级
inline			设置为行内
inline-block.       设置为行内块
none			设置为隐藏

3.4 总结

1. 如果显示模式分为三种： 行内、块级、行内块
2. 如果显示模式分为两种： 行内、块级； 行内块是行内的一种。 
3. 块级元素中可以包裹块级、行内、行内块
   行内元素中只能包裹行内元素、文字

4 常用 CSS 属性总结

4.1 字体样式

属性名	作用	属性值
font-size	设置文字大小	长度
font-weight	设置文字粗细	normal：正常 lighter：细 bold：粗 细：100-300，正常：400-500，粗：600-900
font-style	设置斜体字	normal：正常 italic：斜体字
font-family	设置字体族科
font	复合属性

注意：浏览器规定文字大小最小为 12px!

① 字体族科 font-family

字体族科的设置：

font-family: "microsoft yahei";

设置字体列表：

font-family:"microsoft yahei","仿宋","sans-serif";

衬线字体和非衬线字体：

serif 衬线字体：字体的笔画粗细不一致，如宋体、楷体等
sans-serif 非衬线字体：字体笔画粗细一致，如微软雅黑，黑体

② 复合属性 font

	/* 至少需要设置字体大小和字体族科 */
	font: 14px "courier new","宋体",serif;
	
	/* 同时设置粗体字、文字大小、字体族科 */
	font: 800 18px "courier new","宋体",serif;
	
	/* 同时设置斜体字、文字大小、字体族科 */
	font: italic 18px "courier new","宋体",serif;
	
	/* 同时设置粗体字、斜体字、文字大小、字体族科 */
	font: 800 italic 18px "courier new","宋体",serif;
	font: italic 800 18px "courier new","宋体",serif;
    
	/* 同时设置粗体字、斜体字、文字大小/行高、字体族科 */
	font: bold italic 18px/30px "courier new", "sans-serif";

③ 子属性和复合属性的关系

1. 复合属性写在子属性后面，会覆盖掉子属性；即使复合属性中没有写对应属性的值也会使用默认值覆盖
2. 子属性写在复合属性后面，会覆盖掉复合属性中的对应属性值

4.2 文字颜色

属性名	作用	属性值
color	设置文字的颜色	颜色

4.3 文本样式

属性名	作用	属性值
letter-spacing	设置字间距	长度（不能使用百分比）
word-spacing	设置词间距	长度（不能使用百分比）
text-indent	设置首行缩进	长度（推荐2em）
text-decoration	设置文本的修饰线	none：无修饰线 underline：下划线 overline：上滑线 line-through：删除线
text-align	设置元素中文本水平对齐方式	left：靠左对齐 right：靠右对齐 center：居中对齐
vertical-align	设置行内或行内块元素和同行文本如何对齐	baseline：基线对齐，默认值 bottom：底线对齐 top：顶线对齐 middle：中线对齐 sub：下标字效果 super：上标字效果 长度：与文字基线的距离，可以为负值
line-height	设置行高	长度

① vertical-align

该属性有如下作用：

1. 设置行内或行内块元素和同行文本如何对齐，注意：需要直接将样式设置到行内或者行内块元素上
2. 实现上标字，下标字
3. (特殊性)设置单元格（td、th）中文本的垂直对齐方式

② line-height 设置行高

行高的概念:

1. 什么是行高？
	上一行的中线与下一行中线的距离
	我理解等价于文字大小+一个行距
2. 什么是行距？
	上一行的底线与下一行顶线的距离
	
3. 行高与行距的关系？
	设置行高能够影响行距

使用行高实现元素中的一行文字垂直居中，满足以下条件：

1. 只有一行文字
2. 本元素的行高与父元素高度一致

line-height是font的子属性：

	/**
	 * 40px 表示文字大小
	 * 200px 表示行高
	 */
	font: 1em/200px "courier new";