HTML5與CSS3權威指南之CSS3學習記錄

---

title: HTML5與CSS3權威指南之CSS3學習記錄
toc: true
date: 2018-10-14 00:06:09

---

學習資料——《HTML5與CSS3權威指南》（第3版）

官方網站：

華章圖書

書中全部代碼下載連接：

連接：http://pan.baidu.com/s/1c0oGMn2 密碼：f7zt

選擇器

屬性選擇器

• [att=val]選擇器——選擇屬性att值爲val的元素
• [att*=val]選擇器——選擇屬性att值包含val的元素
• [att^=val]選擇器——選擇屬性att值以val開頭的元素
• [att$=val]選擇器——選擇屬性att值以val結尾的元素

結構性僞類選擇器

• root選擇器——文檔的根元素，HTML中即爲html元素
• not選擇器——對除了:not()內的其餘元素使用樣式
• empty選擇器——當元素內內容爲空白時使用樣式

• target選擇器——當一個元素的id被其餘元素用來跳轉時，跳轉後對跳轉到的那個元素使用樣式

• first-child選擇器
• last-child選擇器
• nth-child選擇器——nth-child(odd)、nth-child(even)、nth-child(3)

• nth-last-child選擇器

nth-child的問題：h2:nth-child(add)指的是若是一個元素是其父元素的第奇數個子元素，且這個元素是h2，則應用樣式。

所以須要一個對第奇數個h2子元素應用樣式的選擇器：

• nth-of-type——例如h2:nth-of-type(odd)，參數還能夠設置爲可循環的an+b的形式：h2:nth-of-type(4n+1)

• nth-last-of-type

• only-child——當父元素只有一個子元素時，對子元素使用樣式，等價於:nth-child(1):nth-last-child(1)

• only-of-type——等價於:nth-of-type(1):nth-last-of-type(1)

UI元素狀態僞類選擇器

選擇器	Firefox	Safari	Opera	IE	Chrome
E:hover	√	√	√	√	√
E:active	√	√	√	x	√
E:focus	√	√	√	√	√
E:enable	√	√	√	x	√
E:disable	√	√	√	x	√
E:read-only	√	√	√	x	√
E:read-write	√	√	√	x	√
E:checked	√	√	√	x	√
E:selection	√	√	√	x	√
E:default	√	x	√	x	x
E:indeterminate	√	x	√	x	x
E:invalid	√	√	√	x	√
E:valid	√	√	√	x	√
E:required	√	√	√	x	√
E:optional	√	√	√	x	√
E:in-range	√	√	√	x	√
E:out-of-range	√	√	√	x	√

E:hover

E:active——被激活（鼠標按下還未鬆開）時使用樣式

E:focus——得到光標焦點時

E:enabled

E:disabled

E:read-only——處於只讀狀態是應用樣式

E:read-write——處於非只讀狀態是應用樣式

E:checked——radio或checkbox處於選取狀態時應用樣式

E:default——對頁面打開時默認處於選取狀態的單選框或複選框應用樣式，須要注意的是，即便用戶將其設置爲非選取狀態，E:default樣式對其仍然有效

E:indeterminate——當頁面打開時，一組單選框中沒有一個單選框時整組單選框的樣式，當有任意一個單選框被選中時，該樣式被取消

E::selection——處於選中狀態時的樣式

在HTML5中input元素新增了兩個屬性：required和pattern，其中

required屬性是一個布爾屬性，規定必需在提交表單以前填寫輸入字段

pattern 屬性規定一個用於驗證 input 元素的值的正則表達式。

E:required——當一個input/select/textarea元素容許使用required屬性且指定了required屬性時應用樣式

E:optional——當一個input/select/textarea元素容許使用required屬性且未指定required屬性時應用樣式

E:invalid——當一個元素設置了required和pattern且其內容不符合這兩個屬性的要求時應用樣式

E:valid——當一個元素設置了required和pattern且其內容符合這兩個屬性的要求時應用樣式

input元素能夠設置max和min

E:in-range——元素的值在max和min之間

E:out-of-rang——元素的值不在max和min之間

例如：

<!-- 其餘代碼 -->
<style type="text/css">
  input[type="number"]:in-range{
    background-color: white;
  }
  input[type="number"]:out-of-range{
    background-color: red;
  }
</style>
<!-- 其餘代碼 -->
<form>
  請輸入1到100之間的數值：<input type=number min=1 max=100>
</form>
<!-- 其餘代碼 -->

:before與:after

使用content指定內容：

h2:before {
  content: 'COLUMN';
  color: white;
  background-color: orange;
  /* 其餘代碼 */
}

其中content還能夠設置爲：

• none
• url(xxx.png)——圖片
• attr(alt)——設置圖片的alt樣式
• counter(計數器名, 編號種類)，同時在原元素中使用counter-increment: 計數器名來增長計數，其中編號種類是可選項
• open-quote和close-quote——設置開頭和結尾文字符號，並在原元素中設置quotes來設置具體是什麼符號。

文字與字體相關樣式

text-shadow

text-shadow: length length length color

四個屬性值分別爲：

1. 陰影離開文字的橫方向距離，必須設定，能夠爲負值
2. 陰影離開文字的縱方向距離，必須設定，能夠爲負值
3. 陰影的模糊半徑，可省略
4. 陰影的顏色，可省略，能夠放在最前面，也能夠放在最後面

能夠指定多個陰影，用逗號隔開：

div {
  text-shadow: 10px 10px black, 20px 25px red, 30px 40px blue;
}

word-break

設置文字自動換行

值	描述
normal	使用瀏覽器默認的換行規則。
break-all	容許在單詞內換行。
keep-all	只能在半角空格或連字符處換行。

word-wrap

word-wrap屬性容許長的內容能夠自動換行。

值	描述
normal	只在容許的斷字點換行（瀏覽器保持默認處理）。
break-word	在長單詞或 URL 地址內部進行換行。

@font-face

CSS3新增了Web Fonts功能，使得網頁能夠使用服務器端字體。

@font-face {
  font-family: myFont;
  src: url('Sansation_Light.ttf'),
       url('Sansation_Light.eot'); 
}

div {
  font-family: myFont;
}

同時能夠設置斜體或粗體字體：

@font-face {
  font-family: myFont;
  src: url('Fontin_Sans_R_45b.otf'); 
}

@font-face {
  font-family: myFont;
  font-style: italic;
  src: url('Fontin_Sans_I_45b.otf'); 
}

@font-face {
  font-family: myFirstFont;
  font-weight: bold;
  src: url('Fontin_Sans_B_45b.otf'); 
}

@font-face {
  font-family: myFirstFont;
  font-weight: bold;
  font-style: italic;
  src: url('Fontin_Sans_BI_45b.otf'); 
}

還能夠使用src: local('Arial')來設置客戶端本地字體。

能夠元素中設置font-size-adjust來使得修改字體種類時保持文字大小不變。

固然也能夠使用font-size。

盒相關樣式

text-overflow

當文本溢出包含它的元素，應該發生什麼。

值	描述
clip	修剪文本。
ellipsis	顯示省略符號來表明被修剪的文本。
string	使用給定的字符串來表明被修剪的文本。

box-shadow

box-shadow: length length length color

四個屬性值分別爲：

1. 陰影離開盒的橫方向距離，能夠爲負值
2. 陰影離開盒的縱方向距離，能夠爲負值
3. 陰影的模糊半徑
4. 陰影的顏色，能夠放在最前面，也能夠放在最後面

還能夠建立盒內陰影，例如：

box-shadow: inset 0 0 5px 5px #888

其中第二個5px爲展開半徑。

box-sizing

值	說明
content-box	標準盒模型
border-box	IE盒模型
inherit	指定box-sizing屬性的值，應該從父元素繼承

背景與邊框相關樣式

background-clip

background-clip屬性指定背景繪製區域。

值	說明
border-box	默認值。背景繪製在邊框方框內（剪切成邊框方框）。
padding-box	背景繪製在襯距方框內（剪切成襯距方框）。
content-box	背景繪製在內容方框內（剪切成內容方框）。

background-origin

背景圖片的繪製起點，默認爲padding的左上角。

值	描述
padding-box	背景圖像填充框的相對位置
border-box	背景圖像邊界框的相對位置
content-box	背景圖像的相對位置的內容框

background-size

指定背景圖片大小。

background-size: length|percentage|cover|contain;

值	描述
length	設置背景圖片高度和寬度。第一個值設置寬度，第二個值設置的高度。若是隻給出一個值，第二個是設置爲 auto(自動)
percentage	將計算相對於背景定位區域的百分比。第一個值設置寬度，第二個值設置的高度。若是隻給出一個值，第二個是設置爲"auto(自動)"
cover	此時會保持圖像的縱橫比並將圖像縮放成將徹底覆蓋背景定位區域的最小大小。
contain	此時會保持圖像的縱橫比並將圖像縮放成將適合背景定位區域的最大大小。

background-repeat

repeat-x：背景圖像在橫向上平鋪

repeat-y：背景圖像在縱向上平鋪

repeat：背景圖像在橫向和縱向平鋪

no-repeat：背景圖像不平鋪

round：背景圖像自動縮放直到適應且填充滿整個容器。（CSS3）

space：背景圖像以相同的間距平鋪且填充滿整個容器或某個方向。（CSS3）

漸變色背景

http://www.runoob.com/css3/css3-gradients.html

圓角邊框繪製

border-radius: 20px;——四個角半徑都爲20px

border-radius: 40px 20px;——左上角和右下角半徑爲40px，右上角和左下角半徑爲20px

更多的看這裏

使用圖像邊框

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

border-image是速記屬性，用於設置border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat的值。

border-image-source屬性指定要使用的圖像

border-image-slice屬性指定圖像的邊界向內偏移

border-image-width屬性指定圖像邊界的寬度

border-image-outset用於指定在邊框外部繪製 border-image-area 的量

border-image-repeat屬性用於圖像邊界是否應重複（repeated）、拉伸（stretched）或鋪滿（rounded）

具體取值方式能夠看這個。

變形處理

transform

1. 縮放，指定縮放倍率。
   1. transform: scale(0.5);水平垂直都縮小爲原來的一半
   2. transform: scale(0.5, 2);水平縮小爲原來的一半，垂直放大爲原來的兩倍
2. 傾斜，指定傾斜角度。
   1. transform: skew(30deg);只在水平方向上傾斜30度，垂直方向不傾斜
   2. transform: skew(30deg, 40deg);水平傾斜30度，垂直傾斜40度
3. 移動，指定移動距離
   1. transform: translate(50px);只在水平方向上移動50px，垂直方向不移動
   2. transform: translate(50px, 60px);水平移動50px，垂直移動60px
4. 旋轉，指定順時針旋轉角度transform: rotate(45deg);

上述四種方法還能夠組合使用，如：

transform: translate(150px, 200px) rotate(45deg) scale(1.5);

3D變形

在上邊這些方法後加上X、Y、Z

如rotateZ(45deg)

或加上3d

如scale3d(0.8, 0.5, 1);

使用3D動畫能夠觸發GPU加速來提升性能

變形矩陣

使用如transform: matrix(1, 0, 0, 1, tx, ty);的形式來指定2d變形矩陣

使用如transform: matrix3d(0.8, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);的形式來指定3d變形矩陣

變形矩陣上課有學過，這裏再也不贅述

動畫

transition功能支持從一個屬性值平滑過渡到另外一個屬性值

animation功能支持經過關鍵幀的指定來在頁面上產生更復雜的動畫效果

transition

transition: property duration timing-function delay

其中delay是可選的

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>transition示例</title>
    <style type="text/css">
      div {
        background-color: #ff0;
        transition: background-color 1s linear;
      }
      div:hover {
        background-color: #0ff;
      }
    </style>
  </head>
  <body>
    <div>
      示例文字
    </div>
  </body>
</html>

其中transition: background-color 1s linear;能夠寫成

div {
  transition-property: background-color;
    transition-duration: 1s;
  transition-timing-function: linear;
}

也能夠使用delay屬性：

div {
  transition: background-color 1s linear 2s;
}
// 或
div {
  transition-property: background-color;
    transition-duration: 1s;
  transition-timing-function: linear;
  transition-delay: 2s;
}

過渡多個屬性：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>transition示例</title>
    <style type="text/css">
      img {
        position: absolute;
        top: 70px;
        left: 0;
        
        transform: rotate(0deg);
        transition: left 1s linear, transform 1s linear;
      }
      div:hover img {
        left: 30px;
        transform: rotate(720deg);
      }
    </style>
  </head>
  <body>
    <div>
      <img src="wxy.png" alt="wxy" title="" />
    </div>
  </body>
</html>

animation

直接用一個div的無限旋轉作例子吧：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>div無限循環</title>
    <style type="text/css">
      @keyframes rotate {
        from{
          transform: rotate(0deg);
        }
        to {
          transform: rotate(359deg);
        }
      }
      div {
        width: 100px;
        height: 100px;
        background-color: red;
        animation: rotate 3s linear infinite;
      }
    </style>
  </head>
  <body>
    <div>
    </div>
  </body>
</html>

佈局相關

多欄佈局

在CSS3中，使用column-count屬性來使用多欄佈局方式。

不一樣瀏覽器須要加前綴。

使用多欄佈局時須要設定元素中多個欄目相加後的總寬度。

能夠使用column-gap屬性設置多欄之間的間隔距離（可選）。

能夠使用colum-rule屬性在欄與欄之間增長一條間隔線（可選）。

div#div1 {
  column-count: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-width: 20rem;
  -moz-column-width: 20rem;
  -webkit-column-width: 20rem;
  // 下邊的爲可選屬性
  column-gap: 3rem;
  -moz-column-gap: 3rem;
  -webkit-column-gap: 3rem;
  column-rule: 1px solid red;
  -moz-column-rule: 1px solid red;
  -webkit-column-rule: 1px solid red;
}

盒佈局

在CSS3中，經過box屬性來使用盒佈局。

不一樣瀏覽器須要加前綴。

具體總結能夠看這裏。

彈性盒佈局

例如三欄佈局：

#container {
  display: flex;
}
#left-sidebar {
  width: 200px;
  background-color: red;
}
#contents {
  flex: 1;
  background-color: green;
}
#right-sidebar {
  width: 300px;
  background-color: blue;
}

使用order改變順序:

#container {
  display: flex;
}
#left-sidebar {
  order: 3;
  width: 200px;
  background-color: red;
}
#contents {
  order: 1;
  flex: 1;
  background-color: green;
}
#right-sidebar {
  order: 2;
  width: 300px;
  background-color: blue;
}

使用flex-direction改變元素的排列方向

可指定值：

• row：橫向排列（默認）
• row-reverse：橫向反向排列
• column：縱向排列
• column-reverse：縱向反向排列

#container {
  display: flex;
  flex-direction: column;
}
#left-sidebar {
  order: 3;
  width: 200px;
  background-color: red;
}
#contents {
  order: 1;
  flex: 1;
  background-color: green;
}
#right-sidebar {
  order: 2;
  width: 300px;
  background-color: blue;
}

對多個元素使用flex屬性:

// text-a 和 text-b 的高度都自動擴大且高度保持相等， text-c則仍保持爲元素內容的高度

#container {
  display: flex;
  border: solid 5px black;
  flex-direction: column;
  width: 500px;
  height: 300px;
}
#text-a {
  flex: 1;
  background-color: red;
}
#text-b {
  flex: 1;
  background-color: green;
}
#text-c {
  background-color: blue;
}

實際上flex值是先將各個子div按內容大小分配完高度後，將剩餘剩餘高度按照flex值分配給各個子div。

能夠使用flex-grow屬性來指定元素寬度或高度，分配方式與flex相同

使用flex-wrap樣式屬性來指定單行佈局或多行佈局

• nowrap：不換行
• wrap：換行
• wrap-reverse：雖然換行，可是換行方向與使用wrap樣式屬性值時的換行方向相反

彈性盒佈局

使用jusify-content指定水平方向上如何佈局子元素外的空白部分

使用align-items指定垂直方向上如何佈局子元素之外的空白部分

align-self與align-items相似，區別在於align-items指定全部子元素的對齊方式，而align-self單獨指定某個子元素的對齊方式

align-content

calc方法

使用該方法來自動計算元素的寬度等數值類型的樣式屬性值

#foo {
  width: calc(50% - 100px);
  background-color: green;
}

Media Queries相關樣式

@media 設備類型 and ( 設備特性 ) { 樣式代碼 }

其餘

• rgba
• transparent
• outline-offset
• resize

• initial

• filter