第7章：文本效果
7.1 常用的文本基礎的樣式屬性
| 屬性 | 說明 |
|---|---|
| text-decoration | 文本裝飾，可以設置下劃線、刪除線、頂劃線 |
| text-transform | 文本裝換，可以將文本進行大小寫轉換 |
| font-variant | 文本變形，可以將英文文本準換成“小型”大寫字母 |
| text-indent | 設置段落首行縮進 |
| text-align | 設置文本水平對齊 |
| vertical-align | 設置文本垂直對齊 |
| line-height | 行高 |
| letter-spacing | 單詞的間距 |
| word-spacing | 詞語的間距 |
7.2 深入text-indent
-
text-indent屬性除了可以定義段落的首行縮進之外，還有另外一個設置LOGO的技巧。 - 由于搜索引擎無法識別圖片，只能識別文字。我們通過一個
<h1>標簽中設置背景圖片指定LOGO，然后通過text-indent:-9999px來隱藏標題的文字內容，以便進行更好的SEO優化。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h1{
width: 200px;
height: 100px;
background-image: url(img/logo.jpg);
background-repeat: no-repeat;
text-indent: -9999px;
}
</style>
</head>
<body>
<h1>LOGO</h1>
</body>
</html>
解答疑惑：
- 為什么不通過
display:none來隱藏文字，而是通過text-indent:-9999px來隱藏文字？因為搜索引擎默認忽略display:none的內容- 為什么是
-9999px，而不是-999px或-99px？設置這一數值主要是為了讓文本的縮進足夠大，即便是大分辨率的顯示屏也看不到文字，而如今還沒有哪臺電腦的屏幕寬度能大于9999px
7.3 深入text-align
- 我們可以通過
text-align設置元素中文本或圖片的水平對齊方式，常見取值有：left(居左)、right(居右)、center(居中)、justify(兩端對齊，由于會產生一些問題，實際開發中少用)。
7.3.1 text-align起作用的元素
-
text-align屬性對block元素是不起作用的，起作用的元素只有文本、inline元素、inline-block元素。
7.3.2 text-align:center和margin:0 auto的區別
-
text-align:center用于設置文字、inline元素、inline-block元素的水平居中，應用于父元素； -
margin:0 auto用于設置block元素的水平居中，應用于當前元素；
7.4 深入line-heingt
7.4.1 關于line-heingt的概念
頂線、中線、基線和底線
- 所謂頂線、中線、基線和底線，對應的是英文簿英文單詞的四條線，值得注意的是，基線是倒數第二條線，而底線才是最下面的線。
行高、行距與半行距
- 行高指的是“兩條基線之間的垂直距離”
- 行距則是上一行的底線到下一行底線的垂直距離，或者說兩行文字之間的空隙
- 半行距就是行距的一半
內容區與行框
- CSS中一行文字可以看成一個“行盒子”，而內容區，是指行盒子頂線到底線之間的垂直距離
- 行框是指兩行文字“行半距分割線”之間的垂直距離
7.4.2 height和line-height的區別
-
line-height定義的是每行文字的高度，而height定義的是整個段落的高度。比如將height和line-height定義成一樣，可以實現單行文字垂直居中的效果。
7.4.3 line-height的取值
取值為百分比或em值
- 當
line-height值為百分比值或者em值時，當前元素的行高是根據父元素的font-size值來計算的。計算公式如下：
line-height = (父元素 font-size) × (百分比)
line-height = (父元素 font-size) × (em值)
取值為當前元素font-size的倍數
- 當line-height屬性值為無單位的數值時，則以當前元素的
font-size值來計算，計算公式如下：
line-height = (當前元素 font-size) × (無單位數字)
7.5 深入vertical-align
7.5.1 vertical-align使用的元素
-
vertical-align屬性用于定義“周圍的文字、inline元素以及inline-block元素”相對于該元素基線的垂直對齊方式，該元素就是定義了vertical-align屬性的元素。
<!-- 雖然定義了strong元素，但會影響周邊文本垂直居中 -->
<span>恭喜發財，新年好</span>
<strong style="vertical-align: middle;font-size: 40px;;">2018年</strong>
<span>財源廣進，身體棒</span>
-
vertical-align對inline元素、inline-block元素和table-cell元素有效，對block元素無效。 - table-cell元素設置
vertical-align屬性和inline元素、inline-block元素設置是有區別的：- inline元素和inline-block元素的
vertical-align定義的是周圍的元素相對于當前元素的對齊方式； - table-cell元素的
vertical-align是針對自身而言的，定義的是內部子元素現對于自身的對齊方式；
- inline元素和inline-block元素的
7.5.2 vertical-align的取值
vertical-align屬性取值有三種情況：負值、百分比和關鍵字。-
vertical-align屬性最常用的取值成關鍵字：取值 說明 top 頂線對齊 middle 中線對齊 baseline 基線對齊 bottom 底線對齊 vertical-align還可以取值為負值，表示元素相對基線向下偏移，此方法常用于解決單選框或者復選框與文字垂直對齊的問題。vertical-align屬性取值可以為百分比，是相對于當前元素所繼承的line-height屬性值決定的。例如當前元素定義line-height:20px;vertical-align:50%;，則實際上等價于vertical-align:10px，表示該元素相對基線向上偏移10px
