CSS 技巧tips1
1. 給頁面的body上指定class或id，這樣可以在一個共享css中為特定頁面指定特別樣式。
評論：這適用于樣式較少的情況，可以把整個站點的樣式集中于一個樣式表。例如只有一兩個頁面有一兩條特殊規則，就不需要使用多一個單獨樣式表。當然，樣式多的時候，還是應分成若干個樣式表，根據情況在頁面中import所需樣式表。
2. CSS簽名，如body id="www-sitename-com"，這樣允許用戶在用戶樣式表中為你的站點增加（或覆蓋）樣式。
評論：這個技巧很有意思，不過用戶樣式表很少被利用。為特定站點寫特定樣式，用user script之類的方法會更靈活。所以雖然初看時眼前一亮，但總的考慮下來，實用性不是很大。但是這給我一個啟發，其實用用戶樣式表，加上IE7之類的庫，就可以定制瀏覽器。
記錄IE的bug：相對定位元素內若向右下進行絕對定位，需要設定相對定位元素的高寬。
模擬fixed的一個辦法是使用腳本改變元素的絕對定位坐標，但是通常會導致抖動。實際上有兩個小技巧可以模擬出不抖動的fixed。一個是使用css expression配合background-attachment:fixed。另一個（偶自行發現的）方法是使用ie的standard mode，然后html元素overflow:hidden，而body元素overflow:auto，這樣body上絕對定位的元素在外層沒有定位元素的情況下，會始終相對于html元素定位，從而達到和fixed定位一樣的效果。這一方法是我在試圖解決standard mode下scrollbar搶奪焦點的Bug（IE7似乎仍有這個bug）時偶然發現的。
關于containing block如何包圍float元素（似乎有很多人以為這是FF的bug），需要額外的空元素來clear。為了避免引入無意義的標簽，使用::after是個好方法，類似的，也許也可以用:last-child偽類，不過這兩種方法無法用在IE上。但是IE可以用Holly hack，實際上就是讓containing block獲得hasLayout。
1. 固定寬度圓角框
實現：在外層元素（容器）上設定背景色和底部圓角圖，在標題（內部第一個元素）上設定頂部圓角圖。
限制：
* 寬度是定值像素的。
* 必須有內外兩層block元素，內外層要緊貼（即外層不能有padding，內層不能有margin和border）。
* 圓角背景色是固定的（如白色），不能是透明的。
2. 固定寬度圓角框的變形
實現：在外層元素（容器）上設定縱向重復（repeat-y）的背景圖，在內部第一個元素上設定頂部圓角圖，在內部最后一個元素上設定底部圓角圖。
限制：
* 寬度是定值像素的。
* 必須有內外兩層block元素，內層至少有兩個元素，內外層要緊貼（即外層不能有padding，內層不能有margin和border）。
* 圓角背景色是固定的（如白色），不能是透明的。
注：固定背景色的限制可以通過增加位移來解決，例如：
注意，由于使用了margin，需要注意垂直合并的情況，增加了樣式的復雜度。
3. sliding doors 技巧
實現：添加若干層額外的container，在每層上分別應用左下、右下、左上、右上的圓角圖。
限制：
* 必須有四層block元素，內外層要緊貼（即外層不能有padding，內層不能有margin和border）。
* 圓角背景色是固定的（如白色），不能是透明的。
本質上，sliding doors技巧和前兩個方式是一致的，都是通過多層block元素上的背景重疊來模擬總體效果。區別就是前面只需要兩層——多數情況下，語義結構可以有兩層元素，而幾乎不可能出現語義結構需要四層元素的情況。
本書作者對此的看法是，如果只要少數地方，那忍受一下無意義標簽也可以，但是如果有很多地方，那就需要考慮其方案。
我對此的看法有些不同。實際上，書中示例在容器寬度高度增大到超出圖片寬高時，就會出現空白。如果要適應任意大小的容器，要么增大圖片尺寸到一個很大的數值，要么增加更多層次，使用多達九層元素（相當于切分成井字形的九份）！
因此同樣是忍受無語義元素，我寧可使用table構造一個井字布局來模擬border，這個方式比多層嵌套無語義div更清晰。
當然，最好的方案是使用CSS3的border-image和border-radius。在沒有CSS3支持前，則是使用腳本自動插入輔助元素來實現。書中給出的是http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders/。
1. 簡單的CSS陰影和Clagnut陰影
實現：在外層wrapper上將陰影圖設為背景。元素本身通過margin或者相對定位做向左上方的偏移（以展現右下方向的陰影）。
限制：
* 陰影元素需要一個外層的wrapper元素。
2. 模糊陰影
實現：添加兩層container，分別應用陰影圖像和蒙板圖像。
限制：
* 需要兩個外層元素
* 外層背景色是固定的（與蒙板顏色一致）。洋蔥皮陰影無此問題。
注意，蒙板需要png的alpha透明特性，但是IE6不支持。書中給出了使用AlphaImageLoader的filter方式，但是問題在于，在IE中與其這樣，不如直接在元素上使用DropShadow或Shadow的filter。
3. 洋蔥皮陰影
實現：添加兩層container，分別應用兩個陰影末尾圖。
限制：
* 需要兩個外層元素
* 外層背景色是固定的，但稍作改進可以避免這一限制。
總的來說，上述的陰影實現，都不是很好的方法，最好還是借助腳本。
最后是圖像替換。
關于圖像替換，除了本書作者所說的screen reader問題外，另一個問題是，在許多瀏覽器上，圖像不會跟文本一起縮放。所以我的觀點是盡量避免使用圖像替換。本書作者提出的“公司品牌策略要求特定字體”的例子，我認為不足為證。如果真的需要這樣強的視覺強制要求，也肯定不以字體為限，最好直接使用flash。
此外，display:none或visibility:hidden（譯本有疏漏）會造成screen reader失效，這其實很大一部分是screen reader本身的問題。因為本身CSS可以只針對media=screen指定圖像替換樣式。但是許多screen reader忽視了CSS規范（多數是基于IE的）。
所以目前最可靠的圖像替換法，仍是利用腳本的，如本書中的IFR和sIFR。
另，在XHTML2中，不需要專門的圖像替換法。因為所有元素上都支持src屬性。如果src指向的資源可用，就會被替換成該資源的內容（如視頻、圖像等），否則會使用元素內部的內容。
關于A上偽類的順序，應按照LoVeHAte（Link Visited Hover Active）。
此外，關于鏈接偽類補充如下：
根據CSS21，link和visited偽類是互斥的，也就是*:link:visited不可能選擇到任何元素。而hover、active與新增的focus偽類，可以共存于一個元素上。因此可以有以下的樣式：
a:link:hover { color:red; text-decoration:underline }
a:visited:hover { color:maroon }
a:link { color:blue; text-decoration:none; }
a:visited { color:navy; text-decoration:none; }
a:active { background:green; color:white; }
a:visited:hover:active { text-decoration:line-through }
另，hover、active等動態偽類不限于A，也可以在其他某些元素上。但是IE6不支持。
active偽類還有點問題，因為早期規范定義不清，各個瀏覽器實現稍有不同。其中IE最離譜，實際效果近似一個只在a上有效的:focus偽類。實際上，IE DOM中的名為onactivate/ondeactivate的事件，也說明了IE是把active看成是一種特殊的focus的。
關于給外部鏈接加上圖標，以及區分下載類型，是屬性選擇器的極好應用，只是IE6不支持。
Pixy方法，即將若干圖合并于一個圖片的方法，減少了http請求的數量，也避免了hover切換時的延遲。許多其他trick可以使用pixy方法，例如上一篇里提到的sliding door等。
本書還指出了Pixy方法受到IE的cache bug影響會閃爍。但是書中并沒有說清楚這個問題。但其實該bug是有條件的，即IE的cache設置為Every visit to the page，而不是默認的Automatically。基本上，只有開發者才會把cache設置為每次訪問檢查更新，所以這個bug其實不會影響真正的用戶（根據我在winxpsp2的ie6下測試，雖然可能仍然調用了一次網絡存取的api，但是并沒有發生實際的請求，癥狀就是鼠標有極短時間的抖動，但是圖像不會閃爍）。此外有人發現了一個未公開的方法來讓IE對背景圖進行緩存：
document.execCommand("BackgroundImageCache",false,true)
使用這種方法甚至避免了api調用，貌似是直接緩存在IE內存中。
詳見：http://www.mister-pixel.com/。
BTW，我計劃還要對這種方法做一些測試，看看是否能解決vml緩存問題。
最后關于visited：在已訪問鏈接后加一個打勾的圖標，是一個很有意思的設計，可資參考。
關于列表，首先，由于list-style-image的位置各個瀏覽器實現的不一致，而且縮進使用padding或margin的不一致，所以本書后面的例子幾乎完全拋棄了list-style，將padding和margin一律重置為0，然后從頭重新定義。
BTW，關于列表縮進應該使用padding或者margin？我傾向于padding。理由另文撰述。
關于導航條，本書的例子有一個問題，就是需要對第一個li元素專設樣式。對于支持CSS21的瀏覽器來說，使用一個first-child偽類即可，但是對于IE，需要額外的一個first類。有一些解決的方法，我之前也討論過這個話題。
配合頁面ID，可以設定頁面特定的樣式，例如本書中給出的在導航條中突出顯示當前頁面的例子。這是一個很有意思的技巧，沿著這個思路也可以有很多變化。
關于滑動門tab式導航，見上一篇關于sliding door的總結。幸運的是，在列表導航中，正好有li和a兩層元素可供應用sliding door技巧。此外可以做一個簡單的位移變形來支持邊緣透明的tab。
關于圖像映射，開始一段的譯文有些歧義。我想作者是在說map和area，然后給出的是用CSS取代map的方法。我并不完全贊同作者關于map是將表現方式與內容混在一起的說法。在5.7遠距離翻轉的示例代碼中，帶有hotspot class的空span扮演的角色和area元素有何不同呢？實際上，map元素是有導航的語義的。xhtml2中新增的nl元素，就可以認為是map和ul的合體，在xhtml2中usemap所指向的也從map元素變成了nl元素。實際上，img等元素上的usemap屬性提供了一種將對象（圖像）與導航連接在一起的語義。
一個map的例子：
?
又一個更語義化的例子（注：FF和Opera支持object上usemap，IE和Safari不支持object上usemap）：
使用CSS做的圖像映射，實際上與第二個例子相當接近，區別在于CSS無法作出圓形和多邊形的點擊區域。
當然作者的例子所展示的CSS設計的整個過程是很棒的。
轉載于:https://www.cnblogs.com/OnlyXP/archive/2007/09/29/910112.html
總結
以上是生活随笔為你收集整理的CSS 技巧tips1的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： spring 的4种事务管理（1种编程式
- 下一篇： session和cache的区别