最详细的CSS常用文本样式总结(text-align、text-decoration、text-indent、line-height、letter-spacing、text-shadow)
文本样式与字体样式不同,CSS文本属性可以定义文本外观,例如行间距等。由于自己在学习CSS的过程中会时不时忘记一些CSS文本样式的书写,因此在本文记录了一些常用的CSS文本样式的用法。以上就是有关常用文本样式的笔记内容,希望对各位有所帮助,作者也在学习中,如有解释不清楚或有误的地方,还请各位指正。
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
文本样式与字体样式不同,CSS文本属性可以定义文本外观,例如行间距等。由于自己在学习CSS的过程中会时不时忘记一些CSS文本样式的书写,因此在本文记录了一些常用的CSS文本样式的用法。
一、文本颜色
使用color属性定义文本的颜色,其属性值有三类:
- 十六进制:由0-9这十个数字和A-F这六个字母组成(例如:#FF0000、#23DF90…)
- RGB代码(例如:red、green、yellow…)
- 预定义的颜色值(例如:rgb(0,255,0) , rgb(30%,30%,100%) )
例如:
//红色
color:#FF0000;
注意:
开发中常用的color属性值用十六进制表示。
二、文本对齐
使用text-align属性用于设置元素内文本内容的水平对齐方式,其属性值如下:
- left:左对齐(默认值)
- center:居中对齐
- right:右对齐
例如:
//水平居中对齐
text-align:center;
注意:
(1)text-align属性只能设置文本内容的水平对齐,不能设置竖直对齐。
(2)使用text-align属性时,必须保证被设置元素为行内元素或者行内块元素才可生效。
三、文本修饰
使用text-decoration属性规定添加到文本的修饰,其属性值如下:
- none:默认值,无任何修饰(最常用)
- underline:下划线,例如链接a标签自带的下划线(常用)
- overline:上划线(几乎不用)
- line-through:删除线(不常用)
例如:
text-decoration:none;
text-decoration:underline;
text-decoration:overline;
text-decoration:line-through;
效果展示如下:
注意:
如果想要去掉a标签自带的下划线,直接给a标签添加text-decoration:none;样式即可。
四、文本缩进
使用text-indent属性设置文本的第一行缩进,通常是将段落首行进行缩进,其单位可以用px或者em。
例如:
text-indent:10px;
注意:
(1)缩进长度可以是负值。
(2)em是一个相对单位,是指当前元素的font-size的1个文字大小,如果当前文字没有设置文字大小,则会按照父元素的1个文字大小,因此一般情况下使用text-indent:2em;来进行常规缩进,即缩进两个文字长度。
五、行间距
使用line-height设置各行间的距离(行高),例如:
line-height:20px;
行间距包含上间距、文本高度、下间距,如下:
注意:
(1)改变行高其实改变的是上、下间距的高度。
(2)为了方便观感,一般给段落设置行间距,而不是每行设置行间距。
六、字符间距
使用letter-spacing设置每个字符间的距离(字符间距),例如:
letter-spacing:2px;
注意:
(1)如果不设置该属性,则为默认值normal,即字符间没有额外的空间。
(2)如果设置该属性的属性值为inherit,则表示该元素会继承父元素的letter-spacing的值。
七、文本阴影
使用text-shadow设置文本阴影,其语法如下:
text-shadow: h-shadow v-shadow blur color;
- h-shadow:水平阴影的位置,正负值均可(必需)
- v-shadow:垂直阴影的位置,正负值均可(必需)
- blur:模糊的距离(可选)
- color:阴影的颜色(可选)
例如:
//右移3px,下移3px,阴影宽度为1px,颜色为红色
text-shadow: 3px 3px 1px #ff0000;
效果如下:
注意:
(1)如果不设置color,则默认为黑色阴影。
(2)如果不设置blur,则默认与文字大小一致。
总结
以上就是有关常用文本样式的笔记内容,希望对各位有所帮助,作者也在学习中,如有解释不清楚或有误的地方,还请各位指正。
![Logo](https://devpress.csdnimg.cn/79de2bf0b7994defa4242ef90d5513fa.jpg)
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)