上一節開始我們討論 CSS (Cascading Style Sheet) 的基礎. 告訴你有三種 Selector. 但只介紹了其中的 HTML selector. 這一節我們把三種都詳細介紹給你 , H/ S, ?; l" [* o+ l E
. V1 I. z- g+ q. o/ t& p1 O1 K6 `
HTML selector
9 F' c) m& r+ E& fclass selector:
! X2 g7 k2 @9 ]4 E' AID selector: : i K. I1 o. K3 W2 f. }" A
HTML selector
" D2 `' }+ j' J1 M# `6 X! b( J' D# ], B% O3 K" ?
HTML selector 就是 HTML 的 tags, 比如 P, DIV, TD 等. 如你用 CSS 定義了它們, 在整頁中, 這個 Tag 的性質就按照你 的定義來顯示了. HTML selector 的語法如下 5 q A- g5 U0 q1 g
% h) }1 e4 p3 `) J# l b( w tag {property:value}5 S" `! q( m* b( v s: l: }
比如我們想叫 H1 的顏色是紅的
4 q: N* s* e0 l j* E" G. f- r8 ^6 |" |
H1 {color: red}6 x; z) w. `! P& C6 h& t
這裡還要告訴你 CSS 的一個特點, 它可定義好幾個 selector 在一個 rule 裡. 比如 + ?$ h, q$ t1 t) ?! G4 L! `1 O) G& g' }
G' ?8 l) y8 y% H8 q H1, H2, TD {color: red}# n. q, f' I/ B1 |
這個定義就能讓所有的 H1, H2, 和 TD 的顏色都為紅色.
: E( z+ w7 P, @" r
" K/ W9 |. ^) C) ?Class selector
1 n) C v, g( p0 x& ]* S: b0 O7 O- ^( H
Class selector 有兩種, 一種叫相關 class selector, 它跟一 個 HTML 的 tag 有關係. 它的語法是 5 F2 ~" D! y H# s+ O& X1 U
( V; P7 w3 ?' e. D' ?7 [
tag.Classname {property:value}
' N3 u8 q3 J' C! ?" E3 r比如我們想叫一些而不是全部 H2 的顏色是紅的 9 n" B0 @3 d% n! `
& j. j. a8 t b! R ]% D<style>, X0 B2 k/ b/ D9 F& f
H2.redone {color: red}
- e8 A( ^, J D; Y</style>
" H3 y( j: w+ h, h2 k6 b7 m
' Y$ Q- ^7 `4 c8 J/ N5 O+ }- ~<H2>This is H2</H2>
& {9 W. P3 E, f& J5 [9 e9 j: I5 W<H2 class=redone>This is red H2</H2>( D( i8 Y" S9 X( Y7 B* i
This is H2$ U7 u" ?4 `5 C% h
This is red H2
% c; e3 T) G3 V# J, x( x 2 q" ~2 D$ K) s: I8 B9 d
' o3 f, m7 \) v9 r# n4 P. U% u+ I* i0 ] [! [7 E4 M2 K
第二種是獨立 class selector . 它可被任何 HTML tag 所應用. 它的語法如下
0 j: _3 ^7 L1 {5 _7 W$ h+ u5 Q* T% r# `* B- A8 N( b
.Classname {property:value}2 l3 A/ U1 Q+ S6 H( ]0 L
假如我們有下面這個定義 : o# \9 M2 n. T' e% m. U% m
7 D. _5 `* ~! L7 R+ F .blueone {color: blue}
P% d+ I8 ]. L* g% v- G6 t& [那麼我們可以把他應用到不同的 Tag 當中去. 比如 9 F$ Q) n$ y- N! B* B u A
& c# Z! ?( I h9 r3 @
<style>4 S2 E) v4 \8 J, U* I/ f
.blueone {color:blue}
) [7 H2 N6 h3 ^7 i( h) I</style>5 |( B7 P- Y# F2 p# C" L5 B
<H2 class="blueone">Blue H2</H2>
7 r& t) f1 d3 p$ D0 n% s3 b<P class="blueone">Blue paragraph</P>
0 X( ]6 E: N1 ^, E1 n- l4 p' LBlue H2
0 ?% _+ R$ ?* I4 N, BBlue paragraph
6 v* }% d" {; N- ?4 J 9 x6 P$ E4 I0 v* F4 [" N5 v' ^
* Y) u1 H; ~& Q% w
& d" P1 J2 e. x: u3 s9 F n
( W i9 k, [4 f3 X$ q: ]. |顯然 class selector 給了我們更多的自由.
0 ]4 q2 F) N/ j1 c* x. s- t& Z- O! H! ^' X/ \/ W
ID selector
6 j2 g: o. H; J" ]6 H
' g% ~: ~( {( f( RID selector 其實跟獨立 class selector 的功能一樣. 而區別在於它們的語法和用法不同, 以及對於 Javascript 縱 HTML 元素有幫助. 它的語法如下 ; r c- T; U: [7 x$ ~5 }' l" p
: V' h6 a# r& I) J# B #IDname {property:value}
" I. M) G- A. ~/ c4 b假如我們有下面的定義
5 X, p$ n9 \- |
# s d7 C$ e/ Z$ `2 {, C #yelowone {color: yellow}
@; s0 c: Z4 d! H8 G+ F: A' v6 P我們可以運用這個定義到任何的有同樣 ID 名字的 tag, 比如
0 B2 }: X( X" `0 P3 w- s- z/ z, {1 ~$ b/ e9 C' N/ w
<style>
4 F( s2 H! E6 i% G& f #redone {color: red}) }% P4 b+ ]% ]3 I' Y5 R0 R+ y
</style>
, L/ V* n# d% m3 A$ T <P ID="redone">text here</P>) z5 x* ^. ` U2 v
text here
' W8 |3 O$ d7 Z% I1 K 5 m& u# h8 M0 I, \$ r+ {9 F* R. Y
# i% Y8 h# u, o* s% @+ v
; b4 n! p1 E2 C+ r: x- w
X& P" k( K- M你可能覺得既然 ID selector 和獨立 class selector 功能一 樣, 為什麼兩者都存在呢. 如果你知道用 CSS-P 來定位的話, 你就明白它們的區別了. 有 ID 的 HTML 元素可以被 CSS-P 和 JavaScript 來縱. 4 K1 Z4 [2 l, Y0 [* e5 C
; c z1 w5 F7 ]7 @' e" W到現在為止, 你已經大概知道如何來寫 CSS 的定義了, 下面我們將會告訴你如何用 CSS 來縱或修改 , ]- h% T9 X7 l5 z- @
" Q: k5 k \# L/ f& @- x6 h字體
* W/ `/ i' D5 M1 P文字間的空間 7 z8 {- b) g$ s7 A& p% V( V5 s
列表
2 `' u8 H! j9 E* g% d顏色 2 I7 _# ^1 W' g7 r1 u3 `! D! m
背景 7 \1 Y. } E' O' q
Margin ! s9 J. i& t( c' ^+ s$ s+ `
位置 |