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>