因?yàn)楸救耸莻€(gè)CSS盲，為了改善這種情況，特意掃了一下盲，前不久不買(mǎi)書(shū)時(shí)，看到一本不錯(cuò)的CSS基礎(chǔ)書(shū)，順手買(mǎi)了一本，覺(jué)得還不錯(cuò)，記了一下筆記，共享給大家。
       

一．             CSS入門(mén)

1.       CSS應(yīng)用到(X)HTML的方法

1）內(nèi)聯(lián)樣式

內(nèi)聯(lián)樣式（inline style）通過(guò)Style屬性應(yīng)用于文檔的特定標(biāo)記。(X)HTML中的樣式值通過(guò)name:value或property:value的形式聲明。

Eg. <p style=”color: #F00”>

優(yōu)點(diǎn)：對(duì)于測(cè)試簡(jiǎn)單的CSS示例有點(diǎn)用。

不足：應(yīng)該使(X)HTML文件中的表現(xiàn)信息盡可能少，將內(nèi)聯(lián)樣式散布在(X)HTML代碼中會(huì)使頁(yè)面變得非常復(fù)雜。

2）內(nèi)嵌樣式

內(nèi)嵌樣式（embedded style）只影響某個(gè)特定的(X)HTML模板，但是，與內(nèi)聯(lián)樣式所不同的是，它將所有的樣式定義放在一起，作為元素的一部分，位于文檔的頭部。

Eg. 在title元素之后，將上上下代碼：

<style type=”text/css”>

p {

        color: #F00;

}

</style>

優(yōu)點(diǎn)：這種方式比內(nèi)聯(lián)樣式好，它允許一次修改一個(gè)元素的所有實(shí)例而不是使用重復(fù)的內(nèi)聯(lián)樣式。

不足：內(nèi)嵌樣式將表示部分加入(X)HTML文檔，使得(X)HTML文檔變大。另外，這些樣式需要隨每個(gè)網(wǎng)頁(yè)的加載而重復(fù)下載。

3）外部樣式

將CSS樣式代碼放入外部的CSS文件中，需要用到該CSS文件的樣式的(X)HTML將該文件引入。

優(yōu)點(diǎn)：當(dāng)你考慮站點(diǎn)的CSS時(shí)，所需考慮的僅僅是一個(gè)外部樣式表，而不再是標(biāo)記，這就意味著整個(gè)網(wǎng)站的樣式改變將僅僅需要修改某個(gè)或某幾個(gè)樣式表。另外，一旦瀏覽器訪問(wèn)過(guò)該樣式表，它將被緩存而無(wú)需重新下載。

不足：由于某種原因而無(wú)法獲取外部CSS文件時(shí)，任何(X)HTML頁(yè)面將都沒(méi)有樣式，但這種情況很少發(fā)生。

2.       導(dǎo)入和組合樣式

通過(guò)@import規(guī)則來(lái)包括表現(xiàn)信息是Web標(biāo)準(zhǔn)靈活性的一個(gè)重要體現(xiàn)。@import規(guī)則不是為了在(X)HTML文檔中應(yīng)用而設(shè)計(jì)的，但它是通過(guò)主外部樣式表導(dǎo)入一個(gè)或多個(gè)樣式表的方法。并且通過(guò)(X)HTML導(dǎo)入一個(gè)外部樣式表，可以使得老版本的瀏覽器（eg. Netscape 4.x或IE4）忽略某些特殊的樣式。

Eg. 在(X)HTML文檔那個(gè)的<title>元素后，通過(guò)代碼<style type=”text/css”>@import url(external.css);</style>來(lái)引入CSS文件。

3.       打印樣式表

有時(shí)候?yàn)榱瞬辉诖蛴r(shí)浪費(fèi)太多的墨，在打印時(shí)存在更換樣式的需要，可以通過(guò)如下方式做到。Eg.

<link rel=”stylesheet” media=”screen” type=”text/css” href=”screen.css” />

<link rel=”stylesheet” media=”print” type=”text/css” href=”print.css” />

如果一個(gè)樣式表的media屬性為screen，那么在頁(yè)面打印時(shí)，將不會(huì)使用該樣式，但是，如果沒(méi)有明確說(shuō)明媒體類(lèi)型，則樣式表顯示時(shí)不使用這些樣式。

注意：目前IE支持的media的聲明只有all、screen、print和其他的一些聲明，如projection（針對(duì)投影儀）、aural（針對(duì)語(yǔ)言合成器）和braille（針對(duì)盲人），這些都是在針對(duì)特殊的設(shè)備或者面向特殊的終端用戶時(shí)使用的。

4．注釋

 Eg1. /* Default styling for paragraphs */

      p {

    color: #F00;

    font-size: 12px;

}

二．             CSS核心概念

1.       ID與類(lèi)

1）ID

每個(gè)ID在一個(gè)頁(yè)面中只能使用一次，作為某個(gè)元素的唯一標(biāo)識(shí)符。一般情況下，ID只用于頁(yè)面的唯一元素，如頁(yè)眉、主導(dǎo)航欄、頁(yè)角或用戶界面的其他關(guān)鍵部分。

Eg. <p id=”highlight”>這個(gè)段落為紅色文本</p>

   <p id=”default”>這個(gè)段落為灰色文本</p>

相應(yīng)的CSS通過(guò)#來(lái)標(biāo)識(shí)某規(guī)則是唯一ID，#和ID名一起作為規(guī)則的起始，后面跟著屬性的聲明。如下所示：

/* 定義highlight文本樣式*/

# highlight {

       color: #F00;

}

       /* 定義default文本樣式*/

       #default {

color: #333;

}

       如何將ID與選擇器結(jié)合呢？下面來(lái)看一個(gè)例子。基本的CSS將所有的h2標(biāo)題設(shè)計(jì)為深灰色，并且字號(hào)為16像素，代碼如下：

/* 基本的標(biāo)題樣式*/

h2 {

color: #333;

font-size: 16px;

}

       這個(gè)樣式適用于大多數(shù)<h2>標(biāo)題，但是，如果頁(yè)面的主<h2>需要不通的顏色來(lái)突出強(qiáng)調(diào)時(shí)，就需要定義新的規(guī)則。在規(guī)則中，選擇器定義成element#name的形式。

       /* 調(diào)整作為標(biāo)題的h2的樣式*/

       h2#title {

color: #F00;

}

       <h2 id=”title”>文章的標(biāo)題</h2>

       但是，必須牢記title是唯一的，它不能在模板的其他地方再次使用。

       使用ID的場(chǎng)合如下：

       ID應(yīng)該為每個(gè)頁(yè)面唯一存在并僅使用一次的元素保留，如頁(yè)眉、邊欄、主導(dǎo)航欄或者頁(yè)腳等。

       避免使用ID的場(chǎng)合如下：

       當(dāng)有一個(gè)以上的地方需要使用同一CSS規(guī)則時(shí)，不應(yīng)該使用ID，也不要在將來(lái)可能在多個(gè)地方使用到的規(guī)則中使用ID。

2）類(lèi)

類(lèi)可以在頁(yè)面中無(wú)限次地使用，因此它是應(yīng)用CSS的非常靈活的方法。下面來(lái)看個(gè)例子：

<p id=”highlight”>這個(gè)段落為紅色文本</p>

<p id=”default”>這個(gè)段落為灰色文本</p>

相應(yīng)的CSS通過(guò)句點(diǎn)(.)來(lái)標(biāo)識(shí)一個(gè)規(guī)則是可重用的類(lèi)。句點(diǎn)和類(lèi)名一起作為新規(guī)則的開(kāi)始，接著便是屬性說(shuō)明，如下例所示：

/* 定義highlight 類(lèi)*/

. highlight {

color: #F00;

}

       /* 定義default 類(lèi)*/

       .default {

color: #333;

}

       下面來(lái)看一個(gè)稍微復(fù)雜點(diǎn)的例子，該類(lèi)結(jié)合多個(gè)類(lèi)的ID，如下所示：

       <ul id=”drinks”>

              <li class=”alcohol”>Beer</li>

              <li class=”alcohol”>Spirits</li>

              <li class=”mixer”>Cola</li>

              <li class=”mixer”>Lemonade</li>

              <li class=”hot”>Tea</li>

              <li class=”hot”>Coffee</li>

       </ul>

       其CSS定義如下：

       /* Drinks list styling*/

       ul#drinks {

color: #F00;

}

       /* Define alcohol color*/

       .alcohol {

color: #333;

}

       /* Define mixer color*/

       .mixer {

color: #999;

}

       /* Define hot drinks color*/

       .hot {

color: #CCC;

}

       應(yīng)用類(lèi)的場(chǎng)合如下：

       類(lèi)是一種應(yīng)用CSS規(guī)則的靈活方法，可以在頁(yè)面中重復(fù)使用。目前我們僅僅使用類(lèi)來(lái)控制屬于一個(gè)組的元素，從而改善ID的行為。

       避免使用類(lèi)的場(chǎng)合：

       在頁(yè)面的主結(jié)構(gòu)元素（如頁(yè)眉、主導(dǎo)航欄）中不推薦使用，因?yàn)檫@樣做將降低設(shè)計(jì)的靈活性，并且不得不通過(guò)大量修改或添加另外的標(biāo)簽來(lái)實(shí)現(xiàn)用戶定制。

2.       使用層疊

當(dāng)有多個(gè)樣式表時(shí)，有一個(gè)層次來(lái)定義將這些樣式表應(yīng)用到(X)HTML的順序。同時(shí)，針對(duì)不同的應(yīng)用方法，同樣存在一個(gè)順序，這個(gè)順序就是“層疊”。

對(duì)于應(yīng)用CSS的不同方法——內(nèi)聯(lián)、內(nèi)嵌、外部和導(dǎo)入，其層疊順序描述如下：

瀏覽器首先執(zhí)行內(nèi)聯(lián)規(guī)則，然后執(zhí)行所有的內(nèi)嵌規(guī)則，最后再查找外部文件來(lái)完全理解所創(chuàng)建的CSS。

另外一種層疊的方法是使用多個(gè)外部樣式表，eg.

<link rel=”stylesheet” media=”screen” type=”text/css” href=”one.css” />

<link rel=”stylesheet” media=”screen” type=”text/css” href=”two.css” />

<link rel=”stylesheet” media=”screen” type=”text/css” href=”three.css” />

瀏覽器認(rèn)為最后一個(gè)樣式表最為重要，并且優(yōu)先執(zhí)行它所包含的所有規(guī)則。

層次性也體現(xiàn)在導(dǎo)入樣式表上。它與樣式表給定的順序相關(guān)，eg:

@import url(“default.css”)

@import url(“layout.css”)

@import url(“navigation.css”)

@import url(“forms.css”)

在該例中，forms.css在層次上是最高，default.css顯然最低。

注意：如果一個(gè)樣式表是通過(guò)另外一個(gè)模塊化樣式表使用@import導(dǎo)入，那么在層次上，它將自動(dòng)處于較低層，簡(jiǎn)單地說(shuō)，一個(gè)樣式表總是比調(diào)用它的樣式表級(jí)別更低。

處于層疊層次最底層的樣式表是瀏覽器自己的默認(rèn)樣式表。

3.       分組

另一個(gè)創(chuàng)建具有良好組織結(jié)構(gòu)CSS所需遵守的關(guān)鍵原則是分組。Eg:

h1, h2, h3 {

font-family: Helvetica, Arial, sans-serif;

line-height: 140%;

color: #333;

}

       如果想讓這些標(biāo)題中的某一個(gè)有點(diǎn)小差別的話，可用如下方法：

       h1 {

font-style: itatic;

}

4.       繼承

繼承（inheritance）主要描述(X)HTML元素從它的父元素繼承樣式屬性的情況。如果沒(méi)有為子元素定義特定的CSS，那么在某些情況下，子元素將繼承賦予父元素的特定CSS值。這些地方CSS是層疊的，因此(X)HTML可以繼承。

Eg. /* Top-level heading*/

 h1 {

color: #333;

}

       下面來(lái)看一段對(duì)應(yīng)的(X)HTML代碼：

       <h1>Hello, <em>阿蜜果</em></h1>

       若沒(méi)有給<em>元素定義相應(yīng)的CSS規(guī)則，那么它將從<h1>元素中繼承樣式。

       在正規(guī)的CSS設(shè)計(jì)中，主樣式表都以<body>元素聲明開(kāi)始。<body>元素不僅僅是結(jié)構(gòu)良好的(X)HTML文件所必須的，它同時(shí)還是模板中所有可視元素的父元素。因此，每個(gè)元素都可以從它繼承相關(guān)信息。Eg:

       body {

margin: 10px;

font-family: Helvetica, Arial, sans-serif;

background: #CCC;

color: #000;

}

       如果沒(méi)有特殊給定，CSS中的其他規(guī)則都將繼承這些值。

5.       上下文選擇器

       上下文選擇器（contextual selector）由兩個(gè)或多個(gè)更多的選擇器組成，這些選擇器之間以空格隔開(kāi)。Eg:

       h1 em {

color: #F00;

}

       上面所構(gòu)造的上下文選擇器表明，該規(guī)則只有當(dāng)最后一個(gè)選擇器（em）是第一個(gè)選擇器（h1）的直接后代時(shí)才起作用。

6.       CSS度量

CSS規(guī)則可以控制文本的高度、文本的間距、邊框的寬度以及元素之間的間隔等。所有這些都需要定義相應(yīng)的度量機(jī)制。

       CSS提供了兩套度量機(jī)制——絕對(duì)（absolute）和相對(duì)（relative）。前者試圖固化設(shè)計(jì)，而后者使得用戶或者瀏覽設(shè)備能夠控制網(wǎng)頁(yè)。

1）絕對(duì)度量

絕對(duì)值是一個(gè)固定的特定單位。它能夠精確地控制網(wǎng)頁(yè)的顯示。絕對(duì)單位信息如下：

單位	描述
in	絕對(duì)單位英寸
cm	絕對(duì)單位厘米
mm	絕對(duì)單位毫米
pt	絕對(duì)單位磅，1磅等于1/72英寸
pc	絕對(duì)單位pica，1pica等于12磅，等于1/6英寸

       事實(shí)上，幾乎所有的日常的CSS設(shè)計(jì)，都不需要絕對(duì)度量也照樣能正常工作。因此，我們可以直接跳到更有意義的相對(duì)度量機(jī)制。

2）相對(duì)度量

相對(duì)度量沒(méi)有固定的特定值，相反，它們是和繼承到的值進(jìn)行比較后，通過(guò)計(jì)算得到。如下表所示：

單位	描述
%	相對(duì)于另一個(gè)值的百分比的單位
ex	相對(duì)于x高度的單位，由該字體的小寫(xiě)字母x的高度決定
em	相對(duì)于元素字體的高度
px	在屏幕上，相對(duì)度量的像素單位

雖然相對(duì)度量不允許設(shè)計(jì)人員實(shí)施很多的絕對(duì)控制，但是它們?yōu)榻K端用戶創(chuàng)造了更好的體驗(yàn)。

3）像素

像素（pixel）為用戶布局提供了最好的控制。

基于像素控制文本大小能夠提供跨越大多數(shù)終端設(shè)備的一致性。IE/Win用戶不能使用瀏覽器中重新設(shè)置大小的工具來(lái)重新設(shè)置用像素描述的文本的大小。

為了確保所有的終端用戶能夠基于自己的瀏覽器偏好來(lái)瀏覽網(wǎng)頁(yè)，強(qiáng)烈建議使用em單位來(lái)聲明字號(hào)。

4）百分比

百分比值總是相對(duì)于另外一個(gè)值而言的，如父元素的寬和高等。換言之，百分比只能聲明為和前面的規(guī)則已經(jīng)定義的尺寸相關(guān)，或者是和瀏覽器窗口相關(guān)的尺寸。

需要注意的是，使用百分比時(shí)，集成將會(huì)帶來(lái)麻煩，由于像素和em保留了一些控制，通過(guò)瀏覽器計(jì)算的百分比值的結(jié)果將與你所期望的有所不同。

5）em

在CSS中，由于最具靈活性，em是最容易被錯(cuò)誤理解的相對(duì)度量。它非常適用于終端用戶的瀏覽設(shè)備和文本偏好難以預(yù)測(cè)的設(shè)計(jì)原則。

em是傳統(tǒng)的印刷單位，em使得樣式表具有可伸縮性。和傳統(tǒng)印刷中的em不一樣，CSS的em幾乎可以用來(lái)定義所有的CSS屬性的長(zhǎng)度。

em是等于一個(gè)打印字號(hào)的單位。因此，在給定的元素中，字號(hào)設(shè)為11像素，那么1em就等于11像素；如果在另外一個(gè)元素中字號(hào)為30像素，那么1em就等于30像素。

下面再來(lái)看一個(gè)例子：

body {

font-family: Helvetica, Arial, sans-serif;

font-size: 0.8em;

color: #000;

}

三．             CSS構(gòu)造塊

1．div

部分（division）——<div>元素，經(jīng)常以div形式引用——是(X)HTML的元素，用于定義(X)HTML文件中的區(qū)域。你可以讓div包含任何在頁(yè)面<body>部分的一些額外元素，如文本、圖形等——實(shí)際上，這些元素可以是任何元素，甚至十一些不同區(qū)域中的特殊元素，如頁(yè)眉、頁(yè)腳、導(dǎo)航欄等。

Eg. 在HTML中構(gòu)造一個(gè)div元素：

<div id=”container”>

        <p>這是我們的內(nèi)容區(qū)域</p>

</div>

為id為container的div元素添加CSS樣式代碼如下例：

#container {

padding: 20px;

border: 1px solid #000;

background: #CCC;

}

       下面讓我們來(lái)看一個(gè)添加子div的例子：

<div id=”container”>

        <p>這是我們的內(nèi)容區(qū)域</p>

        <div class=”box”>

               <p>我在盒子中!<p>

        </div>

        <div class=”box”>

               <p>我也在盒子中!<p>

        </div>

</div>

定義box類(lèi)的樣式如下：

.box {

margin: 10px;

padding: 20px;

border: 1px solid #000;

}

2．維度：寬度和高度

設(shè)定值可以使長(zhǎng)度、百分比或auto。所有這些值會(huì)受到樣式表里其他規(guī)則的負(fù)面影響，也受到(X)HTML中它們包含的元素的影響。例如，margin、padding、border或者自元素都可能對(duì)結(jié)果產(chǎn)生連鎖反應(yīng)。

3．外邊距

外邊距（margin）屬性的功能正如它本身表示的意義，用于設(shè)定(X)HTML元素和它外部的元素之間的外邊距。外邊距屬性可以為給定的元素設(shè)定上外邊距、下外邊距、左外邊距和右外邊距四個(gè)屬性。注意外邊距值不從父元素中繼承。

下面來(lái)看一個(gè)外邊距CSS定義的例子：

#container {

width: 300px;

margin-top: 20px;

margin-left: auto;

margin-right: auto;

margin-bottom: 1em;

border: 1px solid #000;

padding: 20px;

background: #CCC;

}

       對(duì)外邊距可縮寫(xiě)成如下：

       #container {

margin: 20px auto 1em auto;

}

       屬性值的排列順序?yàn)椋荷贤膺吘唷⒂彝膺吘唷⑾峦膺吘唷⒆笸膺吘唷?/span>

       CSS中將元素居中的最好的方法是把元素惡左右外邊距屬性值設(shè)定為auto。對(duì)于常用的瀏覽器，這只需要設(shè)定width規(guī)則，左外邊距話和右外邊距都為給定的auto值。

4．內(nèi)邊距

內(nèi)邊距（padding）是(X)HTML元素的邊框與元素之間的距離，適用于任何元素。

Eg.

#container {

width: 300px;

padding-top: 20px;

padding-left: 10%

padding-right: 1em;

padding-bottom: 0;

background: #CCC;

}

       可以將它縮寫(xiě)成如下代碼：

       #container {

padding: 20px 1em 0 10%;

}

       與margin屬性一樣，數(shù)值的排列順序?yàn)椋荷稀⒂摇⑾潞妥蟆?/span>

       下面來(lái)討論一下：border-width、border-top-width、border-right-width、border-bottom-width和border-left-width。Eg.

       #container {

width: 400px;

margin: 10px auto 10px auto;

padding: 20px;

border-style: dashed dotted solid ridge

border-top-width: thin;

border-right-width: 20px;

border-bottom-width: medium;

border-left-width: thick;

}

       設(shè)置邊框顏色的屬性設(shè)置如下：

       #container {

border-color: #000 #999 #333 #CCC;

}

       用border、border-top、border-right、border-bottom和border-left屬性可以將給定的border-style、border-width和border-color屬性的值集中到一個(gè)屬性中，eg.

       #container {

width: 400px;

margin: 10px auto 10px auto;

padding: 20px;

border-top: #000 thin dashed;

border-right: #999 20px dotted;

border-bottom: #333 medium solid;

border-left: #CCC thick ridge;

}