《精通CSS與HTML設計模式》學習筆記2

2021-06-28 15:56:13 字數 1869 閱讀 1888

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賦值給乙個結構化塊狀元素,所有的子終端塊狀元素都將繼承...