CSS——文字效果
我們這次，就來看一下文字效果。文字效果就是對文字的修飾啦。
text-indent
首行縮排的利器。我們可以通過設定text-indent來實現段落的首行縮排。
示例程式碼如下：
CSS
p {
text-indent:10px;
}
HTML
<p>這是一段文字</p>
效果就不演示了。這一段文字被從左到右縮進了10px。
當然，這還能負縮排。
在這裡展現一個奇妙的隱藏文字的方法。我們通過在文字的CSS裡面加入一個背景圖片，然後將文字負縮排，就可以實現只出現圖片而沒有文字的方法。
示例程式碼如下，這裡就給完全程式碼了：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> h1 { width:360px; height:360px; background-image: url(https://s3.ax1x.com/2020/11/21/D1imFA.jpg); text-indent:-9999px; /*將文字偏移到完全看不見，建議設定-9999及更大，否則會因為負縮排過小看到文字*/ } </style> </head> <body> <h1>這段文字被隱藏了</h1> </body> </html>
這裡是程式碼演示。如果複製這段原始碼，將text-indent:-9999px;這一段刪除，儲存重新整理之後會看到h1的文字。
但是我們還有一種效果，等同於上面這種做法，看一眼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> h1 { width:360px; height:360px; background-image: url(https://s3.ax1x.com/2020/11/21/D1imFA.jpg); } h1 span { display:none; /*通過不顯示來隱藏文字*/ } </style> </head> <body> <h1><span>這段文字被隱藏了</span></h1> </body> </html>
span的原理是當作一個h1的“替死鬼”，因為不可能把h1隱藏掉，這樣的話圖片也沒了。所以需要再內建一個沒有任何效果的span來消除掉。
雖然這也可以，但是h1是有權重的。權重就是在搜尋引擎眼裡的重要性。消除顯示之後，權重也會丟失，以後通過搜尋引擎搜尋的時候就會排得很後面，h1就沒用了。
text-align
可以設定該屬性決定對齊方式。
對齊方式有left(左對齊)、right(右對齊)和center(居中)。
示例程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> h1 { text-align:center; } </style> </head> <body> <h1>文字</h1> </body> </html>
就不演示了，複製過去嘗試一下就知道了。當然最神奇的，就是當圖片在元素中時，也可以被居中。示例程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
text-align:center;
}
</style>
</head>
<body>
<div>
<img src="https://s3.ax1x.com/2020/11/21/D1imFA.jpg" />
</div>
</body>
</html>
這裡是演示。
在這裡，圖片放在div中，div幹什麼，圖片就幹什麼。所以div一居中，圖片也跟著居中了。
text-decoration
我最愛的效果之一，它能在什麼地方用呢？當我們讓連結變得好看的時候，就可以用它。
在這裡，我們使用:hover來模擬懸停的效果。做到當滑鼠沒放在連結上時，就是普通連結，顏色為紅色。滑鼠懸停在文字上時，就有下劃線出現，顏色變成藍色。
第一步示例程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
div {
text-align: center;
font-size:30px;
}
</style>
</head>
<body>
<div><a href="####">示例範本</a></div>
</body>
</html>
大家自行將程式碼複製一下執行，就會看到這個被新增超連結的文字底下有一個下劃線，字型是藍色的，點選之後變成了紫色。
我們現在通過text-decoration來取消它的下劃線，並新增懸停顯示下劃線並更改顏色的效果。
示例程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
div {
text-align: center;
font-size:30px;
}
a {
text-decoration: none;
color:red;
}
a:hover {
text-decoration:underline;
color:skyblue;
}
</style>
</head>
<body>
<div><a href="####">示例範本</a></div>
</body>
</html>
這裡是程式碼演示。這裡一般在一些普通的地方會有這樣的效果，但是為了美觀，儘量少用這個吧。