文章目录
- 文本属性
- text-decoration(重要)
- text-transform
- text-indent
- text-align(重要)
- letter-spacing、word-spacing
- 字体属性
- font-size(重要)
- font-family(重要)
- font-weight(重要)
- font-style
- font-variant
- line-height(常用)
- font
文本属性
text-decoration(重要)
用于设置文字的装饰线
text-decoration常见取值:
none:无任何装饰线，可以去除a元素默认的下划线
underline:下划线
overline:上划线
line-through:中划线(删除线)
text-transform
用于设置文字大小写转换
text-transform常见取值:
capitalize:将每个单词的首字符变为大写
uppercase:将每个单词的所有字符变为大写
lowercase:将每个单词的所有字符变为小写
none:没有任何影响
text-indent
用于设置第一行内容的缩进
text-indent:2em;刚好缩进2个文字
text-align(重要)
MDN解释:定义行内内容(例如文字)如何相对它的块父元素对齐
常用的值
left:左对齐
right:右对齐
center:正中间显示
justify:两端对齐(了解即可)
W3C解释:
This shorthand property sets the ‘text-align-all’ and ‘text-align-last’ properties and describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill
letter-spacing、word-spacing
分别用于设置字母、单词之间的间距
默认是0，可以设置为负数
字体属性
font-size(重要)
决定文字的大小
常用设置
具体数值+单位
比如100px
也可以使用em单位(不推荐):1em代表100%，2em代表200%，0.5em代表50%
百分比
基于父元素的font-size计算，比如50%表示等于父元素font-size的一半
font-family(重要)
用于设置文字的字体名称
可以设置1个或者多个字体名称
浏览器会选择列表中第一个该计算机上有安装的字体
或者通过@font-face指定的可以直接下载的字体
font-weight(重要)
用于设置文字的粗细
常见取值:
100|200|300|400|500|600|700|800|900:每一个数字表示一个重量
normal:等于400
bold:等于700
strong、b、h1-h6等标签的font-weight默认就是bold
font-style
用于设置文字的常规、斜体显示
normal:常规显示
italic(斜体):用字体的斜体显示(通常会有专门的字体)
oblique(倾斜):文本倾斜显示(仅仅是让文字倾斜)
em、i、cite、address、var、dfn等元素的font-style默认就是italic
font-variant
可以影响小写字母的显示形式
normal:常规显示
small-caps:将小写字母替换为缩小过的大写字母
line-height(常用)
用于设置文本的行高
行高:两行文字基线(baseline)之间的间距
基线(baseline):与小写字母x最底部对齐的线
行高-文本高度=行距
height和line-height的区别:
height:元素的整体高度
line-height:元素中每一行文字所占据的高度
假设div只有一行文字，让这行文字在div内部垂直居中
<html>
<head>
<style>
.box {
height: 100px;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box">div元素</div>
</body>
</html>
font
font是一个缩写属性
font属性可以用来作为font-style，font-variant，font-weight，font-size，line-height和font-family属性的简写
规则:
font-style、font-variant、font-weight可以随意调换顺序，也可以省略
/line-height可以省略，如果不省略，必须跟在font-size后面
font-size、font-familt不可以调换顺序，不可以省略
<html>
<head>
<style>
.box {
/* 关于字体的属性 */
/*font-size: 30px;
font-weight: 700;
font-variant: small-caps;
font-style: italic;
font-family: serif;
line-height: 30px;*/
/* 缩写属性*/
font: italic small-caps 700 30px/30px serif;
}
</style>
<body>
<div class='box'>
div元素
</div>
</body>
</head>
<body>
</body>
</html>
