003-css外觀屬性（color、行間距、水平居中、首行縮排、字間距、文字陰影）

一、color顏色

    color用於定義文字顏色，取值方式有三種：

        ① 英文單詞red、green。。。

        ② RGB值，如rgb(255,0,0)。

        ③ 十六進位制，如，#000000就是黑色（可以簡寫成#000）。

二、line-height 行間距

    有豎直居中的效果。

語法：

line-height: 26px;

在沒有使用行間距的效果的時候：

使用之後：

很明顯，行與行之間的間距變寬了，比沒有使用之前看著更加舒適。

那麼對於豎直居中的效果，比如一個塊級元素裡寫一行字。

程式碼部分：

<div>
	些成功的強者不是沒有眼淚，而是可以含著眼淚向前跑。
</div>

div {
	height: 400px;
	width: 400px;
	background-color: skyblue;
}

那麼效果就是（左圖）：

如果新增行間距的屬性：

line-height: 400px;

那麼效果就會變成右圖的樣子，實現文字垂直居中。

三、text-align 水平對齊方式

有三個值：

像上面的例子，如果在div裡新增文字水平居中的屬性，效果就會變成一下的樣子：

四、text-indent 首行縮排

對於漢字文章，單位推薦是em，1em=1個漢字的寬度。

語法：

text-indent: 2em;

效果（借用上面的例子）：

五、字間距

1. 字間距letter-spacing

預設值是normal。字元與字元之間的空白，英文與中文均有效。

2. 單詞間距word-spacing

預設值是normal。英文單詞之間的間距，中文無效。

注意：如果兩者都用英文，會有什麼的效果？

<p class="pp">hasdhahdahdahd hadhahda ahdshad ahsdhad</p>

首先是letter-spacing

.pp {
	word-spacing: 10px;
}

效果（圖片寬800）：

其次是word-spacing

.pp {
	letter-spacing: 10px;
}

效果是（寬800）：

很明顯，word-spacing對字母之間也產生間距，不建議適用於文章中。

六、顏色半透明名rgba()

語法：

rgba(x,y,z,a);

x,y,z是0-255之間的數字，閉區間。a是[0,1]之間的數，表示透明度，越接近1，透明度越低。

七、文字陰影text-shadow

水平位置和垂直位置就是陰影相對於文字的座標，向右為x正軸，向下為y正軸。

如：

<p class="shadow">成功的強者不是沒有眼淚</p>

.shadow {
	font-size: 40px;
	font-weight: bold;
	text-shadow: 5px 5px 0px rgba(0,0,0,0.5);
}

此時的模糊距離先是0，效果是：

此時加上模糊距離，模糊距離為5px.

.shadow {
	font-size: 40px;
	font-weight: bold;
	text-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}

則這時的效果是：

有了模糊距離，效果更好，會使陰影的邊緣銳化，模糊一點，效果更佳。當然根據個人喜好。