【前端】如何制作一个自己的网页(12)

接上文。

除了字体样式,在网页设计中,文本样式也是重要的组成部分。设置文本样式就是将文本进行合理的排版。接下来,我们来学习文本样式。

|--------------------------------------------------------------------------------|----------------------------------------------------------------------------|
| 和Word文档类似,我们可以通过CSS中的文本属性来设置文本的对齐方式、缩进等等。 在这里,我们将重点学习文本水平对齐、文本缩进、文本修饰、行高这四个属性。 | |

文本样式

|--------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 同时设置了文本样式的四个属性:文本水平对齐、文本缩进 、文本修饰和行高。 |
| <style> /* css设置文本样式 */ p { text-align: center; text-indent: 32px; text-decoration: underline; line-height: 32px; } </style> <p>夜曲编程</p> <p>网页开发</p> |
| |

文本对齐

|-------------------------------------------------------------------------------------------|
| text-align 属性,用于设置文本的水平对齐方式。 第4行,设置水平对齐方式为center,它表示文本居中对齐。常见的还有右对齐right,和默认的对齐方式左对齐left。 |
| <style> /* css设置文本的水平对齐方式 */ p { text-align: center; } </style> <p>夜曲编程</p> |
| |

文本缩进

|--------------------------------------------------------------------------------------------------------------|
| text-indent属性,用于指定文本的首行缩进,通常是将段落元素p的首行缩进。 第4行,设置文本缩进的长度为32px,即32++像素++ 。 当涉及到和长度有关的属性值时,我们推荐使用像素px这种长度单位来表示。 |
| <style> /* css设置文本缩进 */ p { text-indent: 32px; } </style> <p>夜曲编程</p> |
| |

文本修饰

|--------------------------------------------------------------------------------------------------------------------------------------------------------|
| text-decoration属性,用于为文本添加修饰。 第4行,设置属性值为underline,表示给文本添加下划线。 常见的还有上划线overline,和删除线line-through。 最常用的做法就是,设置text-decoration : none ; ,来清除<a>标签的默认下划线。 |
| <style> /* css设置文本修饰 */ p { text-decoration: underline; } </style> <p>给文本添加下划线</p> |
| |

行高

|-----------------------------------------------------------------------------------------------------------------------------------------------------|
| line-height属性,用于设置文本的行高。 第4行,设置行高为32px,表示行高固定为32像素。 当涉及到和长度有关的属性值时,我们推荐使用像素px这种长度单位来表示。 |
| <style> /* 类选择器设置文本行高 */ .big { line-height: 32px; } </style> <p>这是默认的标准行高<br>这是默认的标准行高</p> <p class="big">这是较大的行高<br>这是较大的行高</p> |
| |

Ps:

删除下划线

|--------------------------------------------------------------------------------------------------------------------------------|
| 前面,我们提到文本修饰属性text-decoration还有一种最常用的用法:清除<a>标签的默认下划线。第4行,设置属性text-decoration: none;,清除了链接默认的下划线。 |
| <style> /* css通过文本修饰属性删除链接的下划线 */ a { text-decoration: none; } </style> <a href="https://np.baicizhan.com/">夜曲编程</a> |
| |

单独数字设置行高

|--------------------------------------------------------------------------------------------------------------------|
| 类似于32px的这种方式,是采用数字和长度单位的方式来表示行高。 其实,行高还可以是单独的数字,数字表示字体大小的倍数。 比如p元素的字体大小为16px,则设置line-height: 3,表示行高为字体大小的3倍,为48px。 |
| |

总结:

学习完了CSS设置网页的各种样式。

之后要学习两种复合CSS选择器,以及在网页分组中的2个重要元素:div和span。

相关推荐
艾思科蓝-何老师【H8053】15 分钟前
【ACM出版】第四届信号处理与通信技术国际学术会议(SPCT 2024)
人工智能·信号处理·论文发表·香港中文大学
秀儿还能再秀35 分钟前
机器学习——简单线性回归、逻辑回归
笔记·python·学习·机器学习
weixin_4526006943 分钟前
《青牛科技 GC6125:驱动芯片中的璀璨之星,点亮 IPcamera 和云台控制(替代 BU24025/ROHM)》
人工智能·科技·单片机·嵌入式硬件·新能源充电桩·智能充电枪
学术搬运工43 分钟前
【珠海科技学院主办,暨南大学协办 | IEEE出版 | EI检索稳定 】2024年健康大数据与智能医疗国际会议(ICHIH 2024)
大数据·图像处理·人工智能·科技·机器学习·自然语言处理
右恩1 小时前
AI大模型重塑软件开发:流程革新与未来展望
人工智能
图片转成excel表格1 小时前
WPS Office Excel 转 PDF 后图片丢失的解决方法
人工智能·科技·深度学习
阿_旭2 小时前
如何使用OpenCV和Python进行相机校准
python·opencv·相机校准·畸变校准
幸运的星竹2 小时前
使用pytest+openpyxl做接口自动化遇到的问题
python·自动化·pytest
ApiHug2 小时前
ApiSmart x Qwen2.5-Coder 开源旗舰编程模型媲美 GPT-4o, ApiSmart 实测!
人工智能·spring boot·spring·ai编程·apihug
哇咔咔哇咔2 小时前
【科普】简述CNN的各种模型
人工智能·神经网络·cnn