【5】CSS长度单位、颜色设置、选择器、常用属性

1 基本长度单位

1.1 px 像素

最常用的 CSS 长度单位

width: 900px;
height: 80px;
font-size: 32px;/* 默认字体大小为16px */

1.2 em 元素字体大小的倍数

如果元素设置过 font-size，就按照font-size来设置；如果元素没有设置过 font-size，按照默认字体大小来设置。

width: 10em;/* 如果该元素设置过 font-size，则元素宽度为font-size的10倍，否则为默认字体大小的10倍即160px */
height: 4em;/* 如果该元素设置过 font-size，则元素高度为font-size的4倍，否则为默认字体大小的4倍即64px */
font-size: 2em;/* 默认字体大小为16px，该设置使字体大小为默认大小的2倍，即32px */

1.3 % 百分比

使用百分比设置宽参照父元素宽；

使用百分比设置高参照父元素高；

使用百分比设置字体大小参照默认字体大小（默认字体大小的顺序：父元素字体大小、祖先元素字体大小、都未设置则按16px）。

width:150%;/* 父元素宽度的150% */
height:20%;/* 父元素高度的20% */
font-size: 200%;/* 如果父元素设置了字体大小，则为父元素字体大小的200%；如果父元素没设置，祖先元素设置了，则为祖先元素字体大小的200%；如果没有任何地方设置过字体大小，则为16px的的200%，即32px */

2 颜色设置方式

2.1 颜色名方式

使用颜色的英文名表示颜色

background-color:yellow;

2.2 rgb 方式

使用0_{255的数字或0%}100%的百分比设置该颜色中红、绿、蓝的比例，以表示颜色

r  red    红色 取值范围：0~255 或者 0%~100%
g  green  绿色 取值范围：0~255 或者 0%~100%
b  blue   蓝色 取值范围：0~255 或者 0%~100%

background-color:rgb(255,0,0);/* 红 */
background-color:rgb(0,255,0);/* 绿 */
background-color:rgb(0,0,255);/* 蓝 */
background-color:rgb(0,0,0);/* 黑 */
background-color:rgb(100,100,100);/* 灰，3个数相同为灰色，数字越大灰色越浅，数字越小灰色越深 */
background-color:rgb(255,255,255);/* 白 */
/* 使用百分比表示 */
background-color:rgb(100%,80%,40%);

2.3 十六进制方式

原理同 rgb 方式，但用十六进制数来代替rgb中的数字。两个十六进制的数字表示一个颜色，共需6个十六进制的数字。每组的取值范围是 00 ~ ff。

#rrggbb;
#rgb;/* 简写，如果每组中表示颜色的两个数字是一样，则可以简写为3个十六进制数字来表示 */

background-color:#ff0000;/* 红 */
background-color:#00ff00;/* 绿 */
background-color:#0000ff;/* 蓝 */

/* 16进制表示颜色的简写 */
background-color: #f90;/* #ff9900 */
background-color: #ff19a0;/* 无法简写 */
background-color: #ccc;/* #cccccc */

2 选择器

2.1 四种基本选择器

• 优先级：style 行内式 > ID选择器 > 类名选择器 > 标签名选择器 > 全局选择器
• 若优先级一致，则后面的覆盖前面的。

① 标签名（元素名）选择器

标签名 {
    
}

② 类名选择器

• 不同的元素可以设置相同类名，以达到给不同元素设置相同样式的效果
• 一个元素可以有多个类名

.类名 {
    
}

③ ID选择器

每个元素的 id 应是唯一的。

#ID名 {
    
}

④ 全局选择器

可选中所有的元素，包括 html 、body。

* {
    
}

3 盒子模型

3.1 盒子模型的显示模式

① 块级（block）元素

显示模式为块级的元素称之为块级元素， 特点如下：

1. 块级元素独占一行。
2. 块级元素可以设置宽高。

② 行内 （inline）元素

显示模式为行内的元素称之为行内元素， 特点如下：

1. 行内元素不独占一行。
2. 行内元素无法设置宽高，不能用于页面布局。

③ 行内块（inline-block）元素

显示模式为行内块的元素称之为行内块级元素， 特点如下：

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

3.2 HTML 元素的默认显示模式

① 块级元素

格式排版标签、列表标签、表格标签（除th和td）、form 标签、option

h1~h6、p、hr、br、pre、div、ul、ol、li、dl、dt、dd、table、caption、thead、tbody、tfoot、tr、form、option

② 行内元素

文本标签、a 标签、span 标签、label 标签

em、strong、del、ins、sup、sub、a、span、label

③ 行内块元素

图片标签、th和td、表单标签（除form和option）、iframe 标签

img、th、td、input、button、textarea、select、iframe

3.3 修改元素的显示模式

CSS属性display ：设置元素的显示模式，值为：

block           设置为块级显示模式
inline          设置为行内显示模式
inline-block     设置为行内块显示模式
none            隐藏元素，不显示（可用于子菜单的显示）

4 常用 CSS 属性

4.1 字体属性

• 字体族科 font-family：

  /* 设置单个字体族科 font-family */
  font-family:"宋体";
  
  /* 设置字体列表 font-family */
  /* 可设置一个或多个字体族科，如果客户电脑上没有前面的字体，可使用后面指定的字体，各个字体族科用逗号隔开  */
  font-family:"宋体", arial, 微软雅黑, "Microsoft YaHei";
  

  注意：

  字体能否显示取决于打开该网页的电脑是否安装该字体；

  字体可以分为衬线字体和非衬线字体两大类：

  衬线字体： serif ，笔画粗细不一致，如：宋体、楷体、仿宋 等

  非衬线字体： sans-serif，笔画粗细一致，如：微软雅黑、黑体、思源黑体、兰亭黑体等

• 复合属性 font：

  font 是 font-family、font-size、font-weight、font-style 的复合属性，line-height 也是 font 的子属性；

  可设多个值，每个值之间用空格隔开。至少有字体大小和字体族科两个值，且始终写在最后，其他值写在前面，无顺序要求。

  /* font 复合属性至少要设置两个：字体大小和字体族科 */
  font:20px "宋体","黑体",serif;
  /* 设置字体粗细、字体大小、字体族科 */
  font:700 20px "宋体","黑体",serif;
  /* 设置字体风格、字体大小、字体族科 */
  font:italic 10px "宋体","黑体",serif;
  /* 设置字体粗细、字体风格、字体大小、字体族科 */
  font:700 italic 10px "宋体","黑体",serif;
  /* 设置字体风格、字体粗细、字体大小、字体族科 */
  font:italic 700 10px "宋体","黑体",serif;
  

4.2 文字颜色

4.3 文本属性

• vertical-align

  使用场景：

  1. 用于给行内元素或者行内块元素设置与同行文本的对齐方式（该属性一定要设置到行内或行内块元素）
  2. 设置表格单元格中内容垂直对齐方式。

• line-height

  1、行高：本行文本与上一行文本的中线（顶线/基线/底线）之间的距离。

    行距：上一行文本底线与本行文本顶线之间的距离。
  
    设置行高会对行距产生影响。
  

  2、设置文本在元素中垂直居中：设置元素的行高=元素高度值（适用于只有一行文本内容的情况）。

  3、子属性和复合属性会相互覆盖，复合属性写后面会覆盖前面的子属性，子属性写后面会覆盖前面的复合属性中对应的部分。

  4、line-height 是 font 的子属性，写在字体大小的后面：

  /*  line-height 可以复合 font 属性中  */
  /* font 复合属性写在后面会覆盖前面单独设置的 line-height */
   font: 20px/100px "翩翩体-简";