css-文字屬性
阿新 • • 發佈：2018-11-21
一、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>