CSS3學習筆記

1.  偽類選擇器

CSS3之前的偽類共有：::first-line,::first-letter, :after, :before, :hover, :active, :visited, :focus, :link,:first-child, :lang這11種。

CSS3新增了許多選擇器，下面列出常見的幾種。

1.  :nth-child(n) 某個父元素的第n個子元素。（CSS3）

2.  :nth-child(2n) 選擇偶數項。（CSS3）

3.  :nth-child(n+5) 從第五個元素開始全選。（CSS3）

4.  :nth-last-child(n) 獲取倒數第n個元素。（CSS3）

5.  li:nth-of-type(n) 獲取第n個li元素。

6.  li:nth-last-of-type(n) 獲取倒數第n個li元素

7.  :last-child 最後一個子元素。（CSS3）

8.  :first-of-type: 相當於:nth-of-type(1)。

9.  :last-of-type: 相當於:nth-last-of-type(1)。

10. only-child: 獲取只有一個子元素的子元素。

11. only-of-type: 類似於only-child，區別於不指定type時，會選擇body。

12. :root 選擇文件的根元素。（CSS3）

13. :empty 選擇沒有任何內容的元素。（CSS3）

14. :target選擇當前被選中的錨點元素。（CSS3）

15. :enabled 選擇所有可用的表單元素。（CSS3）

16. :disabled 選擇所有不可用的表單元素。（CSS3）

17. :checked 選擇所有被選中的checkbox和radio。（CSS3）

18. :not(S) 否定偽類，排除S選取其他，如li:not(.test)。（CSS3）

相容性方面：

IE6~8 不支援CSS3屬性。

FF3 不支援 :nth-child;

2.  個性化字型

1.   自定義字型：@font-face 載入伺服器端的字型檔案，讓客戶端顯示客戶端沒有安裝的字型。

@font-face {
    font-family: myFont;
    src: url('MyFont.ttf');
}
div {
    font-family: myFont;
}
 

2.   字型圖示：現在常用FontAwesome圖示，需引入字型檔案和css檔案，文件中使用<i class=”fa fa-camera-retro”>照相機</i>。

 官網地址：http://fortawesome.github.io/Font-Awesome/#

官方中文網：http://fontawesome.dashgame.com

3.   字型反射效果：box-reflect

對字型和圖片都能應用，類似鏡面反射的效果。目前只有webkit核心的瀏覽器支援，不過該屬性對佈局無影響。

語法：box-reflect: 方向間距 漸變效果;

方向：blow,above,left,right;

間距：倒影和本體的間的距離。(padding會影響間距)

漸變效果：常用的又linear-gradient

例如：

-webkit-box-reflect:below 1px linear-gradient(transparent,transparent 50%,rgba(0,0,0,.3));<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>

4.   字型陰影：

text-shadow:h-shadow v-shadow blur color;

h-shadow: 必須，水平陰影的位置，允許負值；

v-shadow: 必須，垂直陰影的位置，允許負值；

blur: 可選，模糊的距離；

color: 可選，陰影的顏色。

偏移量為0，光暈的效果。

水平偏移量和垂直偏移量相同，浮雕的效果。

5.   多列屬性：

column-count:定義分列數量。

column-gap:定義每一列中間的寬度。

column-rule: 定義分欄的中間樣式。一般還有：

       dotted點狀；

       dashed虛線；

       solid實線；

       double雙線；

       groove3D grooved

       ridge3D ridged

       inset3D inset

       outset3D outset

另外，IE和Opera支援該屬性 FF和webkit核心的需要加字首，IE9以前的版本不支援。

例如：

    column-count:3;
    column-gap:30px;
    column-rule:1px dashed black;
    -webkit-column-count:3;
    -webkit-column-gap:30px;
    -webkit-column-rule:1px dashed black;
    -moz-column-count:3;
    -moz-column-gap:30px;
    -moz-column-rule:1px dashed black;

6.   文字溢位：

text-overflow:當文字內容超出該區域時的處理。

值：clip修建文字。

ellipsis 顯示省略號來代替被修建的文字。

string 使用給定的字串來代表被修建的文字。

3.  背景和圖片

1.  背景圖片大小：

background-size: 設定背景圖片的大小，可以寫成background-size:80px,60px;也可指定效果值。

background-size:contain;效果為橫向鋪滿，縱向自動。

效果可寫為background-size: 100% auto;兩者等價。

background-size:cover;效果為縱向鋪滿，橫向自動。

注意：background-size一定要在制定背景圖片後使用，否則無效。

2.  origin和clip

background-origin指定圖片的起始位置，他有三個值：border-box，padding-box，content-box。

border-box指定圖片從父級元素的border處開始顯示，如圖。

padding-box指定圖片從父級元素的padding處開始顯示：

content-box指定圖片從父級元素的內容處開始顯示：

background-clip說明的是背景圖片的顯示區域，值也是上述三個。

為了更好地理解上述兩個屬性的區別，先設定

background-origin:border-box;background-clip:content-box;

可意看到，位於border-box和padding-box區域的圖片沒有顯示，只有content-box區域的圖片顯示。也就是說，origin控制圖片從哪顯示，clip控制圖片顯示哪部分。

3.