查看完整版本: CSS入門教學之CSS的語法大全

未來時間 2008-5-18 21:08

CSS入門教學之CSS的語法大全

1.基本語法 ^ H C2@;{QosV
$b5j,e w4M-Sj E%F/Zy q3v
CSS的定義是由三個部分構成：選擇符（selector），內容（properties）和內容的取值（value）。 },\ F8B#gdr8gPX@
*rySR)H;J+h)l*Z
基本格式如下：
6K+]yV\h![f PP8T{0w w5@ w
selector { property: value} .Px#`0HGR1p6V@
j{:]o5A%s ]S$e
（選擇符 { 內容：值}） #A9e7Z4~ [z;_,t

Z C6TS0e*Xgn%dC.I 選擇符是可以是多種形式，一般是你要定義樣式的HTML標記，例如BODY、P、TABLE……，你可以通過此方法定義它的內容和值，內容和值要用冒號隔開：
2xQd5qB0\
}-Kz Vu.V5@| body { color: black} V4I/[0k/^
*k2UW5a_Xkn
選擇符body是指頁面主體部分，color是控制文字色彩的內容，black是色彩的值，此例的效果是使頁面中的文字為黑色。 9e6B6lY:t6b{l{

{c1A1P2nE\1B*M 如果內容的值是多個單詞組成，必須在值上加引號，比如字體的名稱經常是幾個單詞的組合： "b2Y'f7Rk8F"u`

7t}b;Hx2d p { font-family: "sans serif"} s'g8K&xN5E

3_"g/K-Es"Y7D4Y （定義段落字體為sans serif）
/C#j0jOE\9C/T B!ZnJ9@ej7` e.]
如果需要對一個選擇符指定多個內容時，我們使用分號將所有的內容和值分開：
]8]Bs&] U6~Q"m f\9gBP1b4|$R
p { text-align: center; color: red}
YNF_m.E.V N H Y 6He?A1dh6x9OJS7M[
（段落置中對齊排列；並且段落中的文字為紅色）
l(u!V#k/j+mZ4y?;H%s_+U 9p)iG }do
為了使你定義的樣式表方便閱讀，你可以採用分行的書寫格式：
3d4} bX;y(j8y B xH3vEL3w
p .Be_C6] q#o

LC1TH;G.^I|O!\H-W { \]vf0zDl5\*Oo(u

7W }u(c!D BD text-align: center;
*FT#A L;\M O
{5Tf;IE5X3w9W \(q color: black;
h C `1rj8n{
epE a wRF Z font-family: arial P"G"O0iA
Awe/zDX:iN
} i4xG/Q0s&g
3}9U-K+JBT?d
（段落排列置中對齊，段落中文字為黑色，字體是arial） )o~.gv%T

U\hJp/v'f e 2.選擇符組
+o'c7q$` ya
3`I%dNZh1kJL 你可以把相同內容和值的選擇符組合起來書寫，用逗號將選擇符分開，這樣可以減少樣式重復定義： PM0zCV:o4z8d!k*i_

-~ wD)b5xBz*M4^ h1, h2, h3, h4, h5, h6 { color: green } F*qF_uL{#u8T({
u&O-z^c*a
（這個組裏包括所有的標題元素，每個標題元素的文字都為綠色）
q8{c$C3ja8tv v5o1rj:u 3zC oimr{9W
p, table{ font-size: 9pt }
n+uL-mL)w4V:^I
o [&wuV aw%cj3}\:nO （段落和表格裏的文字尺寸為9號字） /[ C*\k_Azt)V

K%`f1E;z*y5b 效果完全等效於：
sa]be2Mxq
9b0X p,I} ^T p { font-size: 9pt } 8E1P(\%HsV Q X*\C

4JD$Y4h3N1}[:{8L table { font-size: 9pt }
2X} GG6R9Q`%X5X
[:c9T(ds5|q&k 3.類選擇符
M(b+R1KhR]Ot Tep+\-kcH0S(W
用類選擇符你能夠把相同的元素分類別定義不同的樣式，定義類選擇符時，在自定類的名稱前面加一個點號。假如你想要兩個不同的段落，一個段落向靠右對齊，一個段落置中對齊，你可以先定義兩個類：
/sUe~p H P,x,a(W W?H^8B1t
p.right { text-align: right}
FG3`o|1`z2} M3X
o${2nFze[x p.center { text-align: center}
`.Y6]"cxdC
VOKVS\j/M*{/eQ 然後用不在不同的段落裏，只要在HTML標記裏加入你定義的class參數： u"Q9H*h/j/z F

I^QD'VQn&n?
ZLa8I(r(\ &[Ca;w^_n'~n@R
這個段落向靠右對齊的 -dw d1o&r!VZ4]
p+kMf!O&\(R(_

1q;y#s)s n^&}2V C}
b$Pk4j x'{3WO.U
#S Vx_U,Og !OM?;Nh y
這個段落是置中對齊排列的 b^9\S)QI+EW
xq'v'M9O
i]'vp:DM%u+ZLC
/~q8U&Dv:I
注意：類的名稱可以是任意英文單詞或以英文開頭與數位的組合，一般以其功能和效果簡要命名。 J7i*r|gpm]
7M;C a G9p!Y x/ZAz2u
類選擇符還有一種使用方式，在選擇符中省略HTML標記名，這樣可以把幾個不同的元素定義成相同的樣式：
)H%r1l;xzj #},Q#pi B
.center { text-align: center} *Fu6yBK"?2s
8])VG] f `3OgL
（定義.center的類選擇符為文字置中對齊排列） +_'q]!pf|7U

(qv Yx]j6ZjNy1d 這樣的類可以被套用到任何元素上。下面我們使h1元素（標題1）和p元素（段落）都歸為“center”類，這使兩個元素的樣式都跟隨“.center”這個類選擇符：
Y/}2c \$w,s Y3S_4m;D3t-j
QW.Dk6G DVu7^j0@

)E8f;|G] E 這個標題是置中對齊排列的
!i'Q%O;d9y"Z O3N8l3Jj,AhT

D9?T*` Y,o8q
+V1TrBS g1B!`
a2N+Z O2p4L d-UYx 這個段落也是置中對齊排列的 7S.d f2D3`"FV
3C:S"[&mq,^ s

dLB|+U*c V \K/| +LI nMEM%G~
注意：這種省略HTML標記的類選擇符是我們經後最常用的CSS方法，使用這種方法，我們可以很方便的在任意元素上套用預先定義好的類樣式。_C+s7mz%j3iz]
[ @\r z^w
7sg t$II
4.ID選擇符 1@&kFMH R b&uo
Uo|$|u
在HTML頁面中ID參數指定了某個單一元素，ID選擇符是用來對這個單一元素定義單獨的樣式。
(ZX'o.i%m.q0WP
Xr/\&HW SkBb ID選擇符的套用和類選擇符類似，只要把CLASS換成ID即可。將上例中類用ID替代：
{ qh7Tx
](k}/C5\k d$D .W8?:L~8j [;Y1i
b9V+^g:?;v5~w
這個段落向靠右對齊 i{/Sp1w5rf

W:n)yUpcU"Dn 2W [J{-a

N B]8vv*Mp 定義ID選擇符要在ID名稱前加上一個“#”號。和類選擇符相同，定義ID選擇符的內容也有兩種方法。下面這個例子，ID內容將匹配所有id="intro"的元素：
Hc)^ ?,f;cn
.Y,r)Qws #intro 1`'T$G,i$B/V9s2c'C

r#a-V9vJ5a1U/Q {
? M&Rt(I$j\ 1mk7w Nb)io
font-size:110%;
P)}&{Kz a { vS8BkI&G,\g
font-weight:bold;
-o DS7\we
8XJ'S:R+H:I@/{ color:#0000ff;
rJ/{ Z,BdS |hLG2X(ra
background-color:transparent zD*vF;b
SZ4J ] |9}$a
}
@ v xy^kv
Zg)S!p3} n4j8dM6b （字體尺寸為預設尺寸的110%；粗體；藍色；背景色彩透明） }G"DWO/o!ju
+`r:g D!q7r(i}8v#[2I
下面這個例子，ID內容只匹配id="intro"的段落元素：
^&v3ugB ^.W(p%h2W0ZHJ^^[
p#intro /wJs(oH;E

,t ]!jF(M { (Y `(d1v UG7c

K,R3x/Of5U[G font-size:110%; ~o rMe;S
NyR"Ip
font-weight:bold;
v3o%wO3EqxN 7d2q9@1R_"Tsv@ \$o#y
color:#0000ff; U1Q8K Z;Quz6e^

h\8j`*~ background-color:transparent }U P6eV:A#D)P)J

Za(@ @q,k2E }
['KD2[)[zzl!o ;v"| |!r%c2E1`
注意：ID選擇符局限性很大，只能單獨定義某個元素的樣式，一般只在特殊情況下使用。
tJ}-r\
!p@0Lw%YY/N 5.包含選擇符 0jX4L7{Fj
y?1g1A9c8k
可以單獨對某種元素包含關系定義的樣式表，元素1裏包含元素2，這種方式只對在元素1裏的元素2定義，對單獨的元素1或元素2無定義，例如： 3K)c+Y+z,N9{

'o[ k!`y F$rAOC table a s.zC#ysA#U!yLh

4DX _$E3s#Ur {
l:up0b.y 'W4B9bl5Z6j6G} J?
font-size: 12px
iVZtI)U
uu8p;z-|9wkF8f&P`L } *xc ru8\f;O#N
-f~?)DcHO C
在表格內的連結改變了樣式，文字大小為12象素，而表格外的連結的文字仍為預設大小。
\*BEk&tpG e ^.@,\,t(t|'Q_
6.樣式表的層疊性 &rs$X9xB7p5G:S

Xop0Wq#|\{%V 層疊性就是繼承性，樣式表的繼承規則是外部的元素樣式會保留下來繼承給這個元素所包含的其它元素。事實上，所有在元素中巢狀的元素都會繼承外層元素指定的內容值，有時會把很多層巢狀的樣式疊加在一起，除非另外變更。例如在DIV標記中巢狀P標記： Rp#o6}:k ]
{/j2bq4JL(X]
div { color: red; font-size:9pt}
&i6VeV3z!w2Q :AI+luk.mZN$tQ
…… h,k1\i/P.x W9P
X8J7ZNK _)i

xDR.F[
5l!n&QL7|wr
_j*gu1N
|F@0J.A$ZL 這個段落的文字為紅色9號字
[J-C!n? z2U%`U
}:vU*y.y}%Q'Xt
1KAu(h Q$bt
V^Gd3G\z7N 1hTg ^Q$U_
8Y#e:p;hd(`o1p+H
（P元素裏的內容會繼承DIV定義的內容） }Du(`p&jS&r)n6J
4PF jQb(T6?
注意：有些情況下內部選擇符不繼承周圍選擇符的值，但理論上這些都是特殊的。例如，上邊界內容值是不會繼承的，直覺上，一個段落不會同文件BODY一樣的上邊界值。
5eJP~%H4?"@)I 2e }q;v8xK:y,rk8V
另外，當樣式表繼承遇到衝突時，總是以最後定義的樣式為準。如果上例中定義了P的色彩： !E1u J,prK

5nhP`1{(m@ _ div { color: red; font-size:9pt}
(ojxvnz Vz
2M3w0LDI#V9uN7SpPO p { color: blue} 'Fxz!X_*A*U(Y6utgr
+W%d:jAP5S ^oWb
…… kP*BI9cHF:J |
[ `4O3c7N;hH
hBt.@b:G%DY

MvA.`] X -K:mv}3D7^Da
5Es%o*Tf l]
這個段落的文字為藍色9號字 y uX1c/Nx

:lym:N7Jn ~ K]s3}
?R.z5^bZ+^'Ua )_z v2spz
%`%V4W/V M-C AF
v? Iw p!V
我們可以看到段落裏的文字大小為9號字是繼承div內容的，而color內容則依照最後定義的。
'cc5Y4d V%Xg3v
D!Bh7O],k!H*U.n%k 不同的選擇符定義相同的元素時，要考慮到不同的選擇符之間的優先等級。ID選擇符，類選擇符和HTML標記選擇符，因為ID選擇符是最後加上元素上的，所以優先等級最高，其次是類選擇符。如果想超越這三者之間的關系，可以用!important提升樣式表的優先權，例如： 'g&@A8M-kOSC
6oAID qgO]
p { color: #FF0000!important }
PyN@F$V$_(QD]
1m*m.`%@5V+W"o9o:M .blue { color: #0000FF}
9j f`5UI+I0@ N P t.i,nz#h2P2u
#id1 { color: #FFFF00} ~7}Q blA{|
0u\N%Q"a C,N b
我們同時對頁面中的一個段落加上這三種樣式，它最後會依照被!important申明的HTML標記選擇符樣式為紅色文字。如果去掉!important，則依照優先權最高的ID選擇符為黃色文字。
s t*@R!XU hQ
+f,P/N$P%p*g] 7.注解
['G"s5rC1RK ;St7PE Bk
你可以在CSS中插入注解來說明你代碼的意思，注解有利於你或別人以後編輯和變更代碼時理解代碼的含義。在巡覽器中，注解是不顯示的。CSS注解以"/*" 開頭，以"*/" 結尾，如下：
z-` r TF&D4Y
P@a]&WTB /* 定義段落樣式表 */ !N5B y&w1z H p g

\ G S^7NM3w;} p
@r|b3XS_BBQ
#MU6ZL.JF { w y2D4o*npB4J

]6?Y"g5Z0| text-align: center; /* 文字置中對齊排列 */
8wg8N4G4zK ` F9l1M?1O ~.v f/X
color: black; /* 文字為黑色 */ %O&G{(b$H x H? ]
[Mc"P6gBK([ B
font-family: arial /* 字體為arial */ Kb6Y0p&@C,e
o:m3Zl9d w
}
頁: [1]
查看完整版本: CSS入門教學之CSS的語法大全