css樣式由兩部分組成,分別是選擇符和宣告。其中宣告由屬性和屬性值組成
選擇符css基礎選擇符: 選擇符表示要定義樣式的物件,可以是元素本身,也可以是一類元素或者制定名稱的元素.
型別選擇符/元素選擇符/標籤選擇器(element選擇器)
語法:標籤名稱
型別選擇符是根據html語言中的標記來直接定義
說明:型別選擇符就是網頁元素本身,定義時直接使用元素名稱,即使用結構中標籤名稱作為選擇符。
所有的頁面標籤都可以作為型別選擇符img,div,a,span,em。
用法:p
如果你想要改變乙個元素的預設樣式時,使用型別選擇符
如果你想統一頁面中某個元素的顯示樣式時,使用型別選擇符
id選擇符
語法:#id名
說明:id選擇符可對元素進行乙個id名稱的指派,id的基本作用是對每乙個頁面中的唯一出現的元素進行樣式定義。
在使用id選擇符前我們應先為元素定義乙個id屬性。
說明:1、當我們使用id選擇符時,應該為每個元素定義乙個id屬性;
如:
2、id選擇符的語法格式是「#」加上自定義的id名;
如:#box
3、起名時要取英文名,不能用關鍵字:(所有的標記和屬性都是關鍵字)
4、乙個id名稱只能對應文件中乙個具體的元素物件,因為id只能定義頁面中某乙個唯一的元素 物件。
5、最大的用處:建立網頁的外圍結構
用法示例
html:
css:#top
class(類)選擇符
語法:.類(class)名
說明:對同類標籤進行不同的樣式設定
對不同類的標籤進行同樣的樣式設定
用法:css:.txt
html:1111
222
333
萬用字元語法:*
說明:通配選擇符的寫法是「*」,其含義就是所有元素。用法:常用來重置樣式。
*將所有元素的邊界值和填充值清0。
margin:0 auto;使元素居中(誰居中給誰加)
群組選擇符
語法:選擇符1,選擇符2,選擇符3……
對一組元素進行相同的樣式指定,例如:
h1,h2,h3,p
使用逗號對選擇符進行分離,對頁面中使用相同樣式的地方只需書寫一次樣式即可,可減少**量,改善css**的結構。
包含選擇符
語法:父元素 子元素 ……
包含選擇符指選擇符組合中前一標籤包含後乙個標籤,之間用空格空開。
利用包含選擇符可以避免過多的使用class及id的設定,
並且直接對所需要設定的元素進行了樣式設定。
包含選擇符除了可以二者包含,也可以多級包含
子選擇符
語法:父元素 > 子元素
不希望選擇任意的後代元素,而是希望縮小範圍,只選擇某個元素的子元素
偽類選擇符
語法 :
a:link超連結的初始狀態;
a:visited超連結被訪問後的狀態;
a:hover滑鼠劃過超連結時的狀態;
a:active即滑鼠按下時超連結的狀態;
說明:1)當這4個超連結偽類選擇符聯合使用時,應注意他們的順序,正常順序為:a:link,a:visited,a:hover,a:active,錯誤的順序有時會使超連結的樣式有些部分失效;
2)為了簡化**,可以把偽類選擇符中相同的宣告提出來放在a選擇符中;
例如:a a:hover 表示超連結的三種狀態都相同,只有滑鼠劃過變顏色。
選擇符的權重
css中用四位數字表示權重,權重的表達方式如:0,0,0,0
型別、標籤選擇符的權重為0001 a p div span form … 1
class選擇符的權重為0010 .class 10
id選擇符的權重為0100 # 100
子選擇符的權重為0000
屬性選擇符的權重為0010
偽類選擇符的權重為0010
偽元素選擇符的權重為0001
包含選擇符的權重:為所包含選擇符的權重之和
內聯樣式的權重為1000
繼承樣式的權重為0000
注:如果權重相同時,則執行後寫的樣式;
css層疊性
乙個元素可能同時被多個css選擇器選中,每個選擇器都有一些css規則,這就是層疊。
這些規則有可能不矛盾的,自然這些規則將會同時起效,然而有些規則是相互衝突的。當發生衝突的時候必須選出一條最高特殊性(權重)的規則來應用。
CSS選擇符 屬性選擇符
使用屬性選擇器可以篩選出設定了特定屬性的標籤。例如選取所有設定了title屬性的 img title 這種選擇符的第一部分是標籤名 img 隨後是屬性名,放在方括號裡 title css不限制屬性選擇符只能使用標籤名,也可以使用類。例如 photo title 用於選取類為photo,而且設定了ti...
CSS選擇符 型別選擇符
h1用於選取特定html標籤的選擇符,叫型別選擇符或元素選擇符。這種選擇符的作用特別大。能把樣式應用到網頁中的每個目標標籤上。使用這種選擇符,只需少量工作就能大幅修改網頁的外觀。假如想讓網頁中每個段落都使用相同的字型 顏色和字型大小,只需編寫乙個選擇符為p 表示標籤 的樣式即可。html 最基本的佐...
CSS 選擇符大全(常用css選擇符)
e 某個元素,如p id 使用id,如 idname class 使用class,如.myclass 萬用字元 包含選擇符 e f e所有的f包含子代,孫代,子子孫孫等等 子選擇符 e相鄰選擇符 e f 和e相鄰的f,相隔乙個都不算 兄弟選擇符 e f 和e同級的f的算 e att e中帶有某個at...