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="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >test</a></li><!--變為藍色-->
<li><div><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >test</a></div></li><!--不變藍色-->
//css
li>a{
    color:blue;
}
           

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

<li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >test</a></li><!--變為藍色-->
<li><div><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >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;
    }
}