文章類--CSS－PCTOP 銓尹行銷顧問有限公司 CHYUANYIIN 的談天說地溫馨小窩

[轉貼自]http://www.zwbk.org/zh-tw/Lemma_Show/104815.aspx

CSS 指層疊樣式表(Cascading Style Sheets)，是用於（增強）控制網頁樣式並允許將樣式信息與網頁內容分離的一種標記性語言，樣式定義如何顯示HTML元素。
如何在網頁中插入css
你可以用以下三種方式將樣式表加入您的網頁。而最接近目標的樣式定義優先權越高。高優先權樣式將繼承低優先權樣式的未重疊定義但覆蓋重疊的定義。　•
鏈入外部樣式表(Linking to a Style Sheet)
你可以先建立外部樣式表文件（.css），然後使用HTML的link對象。示例如下：
　　<head>
　　...
<link rel=“stylesheet“ type=“text/css“ href=“mystyle.css“>
　　...
　　</head>
表示從mystyle.css文件中讀出定義的樣式表，rel=“stylesheet“ 指頁面中使用的是外部樣式表，type=“text/cs“指文件的類型爲樣式表文本。 href=“mystyle.css“是文件所在的位置。一個外部樣式表可以應用多個頁面，樣式表文件可以用記事本編輯，擴展名爲css
請注意，這裡將style對象的type屬性設置爲"text/css"，是允許不支持這類型的瀏覽器忽略樣式表單
導入外部樣式表(Linking to a Style Sheet)
　　<head>
　　<style type=“text/css“>
　　
　　</style>
　　</head>
導入外部樣式表必須在其他內部樣式表的上面
內部樣式表(Embedding a Style Block)
你可以在你的HTML文檔的<HTML>和<BODY>標記之間插入一個<STYLE>...</STYLE>塊對象。
　　<head>
　　<style type=“text/css“>
　　
　　</style>
　　</head>　
內嵌樣式(Inline Styles)
內聯定義即是在對象的標記內使用對象的style屬性定義適用其的樣式表屬性。示例如下：
　　<html>
　　<head>
　　<style type="text/css">
　　
　　</style>
　　</head>
　　<body>....</body>
　　</html>
這個段落顏色爲土黃，左邊距爲20像素
CSS基礎語法
CSS 語法由三部分構成：選擇器(選擇符)、屬性和值：
　　selector {proper: value}
　　選擇器{屬性：值}
參數說明：選擇器(selector) 通常是你希望定義的HTML 元素或標籤。屬性(property) 是你希望改變的屬性，並且每個屬性都有一個值。屬性和值被冒號分開，並由花括號包圍，這樣就組成了一個完整的樣式聲明（declaration）。
　　選擇器的分組
爲了減少樣式表的重複聲明，組合的選擇符聲明是允許的。被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。例如：
　　h1,h2,h2,h3,h5,h6 { color: green; }
如果值爲若幹單詞，則要給值加引號：如：
        p {font-family: "sans serif";}
多重聲明：如果要定義不止一個聲明，則需要用分號將每個聲明分開如：
         p {
　　text-align: center;
　　color: black;
　　font-family: arial;
　　}
　　繼承的值 (The ' Inherit ' Value) 　
    每個屬性都有一個指定的值：Inherit。它的意思是：將父對象的值等同爲計算機值得到。這個值通常僅僅是備用的。顯式的聲明它可用來強調。

CSS樣式表的命名
div+css 樣式表的id和class的區別:就一句來概括, class可以定義多個值並且可以應用到多個標籤上，但id隻能是一個。
div+css樣式表的id的常用命名規則
頁頭：header 登錄條：loginBar 標志：logo 側欄：sideBar 廣告：banner導航：nav 子導航：subNav菜單：menu 子菜單：subMenu蒐索：search滾動：scroll頁面主體：main內容：content標籤頁：tab 文章列表：list提示信息：msg小技巧：tips欄目標題：title加入：joinus指南：guild服務：service熱點：hot新聞：news下載：download註冊：regsiter狀態：status按鈕：btn投票：vote合作夥伴：partner友情鏈接：friendLink頁腳：footer版權：copyRight 　　
實際上上面的div+css樣式表的id命名也會經常用大小寫和_來區分，比如主導航就是MainNav,如果還有必要在區分就是MainNav_1,MainNav_2等等。也可以使用"類型+變量名稱"的規則來命名，比如寫一個紅色字體的class,可以.f_red {}(f是font 字體的縮寫)。總之原則是：大小寫、_、縮寫，大大增強代碼的可讀性。　　
div+css樣式表的class的常用命名規則
外套：wrap 主導航：mainNav 子導航：subnav 頁腳：footer整個頁面：content頁眉：header 頁腳：footer 商標：label 標題：title 主導航：mainNav（globalNav）邊導航：sidebar 左導航：leftsideBar 右導航：rightsideBar 旗志：logo 標語：banner菜單內容：menu1Content 菜單容量：menuContainer 子菜單：submenu 邊導航圖標：sidebarIcon 注釋：note 麵包屑：breadCrumb(即頁面所處位置導航提示）容器：container內容：content蒐索： search 登陸：login 功能區：shop(如購物車，收銀台) 當前的：current 　　
    像div+css樣式表的id和class的命名遠遠不止這些,可能還會有更多的命名,你可以用一些通俗的易懂.容易理解的一些來命名,如果您有更好的div+ css樣式表的id和class的命名規則的話,請留言，多多指教.
支持CSS的瀏覽器
支持CSS的網頁瀏覽器數字在繼續迅速地增長。扮演重要角色的Netscape Navigator 4.0支持大多數的CSS1和css定位。 Microsoft Internet Explorer 3不完全地支持CSS1，而良好的CSS1和CSS 定位被應用到IE4中，伴隨著早期的CSS 打印支持。長期以來，在UNIX平台上的Emacs-W3和Arena 都支持樣式表，而且W3C的Amaya 瀏覽器將CSS 支持融合到一個"所見即所得"的編輯器以製作強大的CSS網頁。
現在，商場上越來越多的瀏覽器和IE競爭，IE瀏覽器已經失去昔日獨大的地位。火狐（firefox）、遨遊、騰訊TT，以及新秀360和可牛幾乎全部都是支持CSS的。
　　樣式表CSS--繼承性
CSS的一個主要特徵就是繼承，它是依賴於祖先-後代的關係的。繼承是一種機制，它允許樣式不僅可以應用於某個特定的元素，還可以應用於它的後代。實際上，所有在選擇符中嵌套的選擇符都會繼承外層選擇符指定的屬性值，除非另外更改。例如，一個BODY定義了的顏色值也會應用到段落的文本中。
有些情況是內部選擇符不繼承周圍的選擇符的值，但理論上這些都是特殊的。例如，上邊界屬性是不會繼承的；直覺上，一個段落不會有同文檔BODY一樣的上邊界值。
　　CSS繼承的局限性
在CSS中，繼承是一種非常自然的行爲，我們甚至不需要考慮是否能夠這樣去做，但是繼承也有其局限性。
　　首先，有些屬性是不能繼承的。這沒有任何原因，隻是因爲它就是這麼設置的。擧個例子來說：border屬性是用來設置元素的邊框的，它就沒有繼承性。
CSS--偽類
偽類和偽元素是特殊的類和元素，能自動地被支持CSS的瀏覽器所識別。偽類區別開不同種類的元素(例如，visited links(已訪問的連接)和active links(可激活連接)描述了兩個定位錨(anchors)的類型)。偽元素指元素的一部分，例如段落的第一個字母。
　　語法：
　　selector:pseudo-class {property: value}
　　選擇符：偽類{屬性：值}
類選擇符及其他選擇符可以和偽類混用
selector.class:pseudo-class {property: value}
　　選擇符.類：偽類{屬性：值}
定位錨偽類
偽類可以指定A元素以不同的方式顯示連接(links)、已訪問連接(visited links)和可激活連接(active links)。定位錨元素可給出偽類link、visited或active。一個已訪問連接可以定義爲不同顏色的顯示，甚至不同字體大小和風格。一個有趣的效果是使當前(或“可激活”)連接以不同顏色、更大的字體顯示。然後，當網頁的已訪問連接被重選時，又以不同顏色、更小字體顯示。這個樣式表的示例如下:

a:link {color: #FF0000; text-decoration: none} /* 未訪問的鏈接*/
a:visited {color: #00FF00; text-decoration: none} /* 已訪問的鏈接*/
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠標在鏈接上*/
      a:active {color: #0000FF; text-decoration: underline} /* 激活鏈接*/

上面的例子中，這個鏈接位訪問爲紅色無下劃線，訪問時爲綠色無下劃線，激活時爲藍色有下劃線，鼠標在鏈接上時爲紫色有下劃線。
首行偽元素
通常在報紙上的文章，例如Wall Street Journal中的，文本的首行都會以粗印體而且全部大寫地展示。 CSS1包括了這個功能，將其作爲一個偽元素。首行偽元素可以用於任何塊級元素(例如P、H1等等)。以下是一個首行偽元素的例子: 　

   　P:first-line {
　　front-variant: small-caps;
　　font-weight: bold }
　　
首個字母偽元素
首個字母偽元素用於加大(drop caps)和其他效果。含有已指定值選擇符的文本的首個字母會按照指定的值展示。一個首個字母偽元素可以用於任何塊級元素。例如:

      P:first-letter { font-size: 300%; float: left }會比普通字體加大三倍。
層疊順序
當使用了多個樣式表，樣式表需要爭奪特定選擇符的控制權。在這些情況下，總會有樣式表的規則能穫得控制權。以下的特性將決定互相對立的樣式表的結果。 1.! important
規則可以用指定的! important 特指爲重要的。一個特指爲重要的樣式會凌駕於與之對立的其它相同權重的樣式。同樣地，當網頁製作者和讀者都指定了重要規則時，網頁製作者的規則會超越讀者的。以下是! important 聲明的例子:
　　BODY { background: url(bar.gif) white;
　　background-repeat: repeat-x ! important }
　　Origin of Rules (Author's vs. Reader's)
正如以前所提及的，網頁製作者和讀者都有能力去指定樣式表。當兩者的規則發生沖突，網頁製作者的規則會凌駕於讀者的其它相同權重的規則。而網頁製作者和讀者的樣式表都超越瀏覽器的內置樣式表。網頁製作者應該小心地使用! important 規則，因爲它們會超越用戶任何的! important 規則。例如，一個用戶由於視覺關係，會要求大字體或指定的顏色，而且這樣的用戶會有可能聲明確定的樣式規則爲! important，因爲這些樣式對於用戶閱讀網頁是極爲重要的。任何的! important 規則會超越一般的規則，所以建議網頁製作者使用一般的規則以確保有特殊樣式需要的用戶能閱讀網頁。
選擇符規則: 計算特性基於它們的特性級別，樣式表也可以超越與之沖突的樣式表，一個較高特性的樣式永遠都凌駕於一個較低特性的樣式。這隻不過是計算選擇符的指定個數的一個統計遊戲。
　　a.統計選擇符中的ID屬性個數。
　　b.統計選擇符中的CLASS屬性個數。
c.統計選擇符中的HTML標記名格式。
最後，按正確的順序寫出三個數字，不要加空格或逗號，得到一個三位數。 ( 注意，你需要將數字轉換成一個以三個數字結尾的更大的數。)相應於選擇符的最終數字列表可以很容易確定較高數字特性凌駕於較低數字的。以下是一個按特性分類的選擇符的列表:
#id1 {xxx} /* a=1 b=0 c=0 --> 特性= 100 */
UL UL LI.red {xxx} /* a=0 b=1 c=3 --> 特性= 013 */
LI.red {xxx} /* a=0 b=1 c=1 --> 特性= 011 */
　　LI {xxx} /* a=0 b=0 c=1 --> 特性 = 001 */

特性的順序爲了方便使用，當兩個規則具同樣權重時，取後面的那個。