天天看點

MDN網站CSS學習

CSS學習網站

一、什麼是CSS?

1、HTML用于定義内容的結構和語義,CSS用于設計風格和布局。

2、CSS文法由一個選擇器(selector)開頭,它選擇了我們将要用來添加樣式的HTML元素。

接着輸入一對大括号{},括号内部定義一個或多個形式的屬性(property):值(value)。

二、CSS學習之旅

1、向HTML文本中添加CSS

(1)在HTML文檔的相同目錄建立一個檔案,儲存并命名為styles.css。

在HTML文檔中< head>語句子產品第一行加上下面代碼:

< link rel=“stylesheet” href=“styles.css”>

< link>裡面用屬性rel讓浏覽器知道css文檔存在(stylesheet即CSS裡面的SS,樣式表),用屬性href指定位置。

(2)在CSS文檔中添加CSS樣式并觀察顯示的結果。

2、使用類名

給HTML元素加個類名(class),再選中那個類名(選中時在選擇器的開頭加個西文句點.)。

MDN網站CSS學習

special類型課不局限于清單,它可以應用到各種元素上。并且選擇器可以和類一起出現:

MDN網站CSS學習

意思是選中每個special類的li元素。

3、根據元素在文檔中的位置确定樣式

MDN網站CSS學習

4、根據狀态确定樣式

沒有被通路過的連接配接顔色變為粉色、通路過的連接配接變為綠色:

a:link{

color:pink;

}

a:visited{

color:green;

}

5、組合

MDN網站CSS學習

三、如何建構CSS

1、文檔中應用CSS的三種方法

(1)外部樣式表

外部樣式表是指将CSS編寫在擴充名為.css的單獨檔案中,并從HTML< link>元素引用它的情況。

(2)内部樣式表

内部樣式表是指不使用外部CSS檔案,而是将CSS放在HTML檔案< head>标簽裡的< style>标簽之中。

(3)内聯樣式表

内聯樣式表存在于HTML元素的style屬性之中。其特點是每個CSS表隻影響一個元素。

MDN網站CSS學習

它難以維護,使代碼變得難以閱讀,不推薦這樣做。

2、CSS的專一性

通常情況下,兩個選擇器可以選擇相同的HTML元素。CSS語言利用級聯規則和專用規則判斷發生碰撞時哪條規則取勝。

級聯規則:

為p選擇器定義兩個規則,最後段落是藍色的。即稍後的樣式将覆寫以前的樣式。

p{

color:red;

}

p{

color:blue;

}

專用規則:

在我們使用類選擇器和元素選擇器的子產品中,類将獲勝,即使它出現在前面。一個類被描述為比元素選擇器更加具體、有更多的特異性。

3、CSS中的注釋以結尾。

4、如果一個浏覽器在解析你所書寫的CSS規則的過程中遇到了無法了解的屬性或者值,它會忽略這些并繼續解析下面的CSS聲明。

四、層疊與繼承

1、優先級

浏覽器是根據優先級來決定當多個規則有不同選擇器對應相同的元素的時候需要使用哪個規則。它基本上是一個衡量選擇器具體選擇哪些區域的尺度。

一個元素選擇器不是很具體 — 會選擇頁面上該類型的所有元素 — 是以它的優先級就會低一些。

一個類選擇器稍微具體點 — 它會選擇該頁面中有特定 class 屬性值的元素 — 是以它的優先級就要高一點。

2、繼承

一些設定在父元素上的css屬性是可以被子元素繼承的,有些則不能。哪些屬性屬于預設繼承很大程度上是由常識決定的。

舉一個例子,如果你設定一個元素的 color 和 font-family ,每個在裡面的元素也都會有相同的屬性,除非你直接在元素上設定屬性。但是設定width就不可以。

3、控制繼承

(1)inherit:設定該屬性會使子元素屬性和父元素相同。

(2)initial:設定屬性值和浏覽器預設樣式相同。如果浏覽器預設樣式中未設定且該屬性是自然繼承的,那麼會設定為inherit。

(3)unset:将屬性重置為自然值。即如果屬性是自然繼承那麼就是inherit,否則和initial一樣。

MDN網站CSS學習

4、應用CSS規則

給基本元素定義通用樣式,然後給不同的元素建立對應的類。舉個例子,在下面的樣式中我給2級标題定義了通用樣式,然後建立了一些類隻修改部分屬性的值。最初定義的值應用于所有标題,然後更具體的值通過對應類來實作。

MDN網站CSS學習