HTML网页制作:[18]CSS段落属性
1、word-spacing控制单词间隔请注意,只是单词间隔<style>.alsp{ word-spacing:50px;}</style>
![HTML网页制作:[18]CSS段落属性](https://exp-picture.cdn.bcebos.com/30601b6104a355e97b115c64d22ae3efe1786817.jpg)
2、OK,来看看网页效果。只有单词才会适用于该间隔,中文是不会使用该样式的。
![HTML网页制作:[18]CSS段落属性](https://exp-picture.cdn.bcebos.com/332d496699cf02532ca397366b36e29146e85f17.jpg)
3、letter-spacing字符间隔,用于控制字符与字符之间的间距<style>.alsp{ letter-spacing:50px;}</style>
![HTML网页制作:[18]CSS段落属性](https://exp-picture.cdn.bcebos.com/3fc72e486143d7d458f1b0587da75f0f832b5017.jpg)
4、看下网页效果图,所有的字符,无论单词、字母、中文汉字等都分开了。
![HTML网页制作:[18]CSS段落属性](https://exp-picture.cdn.bcebos.com/836a6aee1c324b1849ec384253a7263349844817.jpg)
5、text-decoration文字修饰。none:默认值underline:添加下划线overline:添加上划线line-through:添加删除线blink:添加闪烁效果看代码:<style>.alsp{ text-decoration:underline;}</style>
![HTML网页制作:[18]CSS段落属性](https://exp-picture.cdn.bcebos.com/d9e638334884cde355ece25df07f860e7d754217.jpg)
6、网页效果展示,已经添加了下划线
![HTML网页制作:[18]CSS段落属性](https://exp-picture.cdn.bcebos.com/57af657f860e7c75c6344846650d3aceabd7bf17.jpg)
7、text-align设置文本的水平对齐方式left:左对齐right:右对齐center:居中对齐justify:两端对齐铛刷故揭举例:<style>.alsp{ text-align:center;}</style>
![HTML网页制作:[18]CSS段落属性](https://exp-picture.cdn.bcebos.com/e4b5e2f5ee0d3ace8d17c6d887e265e7350fbb17.jpg)
8、看网页效果,已经居中了
![HTML网页制作:[18]CSS段落属性](https://exp-picture.cdn.bcebos.com/0da37be7340f647839e30a0afd3e21c2bad6b517.jpg)
9、text-indent文本缩进。控制整体向右缩进例:<style>.alsp{ text-indent:30px;}</style>
![HTML网页制作:[18]CSS段落属性](https://exp-picture.cdn.bcebos.com/2083a5d6e1d06de8aea13296ca93cee8b104ac17.jpg)
10、看网页效果图,已经像右缩进了
![HTML网页制作:[18]CSS段落属性](https://exp-picture.cdn.bcebos.com/cfa9ae04541bd10fc9e6b929ba0e1799e82aa717.jpg)
11、line-height文本行高,行高可以设置为长度、倍数、百分比例:<style>.alsp{ line-height:50px;}</style>
![HTML网页制作:[18]CSS段落属性](https://exp-picture.cdn.bcebos.com/bbf95c406afec314b505215dcac1b727ad539c17.jpg)
12、从网页效果来看,其行高已经可以改变,并且为50px
![HTML网页制作:[18]CSS段落属性](https://exp-picture.cdn.bcebos.com/906dbbcadce890484e3cc344130e5f2042719217.jpg)