CSS（4）排版初步

2.文本设置

(1).text-decoration

decoration:修饰

作用：用来设置文本的修饰线，有如下几种：

underline

overline

line-through

none

经典用法：

对超链接的样式化，大部分网页的a标签，默认去掉下划线，在hover的时候添加下划线

在很多的电商网站，通常有两种价格，对于市场价，使用line-through来修饰，如图：

(2).text-indent

Indent是缩进

作用：用来缩进文本的。

使用如下：

注意：

在实现段落缩进的时候，我们用到的em这个单位，em表示字体的高度，对于中文而言，文字是正方形的，

所以宽度和高度是相等的。

关于text-indent还有一个技巧，放在实战中来说明。

(3).text-align

align：对齐

作用：设置文本对齐的水平方式，通常有如下几种对齐方式：

left，是默认值

center

right

Justify，表示两端对齐，但是只对英文有效。

和word段落的对齐方式进行对比就可以了。

注意点：

justify只对英文起作用，中文无效

justify是两端对齐，不是分散对齐，一定要和word进行对比来理解。

(4).line-height

作用：设置行高的。

使用如下：

注意：

line-height有两种设置方式，以px的形式，以倍数的方式，比如1.5，此时表示的是font-size的1.5倍。

通常情况下，我们可以使用line-height来实现垂直居中。如图：

3.关于CSS的继承性

问题：为什么一般将字体都设置到body标签上呢？如图：

通过代码来进行分析，如下：

继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。换句话说，

就是特定的CSS属性向下传递到子孙元素。

注意：

并不是所有的css属性都可以继承

可以继承的常见属性有：

font-family,font-size,font-style,font-weight,font, line-height,text-align,text-indent,color

4.关于CSS的层叠性

问题：当一个元素的样式被声明多次时，以哪个为准？

这就涉及到css的层叠性。

首先有一条，css规则有一个就近原则，是针对引入css方式的一种规则。

在实际开发中，我们很少会同时使用内部样式和外部样式。在真实项目中，一般都会使用外部样式表，

然后再在某些特殊的地方，加一点行内样式表的。

注意，接下来的规则是基于都是内部或者都是外部样式表，不是二者混合在一起的。

在三种基本选择器中，优先级是这样的

id选择器 > class选择器 > 标签选择器

在实际开发中，经常会使用分组、后代选择器这些用法。

选择器的特殊性

id选择器：        0 1 0 0  100块 

class选择器：  0 0 1 0  10块

类型选择器：   0 0 0 1  1块

如果在选择器中出现了多个选择器的时候，我们只需要将它们的这些特殊性求和，然后看结果。

还有一个，行内样式，它的特殊性是1 0 0 0 ，钻石

如果选择器的优先级（特殊性）完全相同，然后有重复的时候，怎么办？

还有一个就是！important，可以改变优先级（暂时放一下，实际上应用比较少）