本篇學習資料主要講解：
如何用css 的樣式定義方法來介紹文字的使用。
第（1）節：用css設置文本樣式。
一、弄懂文本文字的制作、利用css的樣式定義版面的編排。
1、顏色定義、文本的背景顏色
（1） 在CSS里顏色的定義有四種方法：
一，用顏色的名稱；
如：h1{color:red;}
二，以十六進制數;
如：h1{color:#FF0000;}
三，以RGB整數設置顏色；
如：h1{ color:rgb(255,0,0) }
四，以RGB百分數設置顏色;
如：h1{ color:rgb(0%,0%,100%) }
（2）設置文本的背景顏色,如下：
h1{
background:#000； /*黑色*/
color：white； /*白色*/
}
2、長度單位
在css中，文字的大小設置、圖片的長寬設置，有很多的選擇去設置，可以用多種長度單位，然而主要分為兩類，一種是相對類型、另一種是絕對類型。
<1>相對類型
（1）“px ”像素:
根據顯示設備的分辨率的多少而代表不同的長度，因此它屬於相對類型。
例如：在1024*768的分辨率中設置一張圖片的高度為200 px，在同樣的大小的顯示器換成1366*768的分辨率時，就會發現圖片相對變小了。
<2>絕對類型
“所謂的絕對”：無論顯示設備的分辨率為多少時，都代表相同的長度。
**在網頁制作中已經默認以像素為尺度單位，如果沒加尺度單位，瀏覽器就會默認以像素為單位顯示。
3、設置文字。
（1）字體、（2）傾斜、（3）加粗、（4）大小、（5）英文字母大小寫的轉換、
（6）裝飾效果、 (7)段落首行縮進 、（8）字詞間距 、 (9)段落內部的文字行高
（10）段落之間的距離、（11）文本的水平位置
（1）設置文字的字體
在css中，設置文字的字體是通過使用font-family屬性來實現的。接下來將“隨意”准備一小段文章的網頁，進行解說設置文字的字體。
如下：
*****頭部代碼省略****
<body>
<h1>康熙</h1>
<p>the Kangxi Emperor (May 4, 1654 – December 20, 1722) was the third Emperor of the Manchu Qing dynasty, and the second Qing emperor to rule over all of China, from 1661 to 1722.</p>
<p>愛新覺羅·玄燁（穆麟德：Hiowan Yei，1654年5月4日—1722年12月20日），清朝第四位皇帝、清定都北京后第二位皇帝。年號“康熙”[1] ，后世稱呼為康熙帝。蒙古人稱為恩赫阿木古朗汗（Enkh Amgahan）或阿木古朗汗（蒙語“平和寧靜”之意，為漢語“康熙”的意譯）。 康熙帝是中國統一的多民族國家的捍衛者，奠定了清朝興盛的根基，開創出康乾盛世的局面，[2] 被后世學者尊為“千古一帝”[3-5] ，廟號聖祖，謚號合天弘運文武睿哲恭儉寬裕孝敬誠信功德大成仁皇帝，葬於景陵。</p>
</body>
</html>
CSS ：
<style type="text/css"> h1{ font-family:黑體； } p{ font-family:Arial,"Times New Roman" }
</style>
以上css語句聲明了html網頁（“一小段文章的網頁”）中H1標題和文本段落的字體名稱為黑體，並且對文本段落同時聲明了兩個字體的名稱，
分別為 Arial字體和 Times New Roman字體。它的意思是告訴瀏覽器首先在訪問者的計算機中尋找Arial字體，若沒有，就尋找Times New Roman字體，
如果訪問者的計算機中沒有此兩種字體，則使用瀏覽器的默認字體顯示。
（第一案列圖）：
案列圖中可以看到，標題和第一正文段落中的字體都發生了變化，而第二個段落的是中文，因此引英文字體對這個段落中的中文是無效的。
font-family屬性可以同時聲明多種的字體，只要字體之間用逗號隔開就可以了。
（2）設置文字的傾斜
在css中，設置文字的傾斜效果是通過使用font-style屬性來實現的。文字的傾斜並不是真的通過把文字”拉斜“實現的，其實傾斜的字體本身就是一種獨立存在的字體。
font-style屬性是控制字體傾斜的，它可以設置為正常、意大利體、傾斜，三種樣式分別如下：
font-style：normal； /* 正常*/ font-style：oblique； /* 意大利體*/ font-style：italic； /* 傾斜*/
可以用上面的網頁（第一案列圖）在第一段那設置一個ID選擇器嘗試一下，案例圖如下：
（3）設置文字的加粗
在css中，設置文字的加粗效果是通過使用font-weight屬性來實現的。
font-weight屬性是控制文字的的粗細的，它可以設置為正常、加粗，分別如下：
font-weight：normal； /* 正常*/ font-weight：bold； /*加粗*/
下面的案例圖是設置一個“加粗”類型的：
（4）控制文字的大小
在css中，控制文字的大小效果是通過使用font-size屬性來實現的。
如下：font-size:15px;
（5）英文字母大小寫的轉換
在css中，英文字母大小寫的轉換 是通過使用font-transfrom屬性來實現的，它可以設置為 單詞首字母大寫、所有字母大寫、所有字母小寫，如下：
p.one{text-transform:capitalize;} /*單詞首字母大寫*/ p.two{text-transform:upercase;} /*所有字母大寫*/
p.three{text-transform:lowercase;} /*所有字母小寫*/
可以用上面的網頁（第一案列圖）在第一段那設置一個標記類別選擇器嘗試一下把首字母變大寫，案例圖如下：
（6）文字的裝飾
在css中，為文字加下划線、刪除線和頂線等多種裝飾效果是通過使用text-decoration屬性實現的。
text-decoration:none； /*正常顯示*/ text-decoration:underline; /*為文字加下划線*/ text-decoration:line-through; /*為文字加刪除線 */ text-decoration:overline; /*為文字加頂線*/ text-decoration:blink; /*文字閃爍，僅部分瀏覽器支持*/
這個屬性可以同時設置多個屬性值，用空格分隔即可。如:h1{ text-decoration:underline overline ;}
(7)段落首行縮進
在css中，專門有一個text-decoration屬性可以控制段落的首行縮進和縮進的距離。
#p2{text-decoration:2em;}
可以用上面的網頁"第一案列圖"中的第二段落進行設置，效果圖如下：（紅色圈那里）
（8）設置字詞間距
在css中，可以通過letter-spacing和word-spacing這兩個屬性分別控制字母間距和單詞的間距。
letter-spacing:-1px;
word-spacing:-2px;
如果要設置文字之間的距離，需要設置letter-spacing屬性，而不是word-spacing屬性。
（9）設置段落內部的文字行高。
在css中，控制行與行之間的距離是通過line-height屬性實現的。
.p2{ line-height:4; }
效果圖如下：
效果圖中可以看到第二段落內部文字的行與行之間的距離比第一段落內部文字的行與行之間的距離要大一些。
（10）段落之間的距離
在css中，設置段落之間的距離是通過margin屬性來實現的。 margin /*外邊距*/
p{ margin:50px 0px; /*上下距離為5個像素*/ /*左右距離為0個像素*/ }
還沒設置之前的效果：
設置后的效果：
兩個圖的對比可以明顯看出段落之間的距離是不同的。
（11）文本的水平位置
在css中，控制文本的水平位置是通過text-align屬性來實現的。
text-align:left ; /*左對齊，也是瀏覽器的默認的*/ text-align:right ; /*右對齊*/ text-align:center; /*居中對齊*/
text-align:justify; /*兩端對齊*/
這里就不詳細介紹了......
以上介紹了使用css設置文本相關的各種樣式的方法，以上這些屬性主要可以分為兩類：以“font”開頭的屬性、以“text”開頭的屬性。