應該知道的25個很是有用的CSS技巧

　　在咱們的前端CSS編碼當中，常常要設置特殊的字體效果，邊框圓角等等，還要考慮兼

　　容性的問題， CSS網頁佈局，說難，其實很簡單。說它容易，每每有不少問題困擾着新

　　手，在中介紹了很是多的技巧，這些小技巧與知識能事半功倍的給你們以幫助，經驗豐

　　富的CSS程序員一般都知道這一點，但初學者不要錯過了!重要的CSS規則

　　這裏有25個很是有用的CSS技巧，將幫助你解決讓你棘手的CSS代碼問題。你能夠直接

　　使用到你如今的項目當中

　　1。更改文本突出顯示顏色(Change Text Highlight Color)

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

　　或Firefox。

 
::selection{ /* Safari and Opera */
  background:#c3effd;
  color:#000;
}
::-moz-selection{ /* Firefox */
  background:#c3effd;
  color:#000;
}

　　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;
}