10個必備的CSS技巧總結

 　　CSS是網頁設計師的基礎，對CSS的瞭解能使他們能夠設計出更加美觀別緻的網頁。使用CSS技巧來巧妙地處理CSS是非常令設計師著迷的事情。在CSS的深海世界裡有很多有意思的東西，你只需要找到最適合你的就好。當然我們不可能一下子就記住所有CSS的規則和文法，但為了以後的發展我們還是應該記住那些非常有用的CSS技巧。今天我們精心準備了10條對網頁設計師最有用的CSS技巧，如果你想設計出獨一無二脫穎而出的網頁你必須得好好注意了。這篇部落格是在與一家提供高品質印刷服務的線上印刷公司“ Business Card Printing”合作時寫的。

　　1. @font-face

　　一種用其他伺服器上的字型的好方法。很明顯，如果你不能在託管伺服器上找到你需要的字型，你可以在樣式中使用這個方法來引入你需要的字型。

　　CSS Code複製內容到剪貼簿

　　@font-face {

　　font-family: Blackout;

　　src: url("assests/blackout.ttf") format("truetype");

　　}

　　2. .clearfix

　　如果你沒法清除元素的浮動，這是清除浮動一種方法。你可以對任何HTML元素單獨使用這種方法。

　　CSS Code複製內容到剪貼簿

　　.clearfix:after {

　　content: ".";

　　display: block;

　　clear: both;

　　visibility: hidden;

　　line-height: 0;

　　height: 0;

　　}

　　3. @media

　　@media 可以設定你當前響應網站的媒介，它能協助你根據使用者的顯示器調整網站的寬度。

　　CSS Code複製內容到剪貼簿

　　@media screen and (max-width: 960px) {

　　}

　　4. transform: rotate(30deg);

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

　　CSS Code複製內容到剪貼簿

　　.title {

　　transform: rotate(40deg);

　　}

　　5. background-size

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

　　CSS Code複製內容到剪貼簿

　　body {

　　background: url(image.jpg) no-repeat;

　　background-size: 100%;

　　}

　　6. input[type="text"]

　　這個input[type="text"]選取器和其他進階選取器把你從一般水平帶到進階水平非常有協助。使用屬性選取器來控制輸入元素的提交版本或為一個外鏈增加一個表徵圖這樣很不錯吧?

　　CSS Code複製內容到剪貼簿

　　input[type="text"] {

　　width: 250px;

　　}

　　7. margin: 0 auto;

　　很奇怪，沒有任何特定的標準來使區塊層級元素置中。這個方法可以使區塊層級元素在父元素中置中。

　　CSS Code複製內容到剪貼簿

　　#container {

　　margin: 0 auto;

　　}

　　8. a {outline: none;}

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

　　CSS Code複製內容到剪貼簿

　　a {outline: none;}

　　9. overflow: hidden

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

　　CSS Code複製內容到剪貼簿

　　.container {

　　overflow: hidden;

　　}

　　10. color: rgba();

　　PNG圖片因為它的透明性使它在網頁設計中很流行並廣泛使用，但是現在你可以使用下面這種方法同樣實現透明。它使用紅、綠、藍三通道並設定其不透明度值來實現透明，像0.5對應%50的不透明度。

　　CSS Code複製內容到剪貼簿

　　.btn {

　　color: rgba(0,0,0,0.5);

　　}