你應該知道的25個非常有用的CSS技巧

在我們的前端CSS編碼當中，經常要設定特殊的字型效果，邊框圓角等等，還要考慮相容性的問題， CSS網頁布局，說難，其實很簡單。說它容易，往往有很多問題困擾著新手，在中介紹了非常多的技巧，這些小技巧與知識能事半功倍的給大家以協助，經驗豐富的CSS程式員通常都知道這一點，但初學者不要錯過了！重要的CSS規則

這裡有25個非常有用的CSS技巧，將協助你解決讓你棘手的CSS代碼問題。你可以直接使用到你現在的項目當中

1。更改文本反白顏色（Change Text Highlight Color）進一步閱讀

相容IE與firefox的css 線性漸層（linear-gradient）
前端開發效能推薦-如何進行CSS代碼減肥每個網頁設計師應該知道的10條CSS規則讓IE瀏覽器支援RGBA顏色web開發經驗推薦-新網站項目中的8個有用片段 

您可能不知道！使用CSS，你可以控制顏色測試，至少對符合標準的瀏覽器，如Safari或Firefox。

1 ::selection{ /* Safari and Opera */2  background:#c3effd;3  color:#000;4 }5 ::-moz-selection{ /* Firefox */6  background:#c3effd;7  color:#000;8 }

2。防止Firefox的捲軸跳轉（Prevent Firefox Scrollbar Jump）

Firefox通常隱藏垂直捲軸的內容如果尺寸小於可見的視窗，但解決這個問題，您可以使用這個簡單的CSS技巧。

html{ overflow-y:scroll; }

3。列印分頁符（Print Page Breaks）

雖然大多數的互連網使用者更願意在網上閱讀的內容，但一些使用者可能想列印文章。使用CSS，你可以控制內容的分頁符，把這個類加入到任何你想下頁列印的標籤。

.page-break{ page-break-before:always; }

4. Using !important

經驗豐富的CSS程式員通常都知道這一點，但初學者不要錯過了！重要的CSS規則。通過加入！你的CSS規則很重要，你可以增加它的優先順序比其他後續規則。例如，下面的代碼，背景顏色是藍色的，而不是由於紅！

.page { background-color:blue !important;   background-color:red;}

5。替換文字與圖片（Replace Text With Image）

這是一個很好的SEO技巧，讓你看到一個不錯的花哨的映像，而不是簡單枯燥的文字，但搜尋引擎將只能看到文字。

.header{ text-indent:-9999px; background:url('someimage.jpg') no-repeat; height: 100px; /*dimensions equal to image size*/ width:500px;}

6。跨瀏覽器的最低高度（讓IE支援min-height）

Internet Explorer不理解min-height屬性，但這裡的CSS技巧來完成，在IE瀏覽器。

#container{ height:auto !important;/*all browsers except ie6 will respect the !important flag*/ min-height:500px; height:500px;/*Should have the same value as the min height above*/}

7。在新視窗中反白要開啟的連結（Highlight links that open in a new window）

CSS代碼高亮顯示連結，在新視窗中開啟連結會彈出一個新的選項卡或視窗，

a[target="_blank"]:before,a[target="new"]:before { margin:0 5px 0 0; padding:1px; outline:1px solid #333; color:#333; background:#ff9; font:12px "Zapf Dingbats"; content: "\279C";}

8。風格有序li列表（Style Your Ordered List）

樣式的數位有序列表，每個清單項目的內容以不同的方式比。

ol { font: italic 1em Georgia, Times, serif; color: #999999;}ol p { font: normal .8em Arial, Helvetica, sans-serif; color: #000000;}

9。使用CSS的首字下沉（Drop Caps Using CSS）

首字下沉，使用CSS，
你可以建立一個下沉效果，如在報紙或雜誌的使用：第一個字母虛擬元素。

p:first-letter{display:block;margin:5px 0 0 5px;float:left;color:#FF3366;font-size:3.0em;font-family:Georgia;}

10。跨瀏覽器的不透明度(Cross Browser Opacity)

雖然CSS3標準包括Opacity屬性，但不是每個瀏覽器都支援它跨瀏覽器的透明度，這裡的CSS技巧

transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;}

11。line-height的垂直置中(Vertical centering with line-height)

如果您使用的是固定高度容器和垂直置中的文本，使用line-height屬性，完美地做到這一點。

line-height:30px;

12 固定寬度且置中（Center Fixed Width layout）

如果您使用固定寬度的布局，你應該中心的布局，

body{ width:1000px; margin:0 auto;}

13。在IE瀏覽器消除垂直textarea的捲軸（Remove vertical textarea scrollbar in IE）

IE瀏覽器中添加一個垂直捲軸的textarea的輸入領域，無論在它的內容的高度。您可以用這個簡單的CSS技巧來解決這個問題。

textarea{ overflow:auto;}

14。刪除活動的連結邊界（Remove active link borders）

有些瀏覽器如Firefox和IE瀏覽器中添加一個虛線輪廓邊界，使用者點選連結。這是一個有用的協助工具功能，讓使用者知道其中的連結，他點擊或焦點。但有時你需要擺脫這種，在這裡你需要使用的CSS。

a:active, a:focus{ outline:none; }

15。在IE防止元素消失（Prevent Elements from disappearing in IE）

有時IE瀏覽器的行為在一種特殊的方式，使一些元素消失，從而出現當您嘗試進行選擇。這是由於一些float元素的IE問題。這可以加入的位置是：相對固定的元素消失。

16。屬性特定的表徵圖（Attribute-Specific Icons）

CSS屬性選取器是非常強大的，給你很多選擇來控制樣式不同的元素，例如你可以添加一個表徵圖的基礎上的href屬性的一個標籤，讓使用者知道是否連結點，映像，PDF，DOC檔案等。

a[href$='.doc'] { padding:0 20px 0 0; background:transparent url(/graphics/icons/doc.gif) no-repeat center right;}

17。CSS指標游標（CSS Pointer Cursors）

最近這一趨勢已經趕上了。所有的使用者介面元素的使用者，可以點擊網頁上的游標類似的超級連結。這裡是CSS技巧，

input[type=submit],label,select,.pointer { cursor:pointer; }

18。首字大寫（Capitalize Text）

這招是特別有用的一篇文章的標題顯示在網頁上的所有大寫字母開頭的單詞。

text-transform: capitalize;

19。小型大寫字母文本（Small Caps Text）

這是一個較少使用，但有用的CSS屬性。它利用了所有的字母文字，但每個字的第一個字母，字母的大小是小於的第一個字母。

font-variant:small-caps;

20。反白的文本輸入欄位（Highlight Text Input Fields）

這個CSS技巧讓你突出當前處於焦點的輸入欄位。在IE中不相容

input[type=text]:focus, input[type=password]:focus{ border:2px solid #000;}

21。刪除映像邊框（Remove Image Border）

圖片超連結通常會得到一個醜陋的藍色邊框，使您的映像超連結看起來可怕。下面代碼就可去掉

a img{ border:none; }

22。表單中使用標籤（Tableless Forms Using labels）

<form method="post" action="#"><label for="username">Username</label>  <input type="text" name="username" id="username"> <label for="password">Username</label>  <input type="password" name="pass" id="password"> <input type="submit" value="Submit"></form>

p label{ width:100px; float:left; margin-right:10px; text-align:right;}

23。設定一致的基本字型大小（Set a Consistent Base Font Size）

body{ font-size:62.5%; }

24。突出首字母縮寫和縮寫標籤（Highlight Acronym and Abbr Tags）

簡稱和縮寫標籤提供有用的資訊給使用者，瀏覽器和搜尋引擎的首字母縮寫詞和縮減語，但最重要的Firefox的瀏覽器，。這裡的CSS技巧，突出簡稱和縮寫標籤在您的網頁。

acronym, abbr{ border-bottom:1px dotted #333; cursor:help;}

25。CSS重設

這一塊CSS代碼重設適合所有的瀏覽器以防止你的CSS代碼不一致導致的相容性問題

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}/* remember to define focus styles! */:focus {outline: 0;}/* remember to highlight inserts somehow! */ins {text-decoration: none;}del {text-decoration: line-through;}/* tables still need 'cellspacing="0"' in the markup */table {border-collapse: collapse;border-spacing: 0;}

本文連結你應該知道的25個非常有用的CSS技巧