一、（7）CSS常用樣式
阿新 • • 發佈：2020-12-18
CSS常用樣式
CSS hack
由於不同廠商的流覽器或某瀏覽器的不同版本，對CSS的支援、解析不一樣，導致在不同瀏覽器的環境中呈現出不一致的頁面展現效果。這時，我們為了獲得統一的頁面效果，就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式，我們把這個針對不同的瀏覽器/不同版本寫相應的CSS code的過程，叫做CSS hack。
CSS hack的原理
由於不同的瀏覽器和瀏覽器各版本對CSS的支援及解析結果不一樣，以及CSS優先順序對瀏覽器展現效果的影響，我們可以據此針對不同的瀏覽器情景來應用不同的CSS。
CSS hack分類
屬性字首法（即類內部Hack）：例如 IE6能識別下劃線"_"和星號" * "，IE7能識別星號" * "，但不能識別下劃線"_"，IE6~IE10都認識"\9"，但firefox前述三個都不能認識。
選擇器字首法（即選擇器Hack）：例如 IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。
IE條件註釋法（即HTML條件註釋Hack）：針對所有IE(注：IE10+已經不再支援條件註釋)： <!--[if IE]>IE瀏覽器顯示的內容 <![endif]-->，針對IE6及以下版本： <!--[if lt IE 6]>只在IE6-顯示的內容 <![endif]-->。這類Hack不僅對CSS生效，對寫在判斷語句裡面的所有程式碼都會生效。
CSS hack的實現
CSS hack方式一：條件註釋法
舉例：
只在IE下生效
<!--[if IE]>
這段文字只在IE瀏覽器顯示
<![endif]-->
只在IE6下生效
<!--[if IE 6]>
這段文字只在IE6瀏覽器顯示
<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>
這段文字只在IE6以上(包括)版本IE瀏覽器顯示
<![endif]-->
只在IE8上不生效
<!--[if ! IE 8]>
這段文字在非IE8瀏覽器顯示
<![endif]-->
CSS hack方式二：CSS屬性字首法
屬性字首法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識別的hack字首，以達到預期的頁面展現效果。
IE瀏覽器各版本 CSS hack 對照表
其中，S表示Standards Mode，即標準模式；Q表示Quirks Mode，即相容模式。
說明：在標準模式中
- “-″減號是IE6專有的hack
- “\9″ IE6/IE7/IE8/IE9/IE10都生效
- “\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
- “\9\0″ 只對IE9/IE10生效，是IE9/10的hack
例項：
<style type="text/css"> body:nth-of-type(1) .iehack{ color: #F00;/* 對Windows IE9/Firefox 7+/Opera 10+/所有Chrome/Safari的CSS hack ，選擇器也適用幾乎全部Mobile/Linux/Mac browser*/ } .demo1,.demo2,.demo3,.demo4{ width:100px; height:100px; } .hack{ /*demo1 注意順序，否則IE6/7下可能無法正確顯示，導致結果顯示為白色背景*/ background-color:red; /* All browsers */ background-color:blue !important;/* All browsers but IE6 */ *background-color:black; /* IE6, IE7 */ +background-color:yellow;/* IE6, IE7*/ background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */ background-color:purple\0; /* IE8, IE9, IE10 */ background-color:orange\9\0;/*IE9, IE10*/ _background-color:green; /* Only works in IE6 */ *+background-color:pink; } /*可以通過javascript檢測IE10，然後給IE10的<html>標籤加上class=”ie10″ 這個類 */ .ie10 #hack{ color:red; /* Only works in IE10 */ } /*demo2*/ .iehack{ /*該demo例項是用於區分標準模式下ie6~ie9和Firefox/Chrome的hack，注意順序 IE6顯示為：綠色， IE7顯示為：黑色， IE8顯示為：紅色， IE9顯示為：藍色， Firefox/Chrome顯示為：橘色， （本例IE10效果同IE9,Opera最新版效果同IE8） */ background-color:orange; /* all - for Firefox/Chrome */ background-color:red\0; /* ie 8/9/10/Opera - for ie8/ie10/Opera */ background-color:blue\9\0; /* ie 9/10 - for ie9/10 */ *background-color:black; /* ie 6/7 - for ie7 */ _background-color:green; /* ie 6 - for ie6 */ } /*demo3 例項是用於區分標準模式下ie6~ie9和Firefox/Chrome的hack，注意順序 IE6顯示為：紅色， IE7顯示為：藍色， IE8顯示為：綠色， IE9顯示為：粉色， Firefox/Chrome顯示為：橘色， （本例IE10效果同IE9，Opera最新版效果也同IE9為粉色） */ .element { background-color:orange; /* all IE/FF/CH/OP*/ } .element { *background-color: blue; /* IE6+7, doesn't work in IE8/9 as IE7 */ } .element { _background-color: red; /* IE6 */ } .element { background-color: green\0; /* IE8+9+10 */ } :root .element { background-color:pink\0; } /* IE9+10 */ /*demo4*/ /* 該例項是用於區分標準模式下ie6~ie10和Opera/Firefox/Chrome的hack，本例特別要注意順序 IE6顯示為：橘色， IE7顯示為：粉色， IE8顯示為：黃色， IE9顯示為：紫色， IE10顯示為：綠色， Firefox顯示為：藍色， Opera顯示為：黑色， Safari/Chrome顯示為：灰色， */ .hacktest{ background-color:blue; /* 都識別，此處針對firefox */ background-color:red\9; /*all ie*/ background-color:yellow\0; /*for IE8/IE9/10 最新版opera也認識*/ +background-color:pink; /*for ie6/7*/ _background-color:orange; /*for ie6*/ } @media screen and (min-width:0){ .hacktest {background-color:black\0;} /*opera*/ } @media screen and (min-width:0) { .hacktest { background-color:purple\9; }/* for IE9/IE10 PS:國外有些習慣常寫作\0，根本沒考慮Opera也認識\0的實際 */ } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .hacktest { background-color:green; } /* for IE10+ 此寫法可以適配到高對比度和預設模式，故可覆蓋所有ie10的模式 */ } @media screen and (-webkit-min-device-pixel-ratio:0){ .hacktest {background-color:gray;} } /*for Chrome/Safari*/ /* #963棕色 :root is for IE9/IE10, 優先順序高於@media, 慎用！如果二者合用，必要時在@media樣式加入 !important 才能區分IE9和IE10 */ /* :root .hacktest { background-color:#963\9; } */ </style>
CSS hack方式三：選擇器字首法
選擇器字首法是針對一些頁面表現不一致或者需要特殊對待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的字首進行hack。
常見：
- *html *字首只對IE6生效
- *+html *+字首只對IE7生效
- @media screen\9{...}只對IE6/7生效
- @media \0screen {body { background: red; }}只對IE8有效
- @media \0screen\,screen\9{body { background: blue; }}只對IE6/7/8有效
- @media screen\0 {body { background: green; }} 只對IE8/9/10有效
- @media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效
- @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }}
常用CSS樣式
- 1. CSS製作三角符號
- 2. CSS 精靈（sprites）
- 3. CSS製作彈出提示框及背景遮罩層
- 4. CSS的定位技巧（子絕父相）
- 5. CSS佈局（兩列，三列）
- 6. CSS2實現圓角矩形
CSS常見事項
- 1) ul 標籤在 Mozilla 中預設是有 padding 值的，而在 IE 中只有 margin 值。
- 2) 同一個的 class 選擇符可以在一個文件中重複出現，而 id 選擇符卻只能出現一次；對一個標籤同時使用 class和 id 進行 CSS 定義，如果定義有重複，id 選擇符做的定義有效。
- 3) 如果一組要巢狀的標籤之間需要些間距的話，那就外面標籤的 padding 屬性，而不要去定義位於裡面的標籤的 margin
- 4) li 標籤前面的圖示推薦使用 background-image 而不是 list-style-image
- 5) 在給你的標籤瘋狂加選擇符的時候，別忘了在 CSS 裡給選擇符加上註釋。 等你以後修改你的 CSS 的時候才知道每個選擇符代表的意思。
- 6) 如果你給一個標籤設定了一個深色調的背景圖片和亮色調的文字效果。建議這個時候給你的標籤再設定一個深色調的背景顏色。
- 7) 定義連結的四種狀態要注意先後順序： Link Visited Hover Active
- 8) 與內容無關的圖片請使用 background
- 9) 定義顏色可以縮寫 #8899FF = #89F
- 10) table 在某些方面比其它標籤表現的要好的多。通常在需要列對齊的地方用它。
- 11) 完美的單象素外框線表格 table {border-collapse:collapse;} td {border:#000 solid 1px;}
- 12) margin 取負值可以在標籤使用絕對定位的時候起到相對定位的作用，在頁面居中顯示時，使用絕對定位的層可使用 left:50% 這個屬性。 再使用 margin 的負值來實現。
- 13) 固定寬度漢字截斷：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;（不過只能處理文字在一行上的截斷，不能處理多行。）
- 14) 固定寬度漢字（詞）折行：table-layout:fixed; word-break:break-all;
- 15) <div style="cursor: help" title="輸入要提示的文字">文字</div> 用滑鼠放在前面的文字上看效果。這個效果在國外的很多網站都可以看到，而國內的少又少。
- 16) 圖片設為半透明：.halfalpha { background:rgba(0,0,0,0.5); filter: Alpha(Opacity=50); opacity:0.5;}
- 17) FLASH透明： 在 <object>標籤結束前輸入 <param name="wmode" value="transparent">
- 18) 我們在做網頁時常用到把滑鼠放在圖片上會出現圖片變亮的效果，可以用圖片替換的技巧，也可以用如下的濾鏡。
程式碼：
.pictures img { filter: alpha(opacity=50); opacity:0.5;} .pictures img:hover { filter: alpha(opacity=100); opacity:1;}
CSS常用命名
| css常用命名 | 頁面結構常用命名 | 導航命名 | 功能命名 |
| 頭部：header 內容：content/container 尾：footer 導航：nav 側欄：sidebar 欄目：column 頁面外圍控制整體佈局寬度：wrapper 左右中：left right center 登入條：loginbar 標誌：logo 廣告：banner 頁面主體：main 熱點：hot 新聞：news 下載：download 子導航：subnav 選單：menu 子選單：submenu 搜尋：search 友情連結：friendlink 頁尾：footer 版權：copyright 滾動：scroll 標籤頁：tab 文章列表：list 提示資訊：msg 小技巧：tips 欄目標題：title 加入：joinus 指南：guild 服務：service 註冊：regsiter 狀態態：status 投票：vote 合作伙伴：partner |
容器: container 頁頭：header 內容：content/container 頁面主體：main 頁尾：footer 導航：nav 側欄：sidebar 欄目：column 頁面外圍控制整體佈局寬度：wrapper 左右中：left right center |
導航：nav 主導航：mainbav 子導航：subnav 頂導航：topnav 邊導航：sidebar 左導航：leftsidebar 右導航：rightsidebar 選單：menu 子選單：submenu 標題: title 摘要: summary |
標誌：logo 廣告：banner 登陸：login 登入條：loginbar 註冊：regsiter 搜尋：search 功能區：shop 標題：title 加入：joinus 關於我們：aboutus 狀態：status 按鈕：btn 滾動：scroll 標籤頁：tab 文章列表：list 提示資訊：msg 當前的: current 小技巧：tips 圖示: icon 註釋：note 指南：guild 服務：service 熱點：hot 新聞：news 下載：download 投票：vote 合作伙伴：partner 友情連結：link 版權：copyright |
命名注意事項
- 1）一律小寫;
- 2）儘量用英文;
- 3）不加中槓和下劃線;
- 4）儘量不縮寫，除非一看就明白的單詞。