CSS學習筆記

2021-10-03 15:48:53 字數 1565 閱讀 4234

二、css語法

三、css `id`和`class`

四、css建立

五、css樣式優先順序

2、選擇器的優先順序

3、一些經驗法則

html標籤原本被設計者用於定義文件內容,如下例項:

這是乙個段落

樣式表定義如何顯示html元素,就像html中的字型標籤和顏色屬性所起的作用那樣。樣式通常儲存在外部的.css檔案中。我們只需要編輯乙個簡單的css文件就可以改變所有頁面的布局和外觀

css規則由兩個主要部分構成:選擇器,以及一條或多條宣告:

選擇器通常是由需要改變樣式的html元素

每條宣告由乙個屬性和乙個值組成。

每乙個屬性有乙個值,屬性和值被冒號分開

css宣告總是以結束,宣告總以大括號({})括起來

hello world!

這個段落採用css樣式化。

css的注釋以「/*」開始,以「*/」結束

id選擇器可以為標有特定id的html元素指定特定的樣式。

html元素以id屬性來設定id選擇器,css中id選擇器以「#」來定義

注意:(id屬性不能以數字開頭,數字開頭的id在某些瀏覽器上不適用)

class選擇器用於描述一組元素的樣式,class選擇器有別於id選擇器,class可以在多個元素中使用。

class選擇器在html中以class屬性表示,在css中,類選擇器以乙個「.」顯示

插入樣式表的三種方法

當樣式需要應用於許多頁面時,外部樣式表將是理想的選擇。在使用外部樣式表的情況下,你可以通過改變乙個檔案來改變整個站點的外觀。每個頁面使用標籤鏈結到樣式表。標籤在文件的頭部。

瀏覽器會從檔案mystyle.css中讀到樣式宣告,並根據它來格式文件。

外部樣式表可以在任何文字編輯器中進行編輯。檔案不能包含任何的html標籤。樣式表應該以 .css 拓展名進行儲存。

不要在屬性值與單位之間留空格(如:「margin-left:20 px」),正確寫法是「margin-left:20px」

當單個文件需要特殊的樣式的時,就應該使用內部樣式表。你可以使用

// style-link.css

div// style-import.css

div從順序上看,內部樣式在最下面,被最晚引用,所以

的背景色為 blue。

// html

// css

p.father .son

雖然 .father .son 擁有更高的權值,但選擇器 p 中的 background 屬性被插入了 !important, 所以

的 background 為 red。

css 優先順序法則:

CSS學習 CSS學習筆記

出處 注 本學習筆記只是自己的一些備忘,初學者的東西不具有參考性,請到w3school 進行系統學習。學習css我使用的工具是visual css,可以實現同步預覽,快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式,避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...

CSS學習 CSS學習筆記

出處 注 本學習筆記只是自己的一些備忘,初學者的東西不具有參考性,請到w3school 進行系統學習。學習css我使用的工具是visual css,可以實現同步預覽,快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式,避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...

CSS 學習筆記

當同乙個html元素被不止乙個樣式定義時,會使用哪個樣式呢?一般而言,所有的樣式會根據下面的規則層疊於乙個新的虛擬樣式表中,其中數字4 擁有最高的優先權。1.瀏覽器預設設定 2.外部樣式表 3.內部樣式表 位於標籤內部 4.內聯樣式 在html 元素內部 因此,內聯樣式 在html 元素內部 擁有最...