web前端開發必備的10項CSS技巧

1. @font-face

一種用其餘服務器上的字體的好方法。很明顯，若是你不能在託管服務器上找到你須要的字體，你能夠在樣式中使用這個方法來引入你須要的字體。

 

@font-face { font-family: Blackout; src:url("assests/blackout.ttf")format("truetype"); }

2. .clearfix

若是你無法清除元素的浮動，這是清除浮動一種方法。你能夠對任何HTML元素單獨使用這種方法。

 

.clearfix:after { content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0; }

3. @media

@media  能夠設置你當前響應網站的媒介，它能幫助你根據用戶的顯示器調整網站的寬度。

 

@mediascreenand (max-width:960px) {}

4. transform: rotate(30deg);

結合這些轉換屬性和CSS轉場效果來創造有意思的動態效果。

 

.title { transform: rotate(40deg); }

5. background-size

這條規則幫助你在網站中適應全屏幕背景。這不像以前的CSS版本必須寫很笨重的代碼。

 

body { background:url(image.jpg)no-repeat; background-size:100%; }

6. input[type="text"]

這個input[type="text"]選擇器和其餘高級選擇器把你從通常水平帶到高級水平很是有幫助。使用屬性選擇器來控制輸入元素的提交版本或爲一個外鏈增長一個圖標這樣很不錯吧？

 

input[type="text"] { width:250px; }

7. margin: 0 auto;

很奇怪，沒有任何特定的標準來使塊級元素居中。這個方法能夠使塊級元素在父元素中居中。

 

#container { margin:0auto; }

8. a {outline: none;}

在瀏覽你的網站的時候，點一個連接一個巨大的虛線框就橫跨整個網頁這將嚴重影響用戶的心情。這個「a {outline: none;}」聲明將移除這個，但爲了易用性別忘了給你的連接也加上:focus狀態。

 

a {outline:none;}

9. overflow: hidden

這是最好的清除還沒加載到你CSS裏面的元素浮動的方法。使用它使網站的響應速度更快。

 

.container { overflow:hidden; }

10. color: rgba();

PNG圖片由於它的透明性使它在網頁設計中很流行並普遍使用，可是如今你能夠使用下面這種方法一樣實現透明。它使用紅、綠、藍三通道並設置其不透明度值來實現透明，像0.5對應%50的不透明度。

 

.btn { color: rgba(0,0,0,0.5); }