一、CSS權(quán)重

• 概念和作用：

權(quán)重指的是樣式的優(yōu)先級(jí);
有兩條或多條樣式作用于一個(gè)元素，權(quán)重高的那條樣式對元素起作用；
權(quán)重相同的，后寫的樣式會(huì)覆蓋前面寫的樣式；

• 權(quán)重等級(jí)

1、!important，加在樣式屬性值后，權(quán)重值為 10000
2、內(nèi)聯(lián)樣式，如：style=””，權(quán)重值為1000
3、ID選擇器，如：#content，權(quán)重值為100
4、類，偽類和屬性選擇器，如： content、:hover 權(quán)重值為10
5、標(biāo)簽選擇器和偽元素選擇器，如：div、p、:before 權(quán)重值為1
6、通用選擇器（*）、子選擇器（>）、相鄰選擇器（+）、同胞選擇器（~）、權(quán)重值為0;

二、CSS3新增選擇器

1、E:nth-child(n)：匹配元素類型為E且是父元素的第n個(gè)子元素；
2、E:first-child：匹配元素類型為E且是父元素的第一個(gè)子元素
3、E:last-child：匹配元素類型為E且是父元素的最后一個(gè)子元素
4、E > F E元素下面第一層子集
5、E ~ F E元素后面的兄弟元素
6、E + F 緊挨著的后面的兄弟元素

• demo

<style type="text/css">            
    .list div:nth-child(2){
        background-color:red;
    }
</style>
......
<div class="list">
    <h2>1</h2>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

<!-- 第2個(gè)子元素div匹配 -->

• 屬性選擇器

1、E[attr] 含有attr屬性的元素;
2、E[attr='ok'] 含有attr屬性的元素且它的值為“ok”
3、E[attr^='ok'] 含有attr屬性的元素且它的值的開頭含有“ok”
4、E[attr$='ok'] 含有attr屬性的元素且它的值的結(jié)尾含有“ok”
5、E[attr*='ok'] 含有attr屬性的元素且它的值中含有“ok”

• demo

<style type="text/css">
    div[data-attr='ok']{
        color:red;
    }
</style>
......
<div data-attr="ok">這是一個(gè)div元素</div>

三、相關(guān)屬性

①CSS3——圓角

設(shè)置左上角的圓角：border-top-left-radius:30px 60px;

同時(shí)分別設(shè)置四個(gè)角： border-radius:30px 60px 120px 150px;

設(shè)置四個(gè)圓角相同：border-radius:50%;

②CSS3—— transition動(dòng)畫

1、transition-property 設(shè)置過渡的屬性，比如：width height background-color

2、transition-duration 設(shè)置過渡的時(shí)間，比如：1s 500ms

3、transition-timing-function 設(shè)置過渡的運(yùn)動(dòng)方式，常用有 linear(勻速)|ease(緩沖運(yùn)動(dòng))

4、transition-delay 設(shè)置動(dòng)畫的延遲

5、transition: property duration timing-function delay 同時(shí)設(shè)置四個(gè)屬性

③CSS3—— transform變換

1、translate(x,y) 設(shè)置盒子位移
2、scale(x,y) 設(shè)置盒子縮放
3、rotate(deg) 設(shè)置盒子旋轉(zhuǎn)
4、skew(x-angle,y-angle) 設(shè)置盒子斜切
5、perspective 設(shè)置透視距離
6、transform-style flat | preserve-3d 設(shè)置盒子是否按3d空間顯示
7、translateX、translateY、translateZ 設(shè)置三維移動(dòng)
8、rotateX、rotateY、rotateZ 設(shè)置三維旋轉(zhuǎn)
9、scaleX、scaleY、scaleZ 設(shè)置三維縮放
10、tranform-origin 設(shè)置變形的中心點(diǎn)
11、backface-visibility 設(shè)置盒子背面是否可見

④CSS3—— animation動(dòng)畫

1、@keyframes 定義關(guān)鍵幀動(dòng)畫
2、animation-name 動(dòng)畫名稱
3、animation-duration 動(dòng)畫時(shí)間
4、animation-timing-function 動(dòng)畫曲線 linear(勻速)|ease(緩沖)|steps(步數(shù))
5、animation-delay 動(dòng)畫延遲
6、animation-iteration-count 動(dòng)畫播放次數(shù) n|infinite
7、animation-direction 動(dòng)畫結(jié)束后是否反向還原 normal|alternate
8、animation-play-state 動(dòng)畫狀態(tài) paused(停止)|running(運(yùn)動(dòng))
9、animation-fill-mode 動(dòng)畫前后的狀態(tài) none(缺省)|forwards(結(jié)束時(shí)停留在最后一幀)|backwards(開始時(shí)停留在定義的開始幀)|both(前后都應(yīng)用)
10、animation:name duration timing-function delay iteration-count direction;同時(shí)設(shè)置多個(gè)屬性

四、HTML5新增標(biāo)簽（基本不用）

• 新增語義標(biāo)簽

1、<header> 頁面頭部、頁眉
2、<nav> 頁面導(dǎo)航
3、<article> 一篇文章
4、<section> 文章中的章節(jié)
5、<aside> 側(cè)邊欄
6、<footer> 頁面底部、頁腳

• 音頻視頻

1、<audio>
2、<video>

五、HTML5 新增表單控件

• 新增類型：網(wǎng)址 郵箱 日期 時(shí)間 星期 數(shù)量 范圍 電話 顏色 搜索

<label>網(wǎng)址:</label><input type="url" name="" required><br><br> 
<label>郵箱:</label><input type="email" name="" required><br><br> 
<label>日期:</label><input type="date" name=""><br><br> 
<label>時(shí)間:</label><input type="time" name=""><br><br> 
<label>星期:</label><input type="week" name=""><br><br> 
<label>數(shù)量:</label><input type="number" name=""> <br><br>
<label>范圍:</label><input type="range" name=""><br><br> 
<label>電話:</label><input type="tel" name=""><br><br> 
<label>顏色:</label><input type="color" name=""><br><br> 
<label>搜索:</label><input type="search" name=""><br><br>

• 新增常用表單控件屬性：

1、placeholder 設(shè)置文本框默認(rèn)提示文字
2、autofocus 自動(dòng)獲得焦點(diǎn)
3、autocomplete 聯(lián)想關(guān)鍵詞