上一節開始我們討論 CSS (Cascading Style Sheet) 的基礎. 告訴你有三種 Selector. 但只介紹了其中的 HTML selector. 這一節我們把三種都詳細介紹給你 & L' b) z0 | ~8 Y
7 @ ^: E" V; c$ CHTML selector
4 T2 f6 B" Z6 _class selector:
" X( @/ @: r6 D) E; H8 j/ UID selector:
H* ^- Z4 z$ g7 @0 fHTML selector 7 D1 S' B$ [' k& d. a
8 ^$ O m3 ~! y0 gHTML selector 就是 HTML 的 tags, 比如 P, DIV, TD 等. 如你用 CSS 定義了它們, 在整頁中, 這個 Tag 的性質就按照你 的定義來顯示了. HTML selector 的語法如下
- R, u8 k) [/ \5 Y7 K+ }: I
5 D$ u7 F; m: \! N; T4 V$ W1 m tag {property:value}9 V" Z& m8 X8 `$ Q* E) _9 M q
比如我們想叫 H1 的顏色是紅的
' T2 C) l3 Q5 `9 o% P9 Z' v$ ~+ d- D- z# z% W5 T2 T" {
H1 {color: red}: R, [/ W) F& k8 L7 y2 t
這裡還要告訴你 CSS 的一個特點, 它可定義好幾個 selector 在一個 rule 裡. 比如 ! o/ s( p* b: Y+ n
! Q* f: |7 _$ e- W# S: H H1, H2, TD {color: red}0 e1 b. Y% P8 p+ K" G1 H N7 u# T7 K* v
這個定義就能讓所有的 H1, H2, 和 TD 的顏色都為紅色.. W0 o6 _/ w6 i" o4 B( \4 n5 G
" T; u* z/ y3 O1 W
Class selector 8 _2 y/ Y; T# X* M" G8 t
# E7 F4 I' i% w" V" `1 q W+ `Class selector 有兩種, 一種叫相關 class selector, 它跟一 個 HTML 的 tag 有關係. 它的語法是
% N) G: Z1 G' B( p9 b$ J* u: Z, n
tag.Classname {property:value}
1 b! N, s; n8 q! G比如我們想叫一些而不是全部 H2 的顏色是紅的 ) ~4 ~0 ~7 F& O. n. t
o! b: `; c5 F# o' F<style>
" q7 i8 F, F; A: K H2.redone {color: red}
1 r. o0 K1 H! q: x% T i</style>
- B, F2 [2 U, ]7 u! y. _7 W; S7 n7 D9 R; ^5 Z
<H2>This is H2</H2>
6 n4 I: Y8 m4 v7 X: Z& p7 n C<H2 class=redone>This is red H2</H2>; y9 R) g: h+ g) o9 `: m
This is H21 K6 k) t g9 `2 a0 n
This is red H2
- H, z8 B4 |6 D
7 Z; A$ d+ R) ?9 I! L8 S+ B, M H0 j, u
7 `) X# d# A0 t: L8 S* J第二種是獨立 class selector . 它可被任何 HTML tag 所應用. 它的語法如下
+ S2 |7 e: O* O o* |* v# w' ~' s) m( A
.Classname {property:value}
5 x4 t& F1 s) Q: ~9 q假如我們有下面這個定義 1 `$ w. R7 A G0 f
/ O! ~/ [. t b
.blueone {color: blue}
& h4 u( `( R- F4 N D; r I那麼我們可以把他應用到不同的 Tag 當中去. 比如 # I0 T8 c# S4 [) V" Y/ P/ ]
- v7 D' o2 i. e) P6 K1 p L( f2 L
<style>. g/ I' M( M* e( F; ^' Y! p
.blueone {color:blue}4 H. }9 }" t6 _, M5 j: x6 C; p
</style>3 }+ G/ y, S1 t
<H2 class="blueone">Blue H2</H2>4 t$ q+ ~& X2 `4 ]1 Y1 p
<P class="blueone">Blue paragraph</P>
`- N' T5 S+ h1 A) r8 b8 Y TBlue H2. J; S2 x; @& {# D# b# Z& E
Blue paragraph
) c0 S' }4 k7 {) y8 J+ c. v% H% w / x# p( L$ S4 N
( Q$ d5 e6 L1 @7 \( b
3 F/ y4 k! G3 k% D$ Z7 ?- Z( h+ {. O- ^' ^: m8 l7 \
顯然 class selector 給了我們更多的自由.. J9 A4 d6 ?; @5 k5 L' f4 @
, l4 W$ F7 p5 x+ [! O6 F! y! B: u
ID selector
& a' I+ p8 u; ], x' E0 {3 D9 A# G% L) f1 [" W J, t' y
ID selector 其實跟獨立 class selector 的功能一樣. 而區別在於它們的語法和用法不同, 以及對於 Javascript 縱 HTML 元素有幫助. 它的語法如下 % h, H, e' f4 ~$ T: |/ c; A- v
) U1 @5 R& O4 q7 a) \ #IDname {property:value}2 \1 l' I. S3 W7 J/ t& y
假如我們有下面的定義
$ o2 @9 ~! I* O: q: h* u& G' P: b3 f/ ]
#yelowone {color: yellow}9 a: F- k& @+ s& n1 Z
我們可以運用這個定義到任何的有同樣 ID 名字的 tag, 比如 1 {0 l# e7 R' V/ K
7 ]# @, R9 w+ g$ k- u# J" ]1 E
<style>2 j1 d2 t4 c2 x/ s, }/ s& _$ w
#redone {color: red}4 o: @+ S9 N$ l' ? F# M( }% o- ~
</style>
7 D. P0 ^' ^7 `8 u <P ID="redone">text here</P>
2 t9 O# \4 J5 F6 [- g+ Itext here6 f" Y: C5 U ]* _% G2 z# o
- ?! Q0 s- r5 Z
T/ e0 r; J- e/ w! B. Q
; C0 I5 ~' u8 a {( Z
d* N( L: @+ m- s5 E4 E% l你可能覺得既然 ID selector 和獨立 class selector 功能一 樣, 為什麼兩者都存在呢. 如果你知道用 CSS-P 來定位的話, 你就明白它們的區別了. 有 ID 的 HTML 元素可以被 CSS-P 和 JavaScript 來縱.
3 x$ p- Q( ?6 @5 \/ L ~8 h7 j& C$ I+ ^& W
到現在為止, 你已經大概知道如何來寫 CSS 的定義了, 下面我們將會告訴你如何用 CSS 來縱或修改 - u; [* n, q( W7 {
( x: c! x E* M2 { q' ~8 m _
字體 8 O$ L8 y4 G4 s7 ]5 Z
文字間的空間
5 ]1 W3 ^. A) t) q列表 ) o) x2 w* o6 N! }% m. G# S* F. S
顏色
# a3 z4 y X) I5 m6 Y背景
4 |$ I4 w2 k& RMargin
% {0 E4 |6 @4 T+ J4 |% T位置 |
發表於 2006-8-18 03:24:55
提升卡
沉默卡
变色卡