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