css常用文本样式属性

color属性

设置文本内容的前景色

三原色：红绿蓝

主要可以用英语单词、十六进制、rgb()、rgba()等表示法

英语单词表示法：仅仅用于学习时临时设置一下颜色，工作时基本不用，因为要追求精确

十六进制表示法：是所有设计软件中通用的颜色表示法。

color:#ff0000;比如十六进制ff就是十进制的255，每种颜色分量都是0~255的数字；如果颜色值是#aabbcc的形式，可以简写为#abc；黑色是#000，白色是#fff，常见的灰色有#ccc、#333、#2f2f2f等

rgb()表示法：color: rgb(250, 0,0);

rgba()表示法：color: rgba(250, 0,0,.65);最后一个参数表示透明度，介于0到1之间，0表示纯透明，1表示实心。 从IE9开始兼容

---

font-size属性

设置字号，单位通常为px

网页文字正文字号通常是16px，浏览器最小支持10px字号

---

font-weight属性

设置字体的粗细程度，通常用normal和bold两个值

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

---

font-style属性

设置字体的倾斜

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

---

text-decoration属性

设置文本的修饰线外观（下划线、删除线）

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

---

字体属性详解-font-family属性

设置字体

字体可以是列表形式，一般英语字体放到前面，后面的字体是前面的字体的“后备”字体，字体名称中有空格，必须用引号包裹

font-family: serif,"Times New Roman","微软雅黑";

中文字体也可以称呼它们的英语名字

微软雅黑等价于：Microsoft Yahei

宋体等价于：SimSun

字体通常必须是用户计算机中已经安装好的字体，所以一般设置为微软雅黑和宋体较多，设置成其他字体较少。

如何设置为用户电脑中没有的字体？那就必须自己定义新字体，这就需要我们有字体文件，用户加载网页的时候，会同时下载这些字体文件。字体文件根据操作系统和浏览器不同，有eot、woff2、woff、ttf、svg文件格式，需要同时有这5种文件

定义字体：用@font-face定义字体

阿里巴巴普惠体：免费商用授权的普惠字体，网址：https：//www.iconfont.cn/webfont

---

段落和行相关属性

text-indent属性

定义首行文本内容之前的缩进量，缩进两个字符应该写作：text-indent: 2em;

line-height属性

定义行高。单位可以是以px为单位的数值；也可以是没有单位的数值，表示字号的倍数，这是最推荐的写法；也可以是百分数，表示字号的倍数

单行文本垂直居中：设置行高=盒子高度

文本水平居中：设置text-align=center

---

font合写属性

font属性可以用来作为font-style，font-weight，font-size，line-height和font-family属性的合写

p{font:italic bold 20px/1.5 Arial ,"微软雅黑";}

20px/1.5  字号/行高

Arial ,"微软雅黑";  字体

---

继承性

文本相关的属性普遍具有继承性，只需要给祖先标签设置，即可在后代所有标签中生效

color

font-开头的

list-开头的

text-开头的

line-开头的

因为文字相关属性具有继承性，所以通常会设置body标签的字号、颜色、行高等，这样就能当作整个网页的默认样式了

---

就近原则

在继承的情况下，选择器权重计算失效，而是“就近原则”