系列文章目錄

前端系列文章——傳送門
CSS系列文章——傳送門

---

---

什么是 CSS3

• CSS3是CSS（層疊樣式表）技術(shù)的升級版本，
  于1999年開始制訂，2001年5月23日W3C完成了CSS3的工作草案，
  主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊

• CSS演進的一個主要變化就是W3C決定將CSS3分成一系列模塊
  瀏覽器廠商按CSS節(jié)奏快速創(chuàng)新，因此通過采用模塊方法，
  CSS3規(guī)范里的元素能以不同速度向前發(fā)展，因為不同的瀏覽器廠商只支持給定特性
  但不同瀏覽器在不同時間支持不同特性，這也讓跨瀏覽器開發(fā)變得復(fù)雜

漸進增強和優(yōu)雅降級

• 漸進增強（Progressive Enhancement）：
  一開始就針對低版本瀏覽器進行構(gòu)建頁面，完成基本的功能，
  然后再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗
  漸進增強相當于向上兼容

• 優(yōu)雅降級（Graceful Degradation）：
  一開始就構(gòu)建站點的完整功能，然后針對瀏覽器測試和修復(fù)
  比如一開始使用 CSS3 的特性構(gòu)建了一個應(yīng)用
  然后逐步針對各大瀏覽器進行 hack 使其可以在低版本瀏覽器上正常瀏覽
  優(yōu)雅降級相當于向下兼容

• 區(qū)別
  優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給

  而漸進增強則是從一個非?；A(chǔ)的，能夠起作用的版本開始，并不斷擴充，以適應(yīng)未來環(huán)境的需要

• 降級（功能衰減）意味著往回看

• 而漸進增強則意味著朝前看，同時保證其根基處于安全地帶

CSS3 中的選擇器

1. 層級選擇器
   使用大于號（>）表示 E ~ F
   子選擇器 選擇匹配的F元素，且匹配的F元素所匹配的E元素的子元素
   使用波浪線（+）表示 E + F
   相鄰兄弟選擇器 選擇匹配的F元素，且匹配的F元素緊位于匹配的E元素的后面
   使用波浪線（~）表示 E ~ F
   相鄰選擇器類似，選擇匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

2. 屬性選擇器
   E[attr]：只使用屬性名，但沒有確定任何屬性值
   E[attr="value"]：指定屬性名和屬性值(值完整)
   E[attr~="value"]：指定屬性名，并且具有屬性值，
   此屬性值是一個詞列表，并且以空格隔開，其中詞列表中包含了一個value詞
   E[attr^="value"]：屬性值是以value開頭的(一部分也可以)
   E[attr$="value"]：屬性值是以value結(jié)束的(一部分也可以)
   E[attr*="value"]：屬性值中包含了value(一部分也可以)
   E[attr|="value"]：屬性值是value或者以“value-”開頭的值

3. 結(jié)構(gòu)偽類選擇器
   (el):first-child 匹配屬于任意元素的第一個子元素的 el 元素
   (el):first-of-type 選擇父元素中的第一個 el 元素
   (el):last-child 選擇所有 el 元素的最后一個子元素
   (el):last-of-type 選擇父元素中最后一個 el 元素
   (el):empty 匹配沒有子元素（包括文本節(jié)點）的 el 元素
   (el):nth-child(n) 選擇所有 el 元素的父元素的第 n 個子元素
   (el):nth-of-type(n) 選擇所有p元素第 n 個為 el 的子元素
   (el):nth-last-child(n) 選擇所有 el 元素倒數(shù)的第 n 個子元素
   (el):nth-last-of-type(n) 選擇所有p元素倒數(shù)的第 n 個為 el 的子元素
   odd even numN
   (el):only-child 選擇所有僅有一個子元素，并且子元素是 el 元素
   (el):only-of-type 選擇所有僅有一個子元素中為 el 的元素

4. 否定偽類選擇器
   :not(el) 選擇所有 el 以外的元素

5. 狀態(tài)（表單元素）偽類選擇器
   :focus 選擇元素輸入后具有焦點
   :enabled 匹配每個已啟用的元素
   :disabled 匹配每個被禁用的元素
   :checked 匹配每個已被選中的 元素
   :required 選擇有"required"屬性指定的元素屬性
   :optional 選擇沒有"required"的元素屬性
   :read-only 選擇只讀屬性的元素屬性
   :read-write 選擇沒有只讀屬性的元素屬性
   :valid 選擇所有有效值的屬性
   :invalid 在表單元素中的值是非法時設(shè)置指定樣式
   :in-range 用于標簽的值在指定區(qū)間值時顯示的樣式
   :out-of-range 選擇指定范圍以外的值的元素屬性

6. 目標偽類選擇器
   E:target
   用來匹配文檔中url中某個標志符的目標元素
   url中的標志通常會包含一個#，后面帶有一個標志符名稱

target 實現(xiàn) tab 切換的案例

CSS3 中的背景

• background-clip 規(guī)定背景的繪制區(qū)域
  content-box
padding-box
border-box

• background-origin 規(guī)定背景圖片的定位區(qū)域
  content-box
padding-box
border-box

• background-size 規(guī)定背景圖片的尺寸 !!!
  length 第一個值設(shè)置寬度，第二個值設(shè)置的高度。如果只給出一個值，第二個是設(shè)置為 auto(自動)
  percentage 第一個值設(shè)置寬度，第二個值設(shè)置的高度。如果只給出一個值，第二個是設(shè)置為 auto(自動)
  cover 完全覆蓋背景定位區(qū)域的最小尺寸
  contain 完全覆蓋背景定位區(qū)域的最大尺寸

• 多背景
  background:url(),url();

CSS3 中的邊框

• border-radius 設(shè)置 圓角邊框
  每個半徑的四個值的順序是：左上角，右上角，右下角，左下角。
  如果省略左下角，右上角是相同的
  如果省略右下角，左上角是相同的
  如果省略右上角，左上角是相同的

  border-radius: 1-4 length|% / 1-4 length|%;

  按順時針的順序，斜杠/左邊是四個圓角的水平半徑，右邊是四個圓角的垂直半徑
  但是通常我們很少寫右邊的參數(shù)，那就是默認右邊等于左邊的值
  div { border-radius:10px 20px 30px 40px/40px 30px 20px 10px }
  繪制網(wǎng)站 —— 直通車

• border-image
border-image-source 路徑
  border-image-slice 圖片邊框向內(nèi)偏移 沒有單位 一個數(shù)值
  border-image-width 圖像邊界的寬度
  border-image-repeat 平鋪(repeat)鋪滿(round)拉伸(stretch)
  border-image-outset 邊框圖像區(qū)域超出邊框的量

border-image: source slice width outset repeat|initial|inherit;

• box-shadow 設(shè)置一個或多個下拉陰影的框
  h-shadow 必需的。水平陰影的位置。允許負值
  v-shadow 必需的。垂直陰影的位置。允許負值
  blur 可選。模糊距離
  spread 可選。陰影的大小
  color 可選。陰影的顏色。在CSS顏色值尋找顏色值的完整列表
  inset 可選。從外層的陰影（開始時）改變陰影內(nèi)側(cè)陰影

box-shadow: h-shadow v-shadow blur spread color inset;

多個

box-shadow: h-shadow v-shadow blur spread color inset，h-shadow v-shadow blur spread color inset;

/* 像素點陰影---- */

 filter: drop-shadow(4px 4px 1px #ccc);

CSS3 中的文本效果

• text-shadow 向文本添加陰影
  h-shadow 必需。水平陰影的位置。允許負值
  v-shadow 必需。垂直陰影的位置。允許負值
  blur 可選。模糊的距離
  color 可選。陰影的顏色。參閱 CSS 顏色值

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

• word-break 規(guī)定非中日韓文本的換行規(guī)則

  normal 使用瀏覽器默認的換行規(guī)則
  break-all 允許在單詞內(nèi)換行
  keep-all 只能在半角空格或連字符處換行

word-break: normal|break-all|keep-all;

• word-wrap 允許對長的不可分割的單詞進行分割并換行到下一行

  normal 只在允許的斷字點換行（瀏覽器保持默認處理）
  break-word 在長單詞或 URL 地址內(nèi)部進行換行

word-wrap: normal|break-word;

• text-overflow 規(guī)定當文本溢出包含元素時發(fā)生的事情
  clip 修剪文本
  ellipsis 顯示省略符號來代表被修剪的文本
  string 使用給定的字符串來代表被修剪的文本

text-overflow: clip|ellipsis|string;

CSS3 中的字體 @font-face

使用以前 CSS 的版本，網(wǎng)頁設(shè)計師不得不使用用戶計算機上已經(jīng)安裝的字體
使用 CSS3，網(wǎng)頁設(shè)計師可以使用他/她喜歡的任何字體
當你發(fā)現(xiàn)您要使用的字體文件時，只需簡單的將字體文件包含在網(wǎng)站中，它會自動下載給需要的用戶
Internet Explorer 8 以及更早的版本不支持新的 @font-face 規(guī)則

font-family 必需，規(guī)定字體的名稱
src URL 必需，定義字體文件的 URL
font-stretch 可選，定義如何拉伸字體
font-style 可選，定義字體的樣式
font-weight 可選，定義字體的粗細。
unicode-range 可選，定義字體支持的 UNICODE 字符范圍

<style>@font-face{font-family: myFirstFont;src: url(sansation_light.woff);	/* IE9+ */}div{font-family: myFirstFont;}
</style>

阿里巴巴矢量圖標庫 iconfont —— 直通車
選擇class方式，按說明引入字體文件