【网页前端】CSS样式表进阶文本样式_缩进

🔎这里是【前端网页】，关注我学习前端不迷路
👍如果对你有帮助，给博主一个免费的点赞以示鼓励
欢迎各位🔎点赞👍评论收藏⭐️

👀专栏介绍

【前端网页】 目前主要更新HTML，一起学习一起进步。

👀本期介绍

本期主要介绍CSS样式表进阶文本样式

文章目录

​​1. 文本对齐​​

​​2. 文本缩进​​

​​3. 文本装饰​​

​​4. 行高​​

​​5. 字体样式​​​​​​​​

1. 文本对齐


text-align ：用于设置文本内容的水平对齐方式，相当于 html 标签属性中的 align



准备代码：



<style> 
    .d1{
        width: 200px; 
        height: 100px; 
        background-color: lightblue; 
   } 
</style> 
    <body>
        <div class="d1">今天天气好晴朗</div> 
    </body>



常见属性值：（在以上代码基础上进行修改）





【网页前端】CSS样式表进阶文本样式_缩进_02


注意：


仅 块级元素 才可以完整展示对齐效果。


行级元素无法完整展示对齐效果（行级可以通过 display:block; 转块级元素后，使用对齐效果）


2. 文本缩进

text-indent：用于某段文本的首行进行缩进。

【网页前端】CSS样式表进阶文本样式_css3_03

例如：text-indent: 10px;

【网页前端】CSS样式表进阶文本样式_前端_04


在开发中，不建议在首行缩进处使用 px 单位，这样需要美工人员根据字体大小计算需要缩进的像


素，费


时费力。


所以在开发中，建议 使用 em 单位进行缩进 。


例如： text-indent : 2 em ;



【网页前端】CSS样式表进阶文本样式_html_05


总结：


em 会根据当前字体大小 font-size 自动调整。


用以保证 1em 就是 1 个汉字


3. 文本装饰


text-decoration: 文本的装饰效果。（通常用于给超链接修改装饰效果）


常见属性值：



【网页前端】CSS样式表进阶文本样式_css_06


超链接默认是 underline:


通过设置： text-decoration : none ;



【网页前端】CSS样式表进阶文本样式_缩进_07


总结：文本装饰，通常用于设置超链接去除下划线。


4. 行高

line-height：用于设置元素内，每行之间的间距。（行高越大，行间距越大）

【网页前端】CSS样式表进阶文本样式_css3_08

注意：行高的设置单位可以为 px,em，百分比。

【网页前端】CSS样式表进阶文本样式_缩进_09

小技巧：若元素中仅有一行内容，需要将内容在元素中垂直居中，仅需要 行高=元素高度 即可

【网页前端】CSS样式表进阶文本样式_css3_10

5. 字体样式


在网页样式中，我们可以对字体进行样式调节。



调节字体字号、字体类型、字体粗细、字体样式等




【网页前端】CSS样式表进阶文本样式_前端_11


注意：



1 、 font-family 可以设置的字体，都是本机存在的字体。


 

【网页前端】CSS样式表进阶文本样式_html_12


2 、 font-weight 也可以设置数字 100~900 （除非精细化调整，否则不用数字）



400 是 normal ， 700 是

bold 。 

【网页前端】CSS样式表进阶文本样式_css_13