html學習第二天 第八章 CSS選擇器

2022-02-14 02:32:11 字數 3486 閱讀 7956

標籤選擇器其實就是html**中的標籤。如右側**編輯器中的、、

三年級時,我還是乙個class="

stress

">膽小如鼠的小女孩,上課從來不敢回答老師提出的問題,生怕回答錯了老師會批評我。就一直沒有這個class="

stress

">勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。

到了三年級下學期時,我們班上了一節class="

setgreen

">公開課,老師提出了乙個很簡單的問題,班裡很多同學都舉手了,甚至成績比我差很多的,也舉手了,還說著:"

我來,我來。

"我環顧了四周,就我沒有舉手。

" >

id選擇器

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

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

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

右側**編輯器中就是乙個id選擇符的完整例項。

三年級時,我還是乙個"

stress

">膽小如鼠的小女孩,上課從來不敢回答老師提出的問題,生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。

到了三年級下學期時,我們班上了一節"

setgreen

">公開課,老師提出了乙個很簡單的問題,班裡很多同學都舉手了,甚至成績比我差很多的,也舉手了,還說著:"

我來,我來。

"我環顧了四周,就我沒有舉手。

類和id選擇器的區別

學習了類選擇器和id選擇器,我們會發現他們之間有很多的相似處,是不是兩者可以通用呢?我們不要著急先來總結一下他們的相同點和不同點:

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

不同點:

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

下面**是正確的:

三年級時,我還是乙個膽小如鼠的小女孩,上課從來不敢回答老師提出的問題,生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。

而下面**是錯誤的:

三年級時,我還是乙個膽小如鼠的小女孩,上課從來不敢回答老師提出的問題,生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。

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

下面的**是正確的(完整**見右側**編輯器)

.stress

.bigsize

到了三年級下學期時,我們班上了一節公開課...

上面**的作用是為「三年級」三個文字設定文字顏色為紅色並且字型大小為25px。

下面的**是不正確的(完整**見右側**編輯器)

#stressid

#bigsizeid

到了三年級下學期時,我們班上了一節公開課...

上面**不可以實現為「三年級」三個文字設定文字顏色為紅色並且字型大小為25px的作用。

三年級時,我還是乙個膽小如鼠的小女孩,上課從來不敢回答老師提出的問題,生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。

到了三年級下學期時,我們班上了一節公開課,老師提出了乙個很簡單的問題,班裡很多同學都舉手了,甚至成績比我差很多的,也舉手了,還說著:"我來,我來。"我環顧了四周,就我沒有舉手。

到了三年級下學期時,我們班上了一節公開課,老師提出了乙個很簡單的問題,班裡很多同學都舉手了,甚至成績比我差很多的,也舉手了,還說著:"我來,我來。"我環顧了四周,就我沒有舉手。

子選擇器

還有乙個比較有用的選擇器子選擇器,即大於符號(>),用於選擇指定標籤元素的第一代子元素。如右側**編輯器中的**:

.food>li

這行**會使class名為food下的子元素li(水果、蔬菜)加入紅色實線邊框。

三年級時,我還是乙個膽小如鼠的小女孩,上課從來不敢回答老師提出的問題,生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。

蔬菜

包含(後代)選擇器

包含選擇器,即加入空格,用於選擇指定標籤元素下的後輩元素。如右側**編輯器中的**:

.first span

這行**會使第一段文字內容中的「膽小如鼠」字型顏色變為紅色。

請注意這個選擇器與子選擇器的區別,子選擇器(child selector)僅是指它的直接後代,或者你可以理解為作用於子元素的第一代後代。而後代選擇器是作用於所有子後代元素。後代選擇器通過空格來進行選擇,而子選擇器是通過「>」進行選擇。

總結:>作用於元素的第一代後代,空格作用於元素的所有後代。

通用選擇器

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

*偽類選擇符

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

a:hover

上面一行**就是為 a 標籤滑鼠滑過的狀態設定字型顏色變紅。這樣就會使第一段文字內容中的「膽小如鼠」文字加入滑鼠滑過字型顏色變為紅色特效。

關於偽選擇符:

關於偽類選擇符,到目前為止,可以相容所有瀏鑑器的「偽類選擇符」就是 a 標籤上使用 :hover 了(其實偽類選擇符還有很多,尤其是 css3 中,但是因為不能相容所有瀏鑑器,本教程只是講了這一種最常用的)。其實 :hover 可以放在任意的標籤上,比如說 p:hover,但是它們的相容性也是很不好的,所以現在比較常用的還是 a:hover 的組合。

分組選擇符

當你想為html中多個標籤元素設定同乙個樣式時,可以使用分組選擇符(,),如下**為右側**編輯器中的h1、span標籤同時設定字型顏色為紅色:

h1,span

它相當於下面兩行**:

h1

span

三年級時,我還是乙個膽小如鼠的小女孩,上課從來不敢回答老師提出的問題,生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。

到了三年級下學期時,我們班上了一節公開課,老師提出了乙個很簡單的問題,班裡很多同學都舉手了,甚至成績比我差很多的,也舉手了,還說著:"我來,我來。"我環顧了四周,就我沒有舉手。

學習HTML第二天

1 margin 復合標籤,乙個值表示四個外邊距都為0。2 margin 0 auto自動定寬居中。3 div divsion的縮寫,起到劃分 分割作用,將頁面劃分為不同的區域。同時還是乙個塊元素,在不設定寬高時,高度由內容撐開,寬度和父級元素等寬。1 h1標題標籤。2 span標記網頁中的普通文字...

HTML學習第二天

標籤 常規標籤 div 空標籤 說明 1.寫在 中的第乙個單詞叫作標籤 2.標籤和屬性 用空格分開,屬性和屬性值用 相連,屬性值放在 中 3.乙個標籤可以沒有屬性也可以有多個屬性,屬性和屬性之間不分先後順序 4.空標籤沒有結束標籤,用 代替 lang en 語言 charset utf 8 編碼格式...

第八章學習小結

內容 這章我具體學習了 穩定的 1.直接插入法 最簡單且穩定。2.折半插入法 利用 折半查詢 3.氣泡排序 最簡單的交換排序,可用於順序表和鏈式儲存結構,但只能交換相鄰記錄,適於小規模資料。4.簡單選擇排序 即 直接選擇排序 與冒泡演算法上有些類似,但也不適於大規模資料 o n 2 2 5.歸併排序...