CSS
選擇器
類選擇器
.class
ID選擇器
#idName
相同點(diǎn)可以應(yīng)用于任何元素
區(qū)別
ID選擇器為唯一表示,只能出現(xiàn)一次
類選擇器:不同元素之間可以用同一類名
子選擇器
應(yīng)用于第一代元素 標(biāo)識(shí)符? >
.className>元素標(biāo)簽{
}
應(yīng)用于后代所有元素? 標(biāo)識(shí)符 空格
.className元素標(biāo)簽{
}
應(yīng)用于后代所有元素 標(biāo)識(shí)符 *
*元素標(biāo)簽{
}
偽類標(biāo)簽
常用a:hover
標(biāo)簽的權(quán)值為1,類選擇符的權(quán)值為10患雇,ID選擇符的權(quán)值最高為100
還有一個(gè)權(quán)值比較特殊--繼承也有權(quán)值但很低,有的文獻(xiàn)提出它只有0.1胞得,所以可以理解為繼承的權(quán)值最低。
p{color:red;} /*權(quán)值為1*/
p span{color:green;} /*權(quán)值為1+1=2*/
.warning{color:white;} /*權(quán)值為10*/
p span.warning{color:purple;} /*權(quán)值為1+1+10=12*/
#footer .note p{color:yellow;} /*權(quán)值為100+10+1=111*/
元素
在CSS中屹电,html中的標(biāo)簽元素大體被分為三種不同的類型:塊狀元素阶剑、內(nèi)聯(lián)元素(又叫行內(nèi)元素)和內(nèi)聯(lián)塊狀元素。
常用的塊狀元素有:(display:block)
塊級(jí)元素特點(diǎn):
1危号、每個(gè)塊級(jí)元素都從新的一行開始牧愁,并且其后的元素也另起一行。(真霸道外莲,一個(gè)塊級(jí)元素獨(dú)占一行)
2猪半、元素的高度、寬度偷线、行高以及頂和底邊距都可設(shè)置磨确。
3、元素寬度在不設(shè)置的情況下声邦,是它本身父容器的100%(和父元素的寬度一致)乏奥,除非設(shè)定一個(gè)寬度。
常用的內(nèi)聯(lián)元素有:(display:inline)?
內(nèi)聯(lián)元素特點(diǎn):
1翔忽、和其他元素都在一行上英融;
2、元素的高度歇式、寬度及頂部和底部邊距不可設(shè)置;
3胡野、元素的寬度就是它包含的文字或圖片的寬度材失,不可改變。
常用的內(nèi)聯(lián)塊狀元素有:(display:inline-block)
內(nèi)聯(lián)塊狀元素特點(diǎn):
同時(shí)具備內(nèi)聯(lián)元素硫豆、塊狀元素的特點(diǎn)
1龙巨、和其他元素都在一行上笼呆;
2、元素的高度旨别、寬度诗赌、行高以及頂和底邊距都可設(shè)置。
盒子模型
盒子邊框?qū)傩?/p>
1秸弛、border-style(邊框樣式)常見樣式有:
dashed(虛線)| dotted(點(diǎn)線)| solid(實(shí)線)铭若。
2、border-color(邊框顏色)
3递览、border-width(邊框?qū)挾龋?/p>
高度寬度
左邊界+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊界叼屠。
div{
? ? width:200px;? //內(nèi)容寬度
? ? padding:20px;//填充(top,right,bottom,left)
? ? (border-bottom,top,right,left):1px(solid dashed dotted)red;//邊框
? ? (margin-bottom,top,right,left):10px;? //邊界
}
css布局模型
1、流動(dòng)模型(Flow)
流動(dòng)(Flow)是默認(rèn)的網(wǎng)頁布局模式绞铃。也就是說網(wǎng)頁在默認(rèn)狀態(tài)下的 HTML 網(wǎng)頁元素都是根據(jù)流動(dòng)模型來分布網(wǎng)頁內(nèi)容的镜雨。
在流動(dòng)模型下,內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示
2、浮動(dòng)模型(Float)
實(shí)現(xiàn)兩個(gè)塊狀元素并排顯示 float:left,right.bottom,top
3儿捧、層模型(Layer)(圖層)
層模型有三種形式:
1荚坞、絕對(duì)定位(position: absolute)
2、相對(duì)定位(position: relative)
3菲盾、固定定位(position: fixed)
HTML文檔可以說由節(jié)點(diǎn)構(gòu)成的集合颓影,三種常見的DOM節(jié)點(diǎn):(document object model)
1. 元素節(jié)點(diǎn):上圖中、亿汞、
等都是元素節(jié)點(diǎn)瞭空,即標(biāo)簽。
2. 文本節(jié)點(diǎn):向用戶展示的內(nèi)容疗我,如
3. 屬性節(jié)點(diǎn):元素屬性旧找,如標(biāo)簽的鏈接屬性。
鼠標(biāo)事件
o’clock = 點(diǎn)擊事件麦牺;
onmouseonver = 鼠標(biāo)經(jīng)過事件
onmouseout = 鼠標(biāo)移開事件
on focus = 光標(biāo)聚焦事件
nobler = 失焦事件
unselect = 內(nèi)容選定事件
unchange = 文本框內(nèi)容改變事件
unload = 加載事件
on unload = 卸載事件