文字控制属性
描述 | 属性 |
---|
字体大小 | font-size |
字体粗细 | font-weight |
字体倾斜 | font-style |
行高 | line-height |
字体族 | font-family |
字体复合属性 | font |
文本缩进 | text-indent |
文本对齐 | text-align |
修饰线 | text-decoration |
颜色 | color |
字体大小
字体大小
属性名 font-size
属性值 文字尺寸,PC端网页最常用的单位px
谷歌浏览器文字有默认大小 16px
p {
font-size: 30px;
}
字体粗细
文字粗细
属性名 font-weight
属性值 效果
数字(开发使用) 正常 400 加粗 700
关键字 正常 normal 加粗 bold
p {
font-weight: 700;
}
字体倾斜
字体倾斜
属性名 font-style
属性值 说明
normal 正常(默认)
italic 倾斜
p {
font-style: italic;
}
行高
行高 设置多行文本的间距
属性名 line-height
属性值
数字 + px
数字(当前标签font-size属性值的倍数)
行高的测量方法 从一行文字的最顶端(最底端)量到下一行文字的最顶端(最底端)
单行文字垂直居中 行高属性值等于盒子高度属性值
p {
line-height: 30px;
line-height: 2;
height: 100px;
line-height: 100px;
}
字体族
字体族
属性名 font-family
属性值 字体名
可以书写多个字体名,各个字体名用逗号隔开,执行顺序是从左向右一次查找
p{
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
}
font复合属性
font复合属性
使用场景:设置网页公共样式
font:是否倾斜 是否加粗 字号/行号 字体
字号和字体值必须书写,否则font属性不生效
p{
font: italic 700 30px/2 楷体;
}
文本缩进
文本缩进
属性名 text-indent
属性值
数字 + px
数字 + em(推荐:1em = 当前标签字号的大小)
p {
text-size: 30px;
text-indent: 2em;
}
文本对齐方式
文本对齐方式 控制内容水平对齐方式
属性名 text-align
属性值 效果
left 左对齐(默认)
center 居中对齐
right 右对齐
text-align本质是控制内容的对齐方式,属性要设置给内容的父级,居中的是文字内容,不是标签
p{
text-align: center;
}
文本修饰线
文本修饰线
属性名 text-decoration
属性值 效果
none 无
underline 下划线
line-through 删除线
overline 上划线
a {
text-decoration: none;
}
div {
text-decoration: underline;
}
p {
text-decoration: line-through;
}
span {
text-decoration: overline;
}
文字颜色
文字颜色
属性名 color
颜色表达方式 属性值
颜色关键字 颜色英文单词
rgb表示法 rgb(r,g,b)
rgba表示法 rgba(r,g,b,a)
十六进制表示法 #RRGGBB
只要属性值为颜色,都可以使用上述四种颜色表示方式,例如:背景色
p {
color: #00f;
}