| 百度首頁 | 登錄 |
編輯詞條
![]()
但隨着HTML的成長，爲了滿足設計師的要求，HTML增加了很多顯示功能。隨着這些功能的增加，外來定義樣式的語言越來越沒有意義了。
1994年哈坤·利提出了CSS的最初建議；伯特·波斯（Bert Bos）當時正在設計一個叫做Argo的瀏覽器，他們決定一起合作設計CSS。
當時已經有過一些關於樣式表語言的建議了，但CSS是第一個含有“層疊”的主意的。在CSS中，一個文件的樣式可以從其他的樣式表中繼承下來。讀者在有些地方可以使用他自己更喜歡的樣式，在其他地方去繼承，或“層疊”作者的樣式, 這種層疊的方式使作者和讀者都可以靈活地加入自己的設計，混合各人的愛好。
哈坤於1994年在芝加哥的一次會議上第一次提出了CSS的建議，1995年他與波斯一起再次提出這個建議。當時W3C剛剛建立，W3C對CSS的發展很感興趣，它爲此組織了一次討論會。哈坤、波斯和其他一些人（比如微軟的托馬斯·雷爾登）是這個項目的主要技術負責人。1996年底，CSS已經完成。1996年12月CSS要求的第一版本被出版。
1997年初，W3C內組織了專門管CSS的工作組，其負責人是克里斯·裏雷。這個工作組開始討論第一版中沒有涉及到的問題，於是1998年5月出版了CCS的第二版。到2007年爲止，第三版還未完備。
1：表現和內容相分離
將設計部分剝離出來放在一個獨立樣式文件中，HTML文件中只存放文本信息。這樣的頁面對搜索引擎更加友好。
2：提高頁面瀏覽速度
對於同一個頁面視覺效果，採用CSS+DIV重構的頁面容量要比TABLE編碼的頁面文件容量小得多，前者一般只有後者的1/2大小。瀏覽器就不用去編譯大量冗長的標籤。
3：易於維護和改版
你只要簡單的修改幾個CSS文件就可以重新設計整個網站的頁面。
4: 使用div+css更符合現在的W3C國際標準.
![]()
什麼是CSS呢？你可能急迫的想知道答案。但是空泛的文字描述意義不大，讓我們先來一點感性體驗吧。看看這個沒有添加CSS的HTML文件：http://www.csszengarden.com/zengarden-sample.html
是一個普普通通的網頁。然而通過給這個文件添加的CSS規則，我們可以得到十分美觀的網頁：http://www.csszengarden.com/
這還不是全部，不改動HTML，只是通過添加不同的CSS規則，我們就可以得到各種不同樣式的網頁：
http://www.csszengarden.com/?cssfile=/208/208.css&page=0
好了，下面我們再來回答什麼是CSS這個問題。
什麼是Cascading Style Sheets（層疊樣式表）
* CSS是Cascading Style Sheets(層疊樣式表)的簡稱.
* CSS語言是一種標記語言,它不需要編譯,可以直接由瀏覽器解釋執行(屬於瀏覽器解釋型語言).
* 在標準網頁設計中CSS負責網頁內容(XHTML)的表現.
* CSS文件也可以說是一個文本文件,它包含了一些CSS標記,CSS文件必須使用css爲文件名後綴.
* 可以通過簡單的更改CSS文件,改變網頁的整體表現形式,可以減少我們的工作量,所以她是每一個網頁設計人員的必修課.
* CSS是由W3C的CSS工作組產生和維護的.
鏈入外部樣式表文件 (Linking to a Style Sheet)
你可以先建立外部樣式表文件（.css），然後使用HTML的link對象。示例如下：
<head>
<title>文檔標題</title>
<link rel=stylesheet href="http://www.dhtmlet.com/dhtmlet.css" type="text/css">
</head>
而在XML中，你應該如下例所示在聲明區中加入：
<? xml-stylesheet type="text/css" href="http://www.dhtmlet.com/dhtmlet.css" ?>
定義內部樣式塊對象 (Embedding a Style Block)
你可以在你的HTML文檔的<HTML>和<BODY>標記之間插入一個<STYLE>...</STYLE>塊對象。 定義方式請參閱樣式表語法。示例如下：
<html>
<head>
<title>文檔標題</title>
<style type="text/css">
<!--
body {font: 10pt "Arial"}
h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon}
h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue}
p {font: 10pt/12pt "Arial"; color: black}
-->
</style>
</head>
<body>
請注意，這裏將style對象的type屬性設置爲"text/css"，是允許不支持這類型的瀏覽器忽略樣式表單。
內聯定義 (Inline Styles)
內聯定義即是在對象的標記內使用對象的style屬性定義適用其的樣式表屬性。示例如下：
這一行被增加了左右的外補丁
選擇符(selector)，屬性(properties)和屬性的取值(value)。
![]( "ccs")
語法: selector {property: value} (選擇符 {屬性:值})
說明:
·選擇符是可以是多種形式，一般是你要定義樣式的HTML標記，例如BODY、P、TABLE……，你可以通過此方法定義它的屬性和值，屬性和值要用冒號隔開:
例子:body {color: black}，此例的效果是使頁面中的文字爲黑色。
·如果屬性的值是多個單詞組成，必須在值上加引號，比如字體的名稱經常是幾個單詞的組合:
例子:p {font-family: "sans serif"} (定義段落字體爲sans serif)
· 如果需要對一個選擇符指定多個屬性時，我們使用分號將所有的屬性和值分開:
例子:p {text-align: center; color: red} (段落居中排列;並且段落中的文字爲紅色)
2. 選擇符組
你可以把相同屬性和值的選擇符組合起來書寫，用逗號將選擇符分開，這樣可以減少樣式重複定義:
h1, h2, h3, h4, h5, h6 { color: green } (這個組裏包括所有的標題元素，每個標題元素的文字都爲綠色)
p, table{ font-size: 9pt } (段落和表格裏的文字尺寸爲9號字)
效果完全等效於:
p { font-size: 9pt }
table { font-size: 9pt }
3. 類選擇符
用類選擇符你能夠把相同的元素分類定義不同的樣式，定義類選擇符時，在自定類的名稱前面加一個點號。假如你想要兩個不同的段落，一個段落向右對齊，一個段落居中，你可以先定義兩個類:
p.right {text-align: right}
p.center {text-align: center}
然後用不在不同的段落裏，只要在HTML標記里加入你定義的class參數:
這個段落向右對齊的
這個段落是居中排列的
類選擇符還有一種用法，在選擇符中省略HTML標記名，這樣可以把幾個不同的元素定義成相同的樣式:
.center {text-align: center} (定義.center的類選擇符爲文字居中排列)
這樣的類可以被應用到任何元素上。下面我們使h1元素(標題1)和p元素(段落)都歸爲“center”類，這使兩個元素的樣式都跟隨“.center”這個類選擇符:
<h1 class="center">這個標題是居中排列的</h1>
這個段落也是居中排列的
注意:這種省略HTML標記的類選擇符是我們經後最常用的CSS方法，使用這種方法，我們可以很方便的在任意元素上套用預先定義好的類樣式。
4. ID選擇符
在HTML頁面中ID參數指定了某個單一元素，ID選擇符是用來對這個單一元素定義單獨的樣式。
ID選擇符的應用和類選擇符類似，只要把CLASS換成ID即可。將上例中類用ID替代,ID只能在一個頁面中出現一次,而class可以多次運用.
![]( "ccs")
這個段落向右對齊
定義ID選擇符要在ID名稱前加上一個“#”號。和類選擇符相同，定義ID選擇符的屬性也有兩種方法。下面這個例子，ID屬性將匹配所有id="intro"的元素:
#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
} (字體尺寸爲默認尺寸的110%;粗體;藍色;背景顏色透明)
下面這個例子，ID屬性只匹配id="intro"的段落元素:
p#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}
注意:ID選擇符侷限性很大，只能單獨定義某個元素的樣式，一般只在特殊情況下使用。
5. 包含選擇符
可以單獨對某種元素包含關係定義的樣式表，元素1裏包含元素2，這種方式只對在元素1裏的元素2定義，對單獨的元素1或元素2無定義，例如:
table a
{
font-size: 12px
}
在表格內的鏈接改變了樣式，文字大小爲12像素，而表格外的鏈接的文字仍爲默認大小。
6. 樣式表的層疊性
層疊性就是繼承性，樣式表的繼承規則是外部的元素樣式會保留下來繼承給這個元素所包含的其他元素。事實上，所有在元素中嵌套的元素都會繼承外層元素指定的屬性值，有時會把很多層嵌套的樣式疊加在一起，除非另外更改。例如在DIV標記中嵌套P標記:
![]( "CSS")
div { color: red; font-size:9pt}
……
這個段落的文字爲紅色9號字
(P元素裏的內容會繼承DIV定義的屬性)
注意:有些情況下內部選擇符不繼承周圍選擇符的值，但理論上這些都是特殊的。例如，上邊界屬性值是不會繼承的，直覺上，一個段落不會同文檔BODY一樣的上邊界值。
另外，當樣式表繼承遇到衝突時，總是以最後定義的樣式爲準。如果上例中定義了P的顏色:
div { color: red; font-size:9pt}
p {color: blue}
……
這個段落的文字爲藍色9號字
我們可以看到段落裏的文字大小爲9號字是繼承div屬性的，而color屬性則依照最後定義的。
不同的選擇符定義相同的元素時，要考慮到不同的選擇符之間的優先級。ID選擇符，類選擇符和HTML標記選擇符，因爲ID選擇符是最後加上元素上的，所以優先級最高，其次是類選擇符。如果想超越這三者之間的關係，可以用!important提升樣式表的優先權，例如:
p { color: #FF0000!important }
.blue { color: #0000FF}
#id1 { color: #FFFF00}
我們同時對頁面中的一個段落加上這三種樣式，它最後會依照被!important申明的HTML標記選擇符樣式爲紅色文字。如果去掉!important，則依照優先權最高的ID選擇符爲黃色文字。
7. 註釋:/* ... */
你可以在CSS中插入註釋來說明你代碼的意思，註釋有利於你或別人以後編輯和更改代碼時理解代碼的含義。在瀏覽器中，註釋是不顯示的。CSS註釋以"/*" 開頭，以"*/" 結尾，如下:
/* 定義段落樣式表 */
p
{
text-align: center; /* 文本居中排列 */
![]( "ccs")
color: black; /* 文字爲黑色 */
font-family: arial /* 字體爲arial */
}
css可以用任何寫文本的工具進行開發,如文本工具,dreamweaver開發
css也是一種語言,這種語言要和html或者xhtml語言相結合才起作用,
css簡單來說就是用來美化網頁用的,用css語言來控制網頁的外觀
舉個例子
xhtml部分:
<ul>
<li>主頁</li>
<li>留言</li>
<li>論壇</li>
</ul>
此時在頁面上的表達形式是一個豎向列表,這樣不夠美觀,
可以css來改善這個列表爲一個橫向導航條和超鏈接
css部分:
ul{list-style:none;margin:0px;padding:0px}
ul li{margin:0px;padding:0px;float:left;}
ul li a{display:block;width:100px;height:30px;background:#efefef;color:#333;text-decoration:none;text-align:center}
ul li a:hover{background:#333;color:#fff;}
添加上css後,這個列表變成橫向的導航條了,超級鏈接是淡色背景,灰色字體,沒有下劃線,高度是30像素,寬度是100像素
當我們鼠標經過這個超級鏈接時候,變成灰色背景,白色字體
在主頁製作時採用CSS技術，可以有效地對頁面的佈局、字體、顏色、背景和其它效果實現更加精確的控制。
只要對相應的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數不同的網頁的外觀和格式。
它的作用可以達到：
（1）在幾乎所有的瀏覽器上都可以使用。
（2）以前一些非得通過圖片轉換實現的功能，現在只要用CSS就可以輕鬆實現，從而更快地下載頁面。
（3）使頁面的字體變得更漂亮，更容易編排，使頁面真正賞心悅目。
（4）你可以輕鬆地控制頁面的佈局 。
（5）你可以將許多網頁的風格格式同時更新，不用再一頁一頁地更新了。你可以將站點上所有的網頁風格都使用一個CSS文件進行控制，只要修改這個CSS文件中相應的行，那麼整個站點的所有頁面都會隨之發生變動。
想一想，沒有使用CSS前我們是如何控制字體的顏色和大小以及所使用的字體的？我們一般使用HTML標籤來實現，代碼非常煩瑣。
很難想象，如果在一個頁面裏需要頻繁地更替字體的顏色大小，最終生成的HTML代碼的長度一定臃腫不堪。
說實話，CSS就是爲了簡化這樣的工作誕生的，當然其功能決非這麼簡單。
CSS是通過對頁面結構的風格控制的思想，控制整個頁面的風格的。
式樣單放在頁面中，通過瀏覽器的解釋執行，是完全的文本，任何懂得HTML的人都可以掌握，非常的容易。甚至對一些非常老的瀏覽器，也不會產生頁面混亂的現象。
CSS的一大優點是它的圖片傳輸速度比較完全的HTML網頁要快一點。
關於CSS的參考資料，網上有很多討論CSS的社區，但是要系統學習CSS，選擇一本好書還是非常有必要的，推薦閱讀CSS三劍客之一《CSS實戰手冊》
CSS具有兩面性。就像它在格式化文本、導航欄、圖片以及其他小小的網頁方面很棒一樣，當你準備好佈局完整的網頁時，它真正可怕的一面也展現出來了。
CSS佈局有兩種風格——絕對定位和浮動。絕對定位讓你把一個元素以像素級的精確性定位在網頁的任何位置——或者理論上是這樣。這種整體控制令人興奮，就如你將在下一章中所看到的，但是實際上很難實現。這就是大量網頁使用基於浮動的佈局的原因，也是本章的主題。
詳細講解CSS規範化命名的三種通用命名規則
駱駝式命名法：
正如它的名稱所表示的那樣，是指混合使用大小寫字母來構成變量和函數的名字。例如，下面是分別用駱駝式命名法和下劃線法命名的同一個函數：
printEmployeePaychecks()；
print_employee_paychecks()；
第一個函數名使用了駱駝式命名法，函數名中的每一個邏輯斷點都有一個大寫字母來標記；第二個函數名使用了下劃線法，函數名中的每一個邏輯斷點都有一個下劃線來標記。
駱駝式命名法近年來越來越流行了，在許多新的函數庫和Microsoft Windows這樣的環境中，它使用得相當多。另一方面，下劃線法是c出現後開始流行起來的，在許多舊的程序和UNIX這樣的環境中，它的使用非常普遍。
匈牙利命名法：
廣泛應用於象Microsoft Windows這樣的環境中。Windows 編程中用到的變量（還包括宏）的命名規則匈牙利命名法，這種命名技術是由一位能幹的 Microsoft 程序員查爾斯- 西蒙尼(Charles Simonyi) 提出的。
匈牙利命名法通過在變量名前面加上相應的小寫字母的符號標識作爲前綴，標識出變量的作用域，類型等。這些符號可以多個同時使用，順序是先m_（成員變量）， 再指針，再簡單數據類型，再其它。
例如：m_lpszStr, 表示指向一個以0字符結尾的字符串的長指針成員變量。
匈牙利命名法關鍵是：標識符的名字以一個或者多個小寫字母開頭作爲前綴；前綴之後的是首字母大寫的一個單詞或多個單詞組合，該單詞要指明變量的用途。
帕斯卡（pascal）命名法：
與駱駝命名法類似。只不過駱駝命名法是首字母小寫，而帕斯卡命名法是首字母大寫，如：
DisplayInfo();
string UserName;
二者都是採用了帕斯卡命名法。在C#中，以帕斯卡命名法和駱駝命名法居多。
三種命名規則的小結：
MyData 就是一個帕斯卡命名的示例
而myData是一個駱駝命名法,它第一個單詞的第一個字母小寫,後面的單詞首字母大寫,看起來像一個駱駝
而iMyData是一個匈牙利命名法,它的小寫的i說明了它的型態,後面的和帕斯卡命名相同,指示了該變量的用途.
CSS樣式解決了一個普遍的問題
HTML 標籤原本被設計爲用於定義文檔內容。通過使用 <h1>、、 這樣的標籤，HTML 的初衷是表達“這是標題”、“這是段落”、“這是表格”之類的信息。而文檔佈局希望通過瀏覽器來完成，而不使用任何的格式化標籤。
由於兩種主要的瀏覽器（Netscape 和 Internet Explorer）不斷地將新的 HTML 標籤和屬性（比如字體標籤和顏色屬性）添加到 HTML 規範中，創建文檔內容清晰地獨立於文檔表現層的站點變得越來越困難。
爲了解決這個問題，萬維網聯盟（W3C），這個非營利的標準化聯盟，肩負起了 HTML 標準化的使命，並在 HTML 4.0 之外創造出樣式（Style）。
所有的主流瀏覽器均支持層疊樣式表。
一、用class_name方式寫類名。
以前喜歡用class-name寫，不過好像兩樣也沒什麼差別。但我比較反對用className寫類名，因爲始終對瀏覽器大小寫敏感的問題抱有懷疑態度。但是id我會寫成駝峯式，理由見下一條。
二、樣式都用class而不用id。
有三個理由，一，id不可以重複，所以用class的話，可以肆無忌憚的用無數次。二，id的優先級太高，若是寫了一個#page_contenta {color:#f60}，那你完蛋了，裏面要改鏈接顏色，都必須加上#page_content才能越過這個優先級。三，id專門留給JS用，這樣才符合表現與行爲分離的原則。所以id我用駝峯式，也是爲了體現這一點。
三、margin和padding，儘量省略最後一個值。
比如margin: 20px 10px 5px 10px; ，左右值是一樣的，就應該省略掉最後一個值，寫成margin: 20px 10px5px; 這樣到時候要改左右間距，改一個就好，免得改漏了。其實這個問題雖然很細小，但是可以看得出對margin四個值省略規則的熟練程度。對於有的瀏覽器如果把margin:20px 10px 5px; ,這樣瀏覽器會解析成上下間距爲20px跟5px; 左右間距均爲10px;。
四、按標準寫CSS，再針對特定瀏覽器作hack。
比如，通常我們會遇到如下的寫法：
.side_col {
float:left;
display: inline;
margin-left: 20px;
}
而我的寫法會是：
.side_col {
float: left;
margin-left: 20px;
}
* .side_col {
_display:inline; /*hacked for IE 6*/
}
看明白了麼？不應該把hack混在一起，也不應該用一種僥倖的心態，覺得float:left與display:inline寫在一起沒事。嗯，它們倆確實沒事兒，但是其他的hack就不一定了。而且這裏寫display:inline純粹就是爲了解決IE6的bug，所以前面加上下劃線，以明確的表達你的目的。
另外不要以爲凡是hack都是爲IE準備的。其實有些hack是針對其他瀏覽器的，比如FF。這就要求你對CSS標準的熟練掌握，能夠自信的判斷哪些渲染是遵守標準，哪些違反標準的。
此外，我喜歡在hack前面加上星號，其實這純粹是個人習慣了。可能過段時間我就不這麼用了，呵呵。
五、記得加空格。
.class_name { property: value; }。我個人覺得合理的空格是優秀代碼的一個指標。按英文的習慣，標點後面都應該帶空格（如果你寫This is a pen.That’s apencil.句點後面不加空格， word裏面會有錯誤提示）。所以既然CSS是外國人發明的，應該按他們的格式來寫。類似的，在JS裏var a= b + c;裏面的空格也應該都要加。
六、適當的層疊（Cascading)或縮進以定義CSS的“作用域”。
啥叫“CSS的作用域”？其實並不是所有的樣式都在所有的地方使用。有的樣式只用在某一塊裏面，比如“導航欄”裏的“搜索框”，可能應該寫成：
.nav .search {}
而有時候用層疊會增加代碼優先級，所以也可以用縮進來“象徵性的”體現作用域。像這樣：
.login_box {}
.forgot_pwd{}
縮進，是爲了表示它們對應的標籤具有父子關係。但這樣只能起到一個提醒的作用。
七、顏色代碼的縮寫
例如：
.top{ width:104px; height:96px; background:#FF0099; }
可以寫成：
.top{ width:104px; height:96px; background:#F09; }
所寫 代碼必須是 AABBCC 形式的 縮寫成 ABC。
這樣寫加快處理效率，又簡單方便。
select:empty {font:12px !important;} /*safari可見*/
這裏select是選擇符，根據情況更換。第二句是MAC上safari瀏覽器獨有的。僅IE7與IE5.0可以識別*+html select {…}
當面臨需要只針對IE7與IE5.0做樣式的時候就可以採用這個HACK。 僅IE7可以識別*+html select {…!important;}
當面臨需要只針對IE7做樣式的時候就可以採用這個HACK。 IE6及IE6以下識別* html select {…}
這個地方要特別注意很多博客都寫成了是IE6的HACK其實IE5.x同樣可以識別這個HACK。其它瀏覽器不識別。
html/**/ >body select {…}
這句與上一句的作用相同。僅IE6不識別，屏蔽IE6select { display /*屏蔽IE6*/:none;}
這裏主要是通過CSS註釋分開一個屬性與值，註釋在冒號前。僅IE6與IE5不識別，屏蔽IE6與IE5select/**/ { display /*IE6,IE5不識別*/:none;}
這裏與上面一句不同的是在選擇符與花括號之間多了一個CSS註釋。不屏蔽IE5.5僅IE5不識別，屏蔽IE5select/*IE5不識別*/ {…}
這一句是在上一句中去掉了屬性區的註釋。只有IE5不識別，IE5.5可以識別。盒模型解決方法selct {width:IE5.x寬度; voice-family :"/"}/""; voice-family:inherit; width:正確寬度;}
盒模型的清除方法不是通過!important來處理的。這點要明確。清除浮動select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中，當子級都爲浮動時，那麼父級的高度就無法完全的包住整個子級，那麼這時用這個清除浮動的HACK來對父級做一次定義，那麼就可以解決這個問題。截字省略號select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
這個是在越出長度後會自行的截掉多出部分的文字，並以省略號結尾，很好的一個技術。只是目前Firefox並不支持。只有Opera識別@media all and (min-width: 0px){ select {……} }
針對Opera瀏覽器做單獨的設定。以上都是寫CSS中的一些HACK，這些都是用來解決局部的兼容性問題，如果希望把兼容性的內容也分離出來，不妨試一下下面的幾種過濾器。這些過濾器有的是寫在CSS中通過過濾器導入特別的樣式，也有的是寫在HTML中的通過條件來鏈接或是導入需要的補丁樣式。
IE5.x的過濾器，只有IE5.x可見@media tty {
i{content:"/";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */IE5/MAC的過濾器，一般用不着/*/*//*/
@import "ie5mac.css";
/**/IE的if條件Hack<!--[if IE]> Only IE <![endif]-->
所有的IE可識別
<!--[if IE 5.0]> Only IE 5.0 <![endif]-->
只有IE5.0可以識別
<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->
IE5.0包換IE5.5都可以識別
<!--[if lt IE 6]> Only IE 6- <![endif]-->
僅IE6可識別
<!--[if gte IE 6]> Only IE 6/+ <![endif]-->
IE6以及IE6以下的IE5.x都可識別
<!--[if lte IE 7]> Only IE 7/- <![endif]-->
僅IE7可識別以上內容可能並不全面，歡迎大家能和我一起把這些技巧都彙總起來，爲以後工作的查詢提供一個方便，同時在這裏感謝那些研究出這些HACK的作者們。
第一種可能是你還沒有理解CSS處理頁面的原理。在你考慮你的頁面整體表現效果前，你應當先考慮內容的語義和結構，然後再針對語義、結構添加CSS。這篇文章將告訴你應該怎樣把HTML結構化。
另一種原因是你對那些非常熟悉的表現層屬性(例如：cellpadding,、hspace、align="left"等等)束手無策，不知道該轉換成對 應的什麼CSS語句。
當你解決了第一種問題，知道了如何結構化你的HTML，我再給出一個列表，詳細列出原來的表現屬性用什麼CSS來代替。
結構化HTML
我們在剛學習網頁製作時，總是先考慮怎麼設計，考慮那些圖片、字體、顏色、以及佈局方案。然後我們用Photoshop或者Fireworks畫出來、切割成小圖。最後再通過編輯HTML將所有設計還原表現在頁面上。
如果你希望你的HTML頁面用CSS佈局(是CSS-friendly的)，你需要回頭重來，先不考慮“外觀”，要先思考你的頁面內容的語義和結構。
外觀並不是最重要的。一個結構良好的HTML頁面可以以任何外觀表現出來，CSS Zen Garden是一個典型的例子。CSS Zen Garden幫助我們最終認識到CSS的強大力量。
HTML不僅僅只在電腦屏幕上閱讀。你用photoshop精心設計的畫面可能不能顯示在PDA、移動電話和屏幕閱讀機上。但是一個結構良好的HTML頁面可以通過CSS的不同定義，顯示在任何地方，任何網絡設備上。
開始思考
首先要學習什麼是"結構"，一些作家也稱之爲"語義"。這個術語的意思是你需要分析你的內容塊，以及每塊內容服務的目的，然後再根據這些內容目的建立起相應的HTML結構。
如果你坐下來仔細分析和規劃你的頁面結構，你可能得到類似這樣的幾塊：
標誌和站點名稱
主頁面內容
站點導航(主菜單)
子菜單
搜索框
功能區(例如購物車、收銀臺)
頁腳(版權和有關法律聲明)
我們通常採用DIV元素來將這些結構定義出來，類似這樣：
＜div id="header"＞＜/div＞
＜div id="content"＞＜/div＞
＜div id="globalnav"＞＜/div＞
＜div id="subnav"＞＜/div＞
＜div id="search"＞＜/div＞
＜div id="shop"＞＜/div＞
＜div id="footer"＞＜/div＞
這不是佈局，是結構。這是一個對內容塊的語義說明。當你理解了你的結構，就可以加對應的ID在DIV上。DIV容器中可以包含任何內容塊，也可以嵌套另一個DIV。內容塊可以包含任意的HTML元素---標題、段落、圖片、表格、列表等等。
根據上面講述的，你已經知道如何結構化HTML，現在你可以進行佈局和樣式定義了。每一個內容塊都可以放在頁面上任何地方，再指定這個塊的顏色、字體、邊框、背景以及對齊屬性等等。
使用選擇器是件美妙的事
id的名稱是控制某一內容塊的手段,通過給這個內容塊套上DIV並加上唯一的id,你就可以用CSS選擇器來精確定義每一個頁面元素的外觀表現,包括標題、列表、圖片、鏈接或者段落等等。例如你爲#header寫一個CSS規則，就可以完全不同於#content裏的圖片規則。
另外一個例子是：你可以通過不同規則來定義不同內容塊裏的鏈接樣式。類似這樣：#globalnav a:link或者 #subnava:link或者#content a:link。你也可以定義不同內容塊中相同元素的樣式不一樣。例如，通過#content p和#footerp分別定義#content和#footer中p的樣式。從結構上講，你的頁面是由圖片、鏈接、列表、段落等組成的，這些元素本身並不會對顯示在什麼網絡設備中(PDA還是手機或者網絡電視)有影響，它們可以被定義爲任何的表現外觀。
一個仔細結構化的HTML頁面非常簡單，每一個元素都被用於結構目的。當你想縮進一個段落，不需要使用blockquote標籤，只要使用p標籤，並對p加一個CSS的margin規則就可以實現縮進目的。p是結構化標籤，margin是表現屬性，前者屬於HTML，後者屬於CSS。(這就是結構於表現的相分離.)
良好結構的HTML頁面內幾乎沒有表現屬性的標籤。代碼非常乾淨簡潔。例如，原先的代碼＜tablewidth="80%" cellpadding="3" border="2"align="left"＞，現在可以只在HTML中寫＜table＞，所有控制表現的東西都寫到CSS中去，在結構化的HTML中，table就是表格，而不是其他什麼(比如被用來佈局和定位)。
親自實踐一下結構化
上面說的只是最基本的結構，實際應用中，你可以根據需要來調整內容塊。常常會出現DIV嵌套的情況，你會看到"container"層中又有其它層，結構類似這樣：
＜div id="navcontainer"＞
＜div id="globalnav"＞
＜ul＞a list＜/ul＞
＜/div＞
＜div id="subnav"＞
＜ul＞another list＜/ul＞
＜/div＞
＜/div＞
嵌套的div元素允許你定義更多的CSS規則來控制表現，例如：你可以給#navcontainer一個規則讓列表居右，再給#globalnav一個規則讓列表居左，而給#subnav的list另一個完全不同的表現。
用CSS替換傳統方法
下面的列表將幫助你用CSS替換傳統方法：
HTML屬性以及相對應的CSS方法
HTML屬性
CSS方法說明
align="left"
align="right" float: left;
float: right; 使用CSS可以浮動 任何元素:圖片、段落、div、標題、表格、列表等等
當你使用float屬性，必須給這個浮動元素定義一個寬度。
marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin:0; 使用CSS, margin可以設置在任何元素上, 不僅僅是body元素.更重要的，你可以分別指定元素的top, right,bottom和left的margin值。
vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff;
a:visited: #339;
a:hover: #999;
a:active: #00f;
在HTML中，鏈接的顏色作爲body的一個屬性值定義。整個頁面的鏈接風格都一樣。使用CSS的選擇器，頁面不同部分的鏈接樣式可以不一樣。
bgcolor="#FFFFFF" background-color: #fff; 在CSS中，任何元素都可以定義背景顏色，不僅僅侷限於body和table元素。
bordercolor="#FFFFFF" border-color: #fff; 任何元素都可以設置邊框(boeder)，你可以分別定義top, right, bottom和left
border="3" cellspacing="3" border-width: 3px; 用CSS，你可以定義table的邊框爲統一樣式，也可以分別定義top, right, bottom and left邊框的顏色、尺寸和樣式。
你可以使用 table, td or th 這些選擇器.
如果你需要設置無邊框效果，可以使用CSS定義： border-collapse: collapse;
＜br clear="left"＞
＜br clear="right"＞
＜br clear="all"＞
clear: left;
clear: right;
clear: both;
許多2列或者3列布局都使用 float屬性來定位。如果你在浮動層中定義了背景顏色或者背景圖片，你可以使用clear屬性.
cellpadding="3"
vspace="3"
hspace="3" padding: 3px; 用CSS，任何元素都可以設定padding屬性，同樣，padding可以分別設置top, right, bottom and left。padding是透明的。
align="center" text-align: center;
margin-right: auto; margin-left: auto;
Text-align 只適用於文本.
象div，p這樣的塊級可以通過margin-right: auto; 和margin-left: auto;來水平居中
一些令人遺憾的技巧和工作環境
由於瀏覽器對CSS支持的不完善，我們有時候不得不採取一些技巧(hacks)或建立一種環境(Workarounds)來讓CSS實現傳統方法同樣的效 果。例如塊級元素有時候需要使用水平居中的技巧，盒模型bug的技巧等等。所有這些技巧都在MollyHolzschlag的文章《Integrated Web Design: Strategies for Long-Term CSS HackManagement》中有詳細說明。
另外一個關於CSS技巧的資源站點是Big John和Holly Bergevin的“Position is Everything”。
理解浮動行爲
Eric Meyer的《ContainingFloats》將幫助你掌握如何使用float屬性佈局。float元素有時候需要清除(clear)，閱讀《How To Clear FloatsWithout Structural Markup》將非常有幫助。
另一種原因是你對那些非常熟悉的表現層屬性(例如：cellpadding,、hspace、align="left"等等)束手無策，不知道該轉換成對應的什麼CSS語句。 當你解決了第一種問題，知道了如何結構化你的HTML，我再給出一個列表，詳細列出原來的表現屬性用什麼CSS來代替。
結構化HTML
我們在剛學習網頁製作時，總是先考慮怎麼設計，考慮那些圖片、字體、顏色、以及佈局方案。然後我們用Photoshop或者Fireworks畫出來、切割成小圖。最後再通過編輯HTML將所有設計還原表現在頁面上。
如果你希望你的HTML頁面用CSS佈局(是CSS-friendly的)，你需要回頭重來，先不考慮“外觀”，要先思考你的頁面內容的語義和結構。
外觀並不是最重要的。一個結構良好的HTML頁面可以以任何外觀表現出來，CSS Zen Garden是一個典型的例子。CSS Zen Garden幫助我們最終認識到CSS的強大力量。
HTML不僅僅只在電腦屏幕上閱讀。你用photoshop精心設計的畫面可能不能顯示在PDA、移動電話和屏幕閱讀機上。但是一個結構良好的HTML頁面可以通過CSS的不同定義，顯示在任何地方，任何網絡設備上。
開始思考
首先要學習什麼是"結構"，一些作家也稱之爲"語義"。這個術語的意思是你需要分析你的內容塊，以及每塊內容服務的目的，然後再根據這些內容目的建立起相應的HTML結構。
如果你坐下來仔細分析和規劃你的頁面結構，你可能得到類似這樣的幾塊：
標誌和站點名稱
主頁面內容
站點導航(主菜單)
子菜單
搜索框
功能區(例如購物車、收銀臺)
頁腳(版權和有關法律聲明)
我們通常採用DIV元素來將這些結構定義出來，類似這樣：
＜div id="header"＞＜/div＞
＜div id="content"＞＜/div＞
＜div id="globalnav"＞＜/div＞
＜div id="subnav"＞＜/div＞
＜div id="search"＞＜/div＞
＜div id="shop"＞＜/div＞
＜div id="footer"＞＜/div＞
這不是佈局，是結構。這是一個對內容塊的語義說明。當你理解了你的結構，就可以加對應的ID在DIV上。DIV容器中可以包含任何內容塊，也可以嵌套另一個DIV。內容塊可以包含任意的HTML元素---標題、段落、圖片、表格、列表等等。
根據上面講述的，你已經知道如何結構化HTML，現在你可以進行佈局和樣式定義了。每一個內容塊都可以放在頁面上任何地方，再指定這個塊的顏色、字體、邊框、背景以及對齊屬性等等。
使用選擇器是件美妙的事
id的名稱是控制某一內容塊的手段,通過給這個內容塊套上DIV並加上唯一的id,你就可以用CSS選擇器來精確定義每一個頁面元素的外觀表現,包括標題、列表、圖片、鏈接或者段落等等。例如你爲#header寫一個CSS規則，就可以完全不同於#content裏的圖片規則。
另外一個例子是：你可以通過不同規則來定義不同內容塊裏的鏈接樣式。類似這樣：#globalnav a:link或者 #subnava:link或者#content a:link。你也可以定義不同內容塊中相同元素的樣式不一樣。例如，通過#content p和#footerp分別定義#content和#footer中p的樣式。從結構上講，你的頁面是由圖片、鏈接、列表、段落等組成的，這些元素本身並不會對顯示在什麼網絡設備中(PDA還是手機或者網絡電視)有影響，它們可以被定義爲任何的表現外觀。
一個仔細結構化的HTML頁面非常簡單，每一個元素都被用於結構目的。當你想縮進一個段落，不需要使用blockquote標籤，只要使用p標籤，並對p加一個CSS的margin規則就可以實現縮進目的。p是結構化標籤，margin是表現屬性，前者屬於HTML，後者屬於CSS。(這就是結構於表現的相分離.)
良好結構的HTML頁面內幾乎沒有表現屬性的標籤。代碼非常乾淨簡潔。例如，原先的代碼＜tablewidth="80%" cellpadding="3" border="2"align="left"＞，現在可以只在HTML中寫＜table＞，所有控制表現的東西都寫到CSS中去，在結構化的HTML中，table就是表格，而不是其他什麼(比如被用來佈局和定位)。
親自實踐一下結構化
上面說的只是最基本的結構，實際應用中，你可以根據需要來調整內容塊。常常會出現DIV嵌套的情況，你會看到"container"層中又有其它層，結構類似這樣：
＜div id="navcontainer"＞
＜div id="globalnav"＞
＜ul＞a list＜/ul＞
＜/div＞
＜div id="subnav"＞
＜ul＞another list＜/ul＞
＜/div＞
＜/div＞
嵌套的div元素允許你定義更多的CSS規則來控制表現，例如：你可以給#navcontainer一個規則讓列表居右，再給#globalnav一個規則讓列表居左，而給#subnav的list另一個完全不同的表現。
用CSS替換傳統方法
下面的列表將幫助你用CSS替換傳統方法：
HTML屬性以及相對應的CSS方法
HTML屬性
CSS方法說明
align="left"
align="right" float: left;
float: right; 使用CSS可以浮動任何元素:圖片、段落、div、標題、表格、列表等等
當你使用float屬性，必須給這個浮動元素定義一個寬度。
marginwidth="0"leftmargin="0" marginheight="0" topmargin="0" margin: 0; 使用CSS,margin可以設置在任何元素上, 不僅僅是body元素,更重要的，你可以分別指定元素的top, right,bottom和left的margin值。
vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff;
a:visited: #339;
a:hover: #999;
a:active: #00f;
在HTML中，鏈接的顏色作爲body的一個屬性值定義。整個頁面的鏈接風格都一樣。使用CSS的選擇器，頁面不同部分的鏈接樣式可以不一樣。
bgcolor="#FFFFFF" background-color: #fff; 在CSS中，任何元素都可以定義背景顏色，不僅僅侷限於body和table元素。
bordercolor="#FFFFFF" border-color: #fff; 任何元素都可以設置邊框(boeder)，你可以分別定義top, right, bottom和left
border="3"cellspacing="3" border-width: 3px; 用CSS，你可以定義table的邊框爲統一樣式，也可以分別定義top, right, bottom and left邊框的顏色、尺寸和樣式。
你可以使用 table, td or th 這些選擇器.
如果你需要設置無邊框效果，可以使用CSS定義： border-collapse: collapse;
＜br clear="left"＞
＜br clear="right"＞
＜br clear="all"＞
clear: left;
clear: right;
clear: both;
許多2列或者3列布局都使用float屬性來定位。如果你在浮動層中定義了背景顏色或者背景圖片，你可以使用clear屬性.
cellpadding="3"
vspace="3"
hspace="3" padding: 3px; 用CSS，任何元素都可以設定padding屬性，同樣，padding可以分別設置top, right, bottom and left。padding是透明的。
align="center" text-align: center;
margin-right: auto; margin-left: auto;
Text-align 只適用於文本.
象div，p這樣的塊級可以通過margin-right: auto; 和margin-left: auto;來水平居中
一些令人遺憾的技巧和工作環境
由於瀏覽器對CSS支持的不完善，我們有時候不得不採取一些技巧(hacks)或建立一種環境(Workarounds)來讓CSS實現傳統方法同樣的效果。例如塊級元素有時候需要使用水平居中的技巧，盒模型bug的技巧等等。所有這些技巧都在MollyHolzschlag的文章《Integrated Web Design: Strategies for Long-Term CSS HackManagement》中有詳細說明。
另外一個關於CSS技巧的資源站點是Big John和Holly Bergevin的“Position is Everything”。
理解浮動行爲
Eric Meyer的《Containing Floats》將幫助你掌握如何使用float屬性佈局。float元素有時候需要清除(clear)，閱讀《How To Clear Floats Without Structural Markup》將非常有幫助。
瀏覽器支持的不一致性 瀏覽器的漏洞或缺乏支持的CSS功能，導致不同的瀏覽器顯示出不同的CSS版面編排。例如在微軟Internet Explorer6.0的舊版本 ，執行了許多自己的CSS2.0屬性，曲解了很多重要的屬性，例如：width，height，和float。許多所謂的CSS人員，必須在最熱門的或常用的瀏覽器中達到一致的版面編排。在不同的瀏覽器中，要達到像素精準的版面編排，有時候是不可能的。
CSS沒有父層選擇器 CSS選擇器無法提供元素的父層或繼承性，以符合某種程度上的標準。先進的選擇器（例如 XPath）有助於複雜的樣式設計。然而，瀏覽器的性能和增加彩現的問題關係著父層選擇器，卻是CSS的工作羣組拒絕建議的主要原因。
不能明確地指定繼承性 樣式的繼承性，建立在瀏覽器中DOM元素的層級和具體的規則上。
垂直控制的侷限元素的水平放置普遍地易於控制，垂直控制則非憑直覺性的、較迂迴的甚至是不可能的。簡單來說，例如：垂直地圍繞一個元素、頁尾的放置不能高於可見視窗（viewport，視窗或屏幕的可見範圍）的底部範圍、需要複雜而非憑直覺性的樣式規則，或是簡單但不被廣泛支持的規則。
顯示的缺乏目前的CSS沒有辦法明確又簡單的顯示屬性值（例如：margin-left: 10% - 3em +4px;）。這在很多情況下都是非常有用的，例如：總字段中計算字段的尺寸限制。無論如何，CSS WG發表了CSS侷限性的草案，而InternetExplorer 5 以後的版本支持相似功能的語法顯示。
缺乏正交性同樣的效果可以用不同的屬性來完成，這經常會造成困擾。例如position、display與float定義了不同的配置方式，而且不能有效的交替使用。 一個display: table-cell元素不能指定 float或是position: relative，因爲指定float:left的元素不應該受到display效果的影響。再者，沒有考慮到新建立屬性所造成的影響，例如在表格中你應該使用border-spacing而不是margin-*來指定表格元素。這是因爲依照CSS準則，表格內部元素是沒有邊界（margin）的。
html和css的基礎知識，是必須的。html和css都是很簡單的東西，不涉及算法，不涉及數據庫，只要搞清楚含義就可以。有了基礎，其實很多問題都會迎刃而解，真的遇到了不明白的，再問也不遲。
二、明白自己要問什麼[3]
經常有人問：“爲什麼這個沒有效果？”，然後給一個截圖。頁面是由代碼來表現的，不給代碼，再聰明的人也沒法猜。
三、善於使用搜索引擎
明白問題出在什麼地方，形成最直接的問題了，效率最高的方法是使用搜索引擎。特別對於初學者來說，問題一般都是被問過很多遍的，因此，也許已經有人針對這個問題給過很詳細的解釋，搜一搜看看有沒有，這樣的結果，比別人在論壇或者QQ上隨便打一句兩句話回答更能提高自己的水平。
四、關注別人的問題
別人提的問題，可能現在用不到，但是也許某一天就會用得到的，多關注別人提的問題，當要用的時候，可以快速的找到解決的方法，而看別人的回答也許就能讓自己更進一步，同時，回答別人的問題，也能鞏固自己的知識，有時候還能讓自己發現新的東西。基礎很重，每個人都會有自己的看待問題的視角，解決問題的過程不一樣，產生的結果可能也不一樣。
內容擾亂系統 (CSS)是一種防止直接從盤片上覆制視頻文件的數據加密和鑑定方法。每個獲得許可的人都能得到一把密鑰，它從加密光盤上的密鑰組成的母集中取出來。 只要在以後的光盤上去除該密鑰，許可就失效了。CSS解密算法與驅動器單元交換密鑰，以生成加密用的密鑰。這一生成的密鑰用來擾亂盤片密鑰與影視節目密鑰的交換。影視節目密鑰用來解密盤片上數據。有CSS電路的DVD播放機先對數據進行解密，然後再解碼和播放。如果是計算機，那麼DVD解碼硬件和軟件必須加入一個CSS解密模塊。所有DVD-ROM驅動器都有一個附加固件，可以與計算機中的CSS模塊交換鑑定和解密鑰匙。1999年10月，CSS算法被人破解，並被散佈於網上，引發了無休止的法律爭端。
![]( "CS:S")
SOURCE的引擎
SOURCE的引擎VAVLE公司花費了數年的時間去開發HL2，SOURCE引擎的官方平臺，他們希望以次在電腦遊戲領域樹立一座豐碑。人工編寫環境程序，僵硬的模式，缺乏新意的特效，這樣的日子已經一去不復返了。新版本的CS是以SOURCE引擎爲基礎，這就是爲什麼叫它Counter-strike: Source(或CS：Source),這篇文章重點介紹了遊戲裏實際的變化，以及採用SOURCE引擎所帶來的附帶產品的變化。從8月18日開始，當CZ的玩家進行這個遊戲時，你會得到很多我們爲你提供的細節
當你第一次進入遊戲，你會被遊戲場景的完美結合所震驚。在通道和角落的桶代替了原來的箱子。原先在DUST裏，擺在小通道里的瓶子和罐子，呈現出一種沙塵暴的景象。而現在，則是一副中東式的建築和遭受戰爭洗禮的場面。DUST地圖裏的A點放C4的地方不再是以前那樣開放式的堆滿舊箱子，而一片不毛之地，裏面有一些固定的物體，可以利用它們防守，攻擊，隱藏。CS：S將動態環境引入了第一視角射擊遊戲。我們所能說只是，感謝VAVLE。不僅那些在SOURCE裏相互影響的道具給人留下深刻的印象，並提高了所有玩家的經驗，而且在實戰中增加了動態的場景。在遊戲裏，玩家可以將桶推到一個理想的位置，可以通過射擊理想的角度去推動或滑動這些物體。輪胎也是可以滾動的。威士忌瓶也可以被擊成碎片
環境效果
VAVLE再一次提高了遊戲環境的真實性。HL是一個可以把牆的類型區分的遊戲。有些是水泥的，有的是石灰的，木材，還有的是沙石的。不同的物體會有特有的聲音。SOURCE引擎在多方面提高了這種真實性。如果你看過黑客帝國（大家都看過）你肯定熟悉Noe和Trinity摧毀的那些辦公建築。那些牆，地板，柱子都是由大理石製成的。SOURCE雖然不能讓你真正的摧毀那些牆壁，但是它能讓你感覺生臨其境。當你在遊戲裏追殺一個玩家，在牆壁上留下的痕跡會讓你感覺到你確實損壞了這些建築。並且可以留下的彈痕顯得非常真實。當你劈砍一堵土牆時，牆壁會滲出沙塵。磚瓦地板可以反射光線，包括人和物體投下的影子。這些效果不僅令人印象深刻，而且提高了整個遊戲的真實性
遊戲最低配置：
CPU：1.2GHz
內存：128MB
顯卡：支持DirectX 7的3D加速卡
操作系統：Windows 2000/XP/ME/98
遊戲推薦配置：
CPU：2.9GHz
內存：1GB
顯卡：支持DirectX9的3D加速卡
操作系統：Windows 2000/XP/2008
[4]
CSS
[編輯本段]
CSS歷史
從1990年代初HTML被髮明開始，樣式表就以各種形式出現了，不同的瀏覽器結合了它們各自的樣式語言，讀者可以使用這些樣式語言來調節網頁的顯示方式。一開始樣式表是給讀者用的，最初的HTML版本只含有很少的顯示屬性，讀者來決定網頁應該怎樣被顯示。但隨着HTML的成長，爲了滿足設計師的要求，HTML增加了很多顯示功能。隨着這些功能的增加，外來定義樣式的語言越來越沒有意義了。
1994年哈坤·利提出了CSS的最初建議；伯特·波斯（Bert Bos）當時正在設計一個叫做Argo的瀏覽器，他們決定一起合作設計CSS。
當時已經有過一些關於樣式表語言的建議了，但CSS是第一個含有“層疊”的主意的。在CSS中，一個文件的樣式可以從其他的樣式表中繼承下來。讀者在有些地方可以使用他自己更喜歡的樣式，在其他地方去繼承，或“層疊”作者的樣式, 這種層疊的方式使作者和讀者都可以靈活地加入自己的設計，混合各人的愛好。
哈坤於1994年在芝加哥的一次會議上第一次提出了CSS的建議，1995年他與波斯一起再次提出這個建議。當時W3C剛剛建立，W3C對CSS的發展很感興趣，它爲此組織了一次討論會。哈坤、波斯和其他一些人（比如微軟的托馬斯·雷爾登）是這個項目的主要技術負責人。1996年底，CSS已經完成。1996年12月CSS要求的第一版本被出版。
1997年初，W3C內組織了專門管CSS的工作組，其負責人是克里斯·裏雷。這個工作組開始討論第一版中沒有涉及到的問題，於是1998年5月出版了CCS的第二版。到2007年爲止，第三版還未完備。
[編輯本段]
使用CSS+DIV的優點
採用CSS+DIV進行網頁重構相對與傳統的TABLE網頁佈局而具有以下3個顯著優勢：1：表現和內容相分離
將設計部分剝離出來放在一個獨立樣式文件中，HTML文件中只存放文本信息。這樣的頁面對搜索引擎更加友好。
2：提高頁面瀏覽速度
對於同一個頁面視覺效果，採用CSS+DIV重構的頁面容量要比TABLE編碼的頁面文件容量小得多，前者一般只有後者的1/2大小。瀏覽器就不用去編譯大量冗長的標籤。
3：易於維護和改版
你只要簡單的修改幾個CSS文件就可以重新設計整個網站的頁面。
4: 使用div+css更符合現在的W3C國際標準.
[編輯本段]
感性體驗CSS
是一個普普通通的網頁。然而通過給這個文件添加的CSS規則，我們可以得到十分美觀的網頁：http://www.csszengarden.com/
這還不是全部，不改動HTML，只是通過添加不同的CSS規則，我們就可以得到各種不同樣式的網頁：
http://www.csszengarden.com/?cssfile=/208/208.css&page=0
好了，下面我們再來回答什麼是CSS這個問題。
什麼是Cascading Style Sheets（層疊樣式表）
* CSS是Cascading Style Sheets(層疊樣式表)的簡稱.
* CSS語言是一種標記語言,它不需要編譯,可以直接由瀏覽器解釋執行(屬於瀏覽器解釋型語言).
* 在標準網頁設計中CSS負責網頁內容(XHTML)的表現.
* CSS文件也可以說是一個文本文件,它包含了一些CSS標記,CSS文件必須使用css爲文件名後綴.
* 可以通過簡單的更改CSS文件,改變網頁的整體表現形式,可以減少我們的工作量,所以她是每一個網頁設計人員的必修課.
* CSS是由W3C的CSS工作組產生和維護的.
[編輯本段]
如何將樣式表加入到網頁
可以用以下三種方式將樣式表加入您的網頁。而最接近目標的樣式定義優先權越高。高優先權樣式將繼承低優先權樣式的未重疊定義但覆蓋重疊的定義。例外請參閱 !important 聲明。 鏈入外部樣式表文件 (Linking to a Style Sheet)
你可以先建立外部樣式表文件（.css），然後使用HTML的link對象。示例如下：
<head>
<title>文檔標題</title>
<link rel=stylesheet href="http://www.dhtmlet.com/dhtmlet.css" type="text/css">
</head>
而在XML中，你應該如下例所示在聲明區中加入：
<? xml-stylesheet type="text/css" href="http://www.dhtmlet.com/dhtmlet.css" ?>
定義內部樣式塊對象 (Embedding a Style Block)
你可以在你的HTML文檔的<HTML>和<BODY>標記之間插入一個<STYLE>...</STYLE>塊對象。 定義方式請參閱樣式表語法。示例如下：
<html>
<head>
<title>文檔標題</title>
<style type="text/css">
<!--
body {font: 10pt "Arial"}
h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon}
h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue}
p {font: 10pt/12pt "Arial"; color: black}
-->
</style>
</head>
<body>
請注意，這裏將style對象的type屬性設置爲"text/css"，是允許不支持這類型的瀏覽器忽略樣式表單。
內聯定義 (Inline Styles)
內聯定義即是在對象的標記內使用對象的style屬性定義適用其的樣式表屬性。示例如下：
這一行被增加了左右的外補丁
[編輯本段]
CSS的語法:
CSS的定義是由三個部分構成:選擇符(selector)，屬性(properties)和屬性的取值(value)。
ccs
說明:
·選擇符是可以是多種形式，一般是你要定義樣式的HTML標記，例如BODY、P、TABLE……，你可以通過此方法定義它的屬性和值，屬性和值要用冒號隔開:
例子:body {color: black}，此例的效果是使頁面中的文字爲黑色。
·如果屬性的值是多個單詞組成，必須在值上加引號，比如字體的名稱經常是幾個單詞的組合:
例子:p {font-family: "sans serif"} (定義段落字體爲sans serif)
· 如果需要對一個選擇符指定多個屬性時，我們使用分號將所有的屬性和值分開:
例子:p {text-align: center; color: red} (段落居中排列;並且段落中的文字爲紅色)
2. 選擇符組
你可以把相同屬性和值的選擇符組合起來書寫，用逗號將選擇符分開，這樣可以減少樣式重複定義:
h1, h2, h3, h4, h5, h6 { color: green } (這個組裏包括所有的標題元素，每個標題元素的文字都爲綠色)
p, table{ font-size: 9pt } (段落和表格裏的文字尺寸爲9號字)
效果完全等效於:
p { font-size: 9pt }
table { font-size: 9pt }
3. 類選擇符
用類選擇符你能夠把相同的元素分類定義不同的樣式，定義類選擇符時，在自定類的名稱前面加一個點號。假如你想要兩個不同的段落，一個段落向右對齊，一個段落居中，你可以先定義兩個類:
p.right {text-align: right}
p.center {text-align: center}
然後用不在不同的段落裏，只要在HTML標記里加入你定義的class參數:
這個段落向右對齊的
這個段落是居中排列的
類選擇符還有一種用法，在選擇符中省略HTML標記名，這樣可以把幾個不同的元素定義成相同的樣式:
.center {text-align: center} (定義.center的類選擇符爲文字居中排列)
這樣的類可以被應用到任何元素上。下面我們使h1元素(標題1)和p元素(段落)都歸爲“center”類，這使兩個元素的樣式都跟隨“.center”這個類選擇符:
<h1 class="center">這個標題是居中排列的</h1>
這個段落也是居中排列的
注意:這種省略HTML標記的類選擇符是我們經後最常用的CSS方法，使用這種方法，我們可以很方便的在任意元素上套用預先定義好的類樣式。
4. ID選擇符
在HTML頁面中ID參數指定了某個單一元素，ID選擇符是用來對這個單一元素定義單獨的樣式。
ID選擇符的應用和類選擇符類似，只要把CLASS換成ID即可。將上例中類用ID替代,ID只能在一個頁面中出現一次,而class可以多次運用.
ccs
定義ID選擇符要在ID名稱前加上一個“#”號。和類選擇符相同，定義ID選擇符的屬性也有兩種方法。下面這個例子，ID屬性將匹配所有id="intro"的元素:
#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
} (字體尺寸爲默認尺寸的110%;粗體;藍色;背景顏色透明)
下面這個例子，ID屬性只匹配id="intro"的段落元素:
p#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}
注意:ID選擇符侷限性很大，只能單獨定義某個元素的樣式，一般只在特殊情況下使用。
5. 包含選擇符
可以單獨對某種元素包含關係定義的樣式表，元素1裏包含元素2，這種方式只對在元素1裏的元素2定義，對單獨的元素1或元素2無定義，例如:
table a
{
font-size: 12px
}
在表格內的鏈接改變了樣式，文字大小爲12像素，而表格外的鏈接的文字仍爲默認大小。
6. 樣式表的層疊性
層疊性就是繼承性，樣式表的繼承規則是外部的元素樣式會保留下來繼承給這個元素所包含的其他元素。事實上，所有在元素中嵌套的元素都會繼承外層元素指定的屬性值，有時會把很多層嵌套的樣式疊加在一起，除非另外更改。例如在DIV標記中嵌套P標記:
CSS
……
這個段落的文字爲紅色9號字
(P元素裏的內容會繼承DIV定義的屬性)
注意:有些情況下內部選擇符不繼承周圍選擇符的值，但理論上這些都是特殊的。例如，上邊界屬性值是不會繼承的，直覺上，一個段落不會同文檔BODY一樣的上邊界值。
另外，當樣式表繼承遇到衝突時，總是以最後定義的樣式爲準。如果上例中定義了P的顏色:
div { color: red; font-size:9pt}
p {color: blue}
……
這個段落的文字爲藍色9號字
我們可以看到段落裏的文字大小爲9號字是繼承div屬性的，而color屬性則依照最後定義的。
不同的選擇符定義相同的元素時，要考慮到不同的選擇符之間的優先級。ID選擇符，類選擇符和HTML標記選擇符，因爲ID選擇符是最後加上元素上的，所以優先級最高，其次是類選擇符。如果想超越這三者之間的關係，可以用!important提升樣式表的優先權，例如:
p { color: #FF0000!important }
.blue { color: #0000FF}
#id1 { color: #FFFF00}
我們同時對頁面中的一個段落加上這三種樣式，它最後會依照被!important申明的HTML標記選擇符樣式爲紅色文字。如果去掉!important，則依照優先權最高的ID選擇符爲黃色文字。
7. 註釋:/* ... */
你可以在CSS中插入註釋來說明你代碼的意思，註釋有利於你或別人以後編輯和更改代碼時理解代碼的含義。在瀏覽器中，註釋是不顯示的。CSS註釋以"/*" 開頭，以"*/" 結尾，如下:
/* 定義段落樣式表 */
p
{
text-align: center; /* 文本居中排列 */
ccs
font-family: arial /* 字體爲arial */
}
css可以用任何寫文本的工具進行開發,如文本工具,dreamweaver開發
css也是一種語言,這種語言要和html或者xhtml語言相結合才起作用,
css簡單來說就是用來美化網頁用的,用css語言來控制網頁的外觀
舉個例子
xhtml部分:
<ul>
<li>主頁</li>
<li>留言</li>
<li>論壇</li>
</ul>
此時在頁面上的表達形式是一個豎向列表,這樣不夠美觀,
可以css來改善這個列表爲一個橫向導航條和超鏈接
css部分:
ul{list-style:none;margin:0px;padding:0px}
ul li{margin:0px;padding:0px;float:left;}
ul li a{display:block;width:100px;height:30px;background:#efefef;color:#333;text-decoration:none;text-align:center}
ul li a:hover{background:#333;color:#fff;}
添加上css後,這個列表變成橫向的導航條了,超級鏈接是淡色背景,灰色字體,沒有下劃線,高度是30像素,寬度是100像素
當我們鼠標經過這個超級鏈接時候,變成灰色背景,白色字體
在主頁製作時採用CSS技術，可以有效地對頁面的佈局、字體、顏色、背景和其它效果實現更加精確的控制。
只要對相應的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數不同的網頁的外觀和格式。
它的作用可以達到：
（1）在幾乎所有的瀏覽器上都可以使用。
（2）以前一些非得通過圖片轉換實現的功能，現在只要用CSS就可以輕鬆實現，從而更快地下載頁面。
（3）使頁面的字體變得更漂亮，更容易編排，使頁面真正賞心悅目。
（4）你可以輕鬆地控制頁面的佈局 。
（5）你可以將許多網頁的風格格式同時更新，不用再一頁一頁地更新了。你可以將站點上所有的網頁風格都使用一個CSS文件進行控制，只要修改這個CSS文件中相應的行，那麼整個站點的所有頁面都會隨之發生變動。
想一想，沒有使用CSS前我們是如何控制字體的顏色和大小以及所使用的字體的？我們一般使用HTML標籤來實現，代碼非常煩瑣。
很難想象，如果在一個頁面裏需要頻繁地更替字體的顏色大小，最終生成的HTML代碼的長度一定臃腫不堪。
說實話，CSS就是爲了簡化這樣的工作誕生的，當然其功能決非這麼簡單。
CSS是通過對頁面結構的風格控制的思想，控制整個頁面的風格的。
式樣單放在頁面中，通過瀏覽器的解釋執行，是完全的文本，任何懂得HTML的人都可以掌握，非常的容易。甚至對一些非常老的瀏覽器，也不會產生頁面混亂的現象。
CSS的一大優點是它的圖片傳輸速度比較完全的HTML網頁要快一點。
關於CSS的參考資料，網上有很多討論CSS的社區，但是要系統學習CSS，選擇一本好書還是非常有必要的，推薦閱讀CSS三劍客之一《CSS實戰手冊》
CSS具有兩面性。就像它在格式化文本、導航欄、圖片以及其他小小的網頁方面很棒一樣，當你準備好佈局完整的網頁時，它真正可怕的一面也展現出來了。
CSS佈局有兩種風格——絕對定位和浮動。絕對定位讓你把一個元素以像素級的精確性定位在網頁的任何位置——或者理論上是這樣。這種整體控制令人興奮，就如你將在下一章中所看到的，但是實際上很難實現。這就是大量網頁使用基於浮動的佈局的原因，也是本章的主題。
詳細講解CSS規範化命名的三種通用命名規則
駱駝式命名法：
正如它的名稱所表示的那樣，是指混合使用大小寫字母來構成變量和函數的名字。例如，下面是分別用駱駝式命名法和下劃線法命名的同一個函數：
printEmployeePaychecks()；
print_employee_paychecks()；
第一個函數名使用了駱駝式命名法，函數名中的每一個邏輯斷點都有一個大寫字母來標記；第二個函數名使用了下劃線法，函數名中的每一個邏輯斷點都有一個下劃線來標記。
駱駝式命名法近年來越來越流行了，在許多新的函數庫和Microsoft Windows這樣的環境中，它使用得相當多。另一方面，下劃線法是c出現後開始流行起來的，在許多舊的程序和UNIX這樣的環境中，它的使用非常普遍。
匈牙利命名法：
廣泛應用於象Microsoft Windows這樣的環境中。Windows 編程中用到的變量（還包括宏）的命名規則匈牙利命名法，這種命名技術是由一位能幹的 Microsoft 程序員查爾斯- 西蒙尼(Charles Simonyi) 提出的。
匈牙利命名法通過在變量名前面加上相應的小寫字母的符號標識作爲前綴，標識出變量的作用域，類型等。這些符號可以多個同時使用，順序是先m_（成員變量）， 再指針，再簡單數據類型，再其它。
例如：m_lpszStr, 表示指向一個以0字符結尾的字符串的長指針成員變量。
匈牙利命名法關鍵是：標識符的名字以一個或者多個小寫字母開頭作爲前綴；前綴之後的是首字母大寫的一個單詞或多個單詞組合，該單詞要指明變量的用途。
帕斯卡（pascal）命名法：
與駱駝命名法類似。只不過駱駝命名法是首字母小寫，而帕斯卡命名法是首字母大寫，如：
DisplayInfo();
string UserName;
二者都是採用了帕斯卡命名法。在C#中，以帕斯卡命名法和駱駝命名法居多。
三種命名規則的小結：
MyData 就是一個帕斯卡命名的示例
而myData是一個駱駝命名法,它第一個單詞的第一個字母小寫,後面的單詞首字母大寫,看起來像一個駱駝
而iMyData是一個匈牙利命名法,它的小寫的i說明了它的型態,後面的和帕斯卡命名相同,指示了該變量的用途.
CSS樣式解決了一個普遍的問題
HTML 標籤原本被設計爲用於定義文檔內容。通過使用 <h1>、、 這樣的標籤，HTML 的初衷是表達“這是標題”、“這是段落”、“這是表格”之類的信息。而文檔佈局希望通過瀏覽器來完成，而不使用任何的格式化標籤。
由於兩種主要的瀏覽器（Netscape 和 Internet Explorer）不斷地將新的 HTML 標籤和屬性（比如字體標籤和顏色屬性）添加到 HTML 規範中，創建文檔內容清晰地獨立於文檔表現層的站點變得越來越困難。
爲了解決這個問題，萬維網聯盟（W3C），這個非營利的標準化聯盟，肩負起了 HTML 標準化的使命，並在 HTML 4.0 之外創造出樣式（Style）。
所有的主流瀏覽器均支持層疊樣式表。
[編輯本段]
CSS設計網頁的經驗
相信對大家是有一些幫助與啓發的。有些習慣顯得尤爲重要，今天與您分享六個CSS習慣。因爲習慣其實是會變的，所以只能寫“最近”的。這些習慣都跟技術無關，如果不遵守，也不會出錯。但是我覺得良好的習慣會體現一個人的素質。一、用class_name方式寫類名。
以前喜歡用class-name寫，不過好像兩樣也沒什麼差別。但我比較反對用className寫類名，因爲始終對瀏覽器大小寫敏感的問題抱有懷疑態度。但是id我會寫成駝峯式，理由見下一條。
二、樣式都用class而不用id。
有三個理由，一，id不可以重複，所以用class的話，可以肆無忌憚的用無數次。二，id的優先級太高，若是寫了一個#page_contenta {color:#f60}，那你完蛋了，裏面要改鏈接顏色，都必須加上#page_content才能越過這個優先級。三，id專門留給JS用，這樣才符合表現與行爲分離的原則。所以id我用駝峯式，也是爲了體現這一點。
三、margin和padding，儘量省略最後一個值。
比如margin: 20px 10px 5px 10px; ，左右值是一樣的，就應該省略掉最後一個值，寫成margin: 20px 10px5px; 這樣到時候要改左右間距，改一個就好，免得改漏了。其實這個問題雖然很細小，但是可以看得出對margin四個值省略規則的熟練程度。對於有的瀏覽器如果把margin:20px 10px 5px; ,這樣瀏覽器會解析成上下間距爲20px跟5px; 左右間距均爲10px;。
四、按標準寫CSS，再針對特定瀏覽器作hack。
比如，通常我們會遇到如下的寫法：
.side_col {
float:left;
display: inline;
margin-left: 20px;
}
而我的寫法會是：
.side_col {
float: left;
margin-left: 20px;
}
* .side_col {
_display:inline; /*hacked for IE 6*/
}
看明白了麼？不應該把hack混在一起，也不應該用一種僥倖的心態，覺得float:left與display:inline寫在一起沒事。嗯，它們倆確實沒事兒，但是其他的hack就不一定了。而且這裏寫display:inline純粹就是爲了解決IE6的bug，所以前面加上下劃線，以明確的表達你的目的。
另外不要以爲凡是hack都是爲IE準備的。其實有些hack是針對其他瀏覽器的，比如FF。這就要求你對CSS標準的熟練掌握，能夠自信的判斷哪些渲染是遵守標準，哪些違反標準的。
此外，我喜歡在hack前面加上星號，其實這純粹是個人習慣了。可能過段時間我就不這麼用了，呵呵。
五、記得加空格。
.class_name { property: value; }。我個人覺得合理的空格是優秀代碼的一個指標。按英文的習慣，標點後面都應該帶空格（如果你寫This is a pen.That’s apencil.句點後面不加空格， word裏面會有錯誤提示）。所以既然CSS是外國人發明的，應該按他們的格式來寫。類似的，在JS裏var a= b + c;裏面的空格也應該都要加。
六、適當的層疊（Cascading)或縮進以定義CSS的“作用域”。
啥叫“CSS的作用域”？其實並不是所有的樣式都在所有的地方使用。有的樣式只用在某一塊裏面，比如“導航欄”裏的“搜索框”，可能應該寫成：
.nav .search {}
而有時候用層疊會增加代碼優先級，所以也可以用縮進來“象徵性的”體現作用域。像這樣：
.login_box {}
.forgot_pwd{}
縮進，是爲了表示它們對應的標籤具有父子關係。但這樣只能起到一個提醒的作用。
七、顏色代碼的縮寫
例如：
.top{ width:104px; height:96px; background:#FF0099; }
可以寫成：
.top{ width:104px; height:96px; background:#F09; }
所寫 代碼必須是 AABBCC 形式的 縮寫成 ABC。
這樣寫加快處理效率，又簡單方便。
[編輯本段]
CSS Hack 彙總快查
屏蔽IE瀏覽器（也就是IE下不顯示）*:lang(zh) select {font:12px !important;} /*FF,OP可見，特別提醒：由於Opera最近的升級，目前此句只爲FF所識別*/select:empty {font:12px !important;} /*safari可見*/
這裏select是選擇符，根據情況更換。第二句是MAC上safari瀏覽器獨有的。僅IE7與IE5.0可以識別*+html select {…}
當面臨需要只針對IE7與IE5.0做樣式的時候就可以採用這個HACK。 僅IE7可以識別*+html select {…!important;}
當面臨需要只針對IE7做樣式的時候就可以採用這個HACK。 IE6及IE6以下識別* html select {…}
這個地方要特別注意很多博客都寫成了是IE6的HACK其實IE5.x同樣可以識別這個HACK。其它瀏覽器不識別。
html/**/ >body select {…}
這句與上一句的作用相同。僅IE6不識別，屏蔽IE6select { display /*屏蔽IE6*/:none;}
這裏主要是通過CSS註釋分開一個屬性與值，註釋在冒號前。僅IE6與IE5不識別，屏蔽IE6與IE5select/**/ { display /*IE6,IE5不識別*/:none;}
這裏與上面一句不同的是在選擇符與花括號之間多了一個CSS註釋。不屏蔽IE5.5僅IE5不識別，屏蔽IE5select/*IE5不識別*/ {…}
這一句是在上一句中去掉了屬性區的註釋。只有IE5不識別，IE5.5可以識別。盒模型解決方法selct {width:IE5.x寬度; voice-family :"/"}/""; voice-family:inherit; width:正確寬度;}
盒模型的清除方法不是通過!important來處理的。這點要明確。清除浮動select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中，當子級都爲浮動時，那麼父級的高度就無法完全的包住整個子級，那麼這時用這個清除浮動的HACK來對父級做一次定義，那麼就可以解決這個問題。截字省略號select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
這個是在越出長度後會自行的截掉多出部分的文字，並以省略號結尾，很好的一個技術。只是目前Firefox並不支持。只有Opera識別@media all and (min-width: 0px){ select {……} }
針對Opera瀏覽器做單獨的設定。以上都是寫CSS中的一些HACK，這些都是用來解決局部的兼容性問題，如果希望把兼容性的內容也分離出來，不妨試一下下面的幾種過濾器。這些過濾器有的是寫在CSS中通過過濾器導入特別的樣式，也有的是寫在HTML中的通過條件來鏈接或是導入需要的補丁樣式。
IE5.x的過濾器，只有IE5.x可見@media tty {
i{content:"/";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */IE5/MAC的過濾器，一般用不着/*/*//*/
@import "ie5mac.css";
/**/IE的if條件Hack<!--[if IE]> Only IE <![endif]-->
所有的IE可識別
<!--[if IE 5.0]> Only IE 5.0 <![endif]-->
只有IE5.0可以識別
<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->
IE5.0包換IE5.5都可以識別
<!--[if lt IE 6]> Only IE 6- <![endif]-->
僅IE6可識別
<!--[if gte IE 6]> Only IE 6/+ <![endif]-->
IE6以及IE6以下的IE5.x都可識別
<!--[if lte IE 7]> Only IE 7/- <![endif]-->
僅IE7可識別以上內容可能並不全面，歡迎大家能和我一起把這些技巧都彙總起來，爲以後工作的查詢提供一個方便，同時在這裏感謝那些研究出這些HACK的作者們。
[編輯本段]
DIV+css的結構
你正在學習CSS佈局嗎？是不是還不能完全掌握純CSS佈局？通常有兩種情況阻礙你的學習： 第一種可能是你還沒有理解CSS處理頁面的原理。在你考慮你的頁面整體表現效果前，你應當先考慮內容的語義和結構，然後再針對語義、結構添加CSS。這篇文章將告訴你應該怎樣把HTML結構化。
另一種原因是你對那些非常熟悉的表現層屬性(例如：cellpadding,、hspace、align="left"等等)束手無策，不知道該轉換成對 應的什麼CSS語句。
當你解決了第一種問題，知道了如何結構化你的HTML，我再給出一個列表，詳細列出原來的表現屬性用什麼CSS來代替。
結構化HTML
我們在剛學習網頁製作時，總是先考慮怎麼設計，考慮那些圖片、字體、顏色、以及佈局方案。然後我們用Photoshop或者Fireworks畫出來、切割成小圖。最後再通過編輯HTML將所有設計還原表現在頁面上。
如果你希望你的HTML頁面用CSS佈局(是CSS-friendly的)，你需要回頭重來，先不考慮“外觀”，要先思考你的頁面內容的語義和結構。
外觀並不是最重要的。一個結構良好的HTML頁面可以以任何外觀表現出來，CSS Zen Garden是一個典型的例子。CSS Zen Garden幫助我們最終認識到CSS的強大力量。
HTML不僅僅只在電腦屏幕上閱讀。你用photoshop精心設計的畫面可能不能顯示在PDA、移動電話和屏幕閱讀機上。但是一個結構良好的HTML頁面可以通過CSS的不同定義，顯示在任何地方，任何網絡設備上。
開始思考
首先要學習什麼是"結構"，一些作家也稱之爲"語義"。這個術語的意思是你需要分析你的內容塊，以及每塊內容服務的目的，然後再根據這些內容目的建立起相應的HTML結構。
如果你坐下來仔細分析和規劃你的頁面結構，你可能得到類似這樣的幾塊：
標誌和站點名稱
主頁面內容
站點導航(主菜單)
子菜單
搜索框
功能區(例如購物車、收銀臺)
頁腳(版權和有關法律聲明)
我們通常採用DIV元素來將這些結構定義出來，類似這樣：
＜div id="header"＞＜/div＞
＜div id="content"＞＜/div＞
＜div id="globalnav"＞＜/div＞
＜div id="subnav"＞＜/div＞
＜div id="search"＞＜/div＞
＜div id="shop"＞＜/div＞
＜div id="footer"＞＜/div＞
這不是佈局，是結構。這是一個對內容塊的語義說明。當你理解了你的結構，就可以加對應的ID在DIV上。DIV容器中可以包含任何內容塊，也可以嵌套另一個DIV。內容塊可以包含任意的HTML元素---標題、段落、圖片、表格、列表等等。
根據上面講述的，你已經知道如何結構化HTML，現在你可以進行佈局和樣式定義了。每一個內容塊都可以放在頁面上任何地方，再指定這個塊的顏色、字體、邊框、背景以及對齊屬性等等。
使用選擇器是件美妙的事
id的名稱是控制某一內容塊的手段,通過給這個內容塊套上DIV並加上唯一的id,你就可以用CSS選擇器來精確定義每一個頁面元素的外觀表現,包括標題、列表、圖片、鏈接或者段落等等。例如你爲#header寫一個CSS規則，就可以完全不同於#content裏的圖片規則。
另外一個例子是：你可以通過不同規則來定義不同內容塊裏的鏈接樣式。類似這樣：#globalnav a:link或者 #subnava:link或者#content a:link。你也可以定義不同內容塊中相同元素的樣式不一樣。例如，通過#content p和#footerp分別定義#content和#footer中p的樣式。從結構上講，你的頁面是由圖片、鏈接、列表、段落等組成的，這些元素本身並不會對顯示在什麼網絡設備中(PDA還是手機或者網絡電視)有影響，它們可以被定義爲任何的表現外觀。
一個仔細結構化的HTML頁面非常簡單，每一個元素都被用於結構目的。當你想縮進一個段落，不需要使用blockquote標籤，只要使用p標籤，並對p加一個CSS的margin規則就可以實現縮進目的。p是結構化標籤，margin是表現屬性，前者屬於HTML，後者屬於CSS。(這就是結構於表現的相分離.)
良好結構的HTML頁面內幾乎沒有表現屬性的標籤。代碼非常乾淨簡潔。例如，原先的代碼＜tablewidth="80%" cellpadding="3" border="2"align="left"＞，現在可以只在HTML中寫＜table＞，所有控制表現的東西都寫到CSS中去，在結構化的HTML中，table就是表格，而不是其他什麼(比如被用來佈局和定位)。
親自實踐一下結構化
上面說的只是最基本的結構，實際應用中，你可以根據需要來調整內容塊。常常會出現DIV嵌套的情況，你會看到"container"層中又有其它層，結構類似這樣：
＜div id="navcontainer"＞
＜div id="globalnav"＞
＜ul＞a list＜/ul＞
＜/div＞
＜div id="subnav"＞
＜ul＞another list＜/ul＞
＜/div＞
＜/div＞
嵌套的div元素允許你定義更多的CSS規則來控制表現，例如：你可以給#navcontainer一個規則讓列表居右，再給#globalnav一個規則讓列表居左，而給#subnav的list另一個完全不同的表現。
用CSS替換傳統方法
下面的列表將幫助你用CSS替換傳統方法：
HTML屬性以及相對應的CSS方法
HTML屬性
CSS方法說明
align="left"
align="right" float: left;
float: right; 使用CSS可以浮動 任何元素:圖片、段落、div、標題、表格、列表等等
當你使用float屬性，必須給這個浮動元素定義一個寬度。
marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin:0; 使用CSS, margin可以設置在任何元素上, 不僅僅是body元素.更重要的，你可以分別指定元素的top, right,bottom和left的margin值。
vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff;
a:visited: #339;
a:hover: #999;
a:active: #00f;
在HTML中，鏈接的顏色作爲body的一個屬性值定義。整個頁面的鏈接風格都一樣。使用CSS的選擇器，頁面不同部分的鏈接樣式可以不一樣。
bgcolor="#FFFFFF" background-color: #fff; 在CSS中，任何元素都可以定義背景顏色，不僅僅侷限於body和table元素。
bordercolor="#FFFFFF" border-color: #fff; 任何元素都可以設置邊框(boeder)，你可以分別定義top, right, bottom和left
border="3" cellspacing="3" border-width: 3px; 用CSS，你可以定義table的邊框爲統一樣式，也可以分別定義top, right, bottom and left邊框的顏色、尺寸和樣式。
你可以使用 table, td or th 這些選擇器.
如果你需要設置無邊框效果，可以使用CSS定義： border-collapse: collapse;
＜br clear="left"＞
＜br clear="right"＞
＜br clear="all"＞
clear: left;
clear: right;
clear: both;
許多2列或者3列布局都使用 float屬性來定位。如果你在浮動層中定義了背景顏色或者背景圖片，你可以使用clear屬性.
cellpadding="3"
vspace="3"
hspace="3" padding: 3px; 用CSS，任何元素都可以設定padding屬性，同樣，padding可以分別設置top, right, bottom and left。padding是透明的。
align="center" text-align: center;
margin-right: auto; margin-left: auto;
Text-align 只適用於文本.
象div，p這樣的塊級可以通過margin-right: auto; 和margin-left: auto;來水平居中
一些令人遺憾的技巧和工作環境
由於瀏覽器對CSS支持的不完善，我們有時候不得不採取一些技巧(hacks)或建立一種環境(Workarounds)來讓CSS實現傳統方法同樣的效 果。例如塊級元素有時候需要使用水平居中的技巧，盒模型bug的技巧等等。所有這些技巧都在MollyHolzschlag的文章《Integrated Web Design: Strategies for Long-Term CSS HackManagement》中有詳細說明。
另外一個關於CSS技巧的資源站點是Big John和Holly Bergevin的“Position is Everything”。
理解浮動行爲
Eric Meyer的《ContainingFloats》將幫助你掌握如何使用float屬性佈局。float元素有時候需要清除(clear)，閱讀《How To Clear FloatsWithout Structural Markup》將非常有幫助。
[編輯本段]
DIV＋CSS網頁佈局入門指南
第一種可能是你還沒有理解CSS處理頁面的原理。在你考慮你的頁面整體表現效果前，你應當先考慮內容的語義和結構，然後再針對語義、結構添加CSS。這篇文章將告訴你應該怎樣把HTML結構化。另一種原因是你對那些非常熟悉的表現層屬性(例如：cellpadding,、hspace、align="left"等等)束手無策，不知道該轉換成對應的什麼CSS語句。 當你解決了第一種問題，知道了如何結構化你的HTML，我再給出一個列表，詳細列出原來的表現屬性用什麼CSS來代替。
結構化HTML
我們在剛學習網頁製作時，總是先考慮怎麼設計，考慮那些圖片、字體、顏色、以及佈局方案。然後我們用Photoshop或者Fireworks畫出來、切割成小圖。最後再通過編輯HTML將所有設計還原表現在頁面上。
如果你希望你的HTML頁面用CSS佈局(是CSS-friendly的)，你需要回頭重來，先不考慮“外觀”，要先思考你的頁面內容的語義和結構。
外觀並不是最重要的。一個結構良好的HTML頁面可以以任何外觀表現出來，CSS Zen Garden是一個典型的例子。CSS Zen Garden幫助我們最終認識到CSS的強大力量。
HTML不僅僅只在電腦屏幕上閱讀。你用photoshop精心設計的畫面可能不能顯示在PDA、移動電話和屏幕閱讀機上。但是一個結構良好的HTML頁面可以通過CSS的不同定義，顯示在任何地方，任何網絡設備上。
開始思考
首先要學習什麼是"結構"，一些作家也稱之爲"語義"。這個術語的意思是你需要分析你的內容塊，以及每塊內容服務的目的，然後再根據這些內容目的建立起相應的HTML結構。
如果你坐下來仔細分析和規劃你的頁面結構，你可能得到類似這樣的幾塊：
標誌和站點名稱
主頁面內容
站點導航(主菜單)
子菜單
搜索框
功能區(例如購物車、收銀臺)
頁腳(版權和有關法律聲明)
我們通常採用DIV元素來將這些結構定義出來，類似這樣：
＜div id="header"＞＜/div＞
＜div id="content"＞＜/div＞
＜div id="globalnav"＞＜/div＞
＜div id="subnav"＞＜/div＞
＜div id="search"＞＜/div＞
＜div id="shop"＞＜/div＞
＜div id="footer"＞＜/div＞
這不是佈局，是結構。這是一個對內容塊的語義說明。當你理解了你的結構，就可以加對應的ID在DIV上。DIV容器中可以包含任何內容塊，也可以嵌套另一個DIV。內容塊可以包含任意的HTML元素---標題、段落、圖片、表格、列表等等。
根據上面講述的，你已經知道如何結構化HTML，現在你可以進行佈局和樣式定義了。每一個內容塊都可以放在頁面上任何地方，再指定這個塊的顏色、字體、邊框、背景以及對齊屬性等等。
使用選擇器是件美妙的事
id的名稱是控制某一內容塊的手段,通過給這個內容塊套上DIV並加上唯一的id,你就可以用CSS選擇器來精確定義每一個頁面元素的外觀表現,包括標題、列表、圖片、鏈接或者段落等等。例如你爲#header寫一個CSS規則，就可以完全不同於#content裏的圖片規則。
另外一個例子是：你可以通過不同規則來定義不同內容塊裏的鏈接樣式。類似這樣：#globalnav a:link或者 #subnava:link或者#content a:link。你也可以定義不同內容塊中相同元素的樣式不一樣。例如，通過#content p和#footerp分別定義#content和#footer中p的樣式。從結構上講，你的頁面是由圖片、鏈接、列表、段落等組成的，這些元素本身並不會對顯示在什麼網絡設備中(PDA還是手機或者網絡電視)有影響，它們可以被定義爲任何的表現外觀。
一個仔細結構化的HTML頁面非常簡單，每一個元素都被用於結構目的。當你想縮進一個段落，不需要使用blockquote標籤，只要使用p標籤，並對p加一個CSS的margin規則就可以實現縮進目的。p是結構化標籤，margin是表現屬性，前者屬於HTML，後者屬於CSS。(這就是結構於表現的相分離.)
良好結構的HTML頁面內幾乎沒有表現屬性的標籤。代碼非常乾淨簡潔。例如，原先的代碼＜tablewidth="80%" cellpadding="3" border="2"align="left"＞，現在可以只在HTML中寫＜table＞，所有控制表現的東西都寫到CSS中去，在結構化的HTML中，table就是表格，而不是其他什麼(比如被用來佈局和定位)。
親自實踐一下結構化
上面說的只是最基本的結構，實際應用中，你可以根據需要來調整內容塊。常常會出現DIV嵌套的情況，你會看到"container"層中又有其它層，結構類似這樣：
＜div id="navcontainer"＞
＜div id="globalnav"＞
＜ul＞a list＜/ul＞
＜/div＞
＜div id="subnav"＞
＜ul＞another list＜/ul＞
＜/div＞
＜/div＞
嵌套的div元素允許你定義更多的CSS規則來控制表現，例如：你可以給#navcontainer一個規則讓列表居右，再給#globalnav一個規則讓列表居左，而給#subnav的list另一個完全不同的表現。
用CSS替換傳統方法
下面的列表將幫助你用CSS替換傳統方法：
HTML屬性以及相對應的CSS方法
HTML屬性
CSS方法說明
align="left"
align="right" float: left;
float: right; 使用CSS可以浮動任何元素:圖片、段落、div、標題、表格、列表等等
當你使用float屬性，必須給這個浮動元素定義一個寬度。
marginwidth="0"leftmargin="0" marginheight="0" topmargin="0" margin: 0; 使用CSS,margin可以設置在任何元素上, 不僅僅是body元素,更重要的，你可以分別指定元素的top, right,bottom和left的margin值。
vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff;
a:visited: #339;
a:hover: #999;
a:active: #00f;
在HTML中，鏈接的顏色作爲body的一個屬性值定義。整個頁面的鏈接風格都一樣。使用CSS的選擇器，頁面不同部分的鏈接樣式可以不一樣。
bgcolor="#FFFFFF" background-color: #fff; 在CSS中，任何元素都可以定義背景顏色，不僅僅侷限於body和table元素。
bordercolor="#FFFFFF" border-color: #fff; 任何元素都可以設置邊框(boeder)，你可以分別定義top, right, bottom和left
border="3"cellspacing="3" border-width: 3px; 用CSS，你可以定義table的邊框爲統一樣式，也可以分別定義top, right, bottom and left邊框的顏色、尺寸和樣式。
你可以使用 table, td or th 這些選擇器.
如果你需要設置無邊框效果，可以使用CSS定義： border-collapse: collapse;
＜br clear="left"＞
＜br clear="right"＞
＜br clear="all"＞
clear: left;
clear: right;
clear: both;
許多2列或者3列布局都使用float屬性來定位。如果你在浮動層中定義了背景顏色或者背景圖片，你可以使用clear屬性.
cellpadding="3"
vspace="3"
hspace="3" padding: 3px; 用CSS，任何元素都可以設定padding屬性，同樣，padding可以分別設置top, right, bottom and left。padding是透明的。
align="center" text-align: center;
margin-right: auto; margin-left: auto;
Text-align 只適用於文本.
象div，p這樣的塊級可以通過margin-right: auto; 和margin-left: auto;來水平居中
一些令人遺憾的技巧和工作環境
由於瀏覽器對CSS支持的不完善，我們有時候不得不採取一些技巧(hacks)或建立一種環境(Workarounds)來讓CSS實現傳統方法同樣的效果。例如塊級元素有時候需要使用水平居中的技巧，盒模型bug的技巧等等。所有這些技巧都在MollyHolzschlag的文章《Integrated Web Design: Strategies for Long-Term CSS HackManagement》中有詳細說明。
另外一個關於CSS技巧的資源站點是Big John和Holly Bergevin的“Position is Everything”。
理解浮動行爲
Eric Meyer的《Containing Floats》將幫助你掌握如何使用float屬性佈局。float元素有時候需要清除(clear)，閱讀《How To Clear Floats Without Structural Markup》將非常有幫助。
[編輯本段]
CSS的限制
使用“完整”的CSS的缺點包括：瀏覽器支持的不一致性 瀏覽器的漏洞或缺乏支持的CSS功能，導致不同的瀏覽器顯示出不同的CSS版面編排。例如在微軟Internet Explorer6.0的舊版本 ，執行了許多自己的CSS2.0屬性，曲解了很多重要的屬性，例如：width，height，和float。許多所謂的CSS人員，必須在最熱門的或常用的瀏覽器中達到一致的版面編排。在不同的瀏覽器中，要達到像素精準的版面編排，有時候是不可能的。
CSS沒有父層選擇器 CSS選擇器無法提供元素的父層或繼承性，以符合某種程度上的標準。先進的選擇器（例如 XPath）有助於複雜的樣式設計。然而，瀏覽器的性能和增加彩現的問題關係著父層選擇器，卻是CSS的工作羣組拒絕建議的主要原因。
不能明確地指定繼承性 樣式的繼承性，建立在瀏覽器中DOM元素的層級和具體的規則上。
垂直控制的侷限元素的水平放置普遍地易於控制，垂直控制則非憑直覺性的、較迂迴的甚至是不可能的。簡單來說，例如：垂直地圍繞一個元素、頁尾的放置不能高於可見視窗（viewport，視窗或屏幕的可見範圍）的底部範圍、需要複雜而非憑直覺性的樣式規則，或是簡單但不被廣泛支持的規則。
顯示的缺乏目前的CSS沒有辦法明確又簡單的顯示屬性值（例如：margin-left: 10% - 3em +4px;）。這在很多情況下都是非常有用的，例如：總字段中計算字段的尺寸限制。無論如何，CSS WG發表了CSS侷限性的草案，而InternetExplorer 5 以後的版本支持相似功能的語法顯示。
缺乏正交性同樣的效果可以用不同的屬性來完成，這經常會造成困擾。例如position、display與float定義了不同的配置方式，而且不能有效的交替使用。 一個display: table-cell元素不能指定 float或是position: relative，因爲指定float:left的元素不應該受到display效果的影響。再者，沒有考慮到新建立屬性所造成的影響，例如在表格中你應該使用border-spacing而不是margin-*來指定表格元素。這是因爲依照CSS準則，表格內部元素是沒有邊界（margin）的。
[編輯本段]
學好CSS的流程
[2]一、基礎學習html和css的基礎知識，是必須的。html和css都是很簡單的東西，不涉及算法，不涉及數據庫，只要搞清楚含義就可以。有了基礎，其實很多問題都會迎刃而解，真的遇到了不明白的，再問也不遲。
二、明白自己要問什麼[3]
經常有人問：“爲什麼這個沒有效果？”，然後給一個截圖。頁面是由代碼來表現的，不給代碼，再聰明的人也沒法猜。
三、善於使用搜索引擎
明白問題出在什麼地方，形成最直接的問題了，效率最高的方法是使用搜索引擎。特別對於初學者來說，問題一般都是被問過很多遍的，因此，也許已經有人針對這個問題給過很詳細的解釋，搜一搜看看有沒有，這樣的結果，比別人在論壇或者QQ上隨便打一句兩句話回答更能提高自己的水平。
四、關注別人的問題
別人提的問題，可能現在用不到，但是也許某一天就會用得到的，多關注別人提的問題，當要用的時候，可以快速的找到解決的方法，而看別人的回答也許就能讓自己更進一步，同時，回答別人的問題，也能鞏固自己的知識，有時候還能讓自己發現新的東西。基礎很重，每個人都會有自己的看待問題的視角，解決問題的過程不一樣，產生的結果可能也不一樣。
[編輯本段]
3) DVD內容擾亂系統
(CSS--Content Scrambling System)內容擾亂系統 (CSS)是一種防止直接從盤片上覆制視頻文件的數據加密和鑑定方法。每個獲得許可的人都能得到一把密鑰，它從加密光盤上的密鑰組成的母集中取出來。 只要在以後的光盤上去除該密鑰，許可就失效了。CSS解密算法與驅動器單元交換密鑰，以生成加密用的密鑰。這一生成的密鑰用來擾亂盤片密鑰與影視節目密鑰的交換。影視節目密鑰用來解密盤片上數據。有CSS電路的DVD播放機先對數據進行解密，然後再解碼和播放。如果是計算機，那麼DVD解碼硬件和軟件必須加入一個CSS解密模塊。所有DVD-ROM驅動器都有一個附加固件，可以與計算機中的CSS模塊交換鑑定和解密鑰匙。1999年10月，CSS算法被人破解，並被散佈於網上，引發了無休止的法律爭端。
[編輯本段]
4) 反恐精英:起源
Counter-Strike: Source (CS:S)
CS:S
遊戲簡介
SOURCE的引擎
SOURCE的引擎VAVLE公司花費了數年的時間去開發HL2，SOURCE引擎的官方平臺，他們希望以次在電腦遊戲領域樹立一座豐碑。人工編寫環境程序，僵硬的模式，缺乏新意的特效，這樣的日子已經一去不復返了。新版本的CS是以SOURCE引擎爲基礎，這就是爲什麼叫它Counter-strike: Source(或CS：Source),這篇文章重點介紹了遊戲裏實際的變化，以及採用SOURCE引擎所帶來的附帶產品的變化。從8月18日開始，當CZ的玩家進行這個遊戲時，你會得到很多我們爲你提供的細節
遊戲場景
當你第一次進入遊戲，你會被遊戲場景的完美結合所震驚。在通道和角落的桶代替了原來的箱子。原先在DUST裏，擺在小通道里的瓶子和罐子，呈現出一種沙塵暴的景象。而現在，則是一副中東式的建築和遭受戰爭洗禮的場面。DUST地圖裏的A點放C4的地方不再是以前那樣開放式的堆滿舊箱子，而一片不毛之地，裏面有一些固定的物體，可以利用它們防守，攻擊，隱藏。CS：S將動態環境引入了第一視角射擊遊戲。我們所能說只是，感謝VAVLE。不僅那些在SOURCE裏相互影響的道具給人留下深刻的印象，並提高了所有玩家的經驗，而且在實戰中增加了動態的場景。在遊戲裏，玩家可以將桶推到一個理想的位置，可以通過射擊理想的角度去推動或滑動這些物體。輪胎也是可以滾動的。威士忌瓶也可以被擊成碎片
環境效果
VAVLE再一次提高了遊戲環境的真實性。HL是一個可以把牆的類型區分的遊戲。有些是水泥的，有的是石灰的，木材，還有的是沙石的。不同的物體會有特有的聲音。SOURCE引擎在多方面提高了這種真實性。如果你看過黑客帝國（大家都看過）你肯定熟悉Noe和Trinity摧毀的那些辦公建築。那些牆，地板，柱子都是由大理石製成的。SOURCE雖然不能讓你真正的摧毀那些牆壁，但是它能讓你感覺生臨其境。當你在遊戲裏追殺一個玩家，在牆壁上留下的痕跡會讓你感覺到你確實損壞了這些建築。並且可以留下的彈痕顯得非常真實。當你劈砍一堵土牆時，牆壁會滲出沙塵。磚瓦地板可以反射光線，包括人和物體投下的影子。這些效果不僅令人印象深刻，而且提高了整個遊戲的真實性
遊戲配置要求
遊戲最低配置：
CPU：1.2GHz
內存：128MB
顯卡：支持DirectX 7的3D加速卡
操作系統：Windows 2000/XP/ME/98
遊戲推薦配置：
CPU：2.9GHz
內存：1GB
顯卡：支持DirectX9的3D加速卡
操作系統：Windows 2000/XP/2008
[4]
- 擴展閱讀：
- 1.W3C CSS 驗證服務 http://jigsaw.w3.org/css-validator/
- 2.W3C協會 http://www.webw3c.org/
- 3.CSS庫吧 http://www.cssk8.com/
- 4.Div之家 http://www.divhome.com/
- 5.CSS論壇 http://www.cssbbs.com/
- 6.網羅設計:http://bbs.wlsj56.cn 圖文.電子書.書籍.光盤.素材.視頻教程打包下載！
- 7.莒南信息港: http://www.770539.com/
- 8.Live Home!之家 http://home.forerx.cn/
[我來完善]
<script type="text/javascript"></script>
- “CSS”在英漢詞典中的解釋(來源：百度詞典)：
-
CSSabbr.1. =College Scholarship Service 大學獎學金處
合作編輯者：
<script></script>
©2009 Baidu 權利聲明
<script src="/js/usertracker.js"></script> <script></script> <script type="text/javascript"></script> <script src="/js/bksuggestion.js" type="text/javascript"></script> <script type="text/javascript"></script>
<script></script>
<script type="text/javascript"></script>
<script src="/js/bksuggestion.js" type="text/javascript"></script>
<script type="text/javascript"></script>
<script></script> <script type="text/javascript"></script>