1、css的選擇符(selectors)
1)型別、類和id選擇符
a. 型別:是指 html元素,用來選擇某一類的所有元素
b. 類 :用來選擇所有相同類名的元素
c. id :用來選擇唯一指定id的元素
型別不區分大小寫,而類和id是區分大小寫,建議都使用小寫。
模式:type
.class
#id
2)定位和群組選擇符
a. 群組:用逗號將多個選擇符連起來,可為不同的選擇符賦予同一組規則。
selector1,selector2,etc {styles>
b. 定位 :把選擇符組合下來縮小選擇的範圍
b1.後代選擇符 :把多個選擇符用空白連起來,可選擇後代元素(可以是子選擇符、孫選擇符等)。
selector1 selector2 etc {styles>
b2.子選擇符 :把多個選擇符用'>'連起來,可選擇子元素。
selector1 > selector2 > etc {styles>
b3.首子選擇符 :把:first-child加在任何選擇符後,可選擇第乙個子選擇符。
selector:first-child {styles>
b4.兄弟選擇符 :把多個選擇符用'+'連起來,把選擇範圍定位於賦予了前乙個選擇符的元素的兄弟。
selector1 + selector2 + etc {styles>
3)屬性選擇符
a.屬性存在選擇符
b.屬性詞彙選擇符
c.屬性值選擇符
4)偽類元素選擇符
選擇元素的第乙個字母和第一行。
selector:first-letter {styles>
selector:first-line {styles>
first-letter和first-line只與終端塊狀元素相搭配,它們對內聯元素與結構化塊狀元素不起作用
5)偽類選擇符
為超連結的四種狀態賦予樣式。
a:link 未瀏覽的超連結
a:visited 已瀏覽的超連結
a:hover 滑鼠處於懸停時的超連結
a:focus 在非ie瀏覽器中獲得焦點的超連結
a:active 在ie瀏覽器中獲得焦點的超連結
適用範圍:偽類選擇符只適用超連結(),hover適用於所有的元素。
6)子類選擇符
*.class {styles> 這是基類
*.class.subclass.etc {styles> 類鏈中的類的個數沒有限制
css層疊排序確保子類中的規則能覆蓋基類中的規則。
2、css的繼承(inheritance)
css的許多屬性預設是可以被後代元素繼承的。
1) 可以被所有元素繼承的屬性: visibility
2) 可以被內聯元素繼承的屬性: 主要是字型的屬性
3) 可以被終端塊狀元素繼承的屬性: text-indent text-align
4) 可以被列表元素繼承的屬性: list-style屬性
5) 可以被**元素繼承的屬性: border-collapse
6) 不可被繼承的屬性:
3、css的視覺繼承(visual inheritance)
1) css自動把元素設定為透明(backbroud-color預設為透明,backbroud-image預設為none),子元素位於父元素的上層。
這樣無需做什麼,子元素的背景與父元素一樣。
當不想讓子元素繼續父元素的背景,可以為它設定自己的背景色和背景。
2)因為子元素嵌在父元素之中,所以它從視覺繼承了父元素的邊框和內邊距。
《精通CSS與HTML設計模式》學習筆記1
1 css的主要內容 1 css的常用屬性主要有45種 2 html的四種元素 內聯 inline 內聯塊狀 inline block 塊狀 block 3 css的五種定位方式 靜態 相對 絕對 固定 浮動 2 css的優先順序 從高到低 1 使用 inportant的規則 2 嵌在style屬性...
精通CSS與HTML設計模式 第十一章(分割內容)
一 分割 leftter spacing 為字母間新增空格 word spacing 為單詞件新增空格 中文單詞不識別,因為中文沒有單詞的概念 text indent 縮排終端塊狀元素的首行 text align justify 實現兩端對齊的效果 注 margin top margini bott...
精通CSS與HTML設計模式 第十二章(對齊內容)
一 文字縮排 可以使用乙個text indent的正值來縮排文字首行。text indent value 只適用於終端塊狀元素,不適用於結構化塊狀元素和內斂元素。預設的情況是text indent被子元素繼承。這表示你可以將text indent賦值給乙個結構化塊狀元素,所有的子終端塊狀元素都將繼承...