如何定義css選擇器,CSS的基本特征?
總體來說,CSS具有以下特點:
1.豐富的樣式定義
CSS提供了豐富的文檔樣式外觀,以及設(shè)置文本和背景屬性的能力;允許為任何元素創(chuàng)建邊框,以及元素邊框與其他元素間的距離,以及元素邊框與元素內(nèi)容間的距離;允許隨意改變文本的大小寫方式、修飾方式以及其他頁面效果。
2.易于使用和修改
CSS可以將樣式定義在HTML元素的style屬性中,也可以將其定義在HTML文檔的header部分,也可以將樣式聲明在一個專門的CSS文件中,以供HTML頁面引用。總之,CSS樣式表可以將所有的樣式聲明統(tǒng)一存放,進(jìn)行統(tǒng)一管理。
另外,可以將相同樣式的元素進(jìn)行歸類,使用同一個樣式進(jìn)行定義,也可以將某個樣式應(yīng)用到所有同名的HTML標(biāo)簽中,也可以將一個CSS樣式指定到某個頁面元素中。如果要修改樣式,我們只需要在樣式列表中找到相應(yīng)的樣式聲明進(jìn)行修改。
3.多頁面應(yīng)用
CSS樣式表可以單獨存放在一個CSS文件中,這樣我們就可以在多個頁面中使用同一個CSS樣式表。CSS樣式表理論上不屬于任何頁面文件,在任何頁面文件中都可以將其引用。這樣就可以實現(xiàn)多個頁面風(fēng)格的統(tǒng)一。
4.層疊
簡單的說,層疊就是對一個元素多次設(shè)置同一個樣式,這將使用最后一次設(shè)置的屬性值。例如對一個站點中的多個頁面使用了同一套CSS樣式表,而某些頁面中的某些元素想使用其他樣式,就可以針對這些樣式單獨定義一個樣式表應(yīng)用到頁面中。這些后來定義的樣式將對前面的樣式設(shè)置進(jìn)行重寫,在瀏覽器中看到的將是最后面設(shè)置的樣式效果。
5.頁面壓縮
在使用HTML定義頁面效果的網(wǎng)站中,往往需要大量或重復(fù)的表格和font元素形成各種規(guī)格的文字樣式,這樣做的后果就是會產(chǎn)生大量的HTML標(biāo)簽,從而使頁面文件的大小增加。而將樣式的聲明單獨放到CSS樣式表中,可以大大的減小頁面的體積,這樣在加載頁面時使用的時間也會大大的減少。另外,CSS樣式表的復(fù)用更大程度的縮減了頁面的體積,減少下載的時間。
css分類?
css 樣式表分類
一,樣式表分類
(1)內(nèi)聯(lián)樣式【優(yōu)先級最高】【常用】【代碼重復(fù)使用性最差】
(當(dāng)特殊的樣式需要應(yīng)用到個別元素時,就可以使用內(nèi)聯(lián)樣式。 使用內(nèi)聯(lián)樣式的方法是在相關(guān)的標(biāo)簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。)
(2)內(nèi)嵌樣式表【優(yōu)先級第二】【最不常用】【代碼重復(fù)使用性一般】
(當(dāng)單個文件需要特別樣式時,就可以使用內(nèi)嵌樣式表。你可以在 head 部分通過 <style> 標(biāo)簽定義內(nèi)部樣式表。)
(3)外部樣式表【優(yōu)先級最低】【最常用】【代碼重復(fù)使用性最好】
(當(dāng)樣式需要被應(yīng)用到很多頁面的時候,外部樣式表將是理想的選擇。使用外部樣式表,你就可以通過更改一個文件來改變整個站點的外觀。)
I。先創(chuàng)建一個樣式表
II。寫入樣式表內(nèi)容,調(diào)整樣式表位置
二。選擇器
每一條css樣式定義由兩部分組成,形式如下:
選擇器
{樣式}
在{}之前的部分就是“選擇器”。
“選擇器”指明了{(lán)}中的“樣式”的作用對象,也就是“樣式”作用于網(wǎng)頁中的哪些元素。
選擇器是選擇器,外部樣式表只是代碼位置
(1)類別選擇器( class選擇器)【第二優(yōu)先級】【最常用】
前面以"." 來標(biāo)志,如:
.d1
{
color:red;
}
在HTML頁中:
【1】<div class="d1";>文字</div> 文字顏色為紅色
【2】<p class="d1";>文字</p > 文字顏色為紅色
定義了一個class類,將樣式應(yīng)用到了元素中。
(2)id選擇器【第一優(yōu)先級】【最常用】
前面以"#"來標(biāo)志,如:
#d2
{
color:blue;
}
在HTML頁中:
<div class="d1" id="d2">文字</div> 文字顏色變?yōu)樗{(lán)色 【id選擇器優(yōu)先級高于類別選擇器】
(3)標(biāo)簽選擇器(根據(jù)標(biāo)簽名選擇)【第三優(yōu)先級】【如果同時出現(xiàn)類別選擇器和id選擇器,按照優(yōu)先級來及執(zhí)行】【最不常用】
前面以"標(biāo)簽名"來標(biāo)志,如:
div
{
color:red;
}
在HTML頁中:
<div>文字<div> 文字顏色變?yōu)榧t色
(4)復(fù)合選擇器【有id第一優(yōu)先級/都是類別選擇器第二優(yōu)先級】【最最常用】
[1]群組選擇器
當(dāng)幾個元素樣式屬性一樣時,可以共同調(diào)用一個聲明,元素之間用逗號分隔。
.d1,#d2
{
color:red;
}
在HTML頁中:
【1】<div class="d1";>文字</div> 文字顏色為紅色
【2】<p id="d2";>文字</p > 文字顏色為紅色
使用群組選擇器,將會大大的簡化CSS代碼,將具有多個相同屬性的元素,合并群組進(jìn)行選擇,定義同樣的CSS屬性,這大大的提高了編碼效率,同時也減少了CSS文件的體積。
[2]后代選擇器
后代選擇器也稱為包含選擇器,用來選擇特定元素或元素組的后代,將對父元素的選擇放在前面,對子元素的選擇放在后面,中間加一個空格分開。
.d1 #d2
{
color:blue;
}
在HTML頁中:
<div class="d1" id="d2">文字</div> 文字顏色變?yōu)樗{(lán)色
后代選擇器是一種很有用的選擇器,使用后代選擇器可以更加精確的定位元素。
css中focus的用法?
在css中,focus的意思是“焦點”,是一種偽類選擇器,作用是選取獲得焦點的元素;通過“:focus”選擇器可以對獲取焦點的元素設(shè)置樣式,語法為“元素:focus{css樣式代碼;}”。
在css中,focus是焦點的意思,通常表示的是“:focus”選擇器,“:focus”選擇器用于選取獲得焦點的元素。接收鍵盤事件或其他用戶輸入的元素都允許 :focus 選擇器。
css選擇器中可以匹配所有標(biāo)簽的是?
答案是星星選擇標(biāo)簽。
因為星號選擇器的定義是用于選擇html中的所有標(biāo)簽,在一個頁面中我們都會選擇去掉html所有標(biāo)簽的默認(rèn)樣式,然后根據(jù)自己的需求添加樣式,這個時候就需要使用*選擇標(biāo)簽。
另外一個*選擇標(biāo)簽也可以搭配到其他的標(biāo)簽進(jìn)行使用,用來選擇表示某個父元素下面的所有子元素標(biāo)簽。