精心整理了之前的css學習筆記，僅供學習參考使用，禁止商業用途 [TOC] CSS 簡介 1.CSS 簡介 CSS 概述 CSS 指層疊樣式表 (Cascading Style Sheets) 樣式定義如何顯示 HTML 元素樣式通常存儲在樣式表中把樣式添加到 HTML 4.0 中，是為瞭解決內 ...

精心整理了之前的css學習筆記，僅供學習參考使用，禁止商業用途

CSS 簡介

1.CSS 簡介

CSS 概述

CSS 指層疊樣式表 (Cascading Style Sheets)

樣式定義如何顯示 HTML 元素
樣式通常存儲在樣式表中
把樣式添加到 HTML 4.0 中，是為瞭解決內容與表現分離的問題
外部樣式表可以極大提高工作效率
外部樣式表通常存儲在 CSS 文件中
多個樣式定義可層疊為一

層疊次序

當同一個 HTML 元素被不止一個樣式定義時，會使用哪個樣式呢？

瀏覽器預設設置
外部樣式表
內部樣式表（位於 <head> 標簽內部）
內聯樣式（在 HTML 元素內部）

4 擁有最高的優先權。

2.CSS 基礎語法

CSS 語法

CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。

selector {declaration1; declaration2; ... declarationN }

每條聲明由一個屬性和一個值組成。
屬性（property）是您希望設置的樣式屬性（style attribute）。
每個屬性有一個值。
屬性和值被冒號分開。

selector {property: value}

下麵這行代碼的作用是將h1元素內的文字顏色定義為紅色，同時將字體大小設置為 14像素。

在這個例子中，h1 是選擇器，color 和 font-size 是屬性，red 和 14px 是值。

h1 {color:red; font-size:14px;}

下麵的示意圖為您展示了上面這段代碼的結構：

提示：請使用花括弧來包圍聲明。

值的不同寫法和單位

除了英文單詞 red，我們還可以使用十六進位的顏色值 #ff0000：

p { color: #ff0000; }

為了節約位元組，我們可以使用 CSS 的縮寫形式：

p { color: #f00; }

我們還可以通過兩種方法使用 RGB 值：

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

請註意，當使用 RGB 百分比時，即使當值為 0 時也要寫百分比符號。但是在其他的情況下就不需要這麼做了。比如說，當尺寸為 0 像素時，0 之後不需要使用 px 單位，因為 0 就是 0，無論單位是什麼。

記得寫引號

提示：如果值為若幹單詞，則要給值加引號：

p {font-family: "sans serif";}

多重聲明：

提示：如果要定義不止一個聲明，則需要用分號將每個聲明分開。下麵的例子展示出如何定義一個紅色文字的居中段落。最後一條規則是不需要加分號的，因為分號在英語中是一個分隔符號，不是結束符號。然而，大多數有經驗的設計師會在每條聲明的末尾都加上分號，這麼做的好處是，當你從現有的規則中增減聲明時，會儘可能地減少出錯的可能性。就像這樣：

p {text-align:center; color:red;}

你應該在每行只描述一個屬性，這樣可以增強樣式定義的可讀性，就像這樣：

p {
text-align: center;
color: black;
font-family: arial;
}

空格和大小寫

大多數樣式表包含不止一條規則，而大多數規則包含不止一個聲明。多重聲明和空格的使用使得樣式表更容易被編輯：

body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}

是否包含空格不會影響 CSS 在瀏覽器的工作效果，同樣，與 XHTML 不同，CSS 對大小寫不敏感。不過存在一個例外：如果涉及到與 HTML 文檔一起工作的話，class 和 id 名稱對大小寫是敏感的。

3.CSS 高級語法

選擇器的分組

用逗號對選擇器進行分組，分享相同的聲明

h1,h2,h3,h4,h5,h6 {
color: green;
}

繼承及其問題

根據 CSS，子元素從父元素繼承屬性。但是它並不總是按此方式工作。看看下麵這條規則：

body {
font-family: Verdana, sans-serif;
}

根據上面這條規則，站點的 body 元素將使用 Verdana 字體（假如訪問者的系統中存在該字體的話）。
通過 CSS 繼承，子元素將繼承最高級元素（在本例中是 body）所擁有的屬性（這些子元素諸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的規則，所有 body 的子元素都應該顯示 Verdana 字體，子元素的子元素也一樣。並且在大部分的現代瀏覽器中，也確實是這樣的。
但是在那個瀏覽器大戰的血腥年代里，這種情況就未必會發生，那時候對標準的支持並不是企業的優先選擇。比方說，Netscape 4 就不支持繼承，它不僅忽略繼承，而且也忽略應用於 body 元素的規則。IE/Windows 直到 IE6 還存在相關的問題，在表格內的字體樣式會被忽略。我們又該如何是好呢？

友善地對待Netscape 4

幸運地是，你可以通過使用我們稱為 "Be Kind to Netscape 4" 的冗餘法則來處理舊式瀏覽器無法理解繼承的問題。

body  {
font-family: Verdana, sans-serif;
}

p, td, ul, ol, li, dl, dt, dd  {
font-family: Verdana, sans-serif;
}

4.0 瀏覽器無法理解繼承，不過他們可以理解組選擇器。這麼做雖然會浪費一些用戶的帶寬，但是如果需要對 Netscape 4 用戶進行支持，就不得不這麼做。

繼承是一個詛咒嗎？

如果你不希望 "Verdana, sans-serif" 字體被所有的子元素繼承，又該怎麼做呢？比方說，你希望段落的字體是 Times。沒問題。創建一個針對 p 的特殊規則，這樣它就會擺脫父元素的規則：

body  {
font-family: Verdana, sans-serif;
}

td, ul, ol, ul, li, dl, dt, dd  {
font-family: Verdana, sans-serif;
}

p  {
font-family: Times, "Times New Roman", serif;
}

4.CSS 派生選擇器

派生選擇器

通過依據元素在其位置的上下文關係來定義樣式，你可以使標記更加簡潔。
在 CSS1 中，通過這種方式來應用規則的選擇器被稱為上下文選擇器 (contextual selectors)，這是由於它們依賴於上下文關係來應用或者避免某項規則。在 CSS2 中，它們稱為派生選擇器，但是無論你如何稱呼它們，它們的作用都是相同的。

派生選擇器允許你根據文檔的上下文關係來確定某個標簽的樣式。通過合理地使用派生選擇器，我們可以使 HTML 代碼變得更加整潔。

比方說，你希望列表中的 strong 元素變為斜體字，而不是通常的粗體字，可以這樣定義一個派生選擇器：

li strong {
font-style: italic;
font-weight: normal;
}

<p><strong>我是粗體字，不是斜體字，因為我不在列表當中，所以這個規則對我不起作用</strong></p>

<ol>
<li><strong>我是斜體字。這是因為 strong 元素位於 li 元素內。</strong></li>
<li>我是正常的字體。</li>
</ol>

在上面的例子中，只有 li 元素中的 strong 元素的樣式為斜體字，無需為 strong 元素定義特別的 class 或 id，代碼更加簡潔。
再看看下麵的 CSS 規則：

strong {
color: red;
}

h2 {
color: red;
}

h2 strong {
color: blue;
}

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

5.CSS id 選擇器

id 選擇器

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。

id 選擇器以 "#" 來定義。

下麵的兩個 id 選擇器，第一個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色：

#red {color:red;}
#green {color:green;}

下麵的 HTML 代碼中，id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元素顯示為綠色。

<p id="red">這個段落是紅色。</p>
<p id="green">這個段落是綠色。</p>

註意：id 屬性只能在每個 HTML 文檔中出現一次。想知道原因嗎，請參閱 XHTML:網站重構。

id 選擇器和派生選擇器

在現代佈局中，id 選擇器常常用於建立派生選擇器。

#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}

上面的樣式只會應用於出現在 id 是 sidebar 的元素內的段落。這個元素很可能是 div 或者是表格單元，儘管它也可能是一個表格或者其他塊級元素。它甚至可以是一個內聯元素，比如 或者 ，不過這樣的用法是非法的，因為不可以在內聯元素  中嵌入 

一個選擇器，多種用法

即使被標註為 sidebar 的元素只能在文檔中出現一次，這個 id 選擇器作為派生選擇器也可以被使用很多次：

#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}

#sidebar h2 {
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}

在這裡，與頁面中的其他 p 元素明顯不同的是，sidebar 內的 p 元素得到了特殊的處理，同時，與頁面中其他所有 h2 元素明顯不同的是，sidebar 中的 h2 元素也得到了不同的特殊處理。

單獨的選擇器

id 選擇器即使不被用來創建派生選擇器，它也可以獨立發揮作用：

#sidebar {
border: 1px dotted #000;
padding: 10px;
}

根據這條規則，id 為 sidebar 的元素將擁有一個像素寬的黑色點狀邊框，同時其周圍會有 10 個像素寬的內邊距（padding，內部空白）。

老版本的 Windows/IE 瀏覽器可能會忽略這條規則，除非你特別地定義這個選擇器所屬的元素：

div#sidebar {
border: 1px dotted #000;
padding: 10px;
}

6.CSS 類選擇器

在 CSS 中，類選擇器以一個點號顯示：

.center {text-align: center}

在上面的例子中，所有擁有 center 類的 HTML 元素均為居中。
在下麵的 HTML 代碼中，h1 和 p 元素都有 center 類。這意味著兩者都將遵守 ".center" 選擇器中的規則。

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

註意：類名的第一個字元不能使用數字！它無法在 Mozilla 或 Firefox 中起作用。

和 id 一樣，class 也可被用作派生選擇器：

.fancy td {
color: #f60;
background: #666;
}

在上面這個例子中，類名為 fancy 的更大的元素內部的表格單元都會以灰色背景顯示橙色文字。（名為 fancy 的更大的元素可能是一個表格或者一個 div）

元素也可以基於它們的類而被選擇：

td.fancy {
color: #f60;
background: #666;
}

在上面的例子中，類名為 fancy 的表格單元將是帶有灰色背景的橙色。

<td class="fancy">

你可以將類 fancy 分配給任何一個表格元素任意多的次數。那些以 fancy 標註的單元格都會是帶有灰色背景的橙色。那些沒有被分配名為 fancy 的類的單元格不會受這條規則的影響。還有一點值得註意，class 為 fancy 的段落也不會是帶有灰色背景的橙色，當然，任何其他被標註為 fancy 的元素也不會受這條規則的影響。這都是由於我們書寫這條規則的方式，這個效果被限制於被標註為 fancy 的表格單元（即使用 td 元素來選擇 fancy 類）。

7.CSS 屬性選擇器

對帶有指定屬性的 HTML 元素設置樣式。

可以為擁有指定屬性的 HTML 元素設置樣式，而不僅限於 class 和 id 屬性。

註釋：只有在規定了 !DOCTYPE 時，IE7 和 IE8 才支持屬性選擇器。在 IE6 及更低的版本中，不支持屬性選擇。

屬性選擇器

下麵的例子為帶有 title 屬性的所有元素設置樣式：

[title]
{
color:red;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
[title]
{
color:red;
}
</style>
</head>

<body>
<h1>可以應用樣式：</h1>
<h2 title="Hello world">Hello world</h2>
<a title="W3School" href="http://w3school.com.cn">W3School</a>

<hr />

<h1>無法應用樣式：</h1>
<h2>Hello world</h2>
<a href="http://w3school.com.cn">W3School</a>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
[title]
{
color:red;
}
</style>
</head>

<body>
<h1>可以應用樣式：</h1>
<h2 title="Hello world">Hello world</h2>
<a title="W3School" href="http://w3school.com.cn">W3School</a>

<hr />

<h1>無法應用樣式：</h1>
<h2>Hello world</h2>
<a href="http://w3school.com.cn">W3School</a>
</body>
</html>

屬性和值選擇器

下麵的例子為 title="W3School" 的所有元素設置樣式：

[title=W3School]
{
border:5px solid blue;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
[title=W3School]
{
border:5px solid blue;
}
</style>
</head>

<body>
<h1>可以應用樣式：</h1>
<img title="W3School" src="/i/w3school_logo_white.gif" />
<br />
<a title="W3School" href="http://w3school.com.cn">W3School</a>
<hr />

<h1>無法應用樣式：</h1>
<p title="greeting">Hi!</p>
<a class="W3School" href="http://w3school.com.cn">W3School</a>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
[title=W3School]
{
border:5px solid blue;
}
</style>
</head>

<body>
<h1>可以應用樣式：</h1>
<img title="W3School" src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />
<br />
<a title="W3School" href="http://w3school.com.cn">W3School</a>
<hr />

<h1>無法應用樣式：</h1>
<p title="greeting">Hi!</p>
<a class="W3School" href="http://w3school.com.cn">W3School</a>
</body>
</html>

屬性和值選擇器 - 多個值

下麵的例子為包含指定值的 title 屬性的所有元素設置樣式。適用於由空格分隔的屬性值：

[title~=hello] { color:red; }

下麵的例子為帶有包含指定值的 lang 屬性的所有元素設置樣式。適用於由連字元分隔的屬性值：

[lang|=en] { color:red; }

設置表單的樣式

屬性選擇器在為不帶有 class 或 id 的表單設置樣式時特別有用：

input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}

input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}

CSS 選擇器參考手冊

選擇器	描述
[attribute]	用於選取帶有指定屬性的元素
[attribute=value]	用於選取帶有指定屬性和值的元素
[attribute~=value]	用於選取屬性值中包含指定辭彙的元素
[attribute^=value]	匹配屬性值以指定值開頭的每個元素
[attribute$=value]	匹配屬性值以指定值結尾的每個元素
[attribute*=value]	匹配屬性值中包含指定值的每個元素

[attribute|=value]    用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。

8.CSS 創建

如何插入樣式表

當讀到一個樣式表時，瀏覽器會根據它來格式化 HTML 文檔。插入樣式表的方法有三種：

外部樣式表

當樣式需要應用於很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 <link> 標簽鏈接到樣式表。<link> 標簽在（文檔的）頭部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

瀏覽器會從文件 mystyle.css 中讀到樣式聲明，並根據它來格式文檔。
外部樣式表可以在任何文本編輯器中進行編輯。文件不能包含任何的 html 標簽。樣式表應該以 .css 擴展名進行保存。下麵是一個樣式表文件的例子：

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

不要在屬性值與單位之間留有空格。假如你使用
“margin-left: 20 px”而不是 “margin-left: 20px” ，它僅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中卻無法正常工作。

內部樣式表

當單個文檔需要特殊的樣式時，就應該使用內部樣式表。你可以使用 <style> 標簽在文檔頭部定義內部樣式表，就像這樣:

<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>

內聯樣式表

由於要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法，例如當樣式僅需要在一個元素上應用一次時。要使用內聯樣式，你需要在相關的標簽內使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距：

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

多重樣式

如果某些屬性在不同的樣式表中被同樣的選擇器定義，那麼屬性值將從更具體的樣式表中被繼承過來。

例如，外部樣式表擁有針對 h3 選擇器的三個屬性：

h3 {
color: red;
text-align: left;
font-size: 8pt;
}

而內部樣式表擁有針對 h3 選擇器的兩個屬性：

h3 {
text-align: right; 
font-size: 20pt;
}

假如擁有內部樣式表的這個頁面同時與外部樣式錶鏈接，那麼 h3 得到的樣式是：

color: red; 
text-align: right; 
font-size: 20pt;

即顏色屬性將被繼承於外部樣式表，而文字排列（text-alignment）和字體尺寸（font-size）會被內部樣式表中的規則取代。

CSS樣式

9.CSS 背景

CSS 允許應用純色作為背景，也允許使用背景圖像創建相當複雜的效果。
CSS 在這方面的能力遠遠在 HTML 之上。****

背景色

background-color 屬性

這條規則把元素的背景設置為灰色：

p {background-color: gray;}

如果您希望背景色從元素中的文本向外少有延伸，只需增加一些內邊距：

p {background-color: gray; padding: 20px;}

可以為所有元素設置背景色，這包括 body 一直到 em 和 a 等行內元素。
background-color 不能繼承，其預設值是 transparent。transparent 有“透明”之意。也就是說，如果一個元素沒有指定背景色，那麼背景就是透明的，這樣其祖先元素的背景才能可見。

背景圖像

background-image 屬性

如果需要設置一個背景圖像，必須為這個屬性設置一個 URL 值：

body {background-image: url(/i/eg_bg_04.gif);}

大多數背景都應用到 body 元素，不過並不僅限於此。
下麵例子為一個段落應用了一個背景，而不會對文檔的其他部分應用背景：

p.flower {background-image: url(/i/eg_bg_03.gif);}

您甚至可以為行內元素設置背景圖像，下麵的例子為一個鏈接設置了背景圖像：

a.radio {background-image: url(/i/eg_bg_07.gif);}

如需查看上述例子的效果，可以親自試一試！
理論上講，甚至可以向 textareas 和 select 等替換元素的背景應用圖像，不過並不是所有用戶代理都能很好地處理這種情況。
另外還要補充一點，background-image 也不能繼承。

事實上，所有背景屬性都不能繼承。

背景重覆

background-repeat 屬性

如果需要在頁面上對背景圖像進行平鋪，可以使用 background-repeat 屬性。

屬性值 repeat 導致圖像在水平垂直方向上都平鋪，就像以往背景圖像的通常做法一樣。repeat-x 和 repeat-y 分別導致圖像只在水平或垂直方向上重覆，no-repeat 則不允許圖像在任何方向上平鋪。
預設地，背景圖像將從一個元素的左上角開始。請看下麵的例子：

body
{ 
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}

背景定位

background-position 屬性

可以利用 background-position 屬性改變圖像在背景中的位置。
下麵的例子在 body 元素中將一個背景圖像居中放置：

body
{ 
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}

為 background-position 屬性提供值有很多方法。首先，可以使用一些關鍵字：top、bottom、left、right 和 center。通常，這些關鍵字會成對出現，不過也不總是這樣。還可以使用長度值，如 100px 或 5cm，最後也可以使用百分數值。不同類型的值對於背景圖像的放置稍有差異。

關鍵字

圖像放置關鍵字最容易理解，其作用如其名稱所表明的。例如，top right 使圖像放置在元素內邊距區的右上角。
根據規範，位置關鍵字可以按任何順序出現，只要保證不超過兩個關鍵字 - 一個對應水平方向，另一個對應垂直方向。
如果只出現一個關鍵字，則認為另一個關鍵字是 center。
所以，如果希望每個段落的中部上方出現一個圖像，只需聲明如下：

p
{ 
background-image:url('bgimg.gif');
background-repeat:no-repeat;
background-position:top;
}

下麵是等價的位置關鍵字：

單一關鍵字	等價的關鍵字
center	center center
top	top center 或 center top
bottom	bottom center 或 center bottom
right	right center 或 center right
left	left center 或 center left

百分數值

百分數值的表現方式更為複雜。假設你希望用百分數值將圖像在其元素中居中，這很容易：

body
{ 
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50% 50%;
}

這會導致圖像適當放置，其中心與其元素的中心對齊。換句話說，百分數值同時應用於元素和圖像。也就是說，圖像中描述為 50% 50% 的點（中心點）與元素中描述為 50% 50% 的點（中心點）對齊。

如果圖像位於 0% 0%，其左上角將放在元素內邊距區的左上角。如果圖像位置是 100% 100%，會使圖像的右下角放在右邊距的右下角。

因此，如果你想把一個圖像放在水平方向 2/3、垂直方向 1/3 處，可以這樣聲明：

body
{ 
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:66% 33%;
}

如果只提供一個百分數值，所提供的這個值將用作水平值，垂直值將假設為 50%。這一點與關鍵字類似。

background-position 的預設值是 0% 0%，在功能上相當於 top left。這就解釋了背景圖像為什麼總是從元素內邊距區的左上角開始平鋪，除非您設置了不同的位置值。

長度值

長度值解釋的是元素內邊距區左上角的偏移。偏移點是圖像的左上角。
比如，如果設置值為 50px 100px，圖像的左上角將在元素內邊距區左上角向右 50 像素、向下 100 像素的位置上：

body
{ 
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50px 100px;
}

註意，這一點與百分數值不同，因為偏移只是從一個左上角到另一個左上角。也就是說，圖像的左上角與 background-position 聲明中的指定的點對齊。

背景關聯

background-attachment 屬性

如果文檔比較長，那麼當文檔向下滾動時，背景圖像也會隨之滾動。當文檔滾動到超過圖像的位置時，圖像就會消失。

您可以通過 background-attachment 屬性防止這種滾動。通過這個屬性，可以聲明圖像相對於可視區是固定的（fixed），因此不會受到滾動的影響：

body 
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}

background-attachment 屬性的預設值是 scroll，也就是說，在預設的情況下，背景會隨文檔滾動。

10.CSS 文本

CSS 文本屬性可定義文本的外觀。
通過文本屬性，您可以改變文本的顏色、字元間距，對齊文本，裝飾文本，對文本進行縮進，等等。

縮進文本

text-indent 屬性

所有元素的第一行都可以縮進一個給定的長度，甚至該長度可以是負值

首行縮進 5 em

p {text-indent: 5em;}

註意：

一般來說，可以為所有塊級元素應用 text-indent，但無法將該屬性應用於行內元素，圖像之類的替換元素上也無法應用 text-indent 屬性。不過，如果一個塊級元素（比如段落）的首行中有一個圖像，它會隨該行的其餘文本移動。

提示：如果想把一個行內元素的第一行“縮進”，可以用左內邊距或外邊距創造這種效果。

可以使用負值（為防止內容超出視窗，可以額外設置內外邊距），百分比（相對父元素），可以繼承

水平對齊

text-align 屬性

值 left、right 和 center 元素中的文本左對齊、右對齊和居中
塊級元素或表元素居中，要通過在這些元素上適當地設置左、右外邊距來實現
justify 水平對齊屬性由用戶代理（而不是 CSS）來確定兩端對齊文本如何拉伸，以填滿父元素左右邊界之間的空間

text-align:center 與 <CENTER>

<CENTER> 不僅影響文本，還會把整個元素居中。
text-align不會控制元素的對齊，而隻影響內部內容

字間隔

word-spacing 屬性

改變字（單詞）之間的標準間隔
其預設值 normal 與設置值為 0 是一樣的。

其值可正可負，正則間隔增加，負則距離拉近

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}

<p class="spread">
This is a paragraph. The spaces between words will be increased.
</p>

<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>

字母間隔

letter-spacing 屬性

字母間隔修改的是字元或字母之間的間隔。
與 word-spacing 屬性一樣，預設關鍵字是 normal（這與 letter-spacing:0 相同）。輸入的長度值會使字母之間的間隔增加或減少指定的量：

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}

<h1>This is header 1</h1>
<h4>This is header 4</h4>

字元轉換

text-transform 屬性

none
uppercase
lowercase
capitalize

h1 {text-transform: uppercase}

使用 text-transform 有兩方面的好處。首先，只需寫一個簡單的規則來完成這個修改，而無需修改 h1 元素本身。其次，如果您以後決定將所有大小寫再切換為原來的大小寫，可以更容易地完成修改。

文本裝飾

text-decoration 屬性

none
underline
overline
line-through
blink

blink 會讓文本閃爍，類似於 Netscape 支持的頗招非議的 blink 標記。

鏈接預設地會有下劃線,去掉超鏈接的下劃線

a {text-decoration: none;}

註意：如果顯式地用這樣一個規則去掉鏈接的下劃線，那麼錨與正常文本之間在視覺上的唯一差別就是顏色（至少預設是這樣的，不過也不能完全保證其顏色肯定有區別）。

一個規則中結合多種裝飾。

超鏈接既有下劃線，又有上劃線

a:link a:visited {text-decoration: underline overline;}

不過要註意的是，如果兩個不同的裝飾都與同一元素匹配，勝出規則的值會完全取代另一個值。請考慮以下的規則：

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

所有 class 為 stricken 的 h2 元素都只有一個貫穿線裝飾，而沒有下劃線和上劃線，因為 text-decoration 值會替換而不是累積起來。

處理空白符

white-space 屬性

從某種程度上講，預設的 XHTML 處理已經完成了空白符處理：它會把所有空白符合併為一個空格。所以給定以下標記，它在 Web 瀏覽器中顯示時，各個字之間只會顯示一個空格，同時忽略元素中的換行：

<p>This     paragraph has    many
spaces           in it.</p>

p {white-space: normal;}

上面的規則告訴瀏覽器按照平常的做法去處理：丟掉多餘的空白符。如果給定這個值，換行字元（回車）會轉換為空格，一行中多個空格的序列也會轉換為一個空格。

值 pre
如果 white-space 屬性的值為 pre，瀏覽器將會註意額外的空格，甚至回車。在這個方面，而且僅在這個方面，任何元素都可以相當於一個 pre 元素。
註意：經測試，IE 7 以及更早版本的瀏覽器不支持該值，因此請使用非 IE 的瀏覽器來查看上面的實例。
值 nowrap
與之相對的值是 nowrap，它會防止元素中的文本換行，除非使用了一個 br 元素。在 CSS 中使用 nowrap 非常類似於 HTML 4 中用將一個表單元格設置為不能換行，不過 white-space 值可以應用到任何元素。
值 pre-wrap 和 pre-line
CSS2.1 引入了值 pre-wrap 和 pre-line，這在以前版本的 CSS 中是沒有的。這些值的作用是允許創作人員更好地控制空白符處理。
如果元素的 white-space 設置為 pre-wrap，那麼該元素中的文本會保留空白符序列，但是文本行會正常地換行。如果設置為這個值，源文本中的行分隔符以及生成的行分隔符也會保留。pre-line 與 pre-wrap 相反，會像正常文本中一樣合併空白符序列，但保留換行符。
註意：我們在 IE7 和 FireFox2.0 瀏覽器中測試了上面的兩個實例，但是結果是，值 pre-wrap 和 pre-line 都沒有得到很好的支持。

總結

下麵的表格總結了 white-space 屬性的行為：

值	空白符	換行符	自動換行
pre-line	合併	保留	允許
normal	合併	忽略	允許
nowrap	合併	忽略	不允許
pre	保留	保留	不允許
pre-wrap	保留	保留	允許

文本方向

direction 屬性

如果您閱讀的是英文書籍，就會從左到右、從上到下地閱讀，這就是英文的流方向。不過，並不是所有語言都如此。我們知道古漢語就是從右到左來閱讀的，當然還包括希伯來語和阿拉伯語等等。

CSS2 引入了一個屬性來描述其方向性。

direction 屬性影響塊級元素中文本的書寫方向、表中列佈局的方向、內容水平填充其元素框的方向、以及兩端對齊元素中最後一行的位置。

註釋：對於行內元素，只有當 unicode-bidi 屬性設置為 embed 或 bidi-override 時才會應用 direction 屬性。
direction 屬性有兩個值：ltr 和 rtl。大多數情況下，預設值是 ltr，顯示從左到右的文本。如果顯示從右到左的文本，應使用值 rtl。

CSS 文本屬性

屬性	描述
color	設置文本顏色
direction	設置文本方向。
line-height	設置行高。
letter-spacing	設置字元間距。
text-align	對齊元素中的文本。
text-decoration	向文本添加修飾。
text-indent	縮進元素中文本的首行。
text-shadow	設置文本陰影。CSS2 包含該屬性，但是 CSS2.1 沒有保留該屬性。
text-transform	控制元素中的字母。
unicode-bidi	設置文本方向。
white-space	設置元素中空白的處理方式。
word-spacing	設置字間距。

11.CSS 字體

CSS 字體屬性定義文本的字體系列、大小、加粗、風格（如斜體）和變形（如小型大寫字母）。

CSS 字體系列

在 CSS 中，有兩種不同類型的字體系列名稱：

通用字體系列 - 擁有相似外觀的字體系統組合（比如 "Serif" 或 "Monospace"）
特定字體系列 - 具體的字體系列（比如 "Times" 或 "Courier"）

除了各種特定的字體系列外，CSS 定義了 5 種通用字體系列：

Serif 字體
Sans-serif 字體
Monospace 字體
Cursive 字體
Fantasy 字體

指定字體系列

使用 font-family 屬性定義文本的字體系列。

使用通用字體系列

如果你希望文檔使用一種 sans-serif 字體，但是你並不關心是哪一種字體，以下就是一個合適的聲明：

body {font-family: sans-serif;}

這樣用戶代理就會從 sans-serif 字體系列中選擇一個字體（如 Helvetica），並將其應用到 body 元素。因為有繼承，這種字體選擇還將應用到 body 元素中包含的所有元素，除非有一種更特定的選擇器將其覆蓋。

指定字體系列

除用通用的字體系列，還可通過 font-family 屬性設置更具體的字體

該例為所有 h1 元素設置了 Georgia 字體：

h1 {font-family: Georgia;}

如果用戶代理上沒有安裝 Georgia 字體，就只能使用用戶代理的預設字體來顯示 h1 元素。

可通過結合特定字體名和通用字體系列來解決該問題：

h1 {font-family: Georgia, serif;}

沒裝 Georgia，但裝了 Times 字體（serif 字體系列中的一種字體），用戶代理就可能對 h1 元素使用 Times。儘管 Times 與 Georgia 並不完全匹配，但至少足夠接近。

因此，建議在所有 font-family 規則中都提供一個通用字體系列。這樣就提供了一條後路，在用戶代理無法提供與規則匹配的特定字體時，就可以選擇一個候選字體。

對字體非常熟悉，也可以為給定的元素指定一系列類似的字體。要做到這一點，需要把這些字體按照優先順序排列，然後用逗號進行連接：

p {font-family: Times, TimesNR, 'New Century Schoolbook',
Georgia, 'New York', serif;}

根據這個列表，用戶代理會按所列的順序查找這些字體。如果列出的所有字體都不可用，就會簡單地選擇一種可用的 serif 字體。

使用引號

您也許已經註意到了，上面的例子中使用了單引號。只有當字體名中有一個或多個空格（比如 New York），或者如果字體名包括 # 或 $ 之類的符號，才需要在 font-family 聲明中加引號。
單引號或雙引號都可以接受。

但是，如果把一個 font-family 屬性放在 HTML 的 style 屬性中，則需要使用該屬性本身未使用的那種引號：

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,
'New York', serif;">...</p>

字體風格

font-style 屬性最常用於規定斜體文本。
該屬性有三個值：

normal - 文本正常顯示
italic - 文本斜體顯示
oblique - 文本傾斜顯示

<html>
<head>
<style type="text/css">
p.normal {font-style:normal}
p.italic {font-style:italic}
p.oblique {font-style:oblique}
</style>
</head>

<body>
<p class="normal">This is a paragraph, normal.</p>
<p class="italic">This is a paragraph, italic.</p>
<p class="oblique">This is a paragraph, oblique.</p>
</body>

</html>

<html>
<head>
<style type="text/css">
p.normal {font-style:normal}
p.italic {font-style:italic}
p.oblique {font-style:oblique}
</style>
</head>

<body>
<p class="normal">This is a paragraph, normal.</p>
<p class="italic">This is a paragraph, italic.</p>
<p class="oblique">This is a paragraph, oblique.</p>
</body>

</html>

italic 和 oblique 的區別

font-style 非常簡單：用於在 normal 文本、italic 文本和 oblique 文本之間選擇。唯一有點複雜的是明確 italic 文本和 oblique 文本之間的差別。
斜體（italic）是一種簡單的字體風格，對每個字母的結構有一些小改動，來反映變化的外觀。與此不同，傾斜（oblique）文本則是正常豎直文本的一個傾斜版本。
通常情況下，italic 和 oblique 文本在 web 瀏覽器中看上去完全一樣。

字體變形

font-variant 屬性可以設定小型大寫字母。

小型大寫字母不是一般的大寫字母，也不是小寫字母，這種字母採用不同大小的大寫字母。

p {font-variant:small-caps;}

<html>
<head>
<style type="text/css">
p.normal {font-variant: normal}
p.small {font-variant: small-caps}
</style>
</head>

<body>
<p class="normal">This is a paragraph</p>
<p class="small">This is a paragraph</p>
</body>

</html>

字體加粗

font-weight 屬性設置文本的粗細。

關鍵字 100 ~ 900 為字體指定了 9 級加粗度。如果一個字體內置了這些加粗級別，那麼這些數字就直接映射到預定義的級別，100 對應最細的字體變形，900 對應最粗的字體變形。數字 400 等價於 normal，而 700 等價於 bold。

如果將元素的加粗設置為 bolder，瀏覽器會設置比所繼承值更粗的一個字體加粗。與此相反，關鍵詞 lighter 會導致瀏覽器將加粗度下移而不是上移。

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

字體大小

font-size 屬性設置文本的大小。

有能力管理文本的大小在 web 設計領域很重要。但是，您不應當通過調整文本大小使段落看上去像標題，或者使標題看上去像段落。
請始終使用正確的 HTML 標題，比如使用 <h1> - <h6> 來

CSS 學習手冊