1.CSS復(fù)合選擇器
為了使目標(biāo)元素標(biāo)簽的選擇更加準(zhǔn)確和精細(xì),通常由兩個(gè)或則多個(gè)基礎(chǔ)選擇器沐旨,通過(guò)不同的方式組合而成的復(fù)合選擇器來(lái)定位目標(biāo)元素森逮。常見(jiàn)的并集選擇器有以下幾種:
1.1交集選擇器
又兩個(gè)選擇器構(gòu)成,前者為標(biāo)簽磁携,后者為該標(biāo)簽所對(duì)應(yīng)的類(lèi)名選擇器褒侧,兩個(gè)選擇器使用"."來(lái)鏈接,不能出現(xiàn)空格谊迄。使用較少
1.2并集選擇器
由多個(gè)選擇器通過(guò)逗號(hào)連接而成闷供,通常用于有相同的CSS樣式時(shí),可以使用并集選擇器
1.3后代選擇器
用來(lái)選擇元素或者元素組的后代统诺,其寫(xiě)法為歪脏,外層標(biāo)簽在前,要選擇的內(nèi)層標(biāo)簽在后粮呢,中間用空格隔開(kāi)婿失,當(dāng)標(biāo)簽發(fā)生嵌套時(shí),內(nèi)層標(biāo)簽即為外層標(biāo)簽的后代啄寡。
1.4子元素選擇器
只能選擇某個(gè)元素子元素的元素豪硅,其寫(xiě)法為父級(jí)標(biāo)簽在前,子級(jí)標(biāo)簽在后挺物,中間使用>進(jìn)行連接懒浮,注意符號(hào)左右各保留一個(gè)空格
子元素選擇器和后代選擇器的區(qū)別:子元素選擇器中的子只包括第一級(jí)的后代,即只包含兒子识藤,而后代選擇器的后代包括所有的后代砚著。
2.標(biāo)簽顯示模式(display)
在網(wǎng)頁(yè)中表現(xiàn)的顯示方式主要有以下幾種:
2.1塊級(jí)元素(display:block)
常見(jiàn)的塊級(jí)元素有:標(biāo)題標(biāo)簽眯牧,段落標(biāo)簽,列表赖草。表格学少,以及div等
2.2行內(nèi)元素(display:inline)
常見(jiàn)的行內(nèi)元素有:<a>/<strong>/<b>/<em>/<i>/<del>/<s>/<ins>/<u>/<span>等
2.3行內(nèi)塊元素(display:inline-block)
常見(jiàn)的行內(nèi)塊元素:img、input秧骑、td等
行內(nèi)塊元素的特點(diǎn):相鄰的行內(nèi)塊元素可以在同行顯示版确、默認(rèn)寬度為其內(nèi)容的寬度,其寬高乎折,內(nèi)外邊距都可以控制绒疗。
2.4塊級(jí)元素與行內(nèi)元素的區(qū)別
(1)塊級(jí)元素的特點(diǎn):
塊級(jí)元素獨(dú)立占一行,新的塊級(jí)元素總是從新的一行開(kāi)始骂澄、塊級(jí)元素的寬高吓蘑,內(nèi)外邊距都可以控制、其寬度為設(shè)置時(shí)是默認(rèn)寬度的100%坟冲,可以容納內(nèi)聯(lián)元素和其他塊級(jí)元素
(2)行內(nèi)元素的特點(diǎn):
相鄰的行內(nèi)元素在同一行上磨镶、默認(rèn)寬度為內(nèi)容的寬度、不能設(shè)置其寬高健提,但是水平方向的內(nèi)外邊距可以設(shè)置琳猫,垂直方向無(wú)效、行內(nèi)元素只能容納文本或則其他行內(nèi)元素
3.CSS偽類(lèi)
偽類(lèi)可以用于文檔狀態(tài)的改變私痹、動(dòng)態(tài)的事件等脐嫂,最常見(jiàn)的是放鼠標(biāo)經(jīng)過(guò)元素時(shí),對(duì)應(yīng)元素發(fā)生了相應(yīng)的變化紊遵。
常用的偽類(lèi)元素有以下幾種:
3.1 ?:link ---->用于未被訪問(wèn)過(guò)的鏈接
3.2 ?:hover ?----->有鼠標(biāo)指針懸停與上面的狀態(tài)
3.3 ? :visited ----->表示已被訪問(wèn)過(guò)的鏈接狀態(tài)
3.4 ?:avtive ?------>表示鏈接被激活時(shí)的狀態(tài)
3.5 ? :focus ?------->表示鍵盤(pán)獲得焦點(diǎn)元素
注意:鏈接偽類(lèi)账千,使用時(shí)要按照以下順序:link-----> visitied---->hover? ----->active
3.6 ?鏈接中常用的文本修飾屬性:text-decoration
text-decoration其屬性值有:none 沒(méi)有任何裝飾
underline:添加下劃線
line-through ?:添加刪除線
over-line :添加上劃線
4.CSS引入方式
CSS的引入方式有三種:外鏈?zhǔn)剑瑑?nèi)嵌式暗膜,內(nèi)聯(lián)樣式
外鏈?zhǔn)剑涸贖TML文本中引入外部的CSS文件匀奏,其語(yǔ)法格式如下:<link ref="stylesheet" href="引入CSS文件的路徑" ? type="text/css" >
內(nèi)嵌式:直接在HTML文檔中書(shū)寫(xiě)CSS樣式,放在HTML的head中桦山,其語(yǔ)法格式為:<style type="text/css">選擇器{屬性1:屬性值1 攒射;屬性2:屬性值2;屬性3:屬性值3.....}<style/>
內(nèi)聯(lián)樣式:直接在標(biāo)簽內(nèi)部書(shū)寫(xiě)CSS樣式,其語(yǔ)法格式如下:
<標(biāo)簽 style = "屬性1:屬性值1恒水;屬性2:屬性值2会放;屬性3:屬性值3....."><標(biāo)簽/>