CSS文本属性与字体
一,文本属性
-
text-decoration
-
text-transform
-
text-indent
-
text-align
-
word/letter-spacing
text-decoration
text-decoration取值为:
- none:去除所有装饰
- underline:添加下划线
- overline:添加上划线
- line-through:添加中划线
text-transform
text-transform取值为:
- capitalize:把每个单词的首字符变为大写
- uppercase:把每个单词的所有字符变为大写
- lowercase:把每个单词的所有字符变为小写
- none:无影响
text-indent
text-indent 为第一行的缩进大小。
text-indent:2em;
text-align
text-align取值为:
- left:左对齐
- right:右对齐
- center:居中对齐
- justify:两端对齐
!text-align只适用于行内元素
text-align:center与text-align:justify的区别:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>div {height: 200px;width: 30%;background-color: azure;text-align: center;}
</style><body><div>Welcome to Flask’s documentation.Get started with Installation and then get an overview with the Quickstart.There is also a more detailed Tutorial that shows how to create a small but complete application with Flask.Common patterns are described in the Patterns for Flask section.The rest of the docs describe each component of Flask in detail, with afull reference in the API section.</div></body></html>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>div {height: 200px;width: 30%;background-color: azure;text-align: justify;}
</style><body><div>Welcome to Flask’s documentation.Get started with Installation and then get an overview with the Quickstart.There is also a more detailed Tutorial that shows how to create a small but complete application with Flask.Common patterns are described in the Patterns for Flask section.The rest of the docs describe each component of Flask in detail, with afull reference in the API section.</div></body></html>
letter-spacing
letter-spacing可以控制字间距,可以为负数。
二,字体属性
- font-size
- font-family
- font-weight
- line-height
- font-style
- font-variant
font-size
数值+单位
font-size:10px;
font-size:2em;
百分比(相对于父级元素的大小)
font-size:50%;
font-family
字体类型设置
font-weight
字体大小设置
取值:
100/200/300.....,每个数字表示一个重量
normal = 400
bold = 700
line-height
行高为基线之间的距离:
font-style
font-style取值:
- normal:常规显示
- italic:斜体形式
- oblique:倾斜
font-variant
normal:常规显示
small-caps:将小写字母替换为缩小过的大写字母