|
您可以利用下列 3 种方式，将 CSS 指定的格调加诸于网页上： , j% u! ]4 }/ _. u" N7 }
6 s/ D9 d0 U' b2 M1 a3 U4 u3 x1. 在 HTML 档案里加一个超连结，连到外在的 CSS 档
/ x: x- I9 C" p& C0 }/ A& R/ s9 U0 i
这个方法最方便管理整个网站的网页风貌。它让网页的文字内容与版面设计分开。您只要在一个 CSS 档内（副档名为 .CSS）定义好网页的外观风格，所有参考连结到此 CSS 档的网页，便会依照指示，反应出定义好的风格。 ; m" t) O2 y1 J7 l4 F- a$ C
: Z: e' a4 L8 _% w# M
它的写法是： . }6 D4 o2 C3 f5 ^7 `% T, t
' G8 N* }8 r& V/ L# u
<font class="jammer">: x3 ]4 t- k4 ^* J</font>
本页标题<font class="jammer">, W. t3 c9 z n _+ M6 e$ g</font>
, J) g& b- E- H3 j
* |# _- X2 L) I7 [. n. u6 w
HREF="http://www.xyz.com/xyz.css" 9 O) a+ z' g0 O% d" Q1 y" J( r' g: i
TYPE="text/css">
0 y# X4 j9 _1 ?% C5 y! H& p1 H( I! M9 o- v7 u- L
4 N0 e% |$ y) C6 j
此种方法 Navigator4 支援得仍十分 Buggy，请小心使用。 . ?+ a: p1 c8 w0 v
2 M5 n" L6 V6 w$ N: j) D2. 在 HTML 档案的 ....... 标签间，加一段 CSS 的叙述文 ( X! g3 C) x Y; m0 V* L1 k) S
$ g0 s4 Y& u) q& c这个方法适用于指定某个网页，除了展现外在的 CSS 档定义好的网页风格外，同时还要展现本身 HTML 档内加注的 CSS 。 ( S. Z' k+ p9 J& C* n
2 I! s6 |$ J1 e# v
如果内在加注的 CSS 叙述与外在连结的 CSS 叙述相冲突的话，网页的展现将以内在加注的 CSS 叙述为主。
1 r2 O" Q, {" i# c$ a' F! O! B4 ~! N: |9 J) o, F) y/ y/ w8 ^6 D* J
它的写法是：
9 W- Y3 R' u4 x- r& S$ y f! f+ P. k& {1 Y; Y7 i Z5 J
<font class="jammer">& T: G( X( q2 @( ]</font>
本页标题
<span style="display:none">1 @! o2 B d: H+ H</span>2 k1 n0 ?+ E, D( ~& @
+ c$ Y& k0 A0 O. k0 E' n8 R6 h1 O
* i" p N( ]/ I! A2 z0 a开始本页内容…
! I$ r5 T) k$ n1 V; Q; `" T. U" j" n% B
7 C2 o Y$ @0 [' \9 G( S
( t8 S4 @2 C" h9 r% ^# x6 J2 s特别值得注意的是，为了防止不支援 CSS 的浏览器误将 标签间的 CSS 风格叙述当成普通字串，而展现于网页上，您最好将 CSS 的叙述文字插入 标签之间。
& |. Z) B5 ~& i+ [% {) ?) ~& B2 F0 M" C4 l+ R7 } ~
3. 在 HTML 档的字里行间中，随时有需要，随时加一小段 CSS 的叙述指定 - c' o) |2 J2 J8 j: L0 o
. K9 G* P7 a8 E% j( x: u3 Z
这个方法适用于指定网页内的某一小段文字的呈现风格。 ! R$ X8 t, |% d# s! x
- e6 p2 c5 o5 |" g
导览器除了会展现出外在的 CSS 档与此 HTML 档 内定义的 CSS 风格（如果有的话），同时还会展现字里行间的 CSS 风格。 ; {1 G% l, e1 i4 I% @& F8 d
) u0 t1 G: B% r3 W. ]0 p
如果字里行间的 CSS 叙述与 内在定义的 CSS 或外在连结的 CSS 叙述相冲突的话，导览器的展现将以字里行间的 CSS 叙述为主。 $ N$ a$ V* r. x
: V- m5 R6 C" H6 ~" M7 I4 w: K
它的写法是： 6 n* E, O# H. W( i* F
# a( \( R6 j" t7 u/ W5 I
<font class="jammer"> ]3 n, N! k1 {& g</font>
本页标题
<span style="display:none"># F- F7 ~5 c' l</span>
5 I& [: L" ` ^: [" ^* ?3 @8 r) F/ F7 @3 T; t9 W
& Y; G1 g& a' n- j" E
; C" m( V' d6 V- d( M. z% X. k
开始本页内容…
! M2 x, @" N! D& x8 p
1 j7 I4 V3 X+ s( b1 g @8 d
# p! D" _! Q. `3 O, u v8 Q8 q9 i4 s) n$ ?3 w/ ]
* b; K6 p ]6 W- z' U# Q上述的 3 种 CSS，可以同时并用，也可以择您所好，单一或成双地使用。如果各 CSS 间的叙述相冲突，则内在定义的 CSS 会盖过外在连结的 CSS ，字里行间的 CSS 会盖过 内在定义的 CSS 。 : C m0 g6 {! [
' q+ x8 N5 ~6 L3 V& c这样一层一层地推展、补充下来，使得「阶层性格调控制」清楚又有效率地帮助网页设计者，一方面中央统筹整个网站的网页风貌，另一方面又可以随著各个网页、各个文字段落的特别需要，而分别调配不同的格调。十分有条不紊，十分方便管理，所以称之为「阶层性」的格调控制。
`" S6 r( Q) J. C7 X, ^! {3 R8 E) ?" R' h2 K. x1 v" |: Q
CSS 语言的基本语法 " D' C9 R3 c# E. `
: R" ^) n9 |! t4 q
CSS 的语言与网页排版语言 HTML，在内容上有一点点类似重覆，但是语法却大不相同。它的基本语法是： H1 {font-size: 16pt;
! l& H( J& x+ H- U( _font-weight: bolder;# y6 w8 Q1 p2 ?3 R. N
color: red}
M. t* l6 e Y: m# Z
! b3 b* U1 _' ?- @1 i3 [上例中，H1表示您想要界定的标签元件为 H1，font-size、font-weight、color 这些扩充属性则表示您想指定 H1 应该长成什么模样。在上例中，我界定我的 H1 应该展现出字体大小 16 点，特粗黑体，红色的模样。
: O) }) m( b. {$ M7 [5 u: D4 T. ?* ]1 `
简化之, [$ t6 W3 f+ w
因此，顺著这个基本写法，我们可以继续定义其他的标签元件： H1 {font-size: 16pt;
* F( u6 x* i+ B: u" m2 k$ Ifont-weight: bolder;
2 {2 z! C8 f, h$ }' qcolor: red}7 x' {4 _; T/ D" b: x3 L( z
H2 {font-size: 16pt;2 Q, }0 k: ~" g* {+ x
font-weight: bolder;7 ~: d% D5 q* S4 @9 y7 q
color: red}
0 s, ~0 k! ~% j0 O' |* mH3 {font-size: 16pt;- R9 L* A$ g8 F' n- s
font-weight: bolder;
4 U) u$ S3 V1 D: N; N$ Pcolor: red}
- s# O* V) j9 w- Z4 s6 Q3 i7 a, N, z
上例中，H1、H2、H3 界定的标签元件均长得一模一样，因此我们可以将它们简化写成： H1, H2, H3 {font-size: 16pt;
% X2 g+ f) [, e: E4 q0 Dfont-weight: bolder;3 j B) d7 k8 ^! y
color: red}
, M8 g0 o W+ ^6 D( D3 {* {$ d7 n7 X% x5 l+ q" K+ W. S& @: t7 r
而如果您想要让您的 H1, H2, H3 各自拥有各自不同的风格，那么您必须一笔一笔地条列说明清楚： H1 {font-size: 16pt;) Q+ `. s. l$ a% w" H/ i: [5 K/ K& f
font-weight: bolder;/ B7 g; w$ J8 [ b# A! h
font-family: Times, serif;
K0 N4 d0 U: U2 u9 O/ H5 hcolor: red}
M9 G# f; H" [+ ]9 A, ~H2 {font-size: 14pt; _, ~, x: ?0 k
font-weight: bold;/ t. v9 T; D- k# ~! t
font-family: Georgia, serif;' W/ S. U1 j0 e4 A
color: green}
- Y9 E( q% f) C8 B0 |H3 {font-size: 12pt;
$ o' w, X, V+ g! lfont-weight: bold;
- d+ B. x* r6 x; |9 f8 R( T- ufont-family: "New York", serif;0 j- l- S# D2 N1 E; t$ G, c
color: gray}% ?# S: ~+ V# t! ~
0 B' I% Y$ D- B# F3 j1 K' I& j) w另一种简化方法- X0 @+ L5 [/ Z6 o. t R& C
虽然在上例中， H1, H2, H3 各自拥有各自不同的风格，使得您必须一笔一笔说明清楚。但是您会注意到，我们在指定 H1, H2, H3 各自不同的风格时，其实大都是在指定 H1, H2, H3 的字体表现（字体大小、字体粗细、字体的形体）。因此，我们可以将所有以 font字眼开始的叙述，整合在一个 font 大项里： H1 {font: 16pt bolder Times, serif;
- l- U# \3 s: Z( ^$ bcolor: red}
3 Y- N0 \+ K) {$ w& WH2 {font: 14pt bold Georgia, serif;
( y. Z4 \* y' Icolor: green}1 H% W- V( a# w; w8 d( a ~2 I
H3 {font: 12pt bold "New York", serif;, O3 z* |7 d8 t0 [/ c- p! ^) Q, }
color: gray}4 Q) [' C- {5 m
. k( p: \4 R( G! V! p$ n特别值得注意的是，在上例中，H3 的字体使用 "New York" 字体， "New York" 是两个字，所以必须将它 "括号" 起来。而 H1, H2, H3 的颜色规定，并不能一道并入 font 大项中，而必须另外标清楚。 ) L* E4 y0 q$ }: n- t: E4 F
# M% d `, G* P顺便一提的是，CSS 与 HTML 一样，都有「注解」的符号。HTML 使用 做「注解」；而 CSS 使用 /* 这里是注解 */。
- n) k. F* M1 P( l+ W2 K. L# R# |- n9 ^% Q
CSS 中 Font 的扩充属性
( c2 u% T/ R( A# \! q# }前言：1 |3 }/ A# e- S: M% Z! D! B
1. CSS-Cascading Style Sheet 只能展现于有支援 Style Sheet 的浏览器内，例如：网景的 Navigator4 与微软的 IE3, IE4。版本不够新的浏览器显现不出 Style sheet 规定的风格。
h' K4 ^, t2 V8 |8 l0 U& ?4 S' S
2. 本系列文章只说明介绍 Navigator4 与 IE3、IE4 浏览器 共同支援的 CSS1 扩充属性。至于 W3C 详细规定的完整 CSS1 文件，或者 网景 、 微软各自支援的 CSS 扩充属性，请到其网站的 Style Sheet 部门观看。
9 L+ y4 A e! J6 T# C! l1 }
% X; v6 e9 r. L ?/ |) R3. CSS 的写法使用大写或小写均可。 a3 @2 w3 J$ [2 i! d g
/ V6 ~, j# |, K. q{font-family: Times} 9 B+ y/ o: n: ?7 d( }7 k
$ {/ @2 u3 H; X! C
此属性用来指定字体的形体。画底线的部分可以用各式各样的字体来替换之。您可以同时指定好多种字体，以防 user 端没有第一种字体时，可以继续依照您的指示，选用第二、第三种字体。 : h5 T3 @$ I, O# `
# @8 }7 p* d6 m- c8 ?7 D参考范例：
) z+ H3 l' P& n* f; q; X, [
$ H8 C5 P/ Y" ?9 R6 }/ YP {font-family: Times,"New York"}
$ W) M4 H* k2 i+ bLI {font-family: "中黑体"} / O! u/ |6 P) m: m, M" |+ `
BLOCKQUOTE {font-family: monospace}
* F) J5 `: y8 c% w# W% P& Y' m) r7 a- d" r
特别值得注意的是，在上例中，字体 "New York" 、 "中黑体" 因为是两个字(以上)，所以必须将它们 "括号" 起来。此外，第三例中的 monospace 是用来指定写程序码时使用的等距字体。 / C! x1 |, X, H. y9 p
9 n! |! O+ R; t/ S9 Q! Y4 T0 N1 {{font-weight: bold} 4 u0 I" x" p3 o- @; Y
; R9 K6 N0 b0 f% V" {1 u# s
此属性用来指定字体的粗细。画底线的部分可以使用下列 2 组表示法来替换之： & s7 [& Y P0 f h5 }7 I3 P8 ^
% g( d3 g; X: |/ b3 j
* normal, bold, bolder, lighter
! u: ?% A' l) K1 H/ { ]* 100, 200, 300..........900 8 z& i! c' C/ @& l! ~
$ {6 \4 u, B+ k1 P7 D: Q
此属性的内定值为 normal。
4 C4 w0 M3 c/ s
& G# Q% t8 s8 O U& ~) W参考范例：
5 K- ? q2 ]2 }) m! Q( P
8 H- l; ?. `) k1 F$ d! v# b3 r* tH1 {font-weight: bolder} 3 n/ m1 _ y# \. i% S5 D
BLOCKQUOTE {font-weight: 200} , U% u% s2 h0 J/ t* _8 n1 q" b: e4 c
" N- h! v: y9 b! P$ r{font-size: medium} / h8 J7 Y" M# o5 z, ?7 d, i
+ l3 [) F$ q4 B X/ o# ~
此属性用来指定字体的大小。画底线的部分可以使用下列 4 组表示法来替换之： 3 a& f! g! W2 ^9 U; _- d- I8 n1 X
& P: a7 N1 j2 U: T4 ^
* 绝对 size: xx-small, x-small, small,medium, large, x-large, xx-large
8 ~! q2 k4 H8 \% g! K, l A0 P3 n& {3 T w3 A& _
* 相对 size: larger, smaller（与母标签相对比） ' ]8 B# X( f4 ?8 q8 y
; i& h' |' ~/ { H5 p9 V
* 字体的点数 (point): 12pt,16pt, 20pt....
( }$ s: `+ `# K0 i0 P8 \+ |( H- b! U1 v; }. w% t- a' k9 r
* 百分比: 80%, 120% .... （与母标签相对比） 7 ^) Y# J8 U" q' v/ T; l
/ {' ^7 m; H9 y3 j0 q& s2 M
此属性的内定值为 medium。 * _( B6 C u1 h
5 d9 c3 b! E% n9 q! P参考范例： ! n* M8 R8 G \* ]& E
( m, A5 ^1 e- I: _+ h
BODY {font-size: medium}
( I0 j) g7 F7 B# P WH1 {font-size: 18pt} 5 q7 h9 ]. u( r1 V* K9 l
H2 {font-size: 90%}
6 X4 {; g8 r5 G, J
/ F! s+ U/ F v+ j{font-style: normal} - W& h, n) ]5 l# L+ B
+ I* E1 h- Y0 m+ |2 V+ ]2 n0 Z
此属性用来指定字体的正体或斜体。画底线的部分可以使用 normal, italic, oblique (仅 IE4 支援 oblique） 来替换之。
" i; m7 T9 }% ^* }; L) ^* X8 |4 x2 W
1 o7 h# a8 M6 n) ~- n5 J此属性的内定值为 normal。
7 U4 K3 E* D4 ]/ b" I- r
! h. i, `. q' s* V参考范例： 6 |& r! C# g; @
: o1 R4 J0 e1 _4 yH4 {font-style: italic}
3 Q/ Z2 H4 D( XP {font-style: oblique} F' K& U3 o9 C7 s. ?
6 p. H" @# o4 O% N' B8 a{font: 12pt/14pt}
8 L! C- B: C) a; j
! U- T2 I* {5 r! l' {此属性用来指定字体的大小与每行行距的高度。上例中，12pt 指的是字体的大小，14pt 指的是行距的高度。 ' F* c) N" ^: Y5 A+ g$ n
' M6 E) I: _- G9 T: _1 w2 }/ \6 J9 w事实上，{font: … } 可以集结所有跟 font 有关的扩充属性在此标签内，所以您除了在 {font: … } 内指定字体大小与行距高度外，还可以在此标签内加入所有上述介绍过的属性。 % H/ v* O, I' N& H" x( i
% g8 l* }. t" X- m( `0 o- o- C
参考范例：
- U+ r6 ]/ {" ^% Q# O
( u+ i# [% z. v" oP {font: italic bold 12pt/14pt}
1 }# A- q# I- J3 DSTRONG {font: 14pt/18pt bolder italic Times, serif} 4 a" A5 W( b' R0 D$ C X
( [( a9 U- J+ ?2 ~
CSS 中 Color 的扩充属性
5 ?4 q& E7 r8 u1 r I, c{color: red} ' K" k3 @8 u( q, h. a! w/ c
8 ]! Y ~8 ?0 i1 R i, q! u
此属性用来指定字体的颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。
, q4 t; K8 f7 }3 n# \. O% r5 P9 C; N0 ^( O3 m0 A ]& F8 k
如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。 ! {0 l0 n2 u4 c N1 x0 n. j
6 W# I- [5 f2 @$ o" ~参考范例：
* @, J/ w# _' Z- }* h% Z7 }5 B9 r/ a& p
BLOCKQUOTE {color: navy}
& q e9 u6 {+ z' N/ E( P1 yLI {color: #eedd44}
, ?* p0 d; Z! QLI {color: #ed4}
/ ]9 ~1 X9 \5 D2 ?4 q# M" I# ]) L( SP {color: #007f3a} 6 _) Z" Y( ]& [0 e. E
& W1 {* f8 ?. z. K* a7 m# p# `{background-color: red}
4 t1 m3 v4 L* }. r
8 M% {4 A: m4 F# Z* W6 E/ c9 p( p此属性用来指定整个网页的背景颜色，或某一段落，某一区块的背景颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。
# z/ o- o: C, ?7 z) G, M! o1 }' j& C3 ^5 ]7 ?- K0 E5 D
如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。
( \( D, F! t: W: O1 [4 {& w, ]6 o& p1 G5 \( f1 v$ H
参考范例： 4 Q5 M! W" Q: t4 Y5 }9 y
. D/ S& _8 \% s- O# d0 _
BODY {background-color: #ed4}
0 `2 Q) c2 J( G6 E/ g) ]& O1 DBLOCKQUOTE {background-color: navy} 0 p* I2 B0 F! f, T" ]3 \5 D
H2 {background-color: #007f3a}
3 V8 n7 N. [& }5 N' G i4 {# J
2 K* e! i. X c! F& S{background-image: url (/images/xyz.gif)} 6 f. T* |' ` z$ F+ ^3 ?: l
* U8 V; d5 h1 [$ W
此属性用来指定网页或某一区块的背景图案。画底线的部分可以使用图档的绝对位置或相对位置来表示之。
+ O* J; N. F- }' m' d8 Y3 @. d5 q8 O& r: M$ ~# K; ]
使用此标签时，最好同时也指定一个类似的颜色做背景颜色。 ; M7 q$ Y4 }( q, a) c
n& N$ p1 E7 s( I {. [7 t+ Z
参考范例： " _6 |4 A, h* X7 Z$ h
# d$ e& F( y, p5 T1 ] XBODY { : W1 r1 t! Y$ f& L/ E. _& e! ~
background-image: url (/images/2T_logo.gif);
) O- @, a+ {+ H$ @background-color: #ededff
4 ~3 C1 _$ N7 a1 x5 Z( X4 F}
% q6 G: r% h' r& DLI { 6 w! q; D2 N8 u3 k
background-image: url (http://www.2T.com/2T_logo.gif);
6 X1 [6 S: [/ I' w# u. [# @% t! k% pbackground-color: #cef6 v( z% s+ I; c' C- R) h6 ~
}
* q f6 {9 W; [3 S) r6 k
8 i, n; P/ E, }# I{background: (…)} . m9 n% p! v7 x) {# v" X" f' b
L, D( s0 r* K7 k! j
此标签可以集结所有跟 background 有关的扩充属性在此一标签内，所以您可以将所有上述介绍过的 background 属性一起加进来。 $ c( i! K0 Q+ @! |1 A7 _8 P5 H
1 Y: e g) \7 K* u$ o
参考范例： & R& |# R& y$ Y; b0 z
5 k' ]6 a" p! E r! E, w. i) ZBODY {background: white url (/images/2T_logo.gif) repeat-y}
; N5 u- x1 B# c; qLI {background: #cc88ff url (http://www.2T.com/2T_logo.gif) no-repeat}
2 m3 l& S- S0 |$ }% t, J( d$ o" m
& s0 g) `( z9 J. k0 ^" P4 ~- `( E- a3 \7 x y, A3 n
CSS 中 Text 的扩充属性/ [* s7 i% Y% x5 ~6 F9 Q
{text-decoration: none} ! ~5 a6 q, T7 Y+ z/ B% F- V
v3 |7 h" t! c) A
此属性用来指定文字是否画有底线或被线条杠掉（如：被线条杠掉此例）。画底线的部分可以用 none, underline, line-through 来替换之。 6 g, d# J% W8 r* x% i
; q/ Z! U. O9 ~此属性的内定值为 none。
4 S6 @0 t' G3 G5 `2 Z. A: {1 s( a* D' Y0 f y
参考范例：
$ ~$ b7 d" X3 f' v$ z4 R7 H$ ]
P { ) f3 G! y( H) [3 [+ H
color: navy; + R& n9 D8 b# l( ~
text-decoration: none$ d0 |7 w3 {' `! r$ d. g# P
}
0 P& v/ j7 j: `$ W& i) E0 VA:link, A:visited, A:active { 2 k! S# x3 Q% M
text-decoration: underline " L8 m' v* s6 T# ?2 E
} 2 d8 ^4 t' l( @/ r9 L
4 e$ b+ e' X9 c* e" N X" \( H( _2 L3 ^7 I
{text-align: left}
) X7 j' w! i- ]) w5 A
% a8 s; r F, |8 X/ \" k8 p此属性用来指定文字是向左、向中、或向右对齐。画底线的部分可以用 left, right, center, justify 来替换之。 " z8 ^. X4 q7 s5 d6 S0 x0 h
7 X( ?- ?. o' x参考范例：
6 t& S9 Q/ w) u& `
v7 G3 v5 @7 S! R8 [0 n4 cP {text-align: left} 2 s3 U: L1 C! i3 J2 F% M) r% U
H1 {text-align: center} & J' V3 O! ^) O# z; x" Y. ^
; [! |: I- Y! ~* D
{text-indent: 2cm} , A0 n7 }0 [8 w3 T+ F% T# W. y
+ N" `2 c5 X% B8 `( b! p, O8 P
此属性用来指定文字向右凹进去多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。
+ |" y) G' K# K3 R
& i4 {; S( J g' w4 U参考范例： & ^2 H3 _9 R: ]& ]' C' o, @' S+ E! h% }
: a# I' M+ k8 I. p: a8 GP {text-indent: 3cm}
2 ^: c; X/ p! F$ [; RLI {text-indent: 60px} 3 }: P3 Q% C1 D2 ~9 g2 o9 ~) h
BLOCKQUOTE {text-indent: 20%}
+ O# Z8 M* m: w3 K( x0 o' m. A: Y# k8 I, H+ \/ |
{line-height: 14pt} 5 N( V/ o. Q8 e6 p
* }1 S+ W$ v" t7 N% z+ {- o h/ X
此属性用来指定每行行距的高度。line-height 常与字体大小 font-size 一起并用，写成 12pt/14pt (12pt 指的是字体的大小，14pt 指的是行距的高度)。line-height也可以用 % 表示之。 % 是以母标签来相对比。
7 v" u3 T/ t: M9 F( m8 U3 J5 H# Q6 k! J6 I5 V) M- y; ^; X* i
参考范例： + t4 n) P9 b* D" G2 f( S) b
+ u. T8 e4 t. c: R6 _
BODY { 6 T: s# l" g* ?$ p1 O/ V2 t
font-size: 12pt;
3 J( J4 u, s1 P, j4 Wline-height:14pt* p2 G Z7 c7 c. b7 {: k# }/ N( F4 J
}
A7 i& y7 i: K5 LH1 { ( ]4 Q" R7 ?5 `5 I m9 O
font-size: 150%; $ N2 z- x2 ]- G: m k
line-height: 200%6 q8 M' f, m3 s
}
9 m+ }) d. Z* d9 R, M
& I) S9 O* K5 O: m" GH4 {font: 16pt/20pt bold italic}
% g. i" F; Y- J9 d; `* p
& m5 a+ z% O2 W) e) C( F2 J0 I; [1 @8 v; l7 T" w# E
CSS 中 Margin, Padding 的扩充属性5 _4 n" c k! x! w9 n8 I0 X/ @
{margin: 3cm}
8 R4 L9 b: E! t, Z' Y8 f5 y
0 ?0 b- Q, x& w! v$ ]6 l4 k此属性用来指定网页的上下左右边缘，各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 * b6 B0 Z9 o8 D0 K* u
( W8 t; G/ p& w( J! A
margin 可以用 margin-top, margin-bottom, margin-left, margin-right来替换之。
6 Q3 x7 Q6 G! ]) u+ a! B/ e5 u
& C/ t% q3 W+ x* P1 B# ?" L此属性的内定值为 0。 4 W2 L- l4 g9 Q3 e+ s( e, T
w5 R6 \, @4 z2 F参考范例：
6 d% J4 u% c( ~; M3 { W; K; l, B% b8 J/ g2 y
BODY { # c6 \; f9 H& e' A
margin-top: 44px;
& N! Z7 W0 Y- G( `4 _( tmargin-bottom: 2cm; 8 m5 f7 K0 s( r9 s
margin-left: 66px; . {) }) U3 M6 _2 [+ K. M$ n* `
margin-right: 1.5in
) {3 R) Z X$ i} ' A7 t E# X, L% G4 ~
P {margin: 15pt}
# W4 a" t1 T1 ^4 n; k& l$ [4 |4 H% B& j* f* {- K& S
5 d+ |7 V, b/ [2 w `
8 h7 @! U$ u8 @: s
{padding: 14px}
: ?0 g' J# B& H( T
' f3 K$ D0 u' l' _ [* \此属性用来指定各段落或各区块间，上下左右边缘各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。
# ^1 s% Q" ]. h5 ]9 B4 D D5 w
$ r5 g& G" {0 z' Z2 }padding 可以用 padding-top, padding-bottom, padding-left, padding-right来替换之。 , Y9 j" V% K( L3 t0 @; f% Z8 _* A
+ _2 T8 V8 m5 N6 h s: y- x此属性的内定值为 0。IE3 不支援所有与 padding 相关的标签。 ' t- e& K6 l% x
9 x% u( r* g3 k& X1 T: G3 L参考范例： + t0 G6 t1 W" b9 V7 d0 j
& z; S5 t( D: n2 M3 h( V9 YBODY {margin: 15pt} 7 `4 L7 k6 O" v- y1 I( ?% i
DL {
+ M8 J8 S4 q6 A0 Kpadding-top: 22px; $ d7 W$ d1 v, I* R q' J
padding-left: 20%;
$ X* t* n h3 X}
+ J/ G# Z T. M2 b' a) m! H
+ S' J( }( h: j" J" r" ` , _: a2 R; J- e+ n+ V/ {& ]* f
1 \4 S M% \3 w1 Z / y5 e% C3 c( i+ N0 m$ ]
( S- X- F! H2 q) U2 l
( ]# F0 T; O+ Z- Z2 g; W' G! _
% d" k6 J0 p: L; HΘ2001-2003 版权所有：『上海博峰网络科技有限公司』 电子邮件：gf1818
6 p! \7 V9 _) n* B5 o3 U" q8 |
- J5 n' L6 i$ j. J5 \' ` |
/1 
发表于 2002-11-29 18:22:00
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
千斤顶
显身卡