關於css的簡寫和命名規範

http://www.blog.ce.cn/sp1/zhangnan/14493583725.shtml

CSS的命名規則是用英文字母 數字 和底線(一般用小寫)來命名.

一,簡寫

簡寫主要是為了書寫方便快捷,代碼減少提高網頁的下載速度.並不是所有的css都可以簡寫.一般可以簡寫的如下

(1)  font

font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;
可以簡寫成
font: bold italic small-caps 1em/1.5em verdana,sans-serif;

要注意順序不能改變.這種簡寫方法只有在同時指定font-size和font-family屬性時才起作用。而且，如果你沒有設定font-weight, font-style, 以及 font-varient ，他們會使用預設值

(2)  border

border-width:1px;
border-style:solid;
border-color:#000;
可以簡寫為  border:1px sollid #000

要注意順序不能改變.(關於顏色值的簡寫:如果顏色值從第一位起每兩位是重複的那可以簡寫為一個.比如:#335566可以簡寫成#356  #000000可以簡寫成#000)

(3)margin & padding

 margin和padding的簡寫規則相同,只拿margin舉例

margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
上述情況四個方向的值相同可直接寫成margin:10px

margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;
上述情況四個方向的值不同可簡寫成margin:10px 20px 30px 40px  即第一個值是margin_top,最後一個值是margin_bottom的順時針的順序

margin-top:10px;
margin-right:20px;
margin-bottom:10px;
margin-left:20px;
上述情況四個方向中想對應的兩個方向值相同.可以簡寫成margin:10px 20px  注意要把10px放前面

如果是數字值為0可以不加單位.否則所有的數字值必須加上單位.比如10px

(4)  background

background-color:#fff;
background-image:url(bg.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left top;
可以簡寫成

background:#fff url(bg.gif) no-repeat fixed left top;

注意順序不能改變

(5)list-style

list-style-type:square;
list-style-position:outside;
list-style-image:url(bullet.gif); 
可以簡寫成list-style:square outside url(bullet.gif);

注意順序不能改變

二,命名規範

在WEB標準中關於css的命名規範 是為了更容易的找到我們所定義的css,
因為我們所做的頁面可能程式員和其他製作人員也要看.所以進行規範對於我們之間的
配合和以後的修改

命名全部使用小寫字母，如果需要多個單詞，單詞間使用“-”分隔

常用代碼結構：

div：主要用於布局，分割頁面的結構
ul/ol：用於無序/有序列表
span：沒有特殊的意義，可以用作排版的輔助
h1-h6：標題
h1-h6 根據重要性依次遞減
h1位最重要的標題

常用的CSS命名規則：
 
外　套：　　wrap(頁面外圍控制整體布局寬度)
主導航：　　mainnav
子導航：　　subnav
頁　腳：　　footet
整個頁面：　content
頁　眉：　　header
頁　腳：　　footer
商　標：　　label
標　題：　　title
主導航：　　mainbav（globalnav）
頂導航：　　topnav
邊導航：　　sidebar
左導航：　　leftsidebar
右導航：　　rightsidebar
旗　志：　　logo
標　語：　　banner
菜單內容1： menu1 content
菜單容量：　menu container
子功能表：　　submenu
邊互動中心圖示：sidebarIcon
注釋：　　　note
麵包屑：　　breadcrumb(即頁面所處位置導航提示）
容器：　　　container
內容：　　　content
搜尋：　　　search
登陸：　　　Login
功能區：　　shop(如購物車，收銀台)
當前的　　　current

 
三,樣式檔案命名
主要的 master.css
布局，版面 layout.css
專欄 columns.css
文字 font.css
列印樣式 print.css
主題 themes.css

 
http://www.starow.net/wangzhansheji/css_jianxiefangfa.html渡虎穀：常用的CSS簡寫方法

前兩天我寫的一篇文章裡說過，要提高網站執行效率，就要從各種細節入手。其中，CSS的簡寫在節省代碼方面雖然沒有table布局改為div那麼客觀，不過也是一個不能忽略的方面。下面總結一下CSS的一些簡寫方法：

外補丁(margin)的簡寫：
比如：margin-top:10px;margin-left:20px;margin-right:20px;margin-bottom:10px;
可以寫成：margin:10px 20px;
或者：margin:10px 20px 10px 20px;
再或者：margin:10px 20px 10px;
注意：簡寫後的順序是“上-左右-下”，“上-右-下-左”，“上下-左右”

內補丁(padding)的簡寫：同上

顏色的簡寫：
比如：color:#FFFFFF
可以寫成：color:#FFF
或者：color:white

邊框的簡寫：
比如：border-width:1px; border-style:solid; border-color:#FFFFFF;
可以寫成：border:1px solid :#FFFFFF;
或者寫成：border:1px solid :#FFF;

背景的簡寫：background-color:#FFFFFF; background-image:url(background.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:0 0;
可以寫成：background:#FFF url(background.gif) no-repeat fixed 0 0;

字型的簡寫：
font-style:normal; font-weight:bold; font-size:12px; line-height:120%; font-family:”宋體”,”Arial”;
可以寫成：font:normal bold 12px/120% “宋體”,”Arial”;

連結統一定義：
為了避免每個連結都要給出css來定義，可以用這樣的偽類來定義：
a:link {color:#666666; text-decoration:none;}
a:visited{color:#666666; text-decoration:none;}
a:hover{color:#000099; text-decoration:underline;}
a:active{color:#000000; text-decoration:none;}

用body來定義網頁：
body{
  margin:0 auto;
  padding:0; border:0;
  font-size:12px; text-align:center;
  font-family: “宋體”,”Arial”,”Lucida Grande”,”Lucida Sans Unicode”,”Verdana”,”sans-serif”;
}
margin:0 auto;的意思就是網頁置中，很多初學者都不知道div+css如何使網頁置中，其實就這麼簡單。
padding:0; border:0;是定義所有的內補丁和邊框為0，當然你特殊聲明的除外。
font-family: “宋體”,”Arial”,”Lucida Grande”,”Lucida Sans Unicode”,”Verdana”,”sans-serif”;是定義網頁文字的字型，預設會按照這個順序來顯示。如果出現英文的話，英文的預設字型 是Arial。

不要忽視這麼一點代碼，如果你不注意的話，會使css檔案大很多。。比如沒經過簡寫的css有15K，那麼通過簡寫後的CSS檔案可能只有13K了。可千萬別小看這2K，記住~

http://w1w1.blogchina.com/w1w1/6003319.html

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&amppadding簡寫：

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 &nbspspan{position: absolute;left:-2000px;}

現在你既用上了漂亮的圖片又很好的隱藏了真實文本——藉助css，文本被定位於螢幕左側-2000像素處。

CSS技巧

1、忘記定義尺寸的單位是普遍的錯誤。在HTML中你可以唯寫width=100，但是在CSS中，你必須給一個準確 的單位，比如：width:100px width:100em。 只有兩個例外情況可以不定義單位：行高和0值。2、當在XHTML中 使用CSS，CSS裡定義的元素名稱是區分大小寫。為了避免這種錯誤，我建議所有的定義名稱都採用小寫。3、 取消class和id前的元素限定。div#content { /* declarations */ }fieldset.details { /* declarations */ } ，可以寫成#content { /* declarations */ } .details { /* declarations */ } 這樣可以節省一些字 節。 4、通常padding的預設值為0，但是在不同的瀏覽器預設值可能不同，可以在樣式表一開始就先定義所有 元素的margin和padding值都為0，象這樣：* { margin:0; padding:0; }。5、一個標籤可以同時定義多個 class。例如：我們先定義兩個樣式，第一個樣式背景為#666；第二個樣式有10 px的邊框。.one {width:200px;background:#666;}.two{border:10px solid #F00;} ，在頁面代碼中，我們可以這樣調用 [div class=one two][/div]，這樣最終的顯示效果是這個div既有#666的背景，也有10px的邊框。是的，這樣 做是可以的，你可以嘗試一下。6、字型變形命令。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的那一行導航條就會顯示出特殊效果來。 其他頁也是如此。

關於css簡寫就先寫到這裡，大家有什麼問題歡迎與我交流。

 

 

http://wyk.net.ru/blog/article.asp?id=628

css簡寫用法說明作者:kai 日期:2007-01-09字型大小:

簡單的說，css簡寫就是在等效的前提下，把多句css代碼簡化成一句。在我看來，簡寫css的好處有三：一是寫起來方便（就像鍵盤快速鍵）；二是簡化代碼；三是協助你熟悉和深刻理解css。

閑話少說，書歸正傳。能夠簡寫的css屬性主要有以下幾個：

font

程式碼

簡寫：
[code]
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只能通過斜杠/組成一個值，不能分開寫。）

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-width | border-style | border-color

這三句也是簡寫，等於是把四邊的樣式合而為一了。（關於四邊的問題，下文有詳細說明）
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;

（和border一樣）

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

關於四邊

有很多樣式都涉及到了四邊的問題，這裡統一說明。
四邊的簡寫一般如下： 程式碼padding:1px 2px 3px 4px;

等效於： 程式碼padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:4px;

順序：top | right | bottom | left

不論是邊框寬度，還是邊框顏色、邊距等，只要css樣式涉及四邊，順序通通都是“上右下左”（順時針方向）。

如果四邊的值省略一個，唯寫三個: 程式碼padding:1px 2px 3px;

則等效於： 程式碼padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:2px;

（省略的“左”值等於“右”）

如果四邊的值省略兩個： 程式碼padding:1px 2px;

則等效於： 程式碼padding-top:1px;
padding-right:2px;
padding-bottom:1px;
padding-left:2px;

（省略的“下”值等於“上”）

如果只有一個值： 程式碼padding:1px;

則等效於： 程式碼padding-top:1px;
padding-right:1px;
padding-bottom:1px;
padding-left:1px;

關於css簡寫就先寫到這裡，大家有什麼問題歡迎與我交流。