G5德軍

一、Emment語(yǔ)法

1.作用

（1）快速生成HTML結(jié)構(gòu)語(yǔ)法

（2）快速生成CSS樣式語(yǔ)法

2.使用方法

　　(1)tab+標(biāo)簽名

　　(2)生成多個(gè)相同標(biāo)簽:標(biāo)簽名*個(gè)數(shù)+tab

　　(3)包含關(guān)系:標(biāo)簽名>標(biāo)簽名

　　(4)并列關(guān)系：標(biāo)簽名+標(biāo)簽名

　　(5)標(biāo)簽名.類名     #標(biāo)簽名

　　(6)div+{ 內(nèi)容 } +tab

       (7)縮寫+設(shè)置內(nèi)容 

3.快速格式化

　　 

二、CSS的復(fù)合選擇器(高效選擇標(biāo)簽)

1.后代選擇器(也叫包含選擇器   point)

　　 (1)格式:元素2  元素2 { 樣式聲明 }

　　 (2)元素1是起限定作用，改變的是元素2的樣式

2.子類選擇器　　

　　格式：元素1>元素2 { 樣式聲明 }

3.并集選擇器(可以選擇多組標(biāo)簽,定義相同的樣式)

　　 (1)特點(diǎn):任何形式的選擇器,都可以作為并集選擇器的一部分

　　(2)格式：元素，元素 {樣式聲明}

4.偽類選擇器

/*未訪問的鏈接 a:link*/ 

　　　　(1)a:link {

　　　　　　color:#333;

　　　　　　text-decoration;none;

}

/*選擇訪問過的鏈接*/

　　　　a:visited {

　　　　color:orange;

}

/*選擇鼠標(biāo)經(jīng)過的那個(gè)鏈接*/

　　　　a:hover{

　　　　color:skyblue;

}

/*選擇的是我們鼠標(biāo)正在按下還沒有彈起*/

　　　　a:active {

　　　　color:grey;

}

　　  (2)   注意事項(xiàng):

  順序:LVHA

 

5.focus偽類選擇器(選取有光標(biāo)的表單)

 

/*把獲得光標(biāo)的標(biāo)簽選出來的*/

input:focus {

　　background-color:pink;//背景顏色　　

　　color:red;//字體顏色

}

6.最常用類選擇器

1.鏈接選擇器

a{}

a:hover{}

2.后代選擇器

3.并集選擇器

三、CSS的元素顯示模式

1.元素分類

(1)快級(jí)元素

常見元素:<h1><p><div><li>

     　　①特點(diǎn):

                  1)獨(dú)占一行

　　　　　2)高度、寬度、外邊距及內(nèi)邊距都可以控制

　　　　　3）默認(rèn)是父容器（父級(jí)寬度）的100%

　　　　　4）是一個(gè)容器及盒子，里面都可以放行或者塊級(jí)元素

 

　　　　②注意：

　　　　　<p>標(biāo)簽里不能放<div>

(2)行內(nèi)元素

 常見元素:<a><span><strong>

特點(diǎn):

相鄰行內(nèi)元在一行上,一行可以顯示多個(gè)

高、寬直接設(shè)置是無效的

默認(rèn)寬度就是它本身內(nèi)容的寬度

行內(nèi)元素只能容納文本或其他行內(nèi)元素

注意：

鏈接里面不能再放鏈接

特殊情況鏈接<a>里面可以放塊級(jí)元素

(3)行內(nèi)塊元素

<img/> <input/><td/>

2.元素模式顯示轉(zhuǎn)換

(1).轉(zhuǎn)化為塊級(jí)元素display:block;(塊級(jí)元素)

(2)轉(zhuǎn)化為行內(nèi)元素:display:inline;

(3)轉(zhuǎn)化為行內(nèi)塊元素:display:inline-block;

 

3.單行文字垂直居中

(1)line-heightd等于height

(2)行高大于盒子高度,文字偏下

(3)行高小于盒子高度,文字偏上

 

 

四,、CSS的背景

1.背景顏色(background-color)

一般情況下元素背景顏色默認(rèn)值是transparent透明),也可以手動(dòng)制定背景顏色為透明色

2.背景圖片(background-img)

必須要url

3.背景平鋪

background-repeat:no-repeat;

優(yōu)點(diǎn):非常便于控制位置

4.背景圖片位置

background-position:x y;

(1)參數(shù)是方位名詞

(2)

 

 

 

五、CSS的三大特性

1.層疊性

(1)樣式?jīng)_突(就近原則)

哪個(gè)樣式近,就執(zhí)行哪一個(gè)

(2)樣式不沖突

不會(huì)有層疊性

2.繼承性

例如:<div>里包含<p>標(biāo)簽,那么<p>標(biāo)簽的樣式和<div>標(biāo)簽的一樣(只有文字樣式)

行高的繼承性(子元素繼父元素)

　　①font: 12px(文字大小)/24px(行高) "Microsoft YaHei"

　　②font: 12px/1.5(當(dāng)前元素文字大小的1.5倍) "Microsoft YaHei"

3.優(yōu)先級(jí)

當(dāng)同一個(gè)元素有多個(gè)選擇器,就會(huì)產(chǎn)生優(yōu)先級(jí)

(1)選擇器相同,則執(zhí)行層疊性

(2)選擇器不同,則根據(jù)選擇器權(quán)重執(zhí)行

!important(權(quán)重?zé)o窮大)>行內(nèi)樣式 style(權(quán)重1,0,0,0)>ID選擇器(權(quán)重0,1,0,0,)>類選擇器,偽類選擇器(權(quán)重0,0,1,0)>元素選擇器(權(quán)重0,0,0,1)>繼承或者 *(0,0,0,0)

(3）權(quán)重

可以疊加,但永遠(yuǎn)不會(huì)有進(jìn)位

li 的權(quán)重是0,0,0,1

從左往右開始

注意事項(xiàng)

1.權(quán)重是有4位數(shù)字組成,

六、CSS的注釋