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)
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
阅读量:188
阅读量:176
阅读量:114
阅读量:21
阅读量:175