HTML网页制作:[18]CSS段落属性

2025-10-29 16:23:08

1、word-spacing

控制单词间隔

请注意,只是单词间隔

<style>.alsp{ word-spacing:50px;}</style>

HTML网页制作:[18]CSS段落属性

2、OK,来看看网页效果。

只有单词才会适用于该间隔,中文是不会使用该样式的。

HTML网页制作:[18]CSS段落属性

3、letter-spacing

字符间隔,用于控制字符与字符之间的间距

<style>.alsp{ letter-spacing:50px;}</style>

HTML网页制作:[18]CSS段落属性

4、看下网页效果图,所有的字符,无论单词、字母、中文汉字等都分开了。

HTML网页制作:[18]CSS段落属性

5、text-decoration

文字修饰。

none:默认值

underline:添加下划线

overline:添加上划线

line-through:添加删除线

blink:添加闪烁效果

看代码:

<style>.alsp{ text-decoration:underline;}</style>

HTML网页制作:[18]CSS段落属性

6、网页效果展示,已经添加了下划线

HTML网页制作:[18]CSS段落属性

7、text-align

设置文本的水平对齐方式

left:左对齐

right:右对齐

center:居中对齐

justify:两端对齐

举例:

<style>.alsp{ text-align:center;}</style>

HTML网页制作:[18]CSS段落属性

8、看网页效果,已经居中了

HTML网页制作:[18]CSS段落属性

9、text-indent

文本缩进。控制整体向右缩进

例:

<style>.alsp{ text-indent:30px;}</style>

HTML网页制作:[18]CSS段落属性

10、看网页效果图,已经像右缩进了

HTML网页制作:[18]CSS段落属性

11、line-height

文本行高,行高可以设置为长度、倍数、百分比

例:

<style>.alsp{ line-height:50px;}</style>

HTML网页制作:[18]CSS段落属性

12、从网页效果来看,其行高已经可以改变,并且为50px

HTML网页制作:[18]CSS段落属性

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢