常用的文本样式属性
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; | 删除线 |