css文本属性
1.text-indent属性
(1)text-indent: 首行缩进
(2)例如:text-indent:30px; <!--首行缩进30个像素-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css 文本属性</title>
<style type="text/css">
#a {
text-indent: 30px;
}
</style>
</head>
<body>
<p>正常显示一段话</p>
<p id="a">这段话首行缩进显示</p>
</body>
</html>
2.text-align属性
(1)text-align: 文本的位置
(2)Left左对齐; center居中; right右对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css 文本属性</title>
<style type="text/css">
#a {
text-align: left;
}
#b{
text-align: center;
}
#c{
text-align: right;
}
</style>
</head>
<body>
<p>正常显示一段话</p>
<p id="a">这段话左对齐显示</p>
<p id="b">这段话居中显示</p>
<p id="c">这段话右对齐显示</p>
</body>
</html>
3.text-decoration属性
(1)text-decoration: 字体画线
(2)none无;underline下画线;line-through贯穿线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css 文本属性</title>
<style type="text/css">
#a {
text-decoration: none;
}
#b{
text-decoration: underline;
}
#c{
text-decoration: line-through;
}
</style>
</head>
<body>
<p id="a">这段话正常显示无下划线</p>
<p id="b">这段话下划线显示</p>
<p id="c">这段话贯穿线显示</p>
</body>
</html>
4.text-shadow属性
(1)text-shadow: 文本的文字是否有阴影及模糊效果
(2)取值:横向、纵向、偏移量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css 文本属性</title>
<style type="text/css">
#a {
text-shadow: 2px 2px 2px red;
}
#b{
text-shadow: 5px 5px 5px blue;
}
#c{
text-shadow: 10px 10px 10px green;
}
</style>
</head>
<body>
<p id="a">这段话正常阴影偏移小</p>
<p id="b">这段话正常阴影偏移多一点</p>
<p id="c">这段话正常阴影偏移再多一点</p>
</body>
</html>
5.direction属性
(1)direction:文字流方向。有ltr 和 rtl两种
(2)例如:direction:ltr;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css 文本属性</title>
<style type="text/css">
#a {
direction: ltr;
}
#b{
direction: rtl;
}
</style>
</head>
<body>
<p>这段话正常显示</p>
<p id="a">这段话看不出与正常的有啥区别</p>
<p id="b">这段话也看不出与正常的有啥区别</p>
</body>
</html>
6.letter-spacing属性
letter-spacing: 文字或字母的间距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css 文本属性</title>
<style type="text/css">
#a {
letter-spacing: 10px;
}
#b{
letter-spacing: 30px;
}
</style>
</head>
<body>
<p>这段话正常显示</p>
<p id="a">这段话字(字母)有间隔显示</p>
<p id="b">这段话字(字母)间隔大点显示</p>
</body>
</html>
7.word-spacing属性
word-spacing:单词间距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css 文本属性</title>
<style type="text/css">
#a {
word-spacing: 10px;
}
#b{
word-spacing: 30px;
}
</style>
</head>
<body>
<p>good morning</p>
<p id="a">good morning good afternoon</p>
<p id="b">good morning good afternoon</p>
</body>
</html>
8.line-height:行高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css 文本属性</title>
<style type="text/css">
#a {
line-height: 50px;
}
</style>
</head>
<body>
<p id="a">当我的笑灿烂像阳光 当我的梦做的够漂亮 这世界才为我鼓掌 只有你担心我受伤 全世界在等我飞更高
你却心疼我小小翅膀 为我撑起 沿途休息的地方
</p>
</body>
</html>