因為本人是個CSS盲，為了改善這種情況，特意掃了一下盲，前不久不買書時，看到一本不錯的CSS基礎書，順手買了一本，覺得還不錯，記了一下筆記，共享給大家。
一． CSS入門
1. CSS應用到(X)HTML的方法
1）內聯樣式
內聯樣式（inline style）通過Style屬性應用于文檔的特定標記。(X)HTML中的樣式值通過name:value或property:value的形式聲明。
Eg. <p style=”color: #F00”>
優點：對于測試簡單的CSS示例有點用。
不足：應該使(X)HTML文件中的表現信息盡可能少，將內聯樣式散布在(X)HTML代碼中會使頁面變得非常復雜。
2）內嵌樣式
內嵌樣式（embedded style）只影響某個特定的(X)HTML模板，但是，與內聯樣式所不同的是，它將所有的樣式定義放在一起，作為元素的一部分，位于文檔的頭部。
Eg. 在title元素之后，將上上下代碼：
<style type=”text/css”>
p {
color: #F00;
}
</style>
優點：這種方式比內聯樣式好，它允許一次修改一個元素的所有實例而不是使用重復的內聯樣式。
不足：內嵌樣式將表示部分加入(X)HTML文檔，使得(X)HTML文檔變大。另外，這些樣式需要隨每個網頁的加載而重復下載。
3）外部樣式
將CSS樣式代碼放入外部的CSS文件中，需要用到該CSS文件的樣式的(X)HTML將該文件引入。
優點：當你考慮站點的CSS時，所需考慮的僅僅是一個外部樣式表，而不再是標記，這就意味著整個網站的樣式改變將僅僅需要修改某個或某幾個樣式表。另外，一旦瀏覽器訪問過該樣式表，它將被緩存而無需重新下載。
不足：由于某種原因而無法獲取外部CSS文件時，任何(X)HTML頁面將都沒有樣式，但這種情況很少發生。
2. 導入和組合樣式
通過@import規則來包括表現信息是Web標準靈活性的一個重要體現。@import規則不是為了在(X)HTML文檔中應用而設計的，但它是通過主外部樣式表導入一個或多個樣式表的方法。并且通過(X)HTML導入一個外部樣式表，可以使得老版本的瀏覽器（eg. Netscape 4.x或IE4）忽略某些特殊的樣式。
Eg. 在(X)HTML文檔那個的<title>元素后，通過代碼<style type=”text/css”>@import url(external.css);</style>來引入CSS文件。
3. 打印樣式表
有時候為了不在打印時浪費太多的墨，在打印時存在更換樣式的需要，可以通過如下方式做到。Eg.
<link rel=”stylesheet” media=”screen” type=”text/css” href=”screen.css” />
<link rel=”stylesheet” media=”print” type=”text/css” href=”print.css” />
如果一個樣式表的media屬性為screen，那么在頁面打印時，將不會使用該樣式，但是，如果沒有明確說明媒體類型，則樣式表顯示時不使用這些樣式。
注意：目前IE支持的media的聲明只有all、screen、print和其他的一些聲明，如projection（針對投影儀）、aural（針對語言合成器）和braille（針對盲人），這些都是在針對特殊的設備或者面向特殊的終端用戶時使用的。
4．注釋
Eg1. /* Default styling for paragraphs */
p {
color: #F00;
font-size: 12px;
}
二． CSS核心概念
1. ID與類
1）ID
每個ID在一個頁面中只能使用一次，作為某個元素的唯一標識符。一般情況下，ID只用于頁面的唯一元素，如頁眉、主導航欄、頁角或用戶界面的其他關鍵部分。
Eg. <p id=”highlight”>這個段落為紅色文本</p>
<p id=”default”>這個段落為灰色文本</p>
相應的CSS通過#來標識某規則是唯一ID，#和ID名一起作為規則的起始，后面跟著屬性的聲明。如下所示：
/* 定義highlight文本樣式*/
# highlight {
color: #F00;
}
/* 定義default文本樣式*/
#default {
color: #333;
}
如何將ID與選擇器結合呢？下面來看一個例子。基本的CSS將所有的h2標題設計為深灰色，并且字號為16像素，代碼如下：
/* 基本的標題樣式*/
h2 {
color: #333;
font-size: 16px;
}
這個樣式適用于大多數<h2>標題，但是，如果頁面的主<h2>需要不通的顏色來突出強調時，就需要定義新的規則。在規則中，選擇器定義成element#name的形式。
/* 調整作為標題的h2的樣式*/
h2#title {
color: #F00;
}
<h2 id=”title”>文章的標題</h2>
但是，必須牢記title是唯一的，它不能在模板的其他地方再次使用。
使用ID的場合如下：
ID應該為每個頁面唯一存在并僅使用一次的元素保留，如頁眉、邊欄、主導航欄或者頁腳等。
避免使用ID的場合如下：
當有一個以上的地方需要使用同一CSS規則時，不應該使用ID，也不要在將來可能在多個地方使用到的規則中使用ID。
2）類
類可以在頁面中無限次地使用，因此它是應用CSS的非常靈活的方法。下面來看個例子：
<p id=”highlight”>這個段落為紅色文本</p>
<p id=”default”>這個段落為灰色文本</p>
相應的CSS通過句點(.)來標識一個規則是可重用的類。句點和類名一起作為新規則的開始，接著便是屬性說明，如下例所示：
/* 定義highlight 類*/
. highlight {
color: #F00;
}
/* 定義default 類*/
.default {
color: #333;
}
下面來看一個稍微復雜點的例子，該類結合多個類的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;
}
應用類的場合如下：
類是一種應用CSS規則的靈活方法，可以在頁面中重復使用。目前我們僅僅使用類來控制屬于一個組的元素，從而改善ID的行為。
避免使用類的場合：
在頁面的主結構元素（如頁眉、主導航欄）中不推薦使用，因為這樣做將降低設計的靈活性，并且不得不通過大量修改或添加另外的標簽來實現用戶定制。
2. 使用層疊
當有多個樣式表時，有一個層次來定義將這些樣式表應用到(X)HTML的順序。同時，針對不同的應用方法，同樣存在一個順序，這個順序就是“層疊”。
對于應用CSS的不同方法——內聯、內嵌、外部和導入，其層疊順序描述如下：
瀏覽器首先執行內聯規則，然后執行所有的內嵌規則，最后再查找外部文件來完全理解所創建的CSS。
另外一種層疊的方法是使用多個外部樣式表，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” />
瀏覽器認為最后一個樣式表最為重要，并且優先執行它所包含的所有規則。
層次性也體現在導入樣式表上。它與樣式表給定的順序相關，eg:
@import url(“default.css”)
@import url(“layout.css”)
@import url(“navigation.css”)
@import url(“forms.css”)
在該例中，forms.css在層次上是最高，default.css顯然最低。
注意：如果一個樣式表是通過另外一個模塊化樣式表使用@import導入，那么在層次上，它將自動處于較低層，簡單地說，一個樣式表總是比調用它的樣式表級別更低。
處于層疊層次最底層的樣式表是瀏覽器自己的默認樣式表。
3. 分組
另一個創建具有良好組織結構CSS所需遵守的關鍵原則是分組。Eg:
h1, h2, h3 {
font-family: Helvetica, Arial, sans-serif;
line-height: 140%;
color: #333;
}
如果想讓這些標題中的某一個有點小差別的話，可用如下方法：
h1 {
font-style: itatic;
}
4. 繼承
繼承（inheritance）主要描述(X)HTML元素從它的父元素繼承樣式屬性的情況。如果沒有為子元素定義特定的CSS，那么在某些情況下，子元素將繼承賦予父元素的特定CSS值。這些地方CSS是層疊的，因此(X)HTML可以繼承。
Eg. /* Top-level heading*/
h1 {
color: #333;
}
下面來看一段對應的(X)HTML代碼：
<h1>Hello, <em>阿蜜果</em></h1>
若沒有給<em>元素定義相應的CSS規則，那么它將從<h1>元素中繼承樣式。
在正規的CSS設計中，主樣式表都以<body>元素聲明開始。<body>元素不僅僅是結構良好的(X)HTML文件所必須的，它同時還是模板中所有可視元素的父元素。因此，每個元素都可以從它繼承相關信息。Eg:
body {
margin: 10px;
font-family: Helvetica, Arial, sans-serif;
background: #CCC;
color: #000;
}
如果沒有特殊給定，CSS中的其他規則都將繼承這些值。
5. 上下文選擇器
上下文選擇器（contextual selector）由兩個或多個更多的選擇器組成，這些選擇器之間以空格隔開。Eg:
h1 em {
color: #F00;
}
上面所構造的上下文選擇器表明，該規則只有當最后一個選擇器（em）是第一個選擇器（h1）的直接后代時才起作用。
6. CSS度量
CSS規則可以控制文本的高度、文本的間距、邊框的寬度以及元素之間的間隔等。所有這些都需要定義相應的度量機制。
CSS提供了兩套度量機制——絕對（absolute）和相對（relative）。前者試圖固化設計，而后者使得用戶或者瀏覽設備能夠控制網頁。
1）絕對度量
絕對值是一個固定的特定單位。它能夠精確地控制網頁的顯示。絕對單位信息如下：
|
單位
|
描述
|
|
in
|
絕對單位英寸
|
|
cm
|
絕對單位厘米
|
|
mm
|
絕對單位毫米
|
|
pt
|
絕對單位磅，1磅等于1/72英寸
|
|
pc
|
絕對單位pica，1pica等于12磅，等于1/6英寸
|
事實上，幾乎所有的日常的CSS設計，都不需要絕對度量也照樣能正常工作。因此，我們可以直接跳到更有意義的相對度量機制。
2）相對度量
相對度量沒有固定的特定值，相反，它們是和繼承到的值進行比較后，通過計算得到。如下表所示：
|
單位
|
描述
|
|
%
|
相對于另一個值的百分比的單位
|
|
ex
|
相對于x高度的單位，由該字體的小寫字母x的高度決定
|
|
em
|
相對于元素字體的高度
|
|
px
|
在屏幕上，相對度量的像素單位
|
雖然相對度量不允許設計人員實施很多的絕對控制，但是它們為終端用戶創造了更好的體驗。
3）像素
像素（pixel）為用戶布局提供了最好的控制。
基于像素控制文本大小能夠提供跨越大多數終端設備的一致性。IE/Win用戶不能使用瀏覽器中重新設置大小的工具來重新設置用像素描述的文本的大小。
為了確保所有的終端用戶能夠基于自己的瀏覽器偏好來瀏覽網頁，強烈建議使用em單位來聲明字號。
4）百分比
百分比值總是相對于另外一個值而言的，如父元素的寬和高等。換言之，百分比只能聲明為和前面的規則已經定義的尺寸相關，或者是和瀏覽器窗口相關的尺寸。
需要注意的是，使用百分比時，集成將會帶來麻煩，由于像素和em保留了一些控制，通過瀏覽器計算的百分比值的結果將與你所期望的有所不同。
5）em
在CSS中，由于最具靈活性，em是最容易被錯誤理解的相對度量。它非常適用于終端用戶的瀏覽設備和文本偏好難以預測的設計原則。
em是傳統的印刷單位，em使得樣式表具有可伸縮性。和傳統印刷中的em不一樣，CSS的em幾乎可以用來定義所有的CSS屬性的長度。
em是等于一個打印字號的單位。因此，在給定的元素中，字號設為11像素，那么1em就等于11像素；如果在另外一個元素中字號為30像素，那么1em就等于30像素。
下面再來看一個例子：
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 0.8em;
color: #000;
}
三． CSS構造塊
1．div
部分（division）——<div>元素，經常以div形式引用——是(X)HTML的元素，用于定義(X)HTML文件中的區域。你可以讓div包含任何在頁面<body>部分的一些額外元素，如文本、圖形等——實際上，這些元素可以是任何元素，甚至十一些不同區域中的特殊元素，如頁眉、頁腳、導航欄等。
Eg. 在HTML中構造一個div元素：
<div id=”container”>
<p>這是我們的內容區域</p>
</div>
為id為container的div元素添加CSS樣式代碼如下例：
#container {
padding: 20px;
border: 1px solid #000;
background: #CCC;
}
下面讓我們來看一個添加子div的例子：
<div id=”container”>
<p>這是我們的內容區域</p>
<div class=”box”>
<p>我在盒子中!<p>
</div>
<div class=”box”>
<p>我也在盒子中!<p>
</div>
</div>
定義box類的樣式如下：
.box {
margin: 10px;
padding: 20px;
border: 1px solid #000;
}
2．維度：寬度和高度
設定值可以使長度、百分比或auto。所有這些值會受到樣式表里其他規則的負面影響，也受到(X)HTML中它們包含的元素的影響。例如，margin、padding、border或者自元素都可能對結果產生連鎖反應。
3．外邊距
外邊距（margin）屬性的功能正如它本身表示的意義，用于設定(X)HTML元素和它外部的元素之間的外邊距。外邊距屬性可以為給定的元素設定上外邊距、下外邊距、左外邊距和右外邊距四個屬性。注意外邊距值不從父元素中繼承。
下面來看一個外邊距CSS定義的例子：
#container {
width: 300px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
border: 1px solid #000;
padding: 20px;
background: #CCC;
}
對外邊距可縮寫成如下：
#container {
margin: 20px auto 1em auto;
}
屬性值的排列順序為：上外邊距、右外邊距、下外邊距、左外邊距。
CSS中將元素居中的最好的方法是把元素惡左右外邊距屬性值設定為auto。對于常用的瀏覽器，這只需要設定width規則，左外邊距話和右外邊距都為給定的auto值。
4．內邊距
內邊距（padding）是(X)HTML元素的邊框與元素之間的距離，適用于任何元素。
Eg.
#container {
width: 300px;
padding-top: 20px;
padding-left: 10%
padding-right: 1em;
padding-bottom: 0;
background: #CCC;
}
可以將它縮寫成如下代碼：
#container {
padding: 20px 1em 0 10%;
}
與margin屬性一樣，數值的排列順序為：上、右、下和左。
下面來討論一下：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;
}
設置邊框顏色的屬性設置如下：
#container {
border-color: #000 #999 #333 #CCC;
}
用border、border-top、border-right、border-bottom和border-left屬性可以將給定的border-style、border-width和border-color屬性的值集中到一個屬性中，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;
}
posted on 2007-09-10 12:26
阿蜜果 閱讀(1997)
評論(3) 編輯 收藏 所屬分類:
CSS