css簡寫用法說明

    用了這麼多年css（經驗也算豐富），總以爲該寫點什麼。理論性太強的暫時寫不了，只好先從簡單直白的 入手。css簡寫（css shorthand）就符合這個條件。簡單的說，css簡寫就是在等效的前提下，把多句css代碼簡化成一句。在我看來，簡寫css的好處有三：一 是寫起來方便（就像鍵盤快捷鍵）；二是簡化代碼；三是幫助你熟悉和深入理解css。閒話少說，書歸正傳。可以簡寫的css屬性主要有如下幾個： font簡寫： font:italic small-caps bold 12px/1.5em arial,verdana; 等效於： font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:arial,verdana; 順序：font-style | font-variant | font-weight | font-size | line-height | font-family （注：簡寫時，font-size和line-height只能經過斜槓/組成一個值，不能分開寫。）不過使用這種簡寫須要注意幾點：要使簡寫定義有效必須至少提供 font-size 和 font-family 這兩個屬性 ；同時font-weight, font-style 以及 font-varient 這幾個屬性若是不作設定的話將默認爲normal。 background簡寫： background:#fff url(bg.gif) no-repeat fixed left top; 等效於： background-color:#fff; background-image:url(bg.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:left top; 順序：background-color | background-image | background-repeat | background-attachment | background-position margin&padding簡寫： margin:1px 0 2em -20px; 等效於： margin-top:1px; margin-right:0; margin-bottom:2em; margin-left:-20px; 順序：margin-top | margin-right | margin-bottom | margin-left padding的簡寫和margin徹底同樣。 border 簡寫： border:1px solid #000; 等效於： border-width:1px; border-style:solid; border-color:#000; border-top / border-right / border-bottom / border-left 簡寫： border-top:1px solid #000; 等效於： border-top-width:1px; border-top-style:solid; border-top-color:#000; list-style 簡寫： list-style:square outside url(bullet.gif); 等效於： list-style-type:square; list-style-position:outside; list-style-image:url(bullet.gif); 順序：list-style-type | list-style-position | list-style-image 同時使用兩個Class定義通常咱們只會給內容塊指定一個Class，實際上只要你願意，能夠同時把任意多個Class賦給某塊內容。好比 ：[p class="text side"]...[/p] 多個Class之間用空格分隔便可。當多個Class之間的屬性發生重疊的時候，將根據各個Class在CSS定義文件 中被定義的位置，後定義的Class屬性自動覆蓋以前定義的Class屬性（而不是根據你在 class="text side"這 裏排列的順序來進行覆蓋） CSS border的缺省值一般咱們定義border屬性都會提供color,width,style這些屬性。好比 border: 3px solid #000 。不過實 際上必需要提供的屬性只有style。若是你只寫 border: solid 的話，其餘的屬性自動使用缺省值。若是缺省 值能夠知足你的要求，你徹底能夠省略這兩項屬性。 !important會被IE忽略在css中，任何後面標有!important的語句將得到絕對的優先權，例如： margin-top: 3.5em !important; margin-top: 2em 除IE之外全部瀏覽器中的頂部邊界都是3.5em，而IE爲2em，有時候這一點頗有用，尤爲在使用相對邊界值時 ，能夠顯示出IE與其餘瀏覽器的細微差異。圖片替換的技巧舉例來講，你想在每一頁的頂部使用「Buy widgets」的標題，爲了美觀你使用了少見的字體那麼你就得用 圖片來顯示了： [h1][img src="widget-image.gif" alt="Buy widgets"][/h1] 這樣固然沒錯，可是有證據顯示搜索引擎 對真實文本的重視遠超過alt文本，所以，咱們得用另外一種方法：[h1][span]Buy widgets[/span][/h1] ，那你 的漂亮字體怎麼辦呢？下面的css能夠幫上忙： h1{background: url(widget-image.gif) no-repeat;} h1 span{position: absolute;left:-2000px;} 如今你既用上了漂亮的圖片又很好的隱藏了真實文本——藉助css，文本被定位於屏幕左側-2000像素處。 CSS技巧 一、忘記定義尺寸的單位是廣泛的錯誤。在HTML中你能夠只寫width=100，可是在CSS中，你必須給一個準確 的單位，好比：width:100px width:100em。 只有兩個例外狀況能夠不定義單位：行高和0值。二、當在XHTML中 使用CSS，CSS裏定義的元素名稱是區分大小寫的。爲了不這種錯誤，我建議全部的定義名稱都採用小寫。三、 取消class和id前的元素限定。div#content { /* declarations */ }fieldset.details { /* declarations */ } ，能夠寫成#content { /* declarations */ } .details { /* declarations */ } 這樣能夠節省一些字 節。 四、一般padding的默認值爲0，可是在不一樣的瀏覽器默認值可能不一樣，能夠在樣式表一開始就先定義全部 元素的margin和padding值都爲0，象這樣：* { margin:0; padding:0; }。五、一個標籤能夠同時定義多個 class。例如：咱們先定義兩個樣式，第一個樣式背景爲#666；第二個樣式有10 px的邊框。.one {width:200px;background:#666;}.two{border:10px solid #F00;} ，在頁面代碼中，咱們能夠這樣調用 [div class=one two][/div]，這樣最終的顯示效果是這個div既有#666的背景，也有10px的邊框。是的，這樣 作是能夠的，你能夠嘗試一下。六、字體變形命令。text-transform 命令頗有用，它有3個值：text- transform: uppercase, text-transform: lowercase 和 text-transform: capitalize。第1個會把文字變成 全大寫，第2個變成全小寫，第3個變成首字母大寫。這對拼音文字很是有用，即便輸入時有大小寫錯誤，在網 頁上也看不到。在不一樣頁面上使用一樣的導航代碼許多網頁上都有導航菜單，當進入某頁時，菜單上相應這一項就應該變灰，而其餘頁亮起來。通常要實現這 個效果，須要寫程序或專門爲每一頁作設計，如今靠CSS就能夠實現這個效果。首先，在導航代碼中使用CSS類： Home About us Contact us 而後分別爲每一頁的Body指定一個id，和上面類同名。如。而後設計CSS以下： #home .home, #about .about, #about .about { commands for highlighted navigation go here } 這裏，當id設爲home時，.home就會起做用，也就是class設爲home的那一行導航條就會顯示出特殊效果來。 其餘頁也是如此。