本文主要是介绍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:将小写字母替换为缩小过的大写字母
这篇关于CSS文本属性与字体的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!