上一節開始我們討論 CSS (Cascading Style Sheet) 的基礎. 告訴你有三種 Selector. 但只介紹了其中的 HTML selector. 這一節我們把三種都詳細介紹給你
2 F% G! r: p* x' `0 O/ J$ P7 J; Z# K5 `7 m" a5 z
HTML selector
" p( W2 l3 V6 K2 v' Z9 p2 xclass selector: 2 @7 z8 \" W M' \
ID selector: 1 U, y. P0 W5 z* z# X! U8 _& B
HTML selector
: R9 f! Q* V" x4 y( M T$ d! Y! r! u: g
HTML selector 就是 HTML 的 tags, 比如 P, DIV, TD 等. 如你用 CSS 定義了它們, 在整頁中, 這個 Tag 的性質就按照你 的定義來顯示了. HTML selector 的語法如下 , {- [& U6 u. ?$ |, H
+ S7 d, C3 Z) ] H% h) y K tag {property:value}% l3 I$ @/ q- n3 o8 ?5 j
比如我們想叫 H1 的顏色是紅的 ( t4 b" P0 u, J# o; J
# A/ n- P% f- H, s/ ~0 K( z6 A
H1 {color: red}
. ]5 Q: s( i( l# @這裡還要告訴你 CSS 的一個特點, 它可定義好幾個 selector 在一個 rule 裡. 比如 ! d4 l& Y4 |! m6 g- }# ^
2 p# M" _% ]2 o. C9 V- v H1, H2, TD {color: red}
- z1 l) }0 l% S8 }3 n) }這個定義就能讓所有的 H1, H2, 和 TD 的顏色都為紅色." m; y/ M% r" G7 i, T
g1 ?; v# Z0 EClass selector 2 Y8 T5 |9 `$ W, v4 ~, a
: Z8 L* I. I: G. eClass selector 有兩種, 一種叫相關 class selector, 它跟一 個 HTML 的 tag 有關係. 它的語法是
, E* h' _0 x. S o( j$ I% q3 y1 B2 q, ~) p
tag.Classname {property:value}
* A: {3 l; \! o: h: N0 @3 T& {6 t比如我們想叫一些而不是全部 H2 的顏色是紅的 6 _6 }, \( v8 `& k" }
, m; K: Z/ L/ \) _' C* h
<style>
3 [& a% E3 m! e8 k8 r4 k' Q5 l, F2 ^ H2.redone {color: red}. b+ A& K2 k4 i8 Q( F
</style>! k. L: Y$ H, d: B8 R8 @% y8 s
( E4 c" t. _4 i" O) @<H2>This is H2</H2>* ]4 \# u$ w0 E7 |/ ~# F
<H2 class=redone>This is red H2</H2>
/ S% P- p- E& ?/ K- L( }This is H2* }! O9 @! i. \. i2 r3 u
This is red H2
" P2 {& W5 S4 K6 j/ Y& F 0 p8 P7 _9 w% G# C- q; j# i3 V
0 }8 z$ w9 ?. Y% R$ V) e% h2 o
( ^; f7 V' u# e$ E; t第二種是獨立 class selector . 它可被任何 HTML tag 所應用. 它的語法如下 : N' x5 q) [( E; S5 @/ {
7 \1 Y, J# \8 h8 j+ q/ g) V' L .Classname {property:value}
2 o6 U0 S8 U% Q6 ?) w0 i6 b假如我們有下面這個定義 9 @6 R8 f' X8 s5 _2 G. e5 o4 Z/ \
1 g9 j1 G% Q) s; f& L
.blueone {color: blue}
6 N, Z9 q8 `$ @$ S" S那麼我們可以把他應用到不同的 Tag 當中去. 比如 5 A$ r# s9 z3 g; r
+ W: ?+ m$ L8 A {4 J" D4 ]<style>
% [' a% J- Q1 i7 S .blueone {color:blue}0 J* ^% h. q5 _
</style>
" h2 F- o# b& O, n7 Z<H2 class="blueone">Blue H2</H2>
2 S$ _" M7 B; \- u8 x<P class="blueone">Blue paragraph</P>
* J7 a" p# ]0 B1 `Blue H2# n7 e3 V% M6 k- L$ D
Blue paragraph
7 r6 c2 P0 z3 H& ? & U( o5 l& h% i8 F: b
: b( }+ I) X- T. q$ P
3 J7 P9 y* y+ g6 J/ R# }' V: `) v5 F+ P
* {4 H6 y+ d$ Y/ [# g
顯然 class selector 給了我們更多的自由." G! A- L8 S3 { a9 q! E6 n
) I; e( Z* F- K$ SID selector % k% ?- S9 V. @2 I# F1 w7 R6 U# W
. e7 U0 ^( I l: f
ID selector 其實跟獨立 class selector 的功能一樣. 而區別在於它們的語法和用法不同, 以及對於 Javascript 縱 HTML 元素有幫助. 它的語法如下
/ v7 g) b. X3 ?% F# M
8 V7 J+ x/ M4 j; }" t #IDname {property:value}
+ J: C* _, e. |. Z9 {假如我們有下面的定義 * E* T) k( ] b
) O: j7 D3 _0 y7 C" Q( n s #yelowone {color: yellow}
" l$ w/ Q& U! m" g4 x; m4 \+ Q- [我們可以運用這個定義到任何的有同樣 ID 名字的 tag, 比如 ) ]) i$ P- W- {# p# L/ {/ H
$ E- ?2 t" `6 f/ I<style>
7 K! s8 Q3 W* D0 X, ^; U# a/ \ #redone {color: red}
7 Y5 @5 E B& [* _0 m( [# o" b' T</style>
u: w) {: W5 a. n$ [' h$ y <P ID="redone">text here</P>1 q$ U f \* o# _$ [* Q
text here
' p, M H4 Q* H
; R# {" X; [* B8 f0 l# i ; U7 e% t% f& }
. Y. ]$ Y0 q5 s7 `( Z8 y$ Y: W
3 J+ W. w9 ]1 P) I
你可能覺得既然 ID selector 和獨立 class selector 功能一 樣, 為什麼兩者都存在呢. 如果你知道用 CSS-P 來定位的話, 你就明白它們的區別了. 有 ID 的 HTML 元素可以被 CSS-P 和 JavaScript 來縱. : ~7 b S; d w8 f
$ g7 `2 O; c4 y7 h5 _4 K$ q
到現在為止, 你已經大概知道如何來寫 CSS 的定義了, 下面我們將會告訴你如何用 CSS 來縱或修改
0 |$ L3 _- t- J5 q- d/ H9 ]& L% k" N- i
字體 4 r G3 }- |2 o: U [4 e1 }" H
文字間的空間
0 A+ s! @4 v# ?9 x! G: J列表
$ e- H1 T! H2 i0 ?* S& w6 j1 U顏色 - N$ o1 x8 q/ a( {& \, K
背景
9 }, V( V$ L' H* m+ X; \, IMargin
4 X- D: k; Q H4 M% D4 O0 V. p位置 |
發表於 2006-8-18 03:24:55
提升卡
沉默卡
变色卡