本文內容是對HTML & CSSDeSign anD buiLD WebSiTeS 第10章的小結。
一條CSS的規則由兩部分組成selector{declaration},一個declaration是一個property:value;的組合。可以有多個selector有一樣的declaration,他們之間用逗號分開。
h1,h2,h3 {font-family:Arial; color:yellow;}
css寫好了,如何讓它顯示出效果呢?
有兩種,一種是external的一種是internal的,也就是一種是css放在單獨的檔案通過link來引入,另外一種是css的代碼直接嵌入在html中,
external: 必須放在head的節點下面才有用,這個也是可以理解的,畢竟要在body引入之前就要知道這些樣式,
<link href="css/styles.css" type="text/css" rel="stylesheet" />
internal:
<style type="text/css"> body { font-family: arial; background-color: rgb(185,179,175);} h1 { color: rgb(255,255,255);} </style>
selector可以有好多種:
a)全域的 *{}, 表示對當前頁面的所有的element都有效果。
b)element的name,比如h1, h2,h3 {}
c)class, element的class,這裡要有點號,.note{} 或者 p.note{}, 這兩個的區別是,前面的是對所有的class是note的節點都有用,後面的只對name是p的節點下的class是note的有用。
d)id,element的id,這裡是以#符號開始的,想起來和jquery很類似,#introduction{}
e)還有一種是位置相關的selector,
child: li>a{}
descendant:
p a{}
adjacent sibing:
h1+p{}
general sibing:
h1~p{}
這麼多selector如果有衝突,一般是更具體的代替更一般的全域的規則,另外還有一種辦法,就是 !important
p b {color: blue !important;}
property 同樣也有好多種,這個在下一篇裡介紹。