css屬性大全

SS 屬性大全文字屬性「字體族科」（font-family），設定時，需考慮瀏覽器中有無該字體。「字體大小」（font-size），注意度量單位。《絕對大小》|《相對大小》|《長度》|《百分比》(通常設置雙數)「字體加粗」（font-weight），除了 normal（正常）、bold（粗體）、bolder（特粗）、lighter（細體）外，還有9種以像素爲度量爲單位的設置方式（100，200，300，400，500，600，700，800，900）。「字體風格」（font-style），也就是字型。（normal : 正常的字體italic : 斜體。對於沒有斜體變量的特殊字體，將應用obliqueoblique : 傾斜的字體）「字體變形」（font-variant），字體變形屬性決定了字體顯示是normal (普通) ，仍是                           Small-caps（小型大寫字母）當文字中全部字母都是大寫的時候，小型大寫字母（值）會顯示比小寫字母稍大的大寫字符。「字體」（font），《字體風格》|《字體變形》|《字體加粗》|《字體大小》|《行高》|《字體族科》文本屬性「文字間距」（word-spacing），主要用於控制文字間相隔的距離。有正常（normal）和值（自定義間隔值）兩種選擇方式。「字母間距」（letter-spacing），其做用與字符間距相似，也有正常 （normal）和值（自定義間隔值）兩種選擇方式。「垂直對齊」（vertical-align），控制 文字或圖像相對於其母體元素的垂直位置。如將一個2×3像素的GIF圖像同其母體元素文字的頂部垂直對齊，則該GIF圖像將在該行文字的頂部顯示。共有基 線（baseline，將元素的基準線同母體元素的基準線對齊）、下標（sub，將元素如下標的形式顯示）,上標（super，將元素以上標的形式顯 示）、頂部（top ，將元素頂部同最高的母體元素對齊）、文本頂對齊（text-top，將元素的頂部同母體元素文字的頂部對齊）、中線對齊（middle，將元素的中點同 母體元素的中點對齊）、底部（bottom，將元素的底部同最低的母體元素對齊）及值（自定義）等9種選擇。「文本排列」（text-align），設置塊的水平對齊方式。共有左對齊（left）、右對齊（right）、居中（center）和均分 （justify）等4種選擇。「行 高」（line-height），就是 行距。Normal | <數字> | <長度> | <百分比>                       當值爲數字時，行高由元素字體大小的量與該數字相乘所得。                       百分比的值相對於元素的字體大小而定。                        不容許使用負值。「文本轉換」（text-transform），這項屬性能垂手可得地控制字母大小寫，有首字大寫（capitalize、大寫（uppercase）、小寫（lowercase）和無（none，使全部繼承文字和變形參數被 忽略，文字將以正常形式顯示）等4種。「文字縮進」（text-indent），控制塊的縮進程度。<長度> | <百分比>「空白間距」（white-space），在HTML中，空格是被省略的；在CSS中則使用屬性（white-space）控制空格的輸 入。共有正常（normal）、保留（pre）和不換行（nowrap）等3種選擇。「修 飾」（text-decoration），用於控制連接文本的顯 示形態，有下劃線（underline）、無下劃線（overline）、刪除線（line-through）、閃爍（blink）和無（none ，使上述效果均不會發生）等5種修飾方式。但IE4不支持文字閃爍。3顏色及背景屬性[顏 色」（color），設置顏色。Color:blure color:#00080 color:#0c0「背景顏色」（background-color），設置背景顏色。background-color:blure background-color:#00080 background-color:#0c0「背景圖像」（background-image），設置網頁背景圖像。background-image:url(/images/xx.gif)「背景重複」（background- repeat），控制背景圖像的平鋪方式，有不重複（no-repeat）、重複（repeat，沿水平、垂直方向平鋪）、橫向重複 （repeat-X，圖像沿水平方向平鋪）和縱向重複（repeat-Y，沿圖像垂直方向平鋪）等4種選擇。「背景附件」（background-attachment），用於控制背景圖像是否會隨頁面的滾動而一塊兒滾動。有固定（fixd，文字滾動 時，背景圖像保質固定）和滾動（scroll，背景圖像隨文字內容一塊兒滾動）兩種選擇。「水平位置」/「垂直位置」（background-position），肯定背景圖像的水平、垂直位置。共有左對齊（left）、右對齊 （right）、頂部（top）、底部（bottom）、居中（center）和值（自定義背景圖像的起點位置，可以使用戶對背景圖像的位置作出更精確的控 制）等6種選擇。[背景] （background），《背景顏色》||《背景圖像》||《背景重複》||《背景附件》||《背景位置》4.文字鏈接屬性aa:linka:visiteda:activea:hover鼠標光標 樣式：連接手指cursor:pointer十字體 cursor:crosshair箭頭朝下 cursor:s-resize十字箭頭 cursor:move箭頭朝右 cursor:move加一問號 cursor:help箭頭朝左 cursor:w-resize箭頭朝上 cursor:n-resize箭頭朝右上 cursor:ne-resize箭頭朝左上 cursor:nw-resize文字I型 cursor:text箭頭斜 右下 cursor:se-resize箭頭斜左下 cursor:sw-resize漏斗 cursor:wait邊框「邊框寬度」（border-width），控制邊框的寬度，其中分爲4個屬性：border-top-width頂邊框的 寬度、border-right-width右邊框的寬度、border-bottom-width底邊框的寬度、border-left-width左 邊框的寬度。「邊框顏色」（border-color），設置各邊框的顏色。若要使邊框的四邊顯示不一樣的顏色， 可在設置中分別列出。如，p{: #ff0000 #009900 #0000ff #55cc00}瀏覽器將四種顏色依次理解爲： 上邊框、右邊框、底邊框和左邊框（自上開始順時針）。「邊框樣式」（border-style），設定邊框的樣 式，共有無（none）、虛線（dotted）、點劃線線（dotted）、點劃線（dashed）、實線（solid）、雙線（double ）、槽狀（grove）、脊狀（ridge）、凹陷（inset）和凸起（outset）等9種。「邊框樣式」（border）,<邊框寬度> | <邊框樣式> | <邊框顏色>6．「盒子」屬性「寬」（width），肯定盒子自己的寬度，可使盒子的寬度不依靠它所包含的內容多少。 <長度> | <百分比> | <auto>「高」（height），肯定盒子自己的高度。<長度> | <auto>「浮 動」（float），設置塊元素的浮動效果。（left）|(right)|(none)「清 除」（clear），用於清除設置的浮動效果。（left）|(right)|(none)|(both)「邊 距」 （margin），控制圍繞邊框的邊距大小。其中包含4個屬 性：margin-top控制上邊距的寬度、margin-right控制右邊距的寬度、margin-bottom控制下邊距的寬度、margin- left控制左邊距的寬度。「補 白」（padding），肯定圍繞塊元素的空格填充數量，其中包含4個屬性 「padding-top控制上留白的寬度、padding-right控制右留白的寬度、padding-bottom控制下留白寬度、 padding-left控制左留白的寬度。7．列表1. 列表元素：ol 有序列表。<ol><li>項目１</li><li>項目２</li><li>項目３</li></ol>表現爲：1.項目12.項目23.項目3ul 無序列表，表現爲li前面是大圓點而不是123<ul><li>項目1</li><li>項目2</li><li>項目3</li></ul>表現爲：項目1項目2項目3不少人容易忽略 dl dt dd的用法dl 內容塊dt 內容塊的標題dd 內容能夠這麼寫：<dl><dt>標題title</dt><dd>內容content1</dd><dd>內容content2</dd></dl>表現爲：標題內容  內容（內容是縮進的！）8． 定位「類 型」（position），用於肯定定位的類型，共有絕對（absolute）、相對（relative）和靜態 （static）等3種選擇。「Z 軸」（z-index），用於控制網頁中塊元素的疊放順序，可爲元素設置 重疊效果。該屬性的參數值使用純整數，值爲0時，元素在最下層，適用於絕對定位或相對定位的元素。「顯 示」（visibility）使用該屬性可將網頁中的元素隱藏，共有繼承（inherit，繼承母體要素的可視性設置）、可見 （visible）和隱藏（hidden）等3種選擇。「溢 出」（overflow），在肯定了元素的高度 和寬度後，若是元素的面積不能所有顯示元素中的內容時，該屬性作一日和尚撞一天鐘起做用了。其中共有可見（visible，擴大面積以顯示全部內容）、隱 藏（hidden，隱藏超出範圍的內容）、滾動（scroll，在元素的右邊顯示一個滾動條）和自動（auto，當內容超出元素面積時，顯示滾動條）等4 種選擇。「定 位」，當爲元素肯定了絕對定位類型後，該組屬性決定元素在網頁中的具體位置。該組屬性包含4個 子屬性，分別是「左」（屬性名爲「left」，控制元素左邊的起始位置）、「上」（屬性名爲「top」，控制元素上面的起始位置）、 「寬」或「高」（與「盒子」類屬性面板中「寬」或「高」的屬性做用相同）。「剪 輯」（clip），當元素被 指定爲絕對定位類型後，該屬性能夠把元素區域切成各類形狀，但目前提供的只有方形一種。屬性值爲rect(top right bottom left)，即：rect(top right bottom left)，屬性值的單位爲任何一種長度單位。9． [display]值              描述none          此元素不會被顯示。block          此元素將顯示爲塊級元素，此元素先後會帶有換行符。inline          默認。此元素會被顯示爲內聯元素，元素先後沒有換行符。inline-block      行內塊元素。（CSS2.1 新增的值）*display:inline; *zoom:1;list-item          此元素會做爲列表顯示。run-in          此元素會根據上下文做爲塊級元素或內聯元素顯示。table          此元素會做爲塊級表格來顯示（相似 <table>），表格先後帶有換行符。inline-table      此元素會做爲內聯表格來顯示（相似 <table>），表格先後沒有換行符。table-row-group  此元素會做爲一個或多個行的分組來顯示（相似 <tbody>）。table-header-group 此元素會做爲一個或多個行的分組來顯示（相似 <thead>）。table-footer-group  此元素會做爲一個或多個行的分組來顯示（相似 <tfoot>）。table-row      此元素會做爲一個表格行顯示（相似 <tr>）。table-column-group此元素會做爲一個或多個列的分組來顯示（相似 <colgroup>）。table-column      此元素會做爲一個單元格列顯示（相似 <col>）table-cell      此元素會做爲一個表格單元格顯示（相似 <td> 和 <th>）table-caption      此元素會做爲一個表格標題顯示（相似 <caption>）inherit          規定應該從父元素繼承 display 屬性的值。10．[分類屬性]「空白」（white-space），用於決定元素內的空格Normal(將多個空格摺疊成一個)Pre(不折疊成空格)Nowrap(不容許換行，除非遇到<br/>標記)「目錄樣式類型」（list-style-type），帶有顯示值目錄項元素「目錄樣式圖像」（list-style-image），帶有顯示值目錄項元素                                 list-style-image:url(圖片地址)「目錄樣式位置」（list-style-position），帶有顯示值目錄項元素                                   Inside (內部) | outside（外部—初始值）「目錄樣式」（list-style），帶有顯示值目錄項元素                        《目錄樣式類型》| 《目錄樣式類型》| 《目錄樣式圖像》11．css 單位  [長度單位]        有效的相對單位  em(元素字體的高度)               ex(x-height,字母「x」的高度)px(像素，相對於屏幕的分辨率)          有效的絕對單位  in(英寸，1英寸=2.54釐米)               cm(釐米，1釐米=10毫米)mm(米)pt(點，1點=1/72英寸)pc(帕，1帕=12點)[百分比單位]    百分比值是相對於其餘數值，一樣地用於定義每一個屬性，最常用的百分比值是相對於元素的字體大小。[顏色單位]      顏色值是一個關鍵字或一個RGB格式的數字      #rrggbb | #rgb | rgb(x,x,x)x是一個介乎0到255之間的整數（如，rgb(0,204,0)）      Rgb(y%,y%,y%)y是一個介乎0.0到100.0之間的整數（如，rgb(0%,80%,0%)）      這例子指定的是同一個顏色12．css hack因爲不一樣的瀏覽器，好比Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，對CSS的解析認識不同，所以會致使生成的頁面效果不同，得不到咱們所須要的頁面效果。　　這個時候咱們就須要針對不一樣的瀏覽器去寫不一樣的CSS，讓它可以同時兼容不一樣的瀏覽器，能在不 同的瀏覽器中也能獲得咱們想要的頁面效果。這個針對不一樣的瀏覽器寫不一樣的CSS code的過程，就叫CSS hack,也叫寫CSS hack。CSS Hack的原理是什麼?　　因爲不一樣的瀏覽器對CSS的支持及解析結果不同，還因爲CSS中的優先級的關 系。咱們就能夠根據這個來針對不一樣的瀏覽器來寫不一樣的CSS。　　好比 IE6能識別下劃線"_"和星號" * "，IE7能識別星號" * "，但不能識別下劃線"_"，而firefox兩個都不能認識。等等書寫順序，通常是將識別能力強的瀏覽器的CSS寫在後面。CSS Hack的寫法！好比要分辨IE6和firefox兩種瀏覽器，能夠這樣寫：　　<style>　　div{　　background:green;　　*background:red;　　}　　</style>　　我在IE6中看到是紅色的，在firefox中看到是綠色的。　　解釋一下：　　上面的css在firefox中，它是認識不了後面的那個帶星號的東東是什麼的，因而將它過濾 掉，不予理睬，解析獲得的結果是:div{background:green},因而理所固然這個div的背景是綠色的。　　在IE6中呢，它兩個background都能識別出來，它解析獲得的結果 是:div{background:green;background:red;},因而根據優先級別，處在後面的red的優先級高，因而固然這個div 的背景顏色就是紅色的了。　　CSS hack:區分IE6，IE7，firefox　　區別不一樣瀏覽器，CSS hack寫法：　　區別IE6與FF：　　background:orange;*background:blue;　　區別IE6與IE7：　　background:green !important;background:blue;　　區別IE7與FF：　　background:orange; *background:green;　　區別FF，IE7，IE6：　　 background:orange;*background:green;_background:blue;　　background:orange;*background:green !important;*background:blue;　　注：IE都能識別*;標準瀏覽器(如FF)不能識別*；　　IE6能識別*，某些狀況下不能識別 !important,　　 -----------------------------------------------------------------------------------------------　　IE6支持重定義中的!important，例如：　　.yuanxin {color:#e00!important;}　　.yuanxin {color:#000;}　　你將會發現定義了樣式class="yuanxin"時，在IE下，字體顯示爲紅色 （#e00）。　　但不支持同必定義中的!important。例如：　　.yuanxin {color:#e00!important;color:#000}　　此時在IE6下不支持，你將會發現定義了樣式class="yuanxin"時，字體顯示爲黑 色（#000）。　　 -----------------------------------------------------------------------------------------------　　IE7能識別*，也能識別!important;　　FF不能識別*，但能識別!important;　　           IE6 IE7 FF　　*           √ √　　!important   √ √　　瀏覽器優先級別:FF<IE7<IE6,CSS hack書寫順序通常爲FF IE7 IE6　　以: " #demo {width:100px;} "爲例;　　#demo {width:100px;}　　*html #demo {width:120px;}　　*+html #demo {width:130px;}　　---------------　　因此最後,#demo的寬度在三個瀏覽器的解釋爲:　　FIREFOX:100px;　　ie6:120px;　　ie7:130px;　　IE8 最新css hack：　　"9"　例:"border:1px 9;".這裏的"9"能夠區別全部IE和FireFox.　　"*"　IE六、IE7能夠識別.IE八、FireFox不能.　　"_"　IE6能夠識別"_",IE七、IE八、FireFox不能.<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />在程序里加上這句話的意思就是：IE8裏顯示的佈局和IE7裏同樣！經常使用的css屬性大全1、html標籤<pre>...</pre>文字格式化<div>......</div>列塊容器字體大小變化 <font size=?>想輸入的字</font>字體顏色 <font color="...">想輸入的字</font>字體變粗 <b>想輸入的字</b>字體變斜 <i>想輸入的字</i>字體加下劃線 <u>想輸入的字</u>對正中央ㄉ語法 <p align="center">內容</p>對正左邊ㄉ語法 <p align="left">內容</p>對正右邊ㄉ語法 <p align="right">內容 </p>字體刪除線 <s>想輸入的字</s>字體設置 <font">字體名稱">想輸入的字</font>打字機字體 <tt>想輸入的字</tt>上標字 <sup>想輸入的字</sup>下標字 <sub>想輸入的字</sub>水平線 <hr color="...">換行輸入 想輸入的字<br>想輸入的字超連接 <a href="想連接網址">連接地的名稱</a><a href="mailto:填入email">要顯示的字打這裏</a>網絡郵寄標籤貼圖 <img src="圖形的網址">跑馬燈(循環) <marquee behavior=scroll>想輸入的字</marquee>外部文件導入格式標籤CSS外部導入格式：<link rel="stylesheet" type="text/css" href="/css.css" />直接引用：<style type="text/css"><!--id{...}--></style>javascript - 加載外部.js獨立文件：<script type="text/javascript" src="/script.js"></script>2、CSS文字屬性：color : #999999;font-family : 宋體,sans-serif;font-size : 9pt;font-style:itelic;font-variant:small-caps;letter-spacing : 1pt;line-height : 200%;font-weight:bold;vertical-align:sub;vertical-align:super;text-decoration:line-through;text-decoration:overline;text-decoration:underline;text-decoration:none;text-transform : capitalize;text-transform : uppercase;text-transform : lowercase;text-align:right;text-align:left;text-align:center;text-align:justify;vertical-align屬性vertical-align:top;vertical-align:bottom;vertical-align:middle;vertical-align:text-top;vertical-align:text-bottom;3、CSS符號屬性：list-style-type:none;list-style-type:decimal;list-style-type:lower-roman;list-style-type:upper-roman;list-style-type:lower-alpha;list-style-type:upper-alpha;list-style-type:disc;list-style-type:circle;list-style-type:square;list-style-image:url(/dot.gif);list-style-position:outside;list-style-position:inside;4、CSS背景樣式：background-color:#F5E2EC;background:transparent;background-image : url(/image/bg.gif);background-attachment : fixed;background-repeat : repeat;background-repeat : no-repeat;background-repeat : repeat-x;background-repeat : repeat-y;指定背景位置background-position : 90% 90%;background-position : top;background-position : buttom;background-position : left;background-position : right;background-position : center;5、CSS鏈接屬性：aa:linka:visiteda:activea:hover鼠標光標樣式：連接手指 CURSOR: hand十字體 cursor:crosshair箭頭朝下 cursor:s-resize十字箭頭 cursor:move箭頭朝右 cursor:move加一問號 cursor:help箭頭朝左 cursor:w-resize箭頭朝上 cursor:n-resize箭頭朝右上 cursor:ne-resize箭頭朝左上 cursor:nw-resize文字I型 cursor:text箭頭斜右下 cursor:se-resize箭頭斜左下 cursor:sw-resize漏斗 cursor:wait光標圖案(IE6) p {cursor:url("光標文件名.cur"),text;}6、CSS框線一覽表：border-top : 1px solid #6699cc;border-bottom : 1px solid #6699cc;border-left : 1px solid #6699cc;border-right : 1px solid #6699cc;以上是建議書寫方式,但也可使用常規的方式 以下:border-top-color : #369border-top-width :1pxborder-top-style : solid其餘框線樣式soliddotteddoublegrooveridgeinsetoutset7、CSS表單運用：文字方塊 <input type="text" name="T1" size="15">按鈕 <input type="submit" value="submit" name="B1">複選框 <input type="checkbox" name="C1">選擇鈕 <input type="radio" value="V1" checked name="R1">多行文字方塊 <textarea rows="1" name="S1" cols="15"></textarea>下拉式菜單 <select size="1" name="D1"><option>選項1</option><option>選項2</option></select>8、CSS邊界樣式：margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px;9、CSS邊框空白padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;基本語法　規則選擇符任何HTML元素均可以是一個CSS1的選擇符。選擇符僅僅是指向特別樣式的元素。例如， P { text-indent: 3em }當中的選擇符是P。類選擇符單一個選擇符能有不一樣的CLASS(類)，於是容許同一元素有不一樣樣式。例如，一個網頁製做者也許但願視其語言而定，用不一樣的顏色顯示代碼 :code.html { color: #191970 }code.css { color: #4b0082 }　以上的例子創建了兩個類，css和html，供HTML的CODE元素使用。CLASS屬性是用於在HTML中以指明元素的類，例如，<P例如，code.html.proprietary是無效的。</p>類的聲明也能夠無須相關的元素:.note { font-size: small }在這個例子，名爲note的類能夠被用於任何元素。一個良好的習慣是在命名類的時候，根據它們的功能而不是根據它們的外觀。上述例子中的note類也能夠命名爲small，但若是網頁製做者決定改變這個類的樣式，使得它再也不是小字體的話，那麼這個名字就變得毫無心義了。ID 選擇符ID 選擇符個別地定義每一個元素的成分。這種選擇符應該儘可能少用，由於他具備必定的侷限。一個ID選擇符的指定要有指示符"#"在名字前面。例如，ID選擇符能夠指定以下:#svp94O { text-indent: 3em }這點能夠參考HTML中的ID屬性:　<P ID=svp94O>文本縮進3em</P>關聯選擇符關聯選擇符只不過是一個用空格隔開的兩個或更多的單一選擇符組成的字符串。這些選擇符能夠指定通常屬性，並且由於層疊順序的規則，它們的優先權比單一的選擇符大。例如， 如下的上下文選擇符P EM { background: yellow }是P EM。這個值表示段落中的強調文本會是黃色背景；而標題的強調文本則不受影響。　聲明屬性一個屬性被指定到選擇符是爲了使用它的樣式。屬性的例子包括顏色、邊界和字體。值聲明的值是一個屬性接受的指定。例如，屬性顏色能接受值red。組合爲了減小樣式表的重複聲明，組合的選擇符聲明是容許的。例如，文檔中全部的標題能夠經過組合給出相同的聲明:H1, H2, H3, H4, H5, H6 {color: red;"">　繼承實際上，全部在選擇符中嵌套的選擇符都會繼承外層選擇符指定的屬性值，除非另外更改。例如，一個BODY定義了的顏色值也會應用到段落的文本中。有些狀況是內部選擇符不繼承周圍的選擇符的值，但理論上這些都是特殊的。例如，上邊界屬性是不會繼承的；直覺上，一個段落不會有同文檔BODY同樣的上邊界值。　　註解樣式表裏面的註解使用C語言編程中同樣的約定方法去指定。CSS1註解的例子如如下格式:僞類和僞元素僞類和僞元素是特殊的類和元素，能自動地被支持CSS的瀏覽器所識別。僞類區別開不一樣種類的元素(例如，visited links(已訪問的鏈接)和active links(可激活鏈接)描述了兩個定位錨(anchors)的類型)。僞元素指元素的一部分，例如段落的第一個字母。僞類或僞元素規則的形式如選擇符:僞類 { 屬性: 值 }或選擇符:僞元素 { 屬性: 值 }僞類和僞元素不該用HTML的CLASS屬性來指定。通常的類能夠與僞類和僞元素一塊兒使用，以下:選擇符.類: 僞類 { 屬性: 值 }或選擇符.類: 僞元素 { 屬性: 值 }定位錨僞類　僞類能夠指定A元素以不一樣的方式顯示鏈接(links)、已訪問鏈接(visited links)和可激活鏈接(active links)。定位錨元素可給出僞類link、visited或active。一個已訪問鏈接能夠定義爲不一樣顏色的顯示，甚至不一樣字體大小和風格。一個有趣的效果是使當前(或「可激活」)鏈接以不一樣顏色、更大的字體顯示。而後，當網頁的已訪問鏈接被重選時，又以不一樣顏色、更小字體顯示。這個樣式表的示例以下:A:link { color: red }A:active { color: blue; font-size: 125% }A:visited { color: green; font-size: 85% }首行僞元素一般在報紙上的文章，例如Wall Street Journal中的，文本的首行都會以粗印體並且所有大寫地展現。CSS1包括了這個功能，將其做爲一個僞元素。首行僞元素能夠用於任何塊級元素(例如P、H1等等)。如下是一個首行僞元素的例子:　P:first-line {　font-variant: small-caps;　font-weight: bold }首個字母僞元素首個字母僞元素用於加大(drop caps)和其餘效果。含有已指定值選擇符的文本的首個字母會按照指定的值展現。一個首個字母僞元素能夠用於任何塊級元素。例如:　P:first-letter { font-size: 300%; float: left }會比普通字體加大三倍。　層疊順序當使用了多個樣式表，樣式表須要爭奪特定選擇符的控制權。在這些狀況下，總會有樣式表的規則能得到控制權。如下的特性將決定互相對立的樣式表的結果。　! 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 規則會超越通常的規則，因此建議網頁製做者使用通常的規則以確保有特殊樣式須要的用戶能閱讀網頁。　選擇符規則: 計算特性基於它們的特性級別，樣式表也能夠超越與之衝突的樣式表，一個較高特性的樣式永遠都凌駕於一個較低特性的樣式。這只不過是計算選擇符的指定個數的一個統計遊戲。統計選擇符中的ID屬性個數。統計選擇符中的CLASS屬性個數。統計選擇符中的HTML標記名格式。最後，按正確的順序寫出三個數字，不要加空格或逗號，獲得一個三位數。( 注意，你須要將數字轉換成一個以三個數字結尾的更大的數。)相應於選擇符的最終數字列表能夠很容易肯定較高數字特性凌駕於較低數字的。如下是一個按特性分類的選擇符的列表:#id1 {xxx}UL UL LI.red {xxx}LI.red {xxx}LI {xxx}特性的順序爲了方便使用，當兩個規則具一樣權重時，取後面有不少方法將樣式表加入到HTML中，每一個都帶有本身的優勢和缺點。新的HTML元素和屬性已被加入以容許樣式表與HTML文檔更簡易地組合起來。　鏈接到一個外部的樣式表　嵌入一個樣式表　輸入一個樣式表　內聯樣式CLASS屬性ID屬性SPAN元素DIV元素關於認證的備註　　-------------------------------------------------------------------------------鏈接到一個外部的樣式表　一個外部的樣式表能夠經過HTML的LINK元素鏈接到HTML文檔中:　<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen><LINK REL=StyleSheet HREF="color-8b.css" TYPE="text/css" TITLE="8-bit Color Style" MEDIA="screen, print"><LINK REL="Alternate StyleSheet" HREF="color-24b.css" TYPE="text/css" TITLE="24-bit Color Style" MEDIA="screen, print"><LINK REL=StyleSheet HREF="aural.css" TYPE="text/css" MEDIA=aural><LINK>標記是放置在文檔的HEAD部分。可選的TYPE屬性用於指定媒體類型--text/css是一個層疊樣式表--容許瀏覽器忽略它們不支持的樣式表類型。爲CSS文件配置服務器而將text/css看成Content-type內容發送出去也是一個好注意。外部樣式表不能含有任何像<HEAD>或<STYLE>這樣的HTML的標記。樣式表僅僅由樣式規則或聲明組成。一個單獨由P { margin: 2em }組成的文件就能夠用做外部樣式表了。<LINK>標記也有一個可選的MEDIA屬性，用於指定樣式表被接受的介質或媒體。容許的值有screen (缺省值)，提交到計算機屏幕；多樣的媒體經過用逗號隔開的列表或值all指定。Netscape Navigator 4.x 錯誤地忽略除了screen值外的任何使用MEDIA值聲明的鏈接或嵌入樣式表。例如，MEDIA="screen,projection"會令到樣式表被Navigator 4.x忽略，儘管展現的設備是計算機的屏幕。Navigator 4.x 也忽略使用MEDIA=all聲明的樣式表。REL屬性用於定義鏈接的文件和HTML文檔之間的關係。REL=StyleSheet指定一個固定或首選的樣式而REL="Alternate StyleSheet"定義一個交互樣式。固定樣式在樣式表激活時總被應用。缺乏的TITLE屬性，就像例子中的第一個<LINK>標記，定義一個固定樣式。一個首選樣式會自動被應用，就像例子中的第二個<LINK>標記。REL=StyleSheet和一個TITLE屬性的組合指定一個首選的樣式。網頁製做者不能指定多於一個的首選樣式。交互樣式經過REL="Alternate StyleSheet"指出。例子中的第三個<LINK>標記定義一個交互樣式，用戶能夠選擇用來代替首選樣式表。　注意如今的瀏覽器通常都缺少選擇交互樣式的能力。單一的樣式也能夠經過多個樣式表給出<LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary"><LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary"><LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary">在這個例子中，三個樣式表組合成一個"Contemporary"樣式，做爲一個首選樣式表被應用。要組合多個樣式表成一個單同樣式，必須在每一個樣式表中使用相同TITLE。當樣式被應用到不少的網頁時，一個外部樣式表是理想的。網頁製做者使用外部樣式表能夠改變整個網站的外觀而僅僅經過改變一個文件。一樣的，大多數瀏覽器會保存外部樣式表在緩衝區，從而若是樣式表在緩衝區就避免了在展現網頁時的延遲。　Microsoft Internet Explorer 3 for Windows 95/NT4並不支持來自鏈接的樣式表中的BODY 背景圖象或顏色。若是考慮到這個錯誤，網頁製做者不妨提供另外的包括一個背景圖象或顏色的結構，例如嵌入或內聯樣式，或使用BODY元素的BACKGROUND屬性。-------------------------------------------------------------------------------嵌入一個樣式表一個樣式表可使用STYLE元素在文檔中嵌入:　<STYLE TYPE="text/css" MEDIA=screen><!--　BODY { background: url(foo.gif) red; color: black }P EM { background: yellow; color: black }.note { margin-left: 5em; margin-right: 5em }　-->　</STYLE>STYLE元素放在文檔的HEAD部分。必須的TYPE屬性用於指定媒體類型，LINK元素也同樣。一樣地，TITLE和MEDIA屬性也能夠用STYLE指定。　舊版本的瀏覽器，並不能識別STYLE元素，會將其看成BODY的一部分照常展現其內容，從而使這些樣式表對用戶是可見的。要防止這樣作，STYLE元素的內容要包含一個SGML註解(<!-- comment -->)在裏面，像上述例子那樣。嵌入的樣式表可用於當一個文檔具備獨一無二的樣式的時候。若是多個文檔都使用同同樣式表，那麼外部樣式表會更適用。　-------------------------------------------------------------------------------輸入一個樣式表　一個樣式表可使用CSS的@import 聲明被輸入。這個聲明用於一個CSS文件或內部的STYLE元素:<STYLE TYPE="text/css" MEDIA="screen, projection">　<!--@import url(http://www.htmlhelp.com/style.css);@import url(/stylesheets/punk.css);DT { background: yellow; color: black }--></STYLE>　注意其它的CSS規則應該仍然包括在STYLE元素中，但全部的@import 聲明必須放在樣式表的開始部分。任意在樣式表中指定了的規則，其自身超越在輸入樣式表中對立的規則。例如上例，即便一個輸入的樣式表包含DT { background: aqua }，定義項(definition terms)依然會是黃色的背景。被輸入的樣式表的順序對於它們怎樣層疊是很重要的。在上述的例子中，若是style.css輸入的樣式表指定了STRONG元素會顯示爲紅色而punk.css樣式表指定了STRONG元素顯示爲黃色的話，那麼後面的規則會獲勝，而STRONG元素會顯示爲黃色。輸入的樣式表對於模塊性效果頗有用處。例如，一個網站能夠經過使用了的選擇符分類樣式表。一個simple.css樣式表給出公共的元素像BODY、P、H1和H2。此外，一個extra.css樣式表給出較少共通的元素像CODE、BLOCKQUOTE和DFN。一個tables.css樣式表能夠用於定義變革元素的規則。這三個樣式表在須要的時候可使用@import 聲明包括在HTML中。三個樣式表也能夠經過LINK元素組合。　-------------------------------------------------------------------------------　內聯樣式樣式可使用STYLE屬性內聯。STYLE屬性能夠應用於任意BODY元素(包括BODY自己)，除了BASEFONT、PARAM和SCRIPT。這個屬性將任何數量的CSS聲明看成本身的值，而每一個聲明用分號隔開。如下是一個例子:　<P STYLE="color: red;"> 這段的樣式是紅色的New Century Schoolbook字，若是字體可用的話。</P>　注意在STYLE中New Century Schoolbook包含在單引號中，由於雙引號被用做包含樣式聲明。內聯的樣式比其餘方法更加靈活。要使用內聯樣式，必須使用Content-Style-Type HTTP頁眉擴展對整個文檔進行單獨的樣式表語言聲明。使用內聯CSS的網頁製做者必須將text/css做爲Content-Style-Type HTTP頁眉，或在HEAD部分包括如下標記:　<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">由於和須要展現的內容混合在一塊兒，內聯樣式會失去一些樣式表的優勢。一樣地，內聯樣式默認地接受全部媒體，由於沒有任何的爲內聯樣式指定明確的媒體的語句。這種方法應該儘可能少用，如當一個樣式會應用在全部媒體到一個元素的個別狀況。若是樣式會被應用到單一元素的場合，但只能使用確認的媒體的話，使用ID屬性代替STYLE屬性。　-------------------------------------------------------------------------------CLASS屬性　CLASS屬性用於指定元素屬於何種樣式的類。例如，樣式表能夠加入punk和warning類:　.punk { color: lime; background: #ff80c0 }　P.warning { font-weight: bolder; color: red; background: white }　這些類可使用CLASS屬性在HTML中引用:　<H1　<P在這個例子中，punk類能夠用於任何BODY元素由於它在樣式表中沒有HTML元素關聯。而在這個例子的樣式表，warning類只能用於P元素。　一個良好的習慣是在命名類的時候，根據它們的功能而不是根據它們的外觀。上述例子中的warning類也能夠命名爲red，但若是網頁製做者決定改變這個類的樣式爲別的顏色，或但願爲那些使用PC喇叭的人定義爲aural(聽覺)樣式的話，那麼這個名字就變得毫無心義了。　類會是應用樣式到HTML文檔中在結構上同樣的部分的有效的辦法。例如，本頁使用類給CSS源代碼和HTML源代碼使用不一樣的樣式。-------------------------------------------------------------------------------ID屬性　ID屬性用於定義一個元素的獨特的樣式。一個CSS規則如#wdg97 { font-size: larger }能夠經過ID屬性應用到HTML中:<P ID=wdg97>歡迎訪問Web Design Group及TV water 168!</P>　整個文檔當中的每一個ID屬性的值都必須是惟一的。其值必須是一個以字母開頭緊接字母、識字或連字符。字母限於A-Z和a-z。注意HTML 4.0容許在ID屬性中有句號，但CSS1不容許在ID選擇符中有句號。也要注意CSS1容許Unicode字符161-255並且忽略Unicode字符爲一個數字代碼，但HTML 4.0不容許這些字符在一個ID屬性值當中。當一個樣式只須要在任何文檔中應用一次時，使用ID是很適合的。 ID與STYLE屬性相比，在於ID容許指定媒體的樣式，並且也能夠被應用於多個文檔(雖然每一個文檔只用一次)。　-------------------------------------------------------------------------------SPAN元素SPAN元素被加入到HTML中以容許網頁製做者給出樣式但無須附加在一個HTML的結構元素上。SPAN在樣式表中做爲一個選擇符使用，並且它也能接受STYLE、CLASS和ID屬性。SPAN是一個內聯元素，因此它能夠做爲HTML中的元素如EM和STRONG使用。最重要的差異在於雖然EM和STRONG帶有結構的意義，但SPAN就沒有這樣的意義。它的存在純粹是應用樣式，因此當樣式表失效時它就沒有任何的做用。　一些SPAN例子以下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">　<HTML><HEAD><TITLE>SPAN的例子</TITLE>　<STYLE TYPE="text/css" MEDIA="screen, print, projection"><!--　.firstwords { font-variant: small-caps }　-->　</STYLE>　</HEAD><BODY>　<P><SPAN first few words</SPAN>前面是　　段落中少數的文字，會是小型大寫字母。樣式也能夠內聯，如改變文　　字的樣式爲<SPAN>Arial</SPAN>.</P>　　-------------------------------------------------------------------------------　　DIV元素　　DIV元素在功能上與SPAN元素類似，最主要的差異在於DIV ("division"，"部分"的簡稱)是一個塊級元素。DIV能夠包含段落、標題、表格甚至其它部分。這使DIV便於創建不一樣集成的類，如章節、摘要或備註。例如:　　<DIV　　<H1>Divisions/部分</H1>　　<P>DIV元素在HTML 3.2中有定義，但HTML 3.2中只有ALIGN屬性能兼容。HTML 4.0在屬性中加入CLASS、STYLE、和ID屬性。</P>　　<P>由於DIV能夠包含其餘塊級集成，在用於創建文檔的大型章節例如本備註是頗有用的。</P>　　<P>要求關閉標記。</P>　　</DIV>　　-------------------------------------------------------------------------------　　關於認證的備註　　少數使用了CSS樣式的文檔能在HTML3.2 (Wilbur)層(在WDG網站，譯者注)獲得認證。HTML3.2不會解釋SPAN元素，也不解釋CLASS、STYLE或ID屬性，並且在LINK和STYLE元素中也不多支持TYPE和MEDIA屬性。　　這些有關的樣式元素和屬性對不支持的瀏覽器不會有害，由於它們能安全地忽略。文檔使用這些元素和屬性能夠被認證防護於HTML 4.0。　　流氓報－流氓人生活的故事！流氓人的家園 !流氓人本身的報刊！http://www.t128qq.bokee.com/顯示　　語法: display: <值>　　容許值: block | inline | list-item | none　　初始值: block　　適用於: 全部對象　　向下兼容: 否　　顯示屬性容許使用四個值中的一個來定義一個元素:　　block (在元素的前和後都會有換行)　　inline (在元素的前和後都不會有換行)　　list-item (與block相同, 但增長了目錄項標記)　　none (沒有顯示)　　每一個元素都典型地由瀏覽器基於HTML規格建議的展現形式給出一個缺省的顯示值。　　顯示屬性可能並不安全，由於它使用另外的不合適的格式顯示元素。使用值none將關閉指定元素及其子元素的顯示！　　-------------------------------------------------------------------------------　　空白　　語法: white-space: <值>　　容許值: normal | pre | nowrap　　初始值: normal　　適用於: 塊級元素　　向下兼容: 是　　空白屬性將決定如何處理元素內的空格. 該屬性的值取如下三個中的一個:　　normal (將多個空格摺疊成一個)　　pre (不折疊空格)　　nowrap (不容許換行，除非遇到<BR>標記)　　-------------------------------------------------------------------------------　　目錄樣式類型　　語法: list-style-type: <值>　　容許值: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none　　初始值: disc　　適用於: 帶有顯示值的目錄項元素　　向下兼容: 是　　目錄樣式項屬性指定目錄項標記的類型，當目錄樣式圖象值爲none或當圖象載入選項被關閉時使用。　　例如:　　LI.square { list-style-type: square }　　UL.plain { list-style-type: none }　　OL { list-style-type: upper-alpha }　　OL OL { list-style-type: decimal }　　OL OL OL { list-style-type: lower-roman }　　-------------------------------------------------------------------------------　　目錄樣式圖象　　語法: list-style-image: <值>　　容許值: <url> | none　　初始值: none　　適用於: 帶有顯示值的目錄項元素　　向下兼容: 是　　當圖象載入選項打開時，目錄樣式圖象屬性在指定目錄項標記使用哪一個圖象代替由目錄樣式類型屬性指定的標記。　　例如:　　UL.check { list-style-image: url(/LI-markers/checkmark.gif) }　　UL LI.x { list-style-image: url(x.png) }　　-------------------------------------------------------------------------------　　目錄樣式位置　　語法: list-style-position: <值>　　容許值: inside | outside　　初始值: outside　　適用於: 帶有顯示值的目錄項元素　　向下兼容: 是　　目錄樣式位置屬性能夠取值inside(內部) or outside(外部)，其中outside是缺省值。整個屬性決定關於目錄項的標記應放在那裏。若是使用inside值，換行會移到標記下，而不是縮進。應用的例子以下:　　Outside rendering:　　* List item 1　　second line of list item　　Inside rendering:　　* List item 1　　second line of list item　　-------------------------------------------------------------------------------　　目錄樣式　　語法: list-style: <值>　　容許值: <目錄樣式類型> || <目錄樣式位置> || <url>　　初始值: 未定義　　適用於: 帶有顯示值的目錄項元素　　向下兼容: 是　　目錄樣式屬性是目錄樣式類型、目錄樣式位置，和目錄樣式圖象屬性的略寫。　　例如:　　LI.square { list-style: square inside }　　UL.plain { list-style: none }　　UL.check { list-style: url(/LI-markers/checkmark.gif) circle }　　OL { list-style: upper-alpha }　　OL OL { list-style: lower-roman inside }上邊界　　語法: margin-top: <值>　　容許值: <長度> | <百分比> | auto　　初始值: 0　　適用於: 全部元素　　向下兼容: 否　　上邊界屬性用一個指定的長度或百分比值來設置元素的上邊界。百分比值參考上級元素的寬度。容許使用負值邊際。　　例如，如下的規則將消除文件的上邊界。　　BODY { margin-top: 0 }　　注意若是邊界在垂直方向鄰接(重疊)了，會改用其中最大的那個邊界值。　　-------------------------------------------------------------------------------　　右邊界　　語法: margin-right: <值>　　容許值: <長度> | <百分比> | auto　　初始值: 0　　適用於: 全部元素　　向下兼容: 否　　右邊界屬性用一個指定的長度或百分比值來設置元素的右邊界。百分比值參考上級元素的寬度。容許使用負值邊際。　　例如:　　P.narrow { margin-right: 50% }　　注意若是邊界在水平方向鄰接(重疊)了，不會改用其它邊界值。　　-------------------------------------------------------------------------------　　下邊界　　語法: margin-bottom: <值>　　容許值: <長度> | <百分比> | auto　　初始值: 0　　適用於: 全部元素　　向下兼容: 否　　下邊界屬性用一個指定的長度或百分比值來設置元素的下邊界。百分比值參考上級元素的寬度。容許使用負值邊際。　　例如:　　DT { margin-bottom: 3em }　　注意若是邊界在垂直方向鄰接(重疊)了，會改用其中最大的那個邊界值。　　-------------------------------------------------------------------------------　　左邊界　　語法: margin-left: <值>　　容許值: <長度> | <百分比> | auto　　初始值: 0　　適用於: 全部元素　　向下兼容: 否　　左邊界屬性用一個指定的長度或百分比值來設置元素的左邊界。百分比值參考上級元素的寬度。容許使用負值邊際。　　例如:　　ADDRESS { margin-left: 50% }　　注意若是邊界在水平方向鄰接(重疊)了，不會改用其它邊界值。　　-------------------------------------------------------------------------------　　邊界　　語法: margin: <值>　　容許值: [ <長度> | <百分比> | auto ]{1,4}　　初始值: 未定義　　適用於: 全部元素　　向下兼容: 否　　邊界屬性用一到四個值來設置元素的邊界，每一個值都是長度、百分比或者自動。百分比值參考上級元素的寬度。容許使用負值邊際。　　若是四個值都給出了，它們分別被應用於上、右、下和左邊界。若是隻給出一個值，它被應用於全部邊界。若是兩個或三個值給出了，省略了的值與對邊相等。　　邊界聲明包括如下例子：　　BODY { margin: 5em }　　P { margin: 2em 4em }　　DIV { margin: 1em 2em 3em 4em }　　注意若是邊界在垂直方向鄰接(重疊)了，會改用其中最大的那個邊界值。而水平方向則不會。　　使用邊界屬性能夠一次性地設置全部邊界；也能夠選擇使用上邊界、下邊界、左邊界和右邊界屬性。　　-------------------------------------------------------------------------------　　上補白　　語法: padding-top: <值>　　容許值: <長度> | <百分比>　　初始值: 0　　適用於: 全部對象　　向下兼容: 否　　上補白屬性描述上邊框和選擇符的內容之間有多少間隔。該值能夠是一個長度或百分比。百分比的值參考上級元素的寬度。不能使用負值。　　-------------------------------------------------------------------------------　　右補白　　語法: padding-right: <值>　　容許值: <長度> | <百分比>　　初始值: 0　　適用於: 全部對象　　向下兼容: 否　　右補白屬性描述右邊框和選擇符的內容之間有多少間隔。該值能夠是一個長度或百分比。百分比的值參考上級元素的寬度。不能使用負值。　　-------------------------------------------------------------------------------　　下補白　　語法: padding-bottom: <值>　　容許值: <長度> | <百分比>　　初始值: 0　　適用於: 全部對象　　向下兼容: 否　　下補白屬性描述下邊框和選擇符的內容之間有多少間隔。該值能夠是一個長度或百分比。百分比的值參考上級元素的寬度。不能使用負值。　　-------------------------------------------------------------------------------　　左補白　　語法: padding-left: <值>　　容許值: <長度> | <百分比>　　初始值: 0　　適用於: 全部對象　　向下兼容: 否　　左補白屬性描述左邊框和選擇符的內容之間有多少間隔。該值能夠是一個長度或百分比。百分比的值參考上級元素的寬度。不能使用負值。