一、font-size
我來試一試：為第一段中的“膽小如鼠”設定字号為：20px，字型顔色為：red。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>字号、顔色</title>
<style type="text/css">
body{font-family:Microsoft Yahei;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> 二、font-weight:bold
我們還可以使用css樣式來改變文字的樣式：粗體、斜體、下劃線、删除線，可以使用下面代碼實作設定文字以粗體樣式顯示出來。
p span{font-weight:bold;} 在這裡大家可以看到，如果想為文字設定粗體是有單獨的css樣式來實作的，再不用為了實作粗體樣式而使用h1-h6或strong标簽了。
三、font-style：italic
以下代碼可以實作文字以斜體樣式在浏覽器中顯示：
p a{font-style:italic;}
<p>三年級時，我還是一個<a>膽小如鼠</a>的小女孩。</p> 四、text-decoration:underline
<!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> 五、text-decoration：line-through
如果想在網頁上設定删除線怎麼辦，這個樣式在電商網站上常會見到：
上圖中的原價上的删除線使用下面代碼就可以實作：
.oldPrice{text-decoration:line-through;}
六、text-indent:2em
注意：2em的意思就是文字的2倍大小。可以實作段前縮進兩字。
七、line-height:2em
了解為兩倍行距。
八、letter-spacing和word-spacing
如果想在網頁排版中設定文字間隔或者字母間隔就可以使用 letter-spacing 來實作，如下面代碼：
h1{
letter-spacing:50px;
}
...
<h1>了不起的蓋茨比</h1> 注意：這個樣式使用在英文單詞時，是設定字母與字母之間的間距。
單詞間距設定：
如果我想設定英文單詞之間的間距呢？可以使用 word-spacing來實作。如下代碼：
h1{
word-spacing:50px;
}
...
<h1>welcome to imooc!</h1> 九、text-align:center
想為塊狀元素中的文本、圖檔設定居中樣式嗎？可以使用text-align樣式代碼，如下代碼可實作文本居中顯示。(那麼什麼是塊狀元素呢？在後面的11-1、11-2小節中會講到。)
h1{
text-align:center;
}
<h1>了不起的蓋茨比</h1> 同樣可以設定居左：
h1{
text-align:left;
}
<h1>了不起的蓋茨比</h1> 還可以設定居右：
h1{
text-align:right;
}
<h1>了不起的蓋茨比</h1>
..............
<!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.mukewang.com/52b4113500018cf102000200.jpg" ></div>
</body>
</html> 作者：火星十一郎
本文版權歸作者火星十一郎所有，歡迎轉載和商用，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利.
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)