HTML CSS學習筆記3

2021-08-08 22:48:35 字數 2189 閱讀 4245

1、css全稱為「層疊樣式表(cascading style sheets)",它主要用於定義html內容在瀏覽器的顯示樣式,如文字、顏色、字型加粗等。

如:p」中的就是宣告,屬性和值之間用英文冒號「:」分隔。當有多條宣告時,中間可以英文分號「;」分隔,

如:p注意:

1、最後一條宣告可以沒有分號,但是為了以後修改方便,一般也加上分號。

2、為了使用樣式更加容易閱讀,可以將每條**解除安裝乙個新行內,如:p

4、內聯式css樣式,直接寫在現有的html標籤中

css樣式可以寫在那些地方?從css樣式**插入的形式來看基本可以分為以下3種:內聯式、嵌入式和外部式三種。

內聯式:css樣式表就是把css**直接寫在現有的html標籤中,

如:這裡文字是紅色。

注意要寫在元素的開始標籤裡。

並且css樣式**要寫在style=「」雙引號中,如果有多條css樣式**設定可以寫在一起,中間用分號隔開。如下:

這裡文字是紅色。

5、嵌入式css樣式,寫在當前的檔案中

嵌入式css樣式,就是可以把css樣式**寫在標籤之間。如:

之間,並且一般情況下嵌入式css樣式寫在之間。

6、外部式css樣式,寫在單獨的乙個檔案中

外部css樣式(也可以稱為外聯式)就是把css**寫乙個單獨的外部檔案中,這個css樣式檔案以「.css」為副檔名,在內(不是在內)使用標籤將css樣式檔案鏈結到html檔案內,如:

注意:css樣式檔名稱以有意義的英文本母命名,如main.css。

rel="stylesheet" type="text/css"是固定寫法不可修改。

標籤位置一般寫在標籤之內。

7、三種方法的優先順序

內聯式》嵌入式》外部式(離被設定元素越近優先級別越高)。

注意上面所總結的優先順序是在css樣式在相同的權值的情況下。

8、選擇器

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

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

body

注意:英文圓點開頭;其中類選擇器名稱可以任意起名(但不要起中文)

使用方法:

先使用合適的標籤把要修飾的內容標記起來,如:

膽小如鼠

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

膽小如鼠

再設定選擇器css樣式,如:

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

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

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

id選擇符的前面是井號#,而不是英文圓點

12、類和id選擇器的區別

id選擇器只能在文件中使用一次,而類選擇器則可以使用多次。

可以使用類選擇器詞列表方法為乙個元素同時設定多個樣式,id選擇器是不可以的(不能使用id詞列表)

13、子選擇器

子選擇器即大於符號(>),用於選擇指定標籤元素的第一代子元素。如:

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

14、包含(後代)選擇器

包含選擇器,即加入空格,用於選擇指定標籤元素下的後輩元素。

子選擇器僅是指它的直接後代,或者稱為子元素的第一後代。而後代選擇器是作用於所有子後代元素。後代選擇器通過空格來進行選擇,而子選擇器是通過">"進行選擇。

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

15、通用選擇器

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

*16、偽類選擇符

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

a:hover

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

關於偽選擇符:

到目前位置,可以相容所有瀏覽器的「偽選擇器」就是a標籤上使用:hover了(其實偽選擇符還有很多,尤其是css3中,但是因為不能相容所有的瀏覽器),其實 :hover可以放在任意的標籤上,但是他們的相容性不是很好,所以現在比較常用的還是a:hover的組合。

html css學習筆記 3

css小結 1.css包含一些簡單語句,成為規則 2.每個規則為選擇器的一些html元素提供樣式 3.典型的規則包括乙個選擇器,以及乙個或多個屬性和值 4.選擇器指定規則將應用到那些元素 5.每個屬性宣告以乙個分號結束 6.規則中的所有屬性和值都放在 大括號之間 7.可以使用元素名作為選擇器,來選擇...

HTML CSS學習筆記

利用標籤中style屬性來改變每個標籤的顯示樣式 適用於單個標籤的樣式修改。不靈活 this is p tag 內嵌形式 可用於同類標籤的樣式統一修改 依然不夠靈活 表示後面的所有table中的文字預設顏色如我所設定。前提是已經存在乙個定義好的css檔案,網頁的一部分樣式需要用到,那麼可以採用這種方...

html css學習筆記

本人正經職業位android 開發,無奈現在社會壓力太大,對做人的要求越來越高,只掌握一門技術根本不好意思說自己是一名程式設計師,更無法在這個社會生存。本人只好順應時代發展的需要,不斷提高自己的綜合水平,提高對自身的要求,選擇了去學習html和css等前端的有關知識,新手入門,記錄一些學習過程中的筆...