【网页前端】CSS样式表进阶文本样式
🔎这里是【前端网页】，关注我学习前端不迷路
👍如果对你有帮助，给博主一个免费的点赞以示鼓励
欢迎各位🔎点赞👍评论收藏⭐️
👀专栏介绍
【前端网页】 目前主要更新HTML，一起学习一起进步。
👀本期介绍
本期主要介绍CSS样式表进阶文本样式
文章目录
5. 字体样式
1. 文本对齐
text-align
：用于设置文本内容的水平对齐方式，相当于
html
标签属性中的
align
准备代码：
<style>
.d1{
width: 200px;
height: 100px;
background-color: lightblue;
}
</style>
<body>
<div class="d1">今天天气好晴朗</div>
</body>
常见属性值：（在以上代码基础上进行修改）
注意：
仅 块级元素 才可以完整展示对齐效果。
行级元素无法完整展示对齐效果（行级可以通过
display:block;
转块级元素后，使用对齐效果）
2. 文本缩进
text-indent：用于某段文本的首行进行缩进。
例如：text-indent: 10px;
在开发中，不建议在首行缩进处使用
px
单位，这样需要美工人员根据字体大小计算需要缩进的像
素，费
时费力。
所以在开发中，建议
使用
em
单位进行缩进
。
例如：
text-indent
:
2
em
;
总结：
em
会根据当前字体大小
font-size
自动调整。
用以保证
1em
就是
1
个汉字
3. 文本装饰
text-decoration:
文本的装饰效果。（通常用于给超链接修改装饰效果）
常见属性值：
超链接默认是
underline:
通过设置：
text-decoration
:
none
;
总结：文本装饰，通常用于设置超链接去除下划线。
4. 行高
line-height：用于设置元素内，每行之间的间距。（行高越大，行间距越大）
注意：行高的设置单位可以为 px,em，百分比。
小技巧：若元素中仅有一行内容，需要将内容在元素中垂直居中，仅需要 行高=元素高度 即可
5. 字体样式
在网页样式中，我们可以对字体进行样式调节。
调节字体字号、字体类型、字体粗细、字体样式等
注意：
1
、
font-family
可以设置的字体，都是本机存在的字体。
2
、
font-weight
也可以设置数字
100~900
（除非精细化调整，否则不用数字）
400
是
normal
，
700
是
bold
。
![]()
浙公网安备 33010602011771号