CSS

一些CSS屬性允許使用一串值代替許多屬性，值使用空格分開。　　margin,pdding和border-width允許合并margin-top-width, margin-right-width, margin-bottom-width等等，形式像這樣：property:top right bottom left;逆時針順序。　　所以下面的：  代碼如下複製代碼

CSS樣式表的常用最佳化技巧和提示，可以大大提高網頁開發效率和更符合w3c標準。　　一、使用css縮寫 　　使用縮寫可以協助減少你CSS檔案的大小，更加容易閱讀。css縮寫的主要規則請參看《常用css縮寫文法總結》，這裡就不展開描述。　　二.明確定義單位，除非值為0　　忘記定義尺寸的單位是CSS新手普遍的錯誤。在HTML中你可以唯寫width=100，但是在CSS中，你必須給一個準確的單位，比如:width:100px width:100em。只有兩個例外情況可以不定義單位:

Grouping 分組　　當許多選取器有同樣屬性時，可以使用逗號組合它們。　　例子：  代碼如下複製代碼 h2 {    color: red;}.thisOtherClass {    color: red;}.yetAnotherClass {    color: red;}

前面的學習我們僅僅使用HTML選取器（在HTML頁面裡為html標籤，如 P）　　現在我們學習使用clss和id定義屬於自己的選取器。　　這樣，同樣的html元素可以通過class或ID使用不同的表現。　　在CSS裡，使用點號（.）建立class選取器，使用hash符號（#）建立ID選取器。　　例子：  代碼如下複製代碼

width和height定義的是Content部分的寬度和高度，padding border margin的寬度依次加在外面。背景會填充padding和content部分。但是由於瀏覽器設計上的問題，不同瀏覽器顯示效果會有些不同。左右Margin加倍的問題當box為float時，IE6中box左右的margin會加倍W3C定義的盒模式如下：　　width和height定義的是Content部分的寬度和高度，padding border margin的寬度依

　　　　我已經習慣了做好頁面之後去解決不同瀏覽器的相容性問題，不斷的測試，不停的修改CSS hack以保證在大部分的瀏覽器上得到最佳效果。光IE就需要兼顧IE5.X與IE6，以後也許還要為IE7來寫單獨的CSS hack，或許是這樣的工作做得多了開始討厭這樣的沒有效益的勞動。就是為了去滿足那些少數的IE5.0使用者或是為了滿足那些極端的Firefox或是 Opera的推崇者們，我需要花費多一倍的時間來研究這些，我開始思考當瀏覽器不斷成長，不斷更新，我們的CSS&nb

邊界margin和補白padding（依據國內出版社的翻譯慣例，margin被翻譯成邊界，padding被翻譯成補白，譯者依照習慣翻譯。但譯者認為，margin翻譯成外邊距，padding翻譯成內邊距更為直白和形象。你可以依據自己的習慣來適應這兩種不同的譯法。譯者注）是隔開元素最常用的兩個屬性。邊界是元素外邊的距離，而補白則是元素內部的距離。為h2改進代碼如下：  代碼如下複製代碼

邊框可以應用到在主體元素body中的絕大部分HTML元素中。建立一個包圍著元素的邊框，你所需要的是邊框樣式border-style。它們的值可以是 solid、dotted、dashed、double、groove、ridge、 inset和outset。（你有必要每個值都試一試，看看效果如何譯者注）邊框寬度border-width為邊框設定寬度，通常用像素來表示。當然，還可以單獨設定四個方向的邊框屬性，它們是border-top-width、border-right-wid

你應該已經在HTML初級教程的綜合中創作了一個HTML文檔，而且在CSS初級教程的的開始中增加了一行，用以把HTML文檔和CSS文檔聯絡起來。下面的程式碼封裝括了所有我們在初級教程中所學習的方法。只要你把下面的儲存起來作為CSS文檔，然後在瀏覽器中查看HTML文檔，你就可以理解每一個CSS的屬性的表現和怎麼應用。最好的方法就是花費時間修改CSS文檔和HTML文檔上的代碼，然後在瀏覽器中查看到底發生了什麼。  代碼如下複製代碼

在CSS初級教程中我們僅僅考慮了HTML選擇符──以HTML標籤形式出現。你當然可以用類選擇符class和標識選擇符id來定義自己的選擇符。這樣做的好處是，依賴於class或者id，你可以不同地表現相同的HTML元素。在CSS中，類選擇符在一個半形英文句點（.）之前，而id則在半形英文井號（#）之前。看起來像這樣：  代碼如下複製代碼

虛擬元素（pseudo elements）跟偽類一樣吮吸選擇符，使用selector:pseudoelement { property: value; }的形式。有四個吮吸器。首字和首行首字first-letter 虛擬元素應用到元素的第一個字，而首行first-line則是元素的頂行。你可以，比如，建立一個首行粗體和首字下沉的段落，像這樣：  代碼如下複製代碼

組合你不必重複有相同屬性的多個選擇符，你只要用英文逗號（,）隔開選擇符就可以了。比如，你有如下的代碼：  代碼如下複製代碼

CSS命名規則　　頭：header 　　內容：content/containe 　　尾：footer 　　導航：nav 　　側欄：sidebar 　　欄目：column 　　頁面外圍控制整體布局寬度：wrapper 　　左右中：left right center 　　登入條：loginbar 　　標誌：logo 　　廣告：banner 　　頁面主體：main 

　　　　在CSS中，繼承是一種非常自然的行為，我們甚至不需要考慮是否能夠這樣去做，但是繼承也有其局限性。　　首先，有些屬性是不能繼承的。這沒有任何原因，只是因為它就是這麼設定的，標準就是如此。舉個例子來說：border屬性，大家都明白border屬性的作用是設定元素的邊框的，它就沒有繼承性。如果繼承了邊框屬性，那麼文檔看起來就會很奇怪。例如我們定義容器div的邊框為1px，而在此容器內的ul li在正常情況下我們都不希望它有邊框，如果border有繼承性，我們就要再去掉它們的邊框。這樣

　　margin在中文中我們翻譯成外邊距或者外補白（本文中引用外邊距）。他是元素盒模型（box model）的基礎屬性。一、margin的基本特性　　margin屬性包括margin-top,margin-right,margin-bottom,margin-left,margin，可以用來設定box的margin area。屬性margin可以用來同時設定box的四邊外邊距，而其他的margin屬性只能設定其自各的外邊距。　　margin屬性可以應用於幾乎所有的元素，除了表

HTML有標籤（tag），CSS就有選擇符（selector）。選擇符就是賦予內部或者外部樣式表的名字。在 CSS初級指南中，我們致力於HTML選擇符，即是HTML的標籤，用來改變一個指定標籤的樣式。每個選擇符都有屬性（properties）在大括弧{}中，裡麵包括諸如color、font-weighth或者 background-color形式的字樣。值（value）在半形英文引號:後面，用半形英文分號;隔離。

　　我們運用xhtml+css網頁布局，實現表現與結構的分離，表現部分的css檔案非常重要，也比較繁雜，我們在書寫CSS檔案時有很多屬性和值，我們就考慮到了書寫順序的問題。　　有時候是先寫了margin或color，然後再寫width和height等等。我們有沒有必要讓我們的編碼更加的工整，更加的科學呢？實踐證明，書寫工整、按一定的規則進行書寫是很有好處的。　　下面是Mozilla Firefox所建議的CSS書寫順序，對我們的代碼書寫很有參考價值：

　　最近看過許多網友製作的SKIN的CSS檔案，發現其中有著許多冗餘的代碼。下面我來跟大家介紹一下，如何清除這些冗餘的代碼，讓你的CSS檔案更加簡潔。一、margin、padding屬性　　參照相關資料我們可以知道，margin和padding代表的意思分別是外部邊距和內部填充距離，在許多網友的CSS中，關於這兩個屬性的冗餘代碼是出現得最多的。比如：margin:0px，大家可以查看一下自己的CSS檔案中，是否許多的margin:0px，其中有的是不需要的，你可以嘗試刪除它，當然也並不是所有的m

CSS布局提倡者的聲音正被"表格版面配置的優點"的聲音所覆蓋。一個荒誕的說法是CSS是難學的。事實上，CSS一點也不比其他網頁技術難。問題在於：對於表格設計已經相當有經驗的web設計師不得不完全放棄他們的思維模式改用CSS方法。我曾經用表格版面配置設計過許多年，當我第一次開始使用CSS布局時，我也遇到了問題。"用表格多簡單呀"我想。但是，那隻是因為我已經用慣了表格，我知道如何巧妙的處理它們。任何改變，哪怕是小小的一點，都會讓我覺得麻煩，更不用說這麼激烈的變化。回憶起我第一次學慣用表格版面配置，同

　　本CSS Hack代碼範例，可以直觀顯示各個版本瀏覽器hack的使用。相容IE5.0、IE5.5、IE6.0、IE7.0、FF1.5、FF2.0。　　IE7.0簡體中文正式版發布了，對於我等常和網頁打交道的人來說網頁相容性問題也隨之而來了。IE7.0有一個顯著的改變就是支援!important了，是件好事情，但是也給廣大的在IE6時代使用!important來區分處理IE和FF的網頁製作者帶來了不少問題，Noker也遇到了這個問題，所以翻閱網上資料，寫了下面這個能夠相容現今大多數主