1.2 选择器和文本属性

选择器和文本属性

一、选择器

1、后代选择器

选择器 选择器{}

div .a{color: #008000;}

特点：

• 选择器格式不限制，选择器的格式不限制。
• 用空格隔开的选择器之间必须是后代关系。
• 选择器之间是可以跨代的。

2、群组选择器

选择器，选择器{}

p,div,span{color: #0000FF;}

特点：

• 选择器种类不限制，选择器之间用，隔开，最后一个后面不要加。
• 选择器的格式不限制。
• 如果标签里的样式都相同的时候，可以用群组选择器。

3、选择器的权重

（1）选择器的权重

• !important 最高

• 行内样式表：1000

• id选择器：100

• class选择器、伪类选择器、属性值选择器：10

• 标签选择器：1

• 通用选择器：0

• 继承最低 小于0

（2）层叠

当用不同的选择器选择同一个元素，设置了相同的css属性，但是设置了不同的css属性值，样式就是产生冲突，需要根据选择器的权重值看优先显示哪个里面的样式。如果样式没有冲突，不需要看权重值，是可以正常显示。

（3）权重的特点

• 后代选择器权重值：是由每个选择器的权重值相加
• 权重值相同的时候，就近（和结构近）的原则
• 群组选择器的权重只看自己本身，不管别人。

4、堆色块

（1）通栏：不论浏览器放大或者缩小，这部分区域永远和浏览器一样宽。

（2）版心：不论浏览器是放大还是缩小，这部分区域永远处于浏览器的中心。

• 通栏：设置宽度为100%
• 版心：设置正常的宽高，margin:auto居中

二、文本属性

1、字体大小：font-size:数字px;一般设置值为偶数。

2、字体加粗：font-weight:

• bold 加粗（100-900）

    			--------100-300偏细，400-500正常，600-900加粗
  

• normal正常，去掉加粗效果

3、字体倾斜：font-style

• italic 倾斜

• normal 正常，去掉倾斜效果

4、文本首行缩进：text-indent:数字px;-----可以设置负数，缩进几个字就设置字体倍数大小就行。

5、行高：line-height：数字/数字px; ------数字是字体大小的倍数。

• 多行文本：设置行高增大行和行之间的距离。
• 单行文本：设置行高和高度一样的值，可以实现文字垂直居中。

6、文本水平位置：text-align

• lrft 靠左 默认值
• center 居中
• right 靠右
• justify 两端对齐 对英文作用比较明显