CSS Cascading&Inheritance

http://MobileDev.TW 1 CSS Cascading & Inheritance 鐘祥仁 Ryan [email protected] CSS
Cascading & Inheritence

http://MobileDev.TW Cascading •  相同的CSS屬性被賦予多次不同的屬性值，但卻套用在同一個元件時，最後一個屬性值才會被使用。 •  表頭樣式與行內樣式衝突 CSS Cascading &
Inheritence 2

http://MobileDev.TW Cascading •  相同的CSS屬性被賦予多次不同的屬性值，但卻套用在同一個元件時，最後一個屬性值才會被使用。 •  表頭樣式前後衝突 CSS Cascading &
Inheritence 3

http://MobileDev.TW Inheritance 繼承 •  有些CSS屬性會自動繼承給指定對象的子元件。 •  段落元件p下的粗體元件b ㄨ CSS Cascading
& Inheritence 4

http://MobileDev.TW Inheritance 繼承 •  有些CSS屬性會自動繼承給指定對象的子元件。 •  div --> p -->
b CSS Cascading & Inheritence 5

http://MobileDev.TW Inheritance 繼承 •  極少數CSS屬性繼承時會產生多重效果。 •  div --> p -->
b CSS Cascading & Inheritence 6

http://MobileDev.TW Inheritance 繼承 •  有些CSS屬性會自動繼承給指定對象的子元件。 •  以比例方式設定會產生繼承值之後的比例 CSS Cascading &
Inheritence 7

http://MobileDev.TW Inheritance 繼承 •  如果沒有自動繼承至子元件，可使用inherit強制繼承。 •  段落元件p下的粗體元件b CSS Cascading &
Inheritence 8

http://MobileDev.TW Inheritance 繼承 •  如果沒有自動繼承至子元件，可使用inherit強制繼承。 •  段落元件p下的粗體元件b CSS Cascading &
Inheritence 9

http://MobileDev.TW CSS規則套用的優先權 Specificity •  直接寫在HTML元件的style屬性 •  優先權值：1000 •  CSS選擇器使用ID的方式 • 
優先權值：100 •  CSS選擇器使用class,pseudo-class或限定屬性 •  優先權值：10 •  CSS選擇器使用HTML元件、偽元件(pseudo-element) •  優先權值：1 CSS Cascading & Inheritence 10

http://MobileDev.TW 計算 Specificity •  #container ul#menu li.active ul li:hover {}
•  #container：100 •  ul：1 •  #menu：100 •  li：1 •  .active：10 •  ul：1 •  li：1 •  :hover：10 CSS Cascading & Inheritence 11 Specificity：224

http://MobileDev.TW 聖旨駕到 !important •  凌駕所有優先權與位置 CSS Cascading & Inheritence 12

http://MobileDev.TW 一個HTML元件可以套用多個類別 •  rule1 + rule2 CSS Cascading & Inheritence
13

http://MobileDev.TW id 與 class 可以同時存在 •  id的優先權值比較高 CSS Cascading &
Inheritence 14

http://MobileDev.TW 選擇器也可以巢狀使用 •  用空格隔開 CSS Cascading & Inheritence 15

http://MobileDev.TW 選擇器也可一次指定多個 CSS Cascading & Inheritence 16

CSS Cascading&Inheritance

CSS Cascading&Inheritance

Ryan Chung

More Decks by Ryan Chung

Other Decks in Technology

Featured

Transcript

http://MobileDev.TW 1 CSS Cascading & Inheritance 鐘祥仁 Ryan [email protected] CSS

http://MobileDev.TW Cascading •  相同的CSS屬性被賦予多次不同的屬性值，但卻套用在同一個元件時，最後一個屬性值才會被使用。 •  表頭樣式與行內樣式衝突 CSS Cascading &

http://MobileDev.TW Cascading •  相同的CSS屬性被賦予多次不同的屬性值，但卻套用在同一個元件時，最後一個屬性值才會被使用。 •  表頭樣式前後衝突 CSS Cascading &

http://MobileDev.TW Inheritance 繼承 •  有些CSS屬性會自動繼承給指定對象的子元件。 •  段落元件p下的粗體元件b ㄨ CSS Cascading

http://MobileDev.TW Inheritance 繼承 •  有些CSS屬性會自動繼承給指定對象的子元件。 •  div --> p -->

http://MobileDev.TW Inheritance 繼承 •  極少數CSS屬性繼承時會產生多重效果。 •  div --> p -->

http://MobileDev.TW Inheritance 繼承 •  有些CSS屬性會自動繼承給指定對象的子元件。 •  以比例方式設定會產生繼承值之後的比例 CSS Cascading &

http://MobileDev.TW Inheritance 繼承 •  如果沒有自動繼承至子元件，可使用inherit強制繼承。 •  段落元件p下的粗體元件b CSS Cascading &

http://MobileDev.TW Inheritance 繼承 •  如果沒有自動繼承至子元件，可使用inherit強制繼承。 •  段落元件p下的粗體元件b CSS Cascading &

http://MobileDev.TW CSS規則套用的優先權 Specificity •  直接寫在HTML元件的style屬性 •  優先權值：1000 •  CSS選擇器使用ID的方式 •

http://MobileDev.TW 計算 Specificity •  #container ul#menu li.active ul li:hover {}

http://MobileDev.TW 聖旨駕到 !important •  凌駕所有優先權與位置 CSS Cascading & Inheritence 12

http://MobileDev.TW 一個HTML元件可以套用多個類別 •  rule1 + rule2 CSS Cascading & Inheritence

http://MobileDev.TW id 與 class 可以同時存在 •  id的優先權值比較高 CSS Cascading &

http://MobileDev.TW 選擇器也可以巢狀使用 •  用空格隔開 CSS Cascading & Inheritence 15

http://MobileDev.TW 選擇器也可一次指定多個 CSS Cascading & Inheritence 16