---

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

---

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

官方網(wǎng)站：

華章圖書

書中所有代碼下載鏈接：

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

選擇器

屬性選擇器

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

結(jié)構(gòu)性偽類選擇器

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

• target選擇器——當一個元素的id被其他元素用來跳轉(zhuǎn)時，跳轉(zhuǎn)后對跳轉(zhuǎn)到的那個元素使用樣式

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

• nth-last-child選擇器

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

因此需要一個對第奇數(shù)個h2子元素應用樣式的選擇器：

• nth-of-type——例如h2:nth-of-type(odd)，參數(shù)還可以設置為可循環(huán)的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元素狀態(tài)偽類選擇器

選擇器	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——處于只讀狀態(tài)是應用樣式

E:read-write——處于非只讀狀態(tài)是應用樣式

E:checked——radio或checkbox處于選取狀態(tài)時應用樣式

E:default——對頁面打開時默認處于選取狀態(tài)的單選框或復選框應用樣式，需要注意的是，即使用戶將其設置為非選取狀態(tài)，E:default樣式對其仍然有效

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

E::selection——處于選中狀態(tài)時的樣式

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

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

pattern 屬性規(guī)定一個用于驗證 input 元素的值的正則表達式。

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

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

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

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

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之間的數(shù)值：<input type=number min=1 max=100>
</form>
<!-- 其他代碼 -->

:before與:after

使用content指定內(nèi)容：

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

其中content還可以設置為：

• none
• url(xxx.png)——圖片
• attr(alt)——設置圖片的alt樣式
• counter(計數(shù)器名, 編號種類)，同時在原元素中使用counter-increment: 計數(shù)器名來增加計數(shù)，其中編號種類是可選項
• open-quote和close-quote——設置開頭和結(jié)尾文字符號，并在原元素中設置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	使用瀏覽器默認的換行規(guī)則。
break-all	允許在單詞內(nèi)換行。
keep-all	只能在半角空格或連字符處換行。

word-wrap

word-wrap屬性允許長的內(nèi)容可以自動換行。

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

@font-face

CSS3新增了Web Fonts功能，使得網(wǎng)頁可以使用服務器端字體。

@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

當文本溢出包含它的元素，應該發(fā)生什么。

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

box-shadow

box-shadow: length length length color

四個屬性值分別為：

1. 陰影離開盒的橫方向距離，可以為負值
2. 陰影離開盒的縱方向距離，可以為負值
3. 陰影的模糊半徑
4. 陰影的顏色，可以放在最前面，也可以放在最后面

還可以創(chuàng)建盒內(nèi)陰影，例如：

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

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

box-sizing

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

背景與邊框相關樣式

background-clip

background-clip屬性指定背景繪制區(qū)域。

值	說明
border-box	默認值。背景繪制在邊框方框內(nèi)（剪切成邊框方框）。
padding-box	背景繪制在襯距方框內(nèi)（剪切成襯距方框）。
content-box	背景繪制在內(nèi)容方框內(nèi)（剪切成內(nèi)容方框）。

background-origin

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

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

background-size

指定背景圖片大小。

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

值	描述
length	設置背景圖片高度和寬度。第一個值設置寬度，第二個值設置的高度。如果只給出一個值，第二個是設置為 auto(自動)
percentage	將計算相對于背景定位區(qū)域的百分比。第一個值設置寬度，第二個值設置的高度。如果只給出一個值，第二個是設置為"auto(自動)"
cover	此時會保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區(qū)域的最小大小。
contain	此時會保持圖像的縱橫比并將圖像縮放成將適合背景定位區(qū)域的最大大小。

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屬性指定圖像的邊界向內(nèi)偏移

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. 旋轉(zhuǎn)，指定順時針旋轉(zhuǎn)角度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動畫可以觸發(fā)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功能支持通過關鍵幀的指定來在頁面上產(chǎn)生更復雜的動畫效果

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的無限旋轉(zhuǎn)做例子吧：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>div無限循環(huán)</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屬性來使用盒布局。

不同瀏覽器需要加前綴。

具體總結(jié)可以看這里。

彈性盒布局

例如三欄布局：

#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則仍保持為元素內(nèi)容的高度#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按內(nèi)容大小分配完高度后，將剩余剩余高度按照flex值分配給各個子div。

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

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

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

彈性盒布局

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

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

align-self與align-items類似，區(qū)別在于align-items指定所有子元素的對齊方式，而align-self單獨指定某個子元素的對齊方式

align-content

calc方法

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

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

Media Queries相關樣式

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

其他

• rgba
• transparent
• outline-offset
• resize

• initial

• filter

轉(zhuǎn)載于:https://www.cnblogs.com/zmj97/p/10161675.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。