本文介绍了CSS中用于文本样式的设置，包括text-align用于文本对齐，text-decoration用于去除文本下划线，text-transform用于控制文本大小写，text-indent用于首行缩进，以及line-height、letter-spacing、text-shadow等属性的用法，展示了如何通过这些属性增强网页文本的视觉效果。
一、CSS常用文本设置
1.文本位置：text-align
2.设置或删除文本装饰：text-decoration 属性值为 [underline overline line-through]
3.指定文本中英文大小写：text-transform
[lowercase小写 uppercase大写 capitalize首字母大写]
4.指定文本第一行进行缩进：text-indent
5.设置字符间距：letter-spacing
6.设置行高：line-height
7.设置文本阴影：text-shadow
text-shadow: h-shadow[水平阴影的位置] v-shadow[垂直阴影的位置] blur[模糊的距离] color[阴影的颜色。]
8.单词与单词之间的距离：word-spcing
9.设置一个元素的垂直对齐方式：vertical-align：[top,middle,bottom]
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css设置文本样式设置</title>
<style>
#p1{text-align: center;}
a[target]{text-decoration: none;}
#p3{text-transform: uppercase;}
#p4{text-indent: 50px;}
#p5{letter-spacing: 70px;}
#p6{line-height: 70px;}
#p7{text-shadow: 50px 3px 2px blueviolet;}
#p8{word-spacing: 80px;}
img[src]{vertical-align: text-bottom;}
#img1{vertical-align: text-top;}
.images{vertical-align: middle;}
#p9{line-height: 100px;}
.line{line-height: 600px;}
</style>
</head>
<body>
<h3>1.color设置字体颜色</h3>
<p id="p1">2.text-align:设置文本水平对齐方式，值有left，right，center</p>
<P id="p2">3.text-decoration:设置或删除文本的装饰[underline overline line-through]</P>
<a href="https://www.baidu.com/" target="_self">百度</a>
<p>4.text-transform:用来指定在一个文本中的大写和小写字母</p>
<p id="p3">sdfsdfasdf用来指定在一个文本中的大写和小写字母</p>
<p id="p4">text-indent:指定文本的第一行的缩进[数字px]</p>
<p id="p5">letter-spacing:设置字符间距[数字px]-----中英文都有效</p>
<p id="p6">line-height:设置行高[数字px]<br>line-height:设置行高[数字px]</p>
<p id="p7">text-shadow :设置文字阴影<br>
text-shadow: h-shadow[水平阴影的位置] v-shadow[垂直阴影的位置] blur[模糊的距离] color[阴影的颜色。];
</p>
<p>word-spacing：词与词之间的距离----只对英文有效</p>
<p id="p8">I like basketball</p>
<p>设置一个元素的垂直对齐方式[top,middle,bottom]</p>
<p>设置一个<img src="number.png">的对齐位置------>text-bottom</p>
<p id="p9">设置一个<img id="img1" src="number.png">的对齐位置------>text-top</p>
<p class="line">设置一个<img class="images" src="number.png">的对齐位置------>middle</p>
</body>
</html>
扫一扫
3909
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
