CSS知識總結(2)

2021-09-16 23:11:18 字數 1518 閱讀 4350

1.css選擇器

每一條css樣式定義由兩部分組成,形式如下:

選擇器在{}之前的部分就是「選擇器」,「選擇器」指明了{}中的「樣式」的作用物件,也就是「樣式」作用於網頁中的哪些元素

p
上面的css樣式**的作用:為p標籤設定12px字型大小,行間距設定20px的樣式。

2-2,類選擇器

類選擇器在css樣式編碼中是最常用到的,如右側**編輯器中的**:可以實現為「膽小如鼠」、「勇氣」字型設定為紅色。

語法:.類選器名稱

注意:1、英文圓點開頭

2、其中類選器名稱可以任意起名(但不要起中文噢)

使用方法:

第一步:使用合適的標籤把要修飾的內容標記起來,如下:

膽小如鼠

第二步:使用class="類選擇器名稱"為標籤設定乙個類,如下:

膽小如鼠

第三步:設定類選器css樣式,如下:

.stress/類前面要加入乙個英文圓點/

2-3,id選擇器

在很多方面,id選擇器都類似於類選擇符,但也有一些重要的區別:

1、為標籤設定id=「id名稱」,而不是class=「類名稱」。

2、id選擇符的前面是井號(#)號,而不是英文圓點(.)。

2-4,類和id選擇器的區別

相同點:可以應用於任何元素

不同點:

1、id選擇器只能在文件中使用一次。與類選擇器不同,在乙個html文件中,id選擇器只能使用一次,而且僅一次。而類選擇器可以使用多次。

2、可以使用類選擇器詞列表方法為乙個元素同時設定多個樣式。我們可以為乙個元素同時設多個樣式,但只可以用類選擇器的方法實現,id選擇器是不可以的(不能使用 id 詞列表)。

2-5.子選擇器

還有乙個比較有用的選擇器子選擇器,即大於符號(>),用於選擇指定標籤元素的子元素。如下面的**:

.food>li
這行**會使class名為food下的子元素li加入紅色實線邊框。

2-6,包含(後代)選擇器

.first span
選擇器與子選擇器的區別

1,子選擇器(child selector)僅是指它的直接後代,或者你可以理解為作用於子元素的第一代後代

2,後代選擇器是作用於所有子後代元素。後代選擇器通過空格來進行選擇,而子選擇器是通過「>」進行選擇。

2-7,通用選擇器

通用選擇器是功能最強大的選擇器,它使用乙個(*)號指定,它的作用是匹配html中任意標籤元素,如下使用下面**使用html中任意標籤元素字型顏色全部設定為紅色:

*
2-8,偽類選擇符

更有趣的是偽類選擇符,為什麼叫做偽類選擇符,它允許給html不存在的標籤設定樣式,比如說我們給html中乙個標籤元素的滑鼠滑過的狀態來設定字型顏色:

a:hover
這行**會使被標籤包裹的文字內容中的「膽小如鼠」字型顏色在滑鼠滑過時變為紅色。

css知識總結

background color 背景顏色。background image 元素的背景影象.background repeat 水平方向平鋪 repeat x background attachment 背景影象是否固定或者隨著頁面的其餘部分滾動 background position 屬性改變影...

CSS知識總結

基本流程 解析html以構建dom樹 構建render樹 布局render樹 繪製render樹,如下圖 名稱解釋 注意 display none 的節點不會被加入render tree,而visibility hidden 則會,所以,如果某個節點最開始是不顯示的,設為display none是更...

CSS知識總結

使用flex 使用 css3 transform 使用 display table cell 方法 position 的常見四個屬性值 relative,absolute,fixed,static。一般都要配合 left top right 以及 bottom 屬性使用。float屬性的取值 浮動的...