每個網頁設計師應該知道的10條CSS規則

通過網頁設計師的大量CSS經驗，我們會記住所有種代碼文法，相容性和片段。有一些特定的CSS，可以真正協助改變你的網站設計改變較舊的技術規則和聲明。這裡是我收集到的很有用的10條CSS規則

 

@media

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

 

如果需要支援老版本的瀏覽器，那你就必須堅持使用css1的媒體描述符screen和print，到底是哪些老版本的瀏覽器，沒有查。它們是相互排斥的，因此在為螢幕顯示而產生頁面的時候，瀏覽器會忽略掉列印樣式表，反之亦然。所以，每個樣式表都需要包含相同的樣式選取器，但是有不同的規則聲明，以便為不同的輸出裝置分別產生頁面樣式。 

background-size

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

 

CSS3支援 background-size這一屬性，只需要這樣簡單的一行代碼就實現了日益流行的全背景映像效果

 

@font-face

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

@font-face 能夠載入伺服器端的字型檔，讓用戶端顯示用戶端所沒有安裝的字型。【微軟的IE 5已經是開始支援這個屬性，但是只支援微軟自有的.eot (Embedded Open Type) 格式，而其他瀏覽器直到現在都沒有支援這一字型格式。然而，從Safari 3.1開始，網頁重構工程師已經可以設定.ttf(TrueType)和.otf(OpenType)兩種字型做為自訂字型了。】比方用Google的Webfonts或Typekit

margin: 0 auto;

#container {    margin: 0 auto;}

 

margin: 0 auto; 這是你在布局時最常用的也是經常第一個用到的CSS程式碼片段. 添加 margin: 0 auto; 就可以在父類元素置中並且轉換成塊元素，如果發現沒有置中，那可能忘記定義DIV的寬度了

overflow: hidden

.container {    overflow: hidden;}

 

通常你要解決浮動的問題會想到clear:both，但是overflow: hidden不僅僅局限於隱藏溢出，他還可以清除浮動

.clearfix

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

 

對於那些浮動溢出：隱藏;不起作用的情況下，最好的辦法是clearfix技術。記住，你不必定義clearfix類的名稱，您可以針對此代碼到您的任何HTML元素

color: rgba();

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

 

PNG映像用於建立任何一種透明的效果，但現在可以到另一個實現CSS透明度的方法使用RGBA顏色模式建立的。在十六進位值的地方使用RGBA讓你選擇一種顏色，使用它的紅色，綠色和藍色通道，以及α水平，如0.5，設定透明度為50％。

input[type="text"]

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

 

input[type="text"]這是一個很常用的CSS技巧，他不需要額外定義類名稱，選擇在特定的屬性是非常有用的造型元素，就可以應用到任何的input元素

transform: rotate(30deg);

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

 

在CSS3中，用Transform功能可以實現文字或映像的旋轉、縮放、傾斜、移動這四種類型的變形，這四種變形分別使用rotate、scale、skew和translate這四種方法來實現 目前瀏覽器支援情況：Safari 3.1+、 Chrome 8+、Firefox 4+、Opera 10+、IE9+

a {outline: none;}

a {outline: none;}

　　

當聚焦a標籤的時候，在a標籤的地區周圍會有一個虛線的框，這個框不同於border的是，它是不佔有任何寬度的。當你取消焦點的時候，這個虛線框就會自然消失。你可以通過遨遊、Firefox或者ie的幾個版本看到。而safari、opera、goole瀏覽器等本身就不支援這個效果，所以看不到。下面是outline的樣子樣本，也是我正在做的一個頁面上截取出來的。定義outline: none;就可以實現取消這個線條

文章收集了