常用的文本样式属性

常用的文本样式属性

color属性

color 属性可设置文本内容的前景色。color 属性主要可以用英语单词、十六进制、rgb()、rgba()等表示法。

英语单词表示法

仅仅用于学习时临时设置一下颜色，实际开发时基本不用这样的形式，因为追求精确。示例如下：

color: red;

十六进制表示法

十六进制表示法是所有设计软件中都通用的颜色表示法，设计师给我们的设计图上面标注的颜色，通常为十六进制表示。示例如下：

color: #ff3366;

上面的ff就是十进制的255，每种颜色分量都是0~255的数字。

如果颜色值是#aabbcc的形式，可以简写为#abc，如#ff3366可以写为#f36。

比较常见的有黑色是#000，白色是#fff，常见的灰色有#ccc、#333、 #2f2f2f等。

rgb() 表示法

颜色也可以用rgb()表示法来表示，如：

color: rgb(255, 0, 0);

rgba() 表示法

颜色也可以用rgba()表示法，相比rgb()表示法最后多了一个参数表示透明度，介于0到1之间，0表示纯透明，1表示纯实心。示例如下：

color: rgba(255, 0, 0, .6);

font-size属性

font-size属性用来设置字号，单位通常为px。示例如下：

font-size: 22px;

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

font-weight属性

font-weight属性设置字体的粗细程度，通常就用normal和bold两个值。示例如下：

/* 加粗，与700等值 */
font-weight: bold;
/* 正常粗细，与400等值 */
font-weight: normal;

font-style属性

font-style属性设置字体的倾斜，示例如下：

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

text-decoration属性

text-decoration属性用于设置文本的修饰线外观的（下划线、删除线）。示例如下：

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