0 前言

本文介紹CSS中為文本添加樣式，包括字體、粗體/斜體、字體大小、行高、顏色、背景等等。
參考書為人民郵電出版社的《HTML5與CSS3基礎教程》。

1 字體

1.1 字型

模板：

選擇器 {
	font-family： name；
}

其中“name”為字型的名稱，一般會寫若干個，當?shù)谝粋€不能用的時候順延至第二個，以此類推。
例：

h1{
	font-family: arial, helvetica, sans-serif;
}

在OS X系統(tǒng)中，Genava和Gill Sans很常見。
OS X和Windows上默認都有的字體： Arial、Comic Sans MS、Courier New、 Georgia、 Impact、Trebuchet MS、Times New Roman和Verdana。

1.2 粗體

模板：

選擇器 {
	font-weight: bold;
}

或者輸入100~900之間的100的整數(shù)。400表示正常，700表示粗體。
除bold外，還有bolder（更粗）、lighter（更細）

1.3 字體大小

模板：

選擇器 {
	font-size: 數(shù)值px/em;
}

px即像素值，em表示相對父元素的倍數(shù)
例：

body{
	font-size: 100%；/* 16px */
}
h1{
	font-size: 1.75em; /* 28/16px*/
}
h2{
	font-size: 20px;
}

其中，h1的字體大小是父元素（body）的1.75倍（即1.75em），也就是16*1.75=28px，h2的字體大小是20像素。

1.4 行高

段落的行間距。
模板：

選擇器 {
	font-size: 1.0625em;
	line-height: 數(shù)值;
}

數(shù)值為純數(shù)字，沒有單位，行高=數(shù)字*字體大?。╢ont-size）。

1. 5 字體簡記

把字體、粗體、字體大小、行高等放在一起。
模板：

選擇器{
	font: [字型] [粗細] [小型大寫字母] 字體大小 行高; 
}

其中，中括號里面的是可選項。
字型：normal、italic或oblique
粗細：normal、bold、bolder、lighter或100的倍數(shù)
小型大寫字母：normal、small-caps

1.6 間距
字間距：word-spacing，單詞之間的距離
字偶距：letter-spacing，字母之間的距離

選擇器{
	word-spacing: 2em;
	letter-spacing: 7px;
}

1.7 縮進

p {
	text-indent: 2em;
}

1.8 大小寫
模板：

選擇器{
	text-transform: uppercase;
}

值有四種：
captitalize：每個單詞的首字母大寫
uppercase：所有字母大寫
lowercase：所有字母小寫
none：保持原來樣子

1.8 小型大寫字母
字母大寫，體積和小寫字母相同。

選擇器{
	font-variant: small-caps;
}

值有兩種：
small-caps：小型大寫字母
none：取消小型大寫字母

1.9 劃線

下劃線、上劃線和刪除線

選擇器{
	text-decoration: underline;
}

值有四種：
underline：下劃線
overline：上劃線
line-through：刪除線
none：取消劃線

1.10 空白屬性
讓瀏覽器顯示HTML中的空格。

選擇器{
	white-space: pre;
}

值有三種：
nowrap：所有空格不斷行
pre：讓瀏覽器顯示原文本中所有的空格和回車
normal：按正常方式處理空格

2 顏色

模板：

選擇器{
	color: 數(shù)值;
}

顏色的數(shù)值有三種形式：
（1）顏色名稱。例如：blue
（2）rgb形式。例如：rgb(89, 0, 127)
（3）十六進制形式。例如：#59007f
第三種較為常見。

舉例：

h2{
	color: blue;
	color: rgb(89, 0, 127);
	color: #59007f;
}

3 背景

模板：

選擇器{
	background-color: 數(shù)值1;
	background-image: url(image.png);
	background-repeat: repeat;
	background-attachment: fixed;
}

顏色的形式同上面的color。
url是圖像的路徑及名稱。
background-repeat表示是否重復，有四個值：repeat、repeat-x、repeat-y和no-repeat。
background-attachment表示圖像是否隨頁面滾動，有兩個值：fixed（圖像會附著在瀏覽器窗口上）、scroll（圖像會移動）。

可整合到一起，如下：

選擇器{
	background: [所有屬性];
}

所有可能的屬性用空格隔開，順序無所謂。