CSS高效開發實戰

CSS高效開發實戰

@(StuRep)

經過條件註釋加載不一樣的CSS

<!--[if !IE]><!-->除IE外均可識別<!--<![endif]-->
<!--[if IE]>全部的IE可識別<![endif]-->
<!--[if IE 6]>僅IE6可識別<![endif]-->
<!--[if lt IE 6]>IE6及如下版本可識別<![endif]!-->
<!--[if gte IE 6]>IE6以及IE6以上版本可識別<![endif]-->

_

條件註釋的控制符

項目	範例	說明
!	[if !IE]	「非」運算符
lt	[if lt IE 5.5]	小於運算符
lte	[if lte IE 6]	小於等於運算符
gt	[if gt IE 6]	大於運算符
gte	[if gte IE 6]	大於等於運算符
()	[if (lte IE 6)]	用於子表達式，以配合布爾運算符
&	[if (lte IE 9)&(gt IE 6)]	AND運算符
\	[if (gt IE 6)](!IE)	OR運算符

_

經常使用的屬性前綴

• -webkit:webkit核心瀏覽器，包括Chrome、Safari等。
• -moz:火狐(FIrefox)瀏覽器
• -ms:IE瀏覽器
• -o:Opera瀏覽器

在實際的開發過程當中，對於大多數css3效果來講，考慮到兼容性，每每須要把全部的前綴屬性都寫上去，譬如這樣：

.transform {
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);//把標準屬性放在最後寫
}

_

float

• 對於塊級元素來講，在不設置寬度的狀況下，默認的寬度是100%，一旦設置了浮動，它的寬度就會根據內容進行自動調整。
• 設置了浮動的元素會脫離正常的文檔流，咱們能夠這樣理解：設置浮動後，元素不只在y軸上浮了起來，在z軸上，也浮了起來。譬如：在默認狀況下，父元素的高度會根據子元素的內容進行調整，而若是咱們將子元素設置爲浮動，父元素的高度就會變爲0。
• 雖然浮動的元素脫離了文檔流，可是裏面的內容仍然佔據空間，會根據相對位置進行佈局。

_

清除浮動

清除浮動主要應用的是css中的clear屬性，clear屬性定義了元素的哪一側不容許出現浮動元素。可選項有left、right、both。
_

CSS定位技術

CSS使用position選項來定義元素的定位屬性，該選項有5個可選值：static、relative、absolute、fixed、inherit，默認值爲static。

• static：若是使用默認值，在CSS中爲元素定義top、left、right、bottom、z-index都不會生效。
• relative：relative的表現和static同樣，只不過能夠經過設置偏移量和z-index來控制相對於其正常位置進行的偏移。
• absolute：absolute是相對上一個不爲static的父元素進行絕對定位。換句話說，若是不指定父元素的position，absolute將相對於整個html文檔進行絕對定位。只有指定了container的position(非static)，子元素才能相對於父元素進行絕對定位。
• fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位。也就是說，不論網頁如何滾動，該元素始終停留在屏幕的某個位置上。

絕對定位元素有如下幾個特色：

• 塊級元素的寬度在未定義時再也不爲100%，而是根據其內容自動調整。
• 在不定義z-index的狀況下，absolute元素會覆蓋在其餘元素之上。
• 它會脫離正常的文檔流，再也不佔據空間，相似於浮動後的效果。

absolute和fixed都屬於絕對定位的範疇。

__

CSS選擇器

• 子元素選擇器：">"符號，">"左邊是父元素，右邊是子元素。若是兩個元素不是嚴格的「父子關係」，則使用子元素選擇器的定義不會生效。例如：

<li><a href="#">test</a></li><!--變爲藍色-->
<li><div><a href="#">test</a></div></li><!--不變藍色-->
//css
li>a{
    color:blue;
}

• 後代元素選擇器：一個空格。後代包括子輩、孫子輩等，不一樣於子代選擇器。例如：

<li><a href="#">test</a></li><!--變爲藍色-->
<li><div><a href="#">test</a></div></li><!--變爲藍色-->
//css
li a{
    color:blue;
}

• 相鄰元素選擇器：「+」，用於選取和某個元素相鄰的同級元素。相鄰元素選擇器的使用有兩個條件：

  • 兩者必須擁有同一個父元素
  • 兩者相鄰
• 屬性選擇器：屬性選擇器的語法是用一對中括號「[]」，例如[title]、a[href][title]
• 組選擇器：若是要對多個元素定義一樣的樣式，則能夠用組選擇器來縮減重複代碼。組選擇器的語法關鍵字是一個「,」
• :nth-child(n)：選擇器中的n表示一個簡單的表達式，它能夠是大於等於0的整數，好比在基礎樣例中應用：

li:nth-child(2){
    background-color:#333;
    color:white;
}
//n取2，就是取某個父元素內第二個li元素，即須要同時知足兩個條件：1.是否是第2個
//2.是否是li元素

• :nth-last-child(n)：和nth-child(n)相反
• :nth-of-type(n)：這個選擇器和:nth-child(n)相似，區別在於，若是使用p:nth-child(3)這樣的條件時，一旦第3個元素不爲<p>元素，這個選擇器就不起做用，而p:nth-of-type(3)則查詢的是第3個<p>元素。
• :nth-last-of-type：和上一個相反
• :last-child：選擇的是元素的最後一個子元素
• :first-of-type和:last-of-type：:first-of-type至關於:nth-of-type(1)，:last-of-type至關於:nth-last-of-type(1)
• :only-child：若是一個父元素只有一個子元素，那麼選取這個子元素。若是加了限定條件，例如p:only-child則取交集，即若是一個父元素只有一個子元素，且這個子元素爲<p>，這個選擇器纔會生效。
• :only-of-type：基本同:only-child，區別在於若是不指定type而直接使用:only-of-type的話會形成body被選中，而:only-child不會出現這種狀況。

_

媒介查詢

Media Type的類型彙總

設備	指代
all	匹配全部設備
braille	匹配觸覺反饋設備
embossed	凸點字符印刷設備
handheld	手持設備
print	打印機設備
projection	投影儀設備
screen	彩色計算機顯示器設備
speech	語音合成器設備
tty	柵格設備
tv	電視設備

_

認識響應式網頁設計

響應式網頁設計就是一個網站可以兼容多個終端——而不是爲每一個終端作一個特定版本。
_

媒介查詢的基本語法

能夠將Media Query當作是添加了CSS屬性判斷的Media Type，其基本語法以下：

@media screen and(max-width:600px){
    .class{
        background:#ccc;
    }
}