我們可以使用css樣式為網頁中的文字設定字型、字型大小、顏色等樣式屬性。下面我們來看一個例子，下面代碼實現：為網頁中的文字設定字型為宋體。
body{font-family:"宋體";}1
這裡注意不要設定不常用的字型，因為如果使用者本地電腦上如果沒有安裝你設定的字型，就會顯示瀏覽器預設的字型。（因為使用者是否可以看到你設定的字型樣式取決於使用者本地電腦上是否安裝你設定的字型。）
現在一般網頁喜歡設定“微軟雅黑”，如下代碼：
body{font-family:"Microsoft Yahei";}1
或
body{font-family:"微軟雅黑";}1
注意：第一種方法比第二種方法相容性更好一些。
因為這種字型即美觀又可以在用戶端安全的顯示出來（使用者本地一般都是預設安裝的）。
樣本
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>認識html標籤</title><style type="text/css">body{ font-family:"Microsoft Yahei";}span{ font-family:"宋體";}</style></head><body> <h1>三年級</h1> <p>三年級<span id="stress">三年級</span>三年級</p> <p>三年級</p></body></html>1234567891011121314151617181920
可以使用下面代碼設定網頁中文字的字型大小為12像素，並把字型顏色設定為#666(灰色)：
body{font-size:12px;color:#666}1
樣本
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>字型大小、顏色</title><style type="text/css">body{font-size:12px;color:#666;}.stress{font-size:20px;color:red;}</style></head><body> <h1>三年級</h1> <p>三年級<span class="stress">三年級</span>三年級</p> <p>三年級<span>三年級</span>三年級</p></body></html>12345678910111213141516
我們還可以使用css樣式來改變文字的樣式：粗體、斜體、底線、刪除線，可以使用下面代碼實現設定文字以粗體樣式顯示出來。
p span{font-weight:bold;}1
在這裡大家可以看到，如果想為文字設定粗體是有單獨的css樣式來實現的，再不用為了實現粗體樣式而使用h1-h6或strong標籤了。
樣本
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>粗體簽</title><style type="text/css">p span{font-weight:bold;}a{font-weight:bold;}</style></head><body> <h1>三年級時</h1> <p>三年級時<span class="stress">三年級時</span>三年級時<a href="http://www.imooc.com">三年級時</a>三年級時</p> <p>三年級時</p></body></html>12345678910111213141516
以下代碼可以實現文字以斜體樣式在瀏覽器中顯示：
p a{font-style:italic;}<p> 三年級 <a> 四年級 </a> 五年級 </p>12
樣本
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>斜體樣式</title><style type="text/css">p{ font-style:italic; }a{ font-weight: bold; color: red; font-style: normal;}</style></head><body><p>三年級<a>三年級</a>三年級</p> </body></html>1234567891011121314151617181920
有些情況下想為文字設定為底線樣式，這樣可以在視覺上強調文字，可以使用下面代碼來實現：
p a{text-decoration:underline;}<p> 三年級 <a> 四年級 </a> 五年級 </p>12
樣本
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>底線樣式</title><style type="text/css">a { text-decoration:underline; }span { text-decoration:underline;}</style></head><body><p><span>三年級</span><a> 四年級 </a> 五年級 </p></body></html>123456789101112131415161718
如果想在網頁上設定刪除線怎麼辦，這個樣式在電商網站上常會見到：
中的原價上的刪除線使用下面代碼就可以實現：
.oldPrice{text-decoration:line-through;}1
樣本
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>刪除樣式</title><style type="text/css">.oldPrice{text-decoration:line-through;}</style></head><body><p>原價：<span class="oldPrice">300</span>元 現價：230 元</p> </body></html>12345678910111213
中文文字中的段前習慣空兩個文字的空白，這個特殊的樣式可以用下面代碼來實現：
p{text-indent:2em;}<p>1922年的春天，一個想要成名名叫尼克卡拉威（托比?馬奎爾Tobey Maguire 飾）的作家，離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士流行，走私為王，股票飛漲的時代。為了追尋他的美國夢，他搬入紐約附近一海灣居住。</p>12
注意：2em的意思就是文字的2倍大小。
樣本
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>縮排樣式</title><style type="text/css">p{text-indent:2em;};</style></head><body> <h1>尼克?卡拉威</h1> <p>1922年的春天，一個想要成名名叫尼克?卡拉威（托比?馬奎爾Tobey Maguire 飾）的作家，離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士流行，走私為王，股票飛漲的時代。為了追尋他的美國夢，他搬入紐約附近一海灣居住。</p> <p>菲茨傑拉德，二十世紀美國文學巨擘之一，兼具作家和編劇雙重身份。他以詩人的敏感和戲劇家的想象為"爵士時代"吟唱華麗輓歌，其詩人和夢想家的氣質亦為那個奢靡年代的不二註解。</p></body></html>123456789101112131415
這一小節我們來學習一下另一個在段落排版中起重要作用的行間距（行高）屬性（line-height），如下代碼實現設定段落行間距為1.5倍。
p{line-height:1.5em;}<p>菲茨傑拉德，二十世紀美國文學巨擘之一。</p>12
樣本
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>行間距</title><style type="text/css">p{line-height:2em;}</style></head><body><p>菲茨傑拉德，二十世紀美國文學巨擘之一。</p></body></html>12345678910111213
中文字間隔、字母間隔設定：
如果想在網頁排版中設定 文字間隔 或者 字母間隔 就可以使用 letter-spacing 來實現，如下面代碼：
h1{ letter-spacing:50px;}...<h1>了不起的喬布斯</h1>12345
注意：這個樣式使用在英文單詞時，是設定字母與字母之間的間距。
單詞間距設定：
如果我想設定英文單詞之間的間距呢？可以使用 word-spacing 來實現。如下代碼：
h1{ word-spacing:50px;}...<h1>welcome to iOS!</h1>12345
樣本
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>字間距</title><style type="text/css">h1{ letter-spacing:20px;}</style></head><body><h1>hello world!你好！</h1></body></html>123456789101112131415
注意
當設定元素為英文時，letter-spacing 設定不是英文單詞的間隔，而是字母間的間隔。
想為 塊狀元素 中的文本、圖片設定置中樣式嗎？可以使用text-align樣式代碼，如下代碼可實現文本置中顯示。
h1{ text-align:center/left/right;}<h1>了不起的喬布斯</h1>1234
樣本
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>對齊</title><style type="text/css">div{ text-align:center;}</style></head><body><div><img src="http://img.com/2000200.jpg" ></div></body></html>123456789101112131415Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
