四、文本与字体属性
1、常用文本样式属性
1）color属性
可以用英文单词、十六进制、rgb()、rgba()（兼容IE9）等表示法
英文单词表示法，如color:red，仅用于学习时临时设置颜色，工作时追求精确一般不用
十六进制表示法，是所有设计软件中通用的颜色表示法，通常为十六进制表示color:#ff0000，每两位表示一种颜色分量，范围为0~255(00~ff)，分别为红绿蓝。
若颜色为#aabbcc形式，则可以简写为#abc
常见颜色：黑色#000，白色#fff，灰色#ccc #333 #2f2f2f等
rgb()表示法，color：rgb(255,0,0);（红，绿，蓝）
rgba()表示法，最后一个参数表示透明度，介于0~1之间，0表示纯透明，1表示纯实心
2）font-size属性
用来设置字号，单位通常为px，还有em、rem等单位
网页文字正文字号通常为16px，浏览器最小支持10px字号（通常字号为偶数）
3）font-weight属性
设置字体的粗细程度，通常为normal和bold两个值
| 示例 | 意义 |
|---|---|
font-weight:normal |
正常粗细，与400等值 |
font-weight:bold |
加粗，与700等值 |
font-weight:lighter |
更细，大多数中文字体不支持 |
font-weight:bolder |
更粗，大多数中文字体不支持 |
4）font-style属性
设置字体倾斜
| 示例 | 意义 |
|---|---|
font-style:normal |
取消倾斜，比如把天生倾斜的i、em等标签设置为不倾斜 |
font-style:italic |
设置为倾斜字体（常用） |
font-style:oblique |
设置为倾斜字体（用常规字体模拟，不常用） |
5）text-decoration属性
用于设置文本的修饰线外观（下划线、删除线）
| 示例 | 意义 |
|---|---|
text-decoration:none |
没有修饰线 |
text-decoration:underline |
下划线 |
text-decoration:line-through |
删除线 |
2、字体属性详解
font-family属性
用于设置字体，如font-family:"微软雅黑";
字体可以时列表形式，一般英语字体放前面，后面字体是前面字体的后备字体，如
font-family:serif,"Times New Roman","微软雅黑";
字体如果是中文，用引号包裹起来；多个字体设置，字体与字体之间用逗号隔开；引号嵌套，外面使用双引号，里面使用单引号。
<u>字体名称中间有空格时必须用引号包裹</u>
<u>中文字体也可以用英文名字来称呼</u>，如“微软雅黑”——“Microsoft Yahei”、“宋体”——“SimSun”
字体通常为用户计算机已经安装好的字体，所以一般来说设置为微软雅黑和宋体，设置成其他字体较少。
如要设置用户电脑中没有的字体，则需要自己定义新字体（即需要字体文件），用户加载网页的时候，会同时下载这些字体文件
字体文件根据操作系统和浏览器不同，有eot、woff2、woff、ttf、svg文件格式，需要同时有这5中文件
当拥有字体文件后，就可以使用@font-face定义字体
@font-face{
font-family:'字体名称';
font-display:swap;
src:url('eot字体文件地址');
src:url('eot字体文件地址') format('embedded-opentype'),
url('woff2字体文件地址') format('woff2'),
url('woff字体文件地址') format('woff'),
url('ttf字体文件地址') format('truetype'),
url('svg字体文件地址') format('svg'),
}
阿里巴巴普惠字体：https://www.iconfont.cn/webfont
使用该字体省去了下载字体的麻烦，该方法字库仅包含在网站中输入的文字，故推荐在标题等字较少的场合下使用
3、段落和行相关属性
1）text-indent属性
定义首行文本内容之前的缩进量
缩进两个字符应该写作text-indent:2em（em表示字符宽度）
在实际应用中，一般以text-indent实现缩进，而不是 
2）line-height属性
定义行高
line-height属性的单位可以是<u>以px为单位的数值</u>，如line-height:30px
<u>单位也可以是em</u>，即line-height:2em字符高度的两倍
也可以是<u>没有单位的数值</u>，表示字号的倍数，这也是推荐的写法，如line-height:1.5（即行高为字号的1.5倍）
也可以是百分数，同样表示字号的倍数，line-height:150%
<u>应用：设置行高 = 盒子高度，即可实现单行文本垂直居中</u>（text-alignLcenter 实现水平居中）
3）font合写属性
font属性可以作为font-style、font-weight、font-size、line-height、font-family属性的合写
<u>该合写一定要有后三个属性font-size、line-height、font-family才能生效，前两个无所谓</u>，若省略line-height则默认1倍行高，若想另行改变行高则需将line-height卸载font以下才会生效，在上会失效。
/*字号：20px 行高：1.5倍 字体：Arial 微软雅黑*/
font:20px/1.5 Arial,"微软雅黑";
/*字体样式：倾斜 字体粗细：加粗 字号：20px 行高：1.5倍 字体：Arial 微软雅黑*/
font:italic bold 20px/1.5 Arial,"微软雅黑";
/*前两个可以交换顺序*/
4、继承性
文本相关的属性普遍具有继承性，只需要给祖先标签设置即可在后代所有标签中生效
<ul>
<li>color</li>
<li>font-开头的</li>
<li>list-开头的</li>
<li>text-开头的</li>
<li>line-开头的</li>
</ul>
因为文字相关属性具有继承性，所以<u>通常会设置body标签的字号、颜色、行高等，这样就可以当作整个网页的默认样式了</u>
在继承的情况下，选择权重计算失效，而是“就近原则”，<u>即继承情况下，具体选中的标签的样式直接生效而不计算权重；都没有选中的话，离具体标签近的的样式生效。</u>
<style>
#box1 #box2{
color:red;
}
.box1 .box3{
color:blue;
}
</style>
<div id="box1" class="box1">
<div id="box2" class="box2">
<div id="box3" class="box3">
<p>我是文字</p>
</div>
</div>
</div>
<!-- 对于p标签来说，样式直接继承与父标签，都没有选中的情况下，根据“就近原则”,color:blue生效 -->
一个注意
<head>
<style>
p{
color:red;
text-decoration:none;
}
</style>
</head>
<body>
<p>
<a href="#">链接文字</a>
</p>
</body>
在以上情况下，链接的样式不变。
原因：a标签自身有默认样式，即蓝色有下划线；给p标签的样式对a标签来说是继承关系，在继承的关系下，a标签自身的样式离a最近，故a标签中文字就是蓝色加下划线。
