---

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

轉載于:https://www.cnblogs.com/zmj97/p/10161675.html

總結

以上是生活随笔為你收集整理的HTML5与CSS3权威指南之CSS3学习记录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。