text-decoration属性(CSS设置文本的修饰线外观)
text-decoration属性
在CSS中,使用text-decoration属性,可以在文本上方、下方、或中间添加装饰线,可选值为none|underline|overline|line-through|blink,默认值为none。none无装饰,underline下划线,overline上划线,line-through文字中间贯穿线,blink闪烁。装饰线的颜色与文本的颜色相同。
默认情况下,文本都是没有装饰线的,但超链接是个例外,它默认就带有下划线。当然,可以把text-decoration属性的值设置为none,去掉超链接的下划线,当鼠标悬停后,再添加下划线,来提醒用户当前文本为链接文本。如:
a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
文本装饰线的另一个常见用法,就是修订文本,在被删除文本上增加删除线。还有团购网站,在原价上增加删除线,做删除状。其实,还可以使用text-decoration属性,为文本同时添加多条装饰线。如:
p{
text-decoration:underlineoverlineline-through;
}
CSS设置文本的修饰线外观
color特点:设置文本文字色彩。用法如下:
color:色彩值;
color特点能够设置的合法色彩值包括:16进制色彩值(例:#ffffff),rgb色彩值【例:rgb(0,0,0)】,rgba色彩值【例:rgb(0,0,0,0.5),0.5表明透明度】,hsl色彩值【例:hsl(120,65%,75%)】,hsla色彩值【hsl(120,65%,75%,0.3),0.3表明透明度】。
2、css文本文字行高(行距离)的特点
line-height特点:设置行间的间隔(行高)。用法如下:
line-height:值;
具体cssline-height特点是怎么设置文本文字的行距离,我们能够参阅之前的文章【css怎么设置行距离?css文本文字的行距离设置】,希望对我们有所帮助。
3、css设置文本文字的水平对齐办法的特点
text-align特点:设置元素中的文本文字的水平对齐办法。用法如下:
text-align:left||right||center||justify;
left:设置文本文字左对齐。默认值:由浏览器决议。
right:设置文本文字右对齐。
center:设置文本文字居中对齐。
justify:完成两端对齐文本作用。
4、css文本缩进特点
text-indent特点:设置文本缩进。
具体csstext-indent特点是怎样设置文本缩进的,我们能够参阅【css怎么完成首行缩进作用?text-indent特点完成首行缩进】。
5、设置文本文字装饰作用
text-decoration特点:界说添加到文本的润饰。
阐明:
这个特点允许对文本设置某种作用,如加下划线。如果子孙元素没有自己的装饰,先人元素上设置的装饰会“延伸”到子孙元素中。
用法:
text-indent:none||[underline(下划线)||overline(上划线)||line-through(中划线)]||blink;
none:默认值,界说规范的文本。
underline:界说文本下的一条线。
overline:界说文本上的一条线。
line-through:界说穿过文本下的一条线。
blink:界说闪耀的文本。
6、文本字符的大小写转换特点
text-transform特点:控制文本字符的大小写。
用法:
text-transform:uppercase(全大写)||lowercase(全小写)||capitalize(首字母大写)||none;
我们能够参阅文章【css怎么设置字母的大小写?text-transform特点设置字母的大小写】,里面有具体介绍。
7、文本文字距离的特点
word-spacing特点:设置文字或单词之间的距离,单词之间的距离=word-spacing+空格大小。
letter-spacing特点:设置字母间的间隔。
我们能够参阅文章【css怎么设置文字距离?word-spacing特点与letter-spacing特点的简单比较】,里面介绍了word-spacing特点和letter-spacing特点设置文本文字的距离的办法,以及它们的区别。
8、文本文字暗影的特点
text-shadow特点:向文本文字设置暗影
作品标签:
优秀作品:
最新作品:
评论列表(共120人参与)参与讨论或分享设计作品获得视觉癖积分奖励
elDRA注册会员
2020-09-30 4:28:39
v> 3 悄悄的画两条线。在顶部稍下的方位水平画一条线。你的标题将会放在这条线上。在底部稍上的方位也画这样一条线。这里能够增加一些你希望人影1" src="/uploads/allimg/201005/1-201005163R6.jpg"
回复ttom注册会员
2020-09-30 22:55:13
学 清华大学游客
2020-09-30 13:40:52
游客34547:text-decoration属> 了解规划的定义和概念将是了解规划的第一步,有助于了解咱们作为一名准平面规划师的职责规模。 第一节:平面规划的正名与分类 iv> 家装手绘墙画背景墙图片大全
回复 作业内注册会员
2020-09-30 13:20:46
iv style="text-align: center;"> " src="/uploads/allimg/201013/1-201013215047.jpg" style="height: 300px; width: 4
回复