【前端】如何制作一个自己的网页(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。

相关推荐
hummhumm22 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
deephub23 分钟前
优化注意力层提升 Transformer 模型效率:通过改进注意力机制降低机器学习成本
人工智能·深度学习·transformer·大语言模型·注意力机制
杜小满26 分钟前
周志华深度森林deep forest(deep-forest)最新可安装教程,仅需在pycharm中完成,超简单安装教程
python·随机森林·pycharm·集成学习
搏博35 分钟前
神经网络问题之二:梯度爆炸(Gradient Explosion)
人工智能·深度学习·神经网络
KGback41 分钟前
【论文解析】HAQ: Hardware-Aware Automated Quantization With Mixed Precision
人工智能
电子手信1 小时前
知识中台在多语言客户中的应用
大数据·人工智能·自然语言处理·数据挖掘·知识图谱
不高明的骗子1 小时前
【深度学习之一】2024最新pytorch+cuda+cudnn下载安装搭建开发环境
人工智能·pytorch·深度学习·cuda
Chef_Chen1 小时前
从0开始学习机器学习--Day33--机器学习阶段总结
人工智能·学习·机器学习
搏博1 小时前
神经网络问题之:梯度不稳定
人工智能·深度学习·神经网络
databook1 小时前
『玩转Streamlit』--布局与容器组件
python·机器学习·数据分析