上一節開始我們討論 CSS (Cascading Style Sheet) 的基礎. 告訴你有三種 Selector. 但只介紹了其中的 HTML selector. 這一節我們把三種都詳細介紹給你
* v- o9 o# Q) k$ Q* E" w( r3 G; d* r: Z I0 K$ C& S
HTML selector 5 V& p v8 l3 c' J# \1 T$ V
class selector:
: F& i7 C$ Z4 q: r" W/ eID selector:
3 L; `& n4 C2 s4 bHTML selector
4 j) W! ]. n2 }3 f. w; `* O7 D7 L6 ]8 L/ d, f
HTML selector 就是 HTML 的 tags, 比如 P, DIV, TD 等. 如你用 CSS 定義了它們, 在整頁中, 這個 Tag 的性質就按照你 的定義來顯示了. HTML selector 的語法如下 * [6 Q( E3 ^) @9 `; B
3 E& F) [4 Y4 b& j( B tag {property:value}3 f8 _& H) ^7 w8 `# h
比如我們想叫 H1 的顏色是紅的
' G( N7 v1 E9 p7 I! |2 C8 j7 v4 {+ I
+ o+ z3 [- b8 }' ~4 H4 D) K H1 {color: red}
: ?6 `, g% u+ ~& \) Y這裡還要告訴你 CSS 的一個特點, 它可定義好幾個 selector 在一個 rule 裡. 比如
) d. E/ \, i% G [/ P- y8 L
% m7 {. x7 ]! _$ x2 v4 Y6 ^ L H1, H2, TD {color: red}6 F3 @% f% X4 e9 F% @8 a6 n
這個定義就能讓所有的 H1, H2, 和 TD 的顏色都為紅色.
3 L6 F) u4 ~2 Z/ A# S# h/ S9 D0 A& o5 q$ S
Class selector % J( g. M' C3 ~$ U8 K- B# q8 A6 v) N
- `# m: Z* Z; c3 y" P$ FClass selector 有兩種, 一種叫相關 class selector, 它跟一 個 HTML 的 tag 有關係. 它的語法是
+ \ J6 v& r& a! h$ s. i$ O d: z$ Q0 u( V0 |
tag.Classname {property:value}
' @( L" {2 O( e, d& _比如我們想叫一些而不是全部 H2 的顏色是紅的
9 [( ~/ c8 x( A5 j5 T* z0 p- W* u1 O! O6 M. { @/ ?
<style>0 x8 A# [" Q' \- ^
H2.redone {color: red}
& {* F# ?, z$ |3 ~. Z* [% p4 U4 p</style>
8 ^" o" M" t- m9 G( a, Z- w1 R% y l
. M( Z# E: ~5 }0 y0 j<H2>This is H2</H2> g8 ?1 G s0 s: U3 z8 H
<H2 class=redone>This is red H2</H2>
1 m: ~ ]- _: [9 ^% ^This is H2
! t. |- c. I" b8 o* w/ F- e8 Z" ^! ]This is red H2
9 C/ a/ G h5 }% L* C M8 u ; [" d0 q7 t! f* g8 @6 z$ Y/ D
& Z6 M+ q+ k$ N6 {- ]- M
; A9 N4 ]. i! Y( s; K第二種是獨立 class selector . 它可被任何 HTML tag 所應用. 它的語法如下
( L, L+ n+ z# _( l, A( g' V6 @6 @. S/ N7 e
.Classname {property:value}
( c# j2 c1 |9 X+ P/ N/ b+ Q假如我們有下面這個定義
/ V% L5 `4 T3 I: Z2 R( L n; x+ O4 E
8 u8 _* I% i( Z8 j .blueone {color: blue}
% I; n& k2 K, T6 P9 n" ^ _# w那麼我們可以把他應用到不同的 Tag 當中去. 比如 _7 o3 G* a3 x4 ^. Y& E$ I
3 ]( h6 ~7 J( V0 U/ z
<style>$ @; _' p$ D. I5 h% \4 l4 M
.blueone {color:blue}- [# O; I1 t( h
</style>5 w! x. Q- y) m2 @
<H2 class="blueone">Blue H2</H2>
2 C5 Q' m ?# d4 r/ e' g<P class="blueone">Blue paragraph</P>0 a) d- n4 \3 k) H
Blue H2
2 n, L, g( Q* g) T1 qBlue paragraph
; r% m7 M) H6 G2 ]
9 o4 R% y+ |, n: x8 p
) J* a6 b/ J2 G& H& n* }6 {
2 S, s3 g6 U- }, z! R
' S! h5 D" Z( s顯然 class selector 給了我們更多的自由.
1 Q) h8 Q2 _* T9 S- ~+ u3 g) L; i3 f) n# Y* w& o
ID selector 8 F! n; b& \' ^ v0 e9 `3 C2 s
3 N6 r$ E0 W$ P$ i/ ^
ID selector 其實跟獨立 class selector 的功能一樣. 而區別在於它們的語法和用法不同, 以及對於 Javascript 縱 HTML 元素有幫助. 它的語法如下 & A% Z* N1 m2 U2 ~
& b: `3 l2 W/ ^7 H
#IDname {property:value}$ f5 Y1 l' i* a0 q7 W$ j
假如我們有下面的定義 $ B1 T! d# K: `6 B S! Y
2 ~2 ]6 v% h3 B! d0 s/ r6 P; A #yelowone {color: yellow}
* j3 G8 X1 f3 k- X/ e6 ~ Y6 s我們可以運用這個定義到任何的有同樣 ID 名字的 tag, 比如
- j& G, \& P. Z7 `" C3 \: Q1 B `+ D/ |
<style>
9 N# c5 A# F" ` Y #redone {color: red}# y0 @$ V: N6 w4 o3 E* R4 n( D
</style>
4 U7 S6 W" s- e# p# \ <P ID="redone">text here</P>9 [' w9 ?1 }6 A, C: G. z
text here) M! b3 E7 @+ z, d) k
, }6 C% F! A7 o% O; @
( r9 L& [( ^9 K, U: @" \6 s# n2 Y; [% D8 ^
2 b( [. ~9 B' o你可能覺得既然 ID selector 和獨立 class selector 功能一 樣, 為什麼兩者都存在呢. 如果你知道用 CSS-P 來定位的話, 你就明白它們的區別了. 有 ID 的 HTML 元素可以被 CSS-P 和 JavaScript 來縱.
! H0 v# _9 f7 h% x
" g5 [/ Z- b* t& T k% a, K到現在為止, 你已經大概知道如何來寫 CSS 的定義了, 下面我們將會告訴你如何用 CSS 來縱或修改 + h3 p3 G/ q8 W. z4 ?) }1 O+ i+ r
# r1 }1 Q* x5 w# D3 J字體
" S2 K' e6 s! }, c文字間的空間
7 E' Z2 i+ Z* Q! d' K列表 0 E' D" }; ]* \# s0 V1 |, V& Z
顏色 3 j A4 c* g: w/ D
背景 ; t# [5 N9 T* p
Margin
% s. x0 B& y! ~3 _% q位置 |
發表於 2006-8-18 03:24:55
提升卡
沉默卡
变色卡