1、text-decoration
- 常用值
- underline
- line-through
- overline
- none
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.item{
text-decoration: underline;
cursor: pointer; /* 鼠标显示成小手 */
}
.goole{
text-decoration: line-through;
}
.bing{
text-decoration: overline;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<div>
<a href="http://baidu.com">百度一下</a>
<span class="item">百度一下</span>
<span class="goole">谷歌一下</span>
<span class="bing">谷歌一下</span>
</div>
</body>
</html>
2、text-transform
- 常用值
- capitalize
- uppercase
- lowercase
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.capitalize{
/* 首字母大写 */
/* text-transform: capitalize; */
/* 小写转大写 */
/* text-transform: uppercase; */
/* 大写转小写 */
text-transform: lowercase;
}
</style>
</head>
<body>
<div>
<p class="capitalize">my name is zhouli</p>
</div>
</body>
</html>
3、text-indent
- 设置缩进
- text-indent: 2em; //刚好是两个字体宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.indent{
/* text-indent: 32px; */
/* em：相对于字体大小 */
text-indent: 2em;
}
</style>
</head>
<body>
<div>
<h2>标题</h2>
<p class="indent">都市的繁华迷乱了我的眼睛，找不到了自己，可故乡依在。纵使你在某个城市开心快乐的生活着，但在心灵深处，总有一条无形的东西牵引着你，一头在故乡那边，一头结固地栓在心底，一扯就痛。特别是久别故乡的人，也特别是夜深人静的时候，故乡这杯酒就愈香醇，故乡的影像就愈清晰，香醇的不想醒来，清晰的叫人心疼。“离恨恰如春草，更行更远还生。”就是因为这纵使走到天涯海角也解不开的乡情和乡愁，才让漂泊的我们得以慰藉，让流浪的心不再孤寂。</p>
</div>
</body>
</html>
4、text-align(很重要的属性)
- MDN：定义行内内容（例如文字）如何相对它的块父元素对齐
- 行内级居中
- 常用的值
- left：左对齐
- rigth：右对齐
- center：正中间显示
- justify：两端对齐（对最后一行无效）
5、word-spacing
6、letter-spacing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.space{
letter-spacing: 10px;
word-spacing: 20px;
}
</style>
</head>
<body>
<div class="space">
My Name Is Zhouli
</div>
</body>
</html>
![CSS的伪元素和伪类的区别[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)