文字控制属性可控制的内容如下
| 名称 | 属性 |
|---|---|
| 字体大小 | font-size |
| 字体粗细 | font-weight |
| 字体倾斜 | font-style |
| 行高 | line-height |
| 字体族 | font-family |
| 字体复合属性 | font |
| 文本缩进 | text-indent |
| 文本对齐 | text-align |
| 修饰线 | text-decoration |
| 颜色 | color |
字体大小
属性值为文字尺寸，单位一般为 px
1
2
3
p {
font-size: 30px;
}
字体粗细
属性值有数字或关键字
1
2
3
4
5
6
7
8
p {
font-weight: 400; /* 文字设为正常 */
/* font-weight: normal; */
}
div {
font-weight: 700; /* 文字设为加粗 */
/* font-weight: bold; */
}
字体倾斜
一般用作清除文字默认的倾斜效果
1
2
3
4
5
6
em {
font-style: normal; /* 将 em 标签倾斜效果移除 */
}
p {
font-style: italic; /* 将 p 标签内文字倾斜 */
}
行高
设置多行文本的间距，属性值有两种
1
2
3
4
5
6
P {
line-height: 30px; /* 行高为 30px */
}
div {
line-height: 2; /* 行高为 font-size 的两倍 (font-size 默认为 16px) */
}
行高指文本高度+上间距+下间距
当行高属性值等于盒子 (div) 高度属性值时，可以实现垂直居中
1
2
3
4
div {
line-height: 100px;
height: 100px;
}
字体族
用于控制文字的字体，属性值为字体名
1
2
3
p {
font-family: 楷体;
}
一般情况下会设置多个
1
2
3
p {
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
}
执行循序为从左到右，即浏览器会检测系统是否有当前字体，若没有，检测是否有下一个，直到最后一个，上述最后一个为 无衬线字体 的字体族名
font 复合属性
在开发设置字体时以下情况
1
2
3
4
5
6
7
div {
font-style: italic; /* 文字倾斜 */
font-weight: 700; /* 文字加粗 */
font-size: 30px; /* 字体大小为 30px */
line-height: 2; /* 行高为字号的 2 倍 */
font-family: 楷体; /* 设置字体 */
}
可以简写为
1
2
3
4
div {
font: italic 700 30px/2 楷体;
/* 是否倾斜 加粗 字号/行高 字体 */
}
此属性一般用于设置网页文字公共样式，属性值必须按顺序书写，其中字号和字体值必须书写，其它可以省略
文本缩进
属性值有两种，px 或 em，em 为当前标签的字号大小
1
2
3
4
5
p {
font-size: 20px;
text-indent: 2em; /* 首行缩进两个字 */
/* text-indent: 40px; 与上一行代码效果一致 */
}
文本对齐方式
text-align 属性有三个值：left、center、right
1
2
3
div {
text-align: center; /* 文字中间对齐 */
}
此属性不仅可以用于文字对齐，如以下使用方式可以使图片居中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
<title></title>
<style>
div {
text-align: center;
}
</style>
</head>
<body>
<div>
<img src="path" />
</div>
</body>
</html>
text-align 本质是控制内容的对齐方式，属性要设置给内容的父级，上例 img 的父级为 div
文本修饰线
| 效果 | 无 | 下划线 | 删除线 | 上划线 |
|---|---|---|---|---|
| 属性值 | none | underline | line-through | overline |
1
2
3
4
5
6
a {
text-decoration: none; /* 去除链接的下划线 */
}
del {
text-decoration: none; /* 去除 del 标签的下划线，使 del 标签无效 */
}
文字颜色
| 颜色表示方式 | 属性值 | 说明 |
|---|---|---|
| 关键字 | 英语单词 | red、green、aqua 等 |
| rgb 表示法 | rgb(r, g, b) | r, g, b 表示红绿蓝三原色，取值 0-255 |
| rgba 表示法 | rgba(r, g, b, a) | a 表示透明度，取值 0-1 |
| 十六进制表示法 | #RRGGBB | 两两一组，若相同可缩写。#ffcc00 -> #fc0 |
1
2
3
4
5
6
p {
color: rgba(250, 200, 0, 0.5);
}
div {
dolor: #acf; /* 等同于 #aaccff */
}