多语言展示
当前在线:832今日阅读:167今日分享:16

css文本的相关属性

css如何控制文本的相关属性,如颜色。
工具/原料
1

phpstorm

2

html文件

方法/步骤
1

下面的案例都以p标签为例,下图为没有添加文本样式的p标签和运行后的效果。下面为演示方便,css使用的是内联样式表,建议大家使用外部样式表,方便后期的维护。

2

一、text-indent该属性可以方便地实现文本缩进。通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。这个属性最常见的用途是将段落的首行缩进,下面的规则的值使用了em、百分比、负值、和像素(如果设置为负值,则往左边缩进该数值):

3

二、text-aligntext-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式,如图所示:

5

四、letter-spacingletter-spacing 属性与 word-spacing 的区别在于,字母间隔修改的是字符或字母之间的间隔。与 word-spacing 属性一样,letter-spacing 属性的可取值包括所有长度。默认关键字是 normal(这与 letter-spacing:0 相同)。输入的长度值会使字母之间的间隔增加或减少指定的量:

6

五、text-transform该属性用来改变文本的格式:

7

六、text-decorationtext-decoration 有 5 个值:noneunderlineoverlineline-throughblink这是一个很有意思的属性,它提供了很多非常有趣的行为

注意事项

1em并不是固定等于多少像素的,而是根据元素的字体大小而定,如果是等宽字体(即每个字符的宽度都是一样的),1em就是1个字符的宽度,如果是比例字体(通常只有英文字体才有)则1em等于英文大写字母“M”的宽度。 通常我们可以这样来理解:如果把某个元素的font-size设为16px,那么1em就等于16px,2em就是32px,等等。但是要注意的是,这个转换关系只有在这个元素中才成立哦,如果换一个字体大小不是16px的元素,那么1em就不是16px了哦。

推荐信息