CSS文本与字体属性

常用文本样式属性

• color 设置文本内容的前景色
• font-size 设置字号，单位通常为px
• font-weight 设置字体粗细
• font-style 设置字体的倾斜
• text-decoration 下划线删除线
• font-family 设置字体 字体可以是列表形式逗号隔开，一般英语字体放在前面，后面的字体是前面的“后备”字体。

示例	意义
font-weight：normal	正常粗细，与400等值
bold	加粗，与700等值
lighter	更细，大多数中文字体不支持
bolder	更粗，大多数中文字体不支持

示例	意义
font-style：normal	取消倾斜，比如可以把i，em等标签取消倾斜
italic	设置为倾斜字体（常用）
oblique	设置为倾斜字体（用常规字体模拟，不常用）

示例	意义
text-decoration：none	没有修饰线
underline	下划线
line-through	删除线

段落和行相关属性

• text-indent 定义首行文本内容之前的缩进量 2em
• line-height 定义行高 15px / 1.5/150% 最推荐不带单位的数值 表示相对于字号的倍数 垂直居中 行高=盒子高度
• text-align center文本水平居中

font合写顺序 
font：italic bold 20px/1.5 Arial,“微软雅黑”
text-style font-weight font-size line-height font-family

继承性

• 文本相关的属性普遍具有 继承性 ，只需要给祖先标签设置，即可在后代所有标签中生效
  • color
  • font-开头的
  • list-开头的
  • text-开头的
  • line-开头的
• 因为文字相关属性具有继承性，所有通常会设置body标签的字号、颜色、行高等，这样就能当作整个网页的默认样式了
• 在继承的情况下，选择器权重计算失效，而用“就近原则”

<div id="box1" class="box1">
	<div id="box2" class="box2">
    <div id="box3" class="box3">
        <p>我是文字</p>
    </div>
  </div>
</div>
  
<!--继承-->
#box1 #box2 #box3{
	color:red;
}

<!--选中 本身标签最大-->
p{
	color:green;
}

<div id="box1" class="box1">
	<div id="box2" class="box2">
    <div id="box3" class="box3">
        <p>我是文字</p>
    </div>
  </div>
</div>
  
<!--继承-->
#box1 #box2{
	color:red;
}

<!--选中 这个比较近-->
.box1 .box3{
	color:blue;
}