上一節開始我們討論 CSS (Cascading Style Sheet) 的基礎. 告訴你有三種 Selector. 但只介紹了其中的 HTML selector. 這一節我們把三種都詳細介紹給你 $ }+ p5 ^) @% p' b/ y+ N
* x' O! V4 ^ {4 v: Y1 {HTML selector ! d% R- t0 T+ n+ q- U8 D
class selector:
8 ?3 [; F- J) p" z9 O) [& j6 CID selector: 3 ^4 A6 P0 k% o: S9 |
HTML selector
- d6 C+ U7 o; Z/ ^ J' H' K
. Z- B4 t+ v. s9 S. j" UHTML selector 就是 HTML 的 tags, 比如 P, DIV, TD 等. 如你用 CSS 定義了它們, 在整頁中, 這個 Tag 的性質就按照你 的定義來顯示了. HTML selector 的語法如下
% g9 w0 b. a# E0 D+ C! M- t
2 W+ ~& @8 R8 E& V; l- r7 N3 U tag {property:value}
" D: R; L# ?, G; K, i$ A. Z5 c7 w比如我們想叫 H1 的顏色是紅的
- p8 ` l% {' H, l$ H5 w( ?- a: T% Z( J7 Y0 E1 A
H1 {color: red}6 Y c& ]; k- t& h
這裡還要告訴你 CSS 的一個特點, 它可定義好幾個 selector 在一個 rule 裡. 比如
; L+ }& |$ p+ q% T( |1 t% f; V$ M$ j# T5 W
H1, H2, TD {color: red}
' D5 ^. C y! A* u D這個定義就能讓所有的 H1, H2, 和 TD 的顏色都為紅色.
2 D1 f( e1 k3 ?/ q0 q: u" x+ S: o2 S7 D) }( C$ B V1 `& W
Class selector
3 c4 C4 b7 M: o( E6 i1 S, z' a9 g! |2 e% _; y
Class selector 有兩種, 一種叫相關 class selector, 它跟一 個 HTML 的 tag 有關係. 它的語法是 6 m8 O1 w% S* c! R: I# T
9 c: }3 j7 K, _0 o* K& r
tag.Classname {property:value}
9 }( _' L0 [3 i% X B- a比如我們想叫一些而不是全部 H2 的顏色是紅的 - w' s7 K" k4 r1 q2 p |, r
1 D8 g/ I1 j7 G+ w% N, i" q) m# C<style>
9 P9 i2 n5 l8 x# \$ { H2.redone {color: red}6 `! A" D! i5 g1 P
</style>' |+ M/ @. v$ d; H; [) f
6 i: g" ^2 J! [8 j, l( L* }
<H2>This is H2</H2>
' \# T* D. R$ h4 P; _+ w! {<H2 class=redone>This is red H2</H2>
2 _$ w/ f/ C0 U' |3 s# zThis is H2
# r- F* s* z/ k# ]3 K$ uThis is red H2 - C" ~/ ~/ @2 X
% ^, Z2 K) b) H2 T# R4 u
, v" y9 G/ R# Y7 H$ }6 R0 _$ a$ r) l1 x- ]7 C, l$ u9 r
第二種是獨立 class selector . 它可被任何 HTML tag 所應用. 它的語法如下
! g8 T$ G+ x {6 d1 f! Q
2 ]8 o3 @) |$ f; U+ ]. x+ S3 z .Classname {property:value}" D( c4 H* Y0 K
假如我們有下面這個定義 ( H0 i! j. _3 F- `* e: q/ V
/ B) U. b; I; e D* }4 I! g
.blueone {color: blue}, K! ~7 P! ?& p, b' J& v6 F! l6 w
那麼我們可以把他應用到不同的 Tag 當中去. 比如 + X% c7 C, b) C3 D, D7 h2 K
1 N! e6 O( y; V3 R8 \
<style># m% j) L c% P/ ?& C% {0 |
.blueone {color:blue}
: r3 ~- |' z, w. Y' f</style>8 `& W- P) }, t6 k4 E; u& d5 D4 _ l
<H2 class="blueone">Blue H2</H2>
3 O C% p! _/ B0 ]% ^* _, Z: x<P class="blueone">Blue paragraph</P>
# B7 x r- w4 y1 R, \& k! nBlue H2
6 w* _9 K1 J5 _- s. dBlue paragraph% k) W( w/ `' v3 P
+ g2 D% }, u) O2 U5 q' D
7 n; l K8 a+ F; e& l; c# l4 J7 d: p2 w4 ~
2 o, l6 V5 S: u& B+ b
顯然 class selector 給了我們更多的自由.9 C0 X6 [; T3 i1 x& [
+ j7 v) d% N" [3 eID selector
/ T% i0 c" x: q$ z. \
, O# W9 ~; }. U. Y( `ID selector 其實跟獨立 class selector 的功能一樣. 而區別在於它們的語法和用法不同, 以及對於 Javascript 縱 HTML 元素有幫助. 它的語法如下 " R, {8 t$ g% R2 |0 l9 T0 } J1 X
- B# M+ l2 k+ `5 T+ Y! Y8 u
#IDname {property:value}5 h, o9 q* D& `/ |$ r" o8 r) z
假如我們有下面的定義
. B) I3 Z3 f# w% O; ^# R% ]8 r0 Y8 y" E1 e3 e3 i3 w
#yelowone {color: yellow}7 g% s8 J0 Q% X
我們可以運用這個定義到任何的有同樣 ID 名字的 tag, 比如
* C8 H- n5 P+ u! t# d* i- V! ~6 }* F+ \3 m1 K/ ^. o. R7 @9 j1 I
<style>
! d" n* y8 P4 e+ _% J& ?9 i. f. P7 C #redone {color: red}
: ?# N" x6 v0 U5 R5 v</style>/ O5 o6 e4 T0 R' R
<P ID="redone">text here</P>- u+ b& g: c% x( t5 P3 W" c
text here+ s/ G5 V' ^( Y/ J: h+ x- _
& i7 d9 g) d1 }# L$ p* n) ? , {# E& `: G( ?) ~2 f* I$ e
5 [; a4 g2 h1 a$ Y5 Q0 l
* ^+ v7 ?3 r( p8 O0 B( a你可能覺得既然 ID selector 和獨立 class selector 功能一 樣, 為什麼兩者都存在呢. 如果你知道用 CSS-P 來定位的話, 你就明白它們的區別了. 有 ID 的 HTML 元素可以被 CSS-P 和 JavaScript 來縱.
/ q1 I8 i5 \) w0 O+ J% P% j6 c/ h1 o# G$ r/ v: r
到現在為止, 你已經大概知道如何來寫 CSS 的定義了, 下面我們將會告訴你如何用 CSS 來縱或修改 ; W) ]) j3 f& }6 T
: a1 H! }/ e* L/ h* ]4 h" `
字體
+ E4 C. J" j9 e+ e4 Y. {文字間的空間
$ G& x2 A6 x, \/ B' W列表 ' X9 ?% x6 p2 n0 Q& h
顏色 ( l# d# Z/ c) H1 b, j& L5 \9 q
背景 % ^( o3 [$ L9 x9 g
Margin
# u) W/ j! ?3 L2 A9 p* r位置 |