# 文本樣式
[TOC]
## 文本的顏色
顏色屬性被用來設置文字的顏色。
顏色是通過CSS最經常的指定：
* 十六進制值 - 如:＃FF0000。
* 一個RGB值-如:RGB\(255,0,0\)。
* 顏色的名稱 - 如:red。
```css
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
```
## 文本的水平對齊方式
文本排列屬性是用來設置文本的水平對齊方式。
文本可居中或對齊到左或右,兩端對齊.
當`text-align`設置為"justify"，每一行被展開為寬度相等，左，右外邊距是對齊（如雜志和報紙）。
```html
<style>
p {
text-align: justify;
}
</style>
<body>
<p>Be careful to perform the actions in the correct sequence.</p>
</body>
```
## 文本修飾
`text-decoration`屬性一般用于刪除鏈接的下劃線。
|值| 描述|
|---|---|
|none |默認。定義標準的文本。|
|underline |定義文本下的一條線。|
|overline |定義文本上的一條線。|
|line-through |定義穿過文本下的一條線。|
|blink |定義閃爍的文本。|
|inherit |規定應該從父元素繼承 text-decoration 屬性的值。|
```html
<style>
a {
text-decoration:none;
}
</style>
<body>
<a href="#">百度</a>
</body>
```
## 文本轉換
文本轉換屬性是用來指定在一個文本中的大寫和小寫字母。
可用于所有字句變成大寫或小寫字母，或每個單詞的首字母大寫。
```html
<style>
.uppercase {
text-transform:uppercase;
}
.lowercase {
text-transform:lowercase;
}
/* 首字母大寫 */
.capitalize {
text-transform:capitalize;
}
</style>
<body>
<p class="uppercase">Hello,World!</p>
<p class="lowercase">Hello,World!</p>
<p class="capitalize">hello,world!</p>
</body>
```
## 長度單位
* px：像素（pixel）,相對長度單位。相對于顯示器的分辨率，在國內網站使用較多。
* em：相對長度單位，相對當前對象的文字尺寸。一般是相對于瀏覽器默認字體的尺寸，國外網站使用較多。
* pt：點（point）,絕對單位，一般用于印刷。
## 文本縮進
`text-indent`屬性控制**首行文本**的縮進。
屬性值可以是固定值（包括負數），也可是百分比。
> 注意em單位一般代表網頁中一個字符的大小。
```html
<style>
p {
text-indent:2em;
}
</style>
<p>
南通渡課教育集團成立于2006年2月，學校秉承“學習改變命運、實訓提升實力”的理念，以就業為導向，強勢發展校企合作、
定向培養，借助南通和長三角地區軟件和服務外包興旺發達的產業優勢，累計為南通、上海、南京等城市培養和輸送專業人才6000余人。
</p>
```
## 字符間距和字間距
* letter-spacing屬性控制字符的間距。屬性值可以是正負數。
* word-spacing屬性控制字間距。
我們在這里設置CODING COFFEE的產品頁和首頁。
```css
p{
word-spacing: 5px;
letter-spacing: 5px;
}
```
## 行間距
`line-height`屬性控制行間距（簡稱行高）。
```html
<style>
p{
word-spacing: 5px;
letter-spacing: 5px;
line-height: 20px;
}
</style>
<p>A smooth, mild blend of coffees from Mexico
A smooth, mild blend of coffees from MexicoA smooth,
mild blend of coffees from MexicoA smooth,
mild blend of coffees from Mexico</p>
```
## 元素的垂直對齊方式
`vertical-align`屬性控制元素垂直對齊方式。
**vertical-align被用于垂直對齊inline元素，也就是display值為inline和inline-block的元素。**
> 也就是垂直居中是運用在行內元素的。
|值|描述|
|---|---|
|baseline| 默認。元素放置在父元素的基線上。|
|sub |垂直對齊文本的下標。|
|super |垂直對齊文本的上標。|
|top |把元素的頂端與行中最高元素的頂端對齊|
|text-top |把元素的頂端與父元素字體的頂端對齊|
|middle| 把此元素放置在父元素的中部。|
|bottom |把元素的頂端與行中最低的元素的頂端對齊。|
|text-bottom| 把元素的底端與父元素字體的底端對齊。|
|inherit |規定應該從父元素繼承 vertical-align 屬性的值。 |
~~~html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS</title>
<style>
img.top {
vertical-align:text-top;
}
img.bottom {
vertical-align:text-bottom;
}
.middle{
vertical-align:middle;
}
</style>
</head>
<body>
<p>一個<img src="logo.png" alt="w3cschool" width="270" height="50" />xxx默認對齊的圖像。</p>
<p>一個<img class="top" src="logo.png" alt="w3cschool" width="270" height="50" /> text-top 對齊的圖像。</p>
<p>一個<img class="bottom" src="logo.png" alt="w3cschool" width="270" height="50" /> xxxtext-bottom xxxxx對齊的圖像。</p>
<div class="middle">
Hello World
</div>
</body>
</html>
~~~
