二、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 元素內部 擁有最...