CSS基礎知識2
1 基本規範
1.1 文件命名規範
基本樣式：base.css
全局樣式：global.css
框架布局：layout.css
字體樣式：font.css
鏈接樣式：link.css
打印樣式：print.css
1.2 常用類Class規範
頁眉：header 內容：content容器：container
頁腳：footer 版權：cpright導航：nav
分頁：pages 標誌：logo留言：msg
標語：banner 標題：title邊欄：sidebar
圖標：icon 註釋：note搜索：search
按鈕：btn 登錄：login鏈接：link
主導航：main-nav 子導航：sub-nav信息框：manage
說明：常用類的命名應盡量以常見英文單詞為準，做到通俗易懂，並在適當的地方註釋。
對於二級類命名，則采用組合書寫的模式，兩個單詞之間使用中橫連“-”接，如：
搜索框：search-input
搜索圖標：search-icon
搜索按鈕：search-btn
1.3 派生選擇器
可以使用派生選擇器給一個元素裏的子元素定義樣式，在簡化命名的同時，也使結構更加的
清晰化，如：
.main-nav ul li { background:url(images/bg.gif;) }
1.4 輔助圖片用背影圖處理
這裏的“輔助圖片”是指那些不是作為頁面要表達的內容的一部分，而僅僅用於修飾、間隔、
提醒的圖片。將其做背影圖處理，可以在不改動頁面的情況下通過CSS樣式來進行改動，如：
.logo { background:url(images/logo.jpg) #FEFEFE no-repeat right bottom; }
1.5 結構與樣式分離
在頁面裏只寫入文檔的結構，樣式寫於css文件中，通過外部調用CSS實現結構與樣式分離。
1.6 文檔的結構化
書寫頁面CSS文檔都應采用結構化的書寫方式，邏輯清晰易於閱讀。如：
<div class="main-nav "> <ul> <li><a href="#" >首頁</a></li> <li><a href="#" >介紹</a></li> <li><a href="#" >服務</a></li> </ul> </div>
/*主導航 S*/
.main-nav { width:100%; height:30px; background:url(images/mainMenu_bg.jpg) repeat-x; } .main-nav ul li { float:left; line-height:30px; margin-right:1px; cursor:pointer; }
/*主導航 E*/
1.7 鼠標手勢
在XHTML標準中，hand只被IE識別，當需要將鼠標手勢轉換為“手形”時，則將“hand”換為
“pointer”，即 cursor:pointer;
1.8 註釋書寫規範
a 整段註釋。分別在開始及結束地方加入註釋，如1.6中所示；
b 協助註釋。非作者維護時所加入的表示修改時間、修改人等標識信息。在區域註釋或單行
註釋的基礎上加上修改人和修改時間等信息。如：
區域註釋
/* ** S 註釋內容[修改人和修改時間] */
.class{...}
.class{...}
/* ** E*/
單行註釋
.class{/* 註釋內容[修改人和修改時間] */
}
1.9 樣式屬性代碼縮寫
a 不同類有相同屬性及屬性值的縮寫
對於兩個不同的類，但是其中有部分相同甚至是全部相同的屬性及屬性值時，應對其加以
合並縮寫，特別是當有多個不同的類而有相同的屬性及屬性值時，合並縮寫可以減少代碼量
並易於控制。如：
.main-nav { background:url(../images/bg.gif); border:1px solid #333; width:100%; height:30px; overflow:hidden; } .sub-nav { background:url(../images/bg.gif); border:1px solid #333; width:100%; height:20px; overflow:hidden; }
兩個不同類的屬性值有重復之處，剛可以縮寫為：
.main-nav , .sub-nav { background:url(../images/bg.gif); border:1px solid #333; width:100%; overflow:hidden; } .main-nav { height:30px; } .sub-nav { height:20px; }
b 同一屬性的縮寫
同一屬性根據它的屬性值也可以進行簡寫，如：
.search { background-color:#333; background-image:url(../images/icon.gif); background-repeat: no-repeat; background-position:50% 50%; } .search { background:#333 url(../images/icon.gif) no-repeat 50% 50%; }
c 內外側邊框的縮寫
在CSS中關於內外側邊框的距離是按照[上右下左]的順序來排列的，當這四個屬性值不同時，
也可直接縮寫，是用順時針的方向
.btn { margin-top:10px; margin-right:8px; margin-bottom:12px; margin-left:5px; padding-top:10px; padding-right:8px; padding-bottom:12px; padding-left:5px; }
則可縮寫為：
.btn { margin:10px 8px 12px 5px; padding:10px 8px 12px 5px; }
而如果當上邊與下邊、左邊與右邊的邊框屬性值相同時，則屬性值可直接縮寫為兩個，如：
.btn { margin-top:10px; margin-right:5px; margin-bottom:10px; margin-left:5px; }
縮寫為：
.btn { margin:10px 5px; }
而當上下左右四個邊框的屬性值都相同時，則可以直接縮寫成一個，如：
.btn { margin-top:10px; margin-right:10px; margin-bottom:10px; margin-left:10px; }
縮寫為：
.btn{ margin:10px; }
d 顏色值的縮寫
當RGB三個顏色值數值相同時，可縮寫顏色值代碼。如：
.menu { color:#ff3333; }
可縮寫為：
.menu { color:#f33; }
1.10 hack書寫規範
因為不同瀏覽器對W3C標準的支持不一樣，各個瀏覽器對於頁面的解釋呈視也不盡相同，如
IE在很多情況下就與FF存在3px的差距，對於這些差異性，就需要利用css的hack來進行調整，
當然在沒有必要的情況下，最好不要寫hack來進行調整，避免因為hack而導致頁面出現問題。
a IE6、IE7、Firefox之間的兼容寫法
[寫法一]
IE都能識別*；
標準瀏覽器(如FF)不能識別*；
IE6能識別*，但不能識別 !important,IE7能識別*，也能識別!important;
FF不能識別*，但能識別!important;
根據上述表達，同一類/ID下的CSS的hack可寫為：
.search-input { background-color:#333; /* 三者皆可 */ *background-color:#666 !important; /* 僅IE7 */ *background-color:#999; /* 僅IE6及IE6以下 */ }
一般三者的書寫順序為：FF、IE7、IE6。
[寫法二]
IE6可識別“_”，而IE7及FF皆不能識別，所以當只針對IE6與IE7及FF之間的區別時，可寫為：
.search-input { background-color:#333; /* 通用 */ _background-color:#666; /* 僅IE6可識別 */ }
[寫法三]
*+html 與 *html 是IE特有的標簽, Firefox 暫不支持。
.search-input { background-color:#333; } *html .search-input { background-color:#666; } /* 僅IE6 */ *+html .search-input { background-color:#555; } /* 僅IE7 */
b 屏蔽IE瀏覽器
select是選擇符，根據情況更換。第二句是MAC上safari瀏覽器獨有的。
*:lang(zh) select { font:12px !important; } /* FF的專用 */ select:empty { font:12px !important; } /* safari可見 */
c IE6可識別
通過CSS註釋分開一個屬性與值，註釋在冒號前。如：
select { display /* IE6不識別 */:none; }
d IE的if條件hack寫法
所有IE識別 <!–[if IE]> Only IE <![end if]–>
僅IE5識別 <!–[if IE 5]> Only IE 5.0 <![end if]–>
IE5及IE5.5都識別 <!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–>
僅IE6識別 <!–[if lt IE 6]> Only IE 6- <![end if]–>
IE5.x ~ IE6識別 <!–[if gte IE 6]> Only IE 6/+ <![end if]–>
僅IE7識別 <!–[if lte IE 7]> Only IE 7/- <![end if]–>
1.11 清除浮動
在Firefox中，當子級都為浮動時，那麽父級的高度就無法完全的包住整個子級，此時，用
這個清除浮動的hack來對父級做一次定義，可以解決該問題。如：
select:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
2 常見兼容問題
a DOCTYPE 影響 CSS 處理
b FF：div設置 margin-left, margin-right為 auto時已經居中, IE不行
d FF：body設置text-align，div需設置margin: auto(主要是margin-left,margin-right)
方可居中
e FF：設置padding後, div會增加 height 和 width, 但IE不會, 故需要用!important多設
一個 height 和 width
f FF：支持 !important, IE 則忽略, 可用 !important 為 FF 特別設置樣式
g div 垂直居中:vertical-align:middle;將行距增加到和整個DIV同高line-height:200px;
然後插入文字。缺點是要控制內容不要換行
h cursor: pointer 可以同時在 IE FF 中顯示遊標手指狀， hand 僅 IE 可以
i FF: 鏈接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行。
參照 menubar, 給 a 和 menubar 設置高度是為了避免底邊顯示錯位, 若不設height，可在
menubar 中插入一個空格。
j 在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px。解決方法：
div{
margin:30px !important;
margin:28px;
}
註意這兩個margin的順序一定不能寫反，所以不可以只寫margin:**px !important;
k ul標簽在Mozilla中默認是有padding值的,而在IE中只有margin有值所以先定義程序代碼
ul{
margin:0;padding:0;
}
3 其他說明
a 檢查CSS
檢查一下有無拼寫錯誤、是否忘記結尾的 } 等。可以利用CleanCSS來檢查 CSS的拼寫錯誤。
CleanCSS本是為CSS減肥的工具，但也能檢查出拼寫錯誤。
b 確定錯誤發生位置
如果錯誤影響了整體布局，則可逐個刪除div塊，直到刪除某個div塊後顯示正常，即可確定
錯誤發生的位置。利用border屬性確定出錯元素的布局特性，使用float屬性布局易出錯。
這時為元素添加border屬性確定元素邊界，錯誤原因即水落石出
c float元素務必指定width屬性
很多瀏覽器在顯示未指定width的float元素時會有bug。所以不管float元素內容如何，一定
要為其指定width屬性。另外指定屬性值時盡量使用em而不是px做單位。
d float元素不能指定margin和padding等屬性
IE在顯示指定了margin和padding的float元素時有bug。因此不要對float元素指定margin和
padding屬性（可以在float元素內部嵌套一個div來設置margin和padding）。
也可以使用hack方法為IE指定特別的值。
e float元素的寬度之和要小於100%
如果float元素寬度之和為100%，某些老瀏覽器不能正常顯示。因此保證寬度之和小於99%。
f 是否重設了默認的樣式
某些屬性如margin、padding等，不同瀏覽器會有不同的解釋。因此在開發前首先將全體的
margin、padding設置為0、列表樣式設置為none等。
g 關於高度的問題
如果是動態地添加內容，高度最好不要定義。瀏覽器可以自動伸縮，而如果是靜態的內容，
高度最好定好。
CSS基礎知識2