在我們的前端CSS編碼當中，經常要設置特殊的字體效果，邊框圓角等等，還要考慮兼容性的問題， CSS網頁布局，說難，其實很簡單。說它容易，往往有很多問題困擾着新手，在中介紹了非常多的技巧，這些小技巧與知識能事半功倍的給大家以幫助，經驗豐富的CSS程序員通常都知道這一點，但初學者不要錯過了！重要的CSS規則
這里有25個非常有用的CSS技巧，將幫助你解決讓你棘手的CSS代碼問題。你可以直接使用到你現在的項目當中
1。更改文本突出顯示顏色（Change Text Highlight Color）
您可能不知道！使用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）
火狐通常隱藏垂直滾動條的內容如果尺寸小於可見的窗口，但解決這個問題，您可以使用這個簡單的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; }