|
您可以利用下列 3 种方式，将 CSS 指定的格调加诸于网页上：
$ b, x" u5 B* [
; ~" h( _8 x0 l( v& L3 s1 ^7 u5 b1. 在 HTML 档案里加一个超连结，连到外在的 CSS 档
7 b+ {" u- W, g* v( A6 a( T! z$ T! M
这个方法最方便管理整个网站的网页风貌。它让网页的文字内容与版面设计分开。您只要在一个 CSS 档内（副档名为 .CSS）定义好网页的外观风格，所有参考连结到此 CSS 档的网页，便会依照指示，反应出定义好的风格。 - u: z9 n/ a0 Y X/ u
: t! M' ?; A5 ~) P9 A8 s8 O( Y) K
它的写法是： 6 T. R( W. F0 W& q {
1 t) ~0 r9 g N3 R" { j
<span style="display:none"> n. N" u& T- E/ v) q& H</span>本页标题
<span style="display:none">! L7 i. L" Z& Y# |* [</span>+ H# X9 Z E( q
! Q" t$ M; V( @' {: l* z5 ?' z0 tHREF="http://www.xyz.com/xyz.css"
: I$ e/ \" r A7 |, y1 H9 p4 r nTYPE="text/css">2 i4 i9 H: d8 c, }- W' ]: o
D/ E' J" m$ g( H0 l, b; t- x
- _ ` y4 i! f# h1 P+ E0 }此种方法 Navigator4 支援得仍十分 Buggy，请小心使用。 7 x/ i% E7 A0 M- i" h
+ Q2 N& q0 v+ X2 B! g2. 在 HTML 档案的 ....... 标签间，加一段 CSS 的叙述文 ) y- _ | h5 C3 x0 |# F8 q) ~
; D# ` y* i' m* X) O这个方法适用于指定某个网页，除了展现外在的 CSS 档定义好的网页风格外，同时还要展现本身 HTML 档内加注的 CSS 。 4 H( ~4 P; V( T* P [) v# S
/ @( D9 k5 X2 v1 S7 B D6 ]
如果内在加注的 CSS 叙述与外在连结的 CSS 叙述相冲突的话，网页的展现将以内在加注的 CSS 叙述为主。
+ \* Z$ o1 z5 n" S! k9 }" Z) O
它的写法是：
' R% N2 h; [# i& G# I
- c9 c1 a' o0 @8 w7 O9 a; X<font class="jammer">" Z5 J0 h/ Z1 n# v0 ~1 ^5 c u</font>
本页标题<font class="jammer">8 w+ \$ Y1 b& v# ~9 v1 e</font>
9 h8 M9 y2 `+ Q0 ]2 S) l% n- z% C: ^0 }. l# d" w9 l
' o7 g K. C* q ~8 m5 F6 \
' V. J1 E# Q: m7 y. @. W0 [
开始本页内容…
% ]* t) N% {3 M i0 @) R9 D" _" k4 P6 u& ]' c: I
* @ i! T5 F- b: W
( `* Q/ P1 c' m, O- J9 w特别值得注意的是，为了防止不支援 CSS 的浏览器误将 标签间的 CSS 风格叙述当成普通字串，而展现于网页上，您最好将 CSS 的叙述文字插入 标签之间。 , k; P, u4 n% X1 e3 W- ^; ~# d0 c1 j
3 A9 o; U1 `. I; |
3. 在 HTML 档的字里行间中，随时有需要，随时加一小段 CSS 的叙述指定
+ L, |4 a2 x) M
# Q. p; Z+ N5 u3 i4 W" x1 W/ m5 b这个方法适用于指定网页内的某一小段文字的呈现风格。
5 Z8 V! l( f8 ?6 C, S @2 Z5 Q2 T% ~- t1 U* C, |3 F
导览器除了会展现出外在的 CSS 档与此 HTML 档 内定义的 CSS 风格（如果有的话），同时还会展现字里行间的 CSS 风格。 1 Q& `8 D B4 U' T$ O
9 K* ?; D! b4 d' G如果字里行间的 CSS 叙述与 内在定义的 CSS 或外在连结的 CSS 叙述相冲突的话，导览器的展现将以字里行间的 CSS 叙述为主。 9 V) {) T+ p0 \( m/ u6 l
; }$ j% A* c% C; x5 K+ r4 z' j, k# {它的写法是： - k0 Q) g0 Y3 y
+ d' Z- H9 N; o: X: d$ L+ u* K6 X; e
<span style="display:none">5 q) }' m1 c5 Q' H</span>本页标题
<span style="display:none">& B" |; e/ ?0 S& T' j) L/ B& r</span>$ h+ O; n9 W8 ~ S h
7 t& p, O" n' }, [6 R0 f3 D# ]* F& d- \' h) Y
# }+ ]/ }% X9 D n1 L" C
开始本页内容…
, W0 j5 T. N6 [ 6 z; P# g9 H* E, X p
! U8 T- s& h6 h- J+ z
# n) i! t; w% ~; m
; @: `# T+ f6 B) ^. q) ~
上述的 3 种 CSS，可以同时并用，也可以择您所好，单一或成双地使用。如果各 CSS 间的叙述相冲突，则内在定义的 CSS 会盖过外在连结的 CSS ，字里行间的 CSS 会盖过 内在定义的 CSS 。
3 J8 X; W- W W( v4 v$ i$ H# z$ M- ] i2 @* S: L, K6 X
这样一层一层地推展、补充下来，使得「阶层性格调控制」清楚又有效率地帮助网页设计者，一方面中央统筹整个网站的网页风貌，另一方面又可以随著各个网页、各个文字段落的特别需要，而分别调配不同的格调。十分有条不紊，十分方便管理，所以称之为「阶层性」的格调控制。 5 Q0 a' c( L9 _& {' b, s6 b# O0 d
- ]4 G* K$ u7 f1 n; ~! ~CSS 语言的基本语法
2 \ d+ G) u1 K9 h2 q3 q4 `0 y1 z) w$ u4 u
CSS 的语言与网页排版语言 HTML，在内容上有一点点类似重覆，但是语法却大不相同。它的基本语法是： H1 {font-size: 16pt;
* q5 O; Z1 u" b9 k" d4 tfont-weight: bolder;% e9 e; o# a7 n! J4 e4 c
color: red}
$ |& N/ V) z! @* h/ `% G+ O
0 m- c; H/ f8 Q0 k; S6 H. }上例中，H1表示您想要界定的标签元件为 H1，font-size、font-weight、color 这些扩充属性则表示您想指定 H1 应该长成什么模样。在上例中，我界定我的 H1 应该展现出字体大小 16 点，特粗黑体，红色的模样。 P- c0 l4 o( s. l6 `/ R" |
- R9 s* I& O* P% z$ o3 P简化之
& K4 E, D. X8 w' k因此，顺著这个基本写法，我们可以继续定义其他的标签元件： H1 {font-size: 16pt;
/ F# a; h7 Y, m+ [( H' d- J1 Zfont-weight: bolder;! t* v8 p* t! W; R3 R9 m, B5 H0 O
color: red}* C. T# @) Z. O3 F1 A/ s' ^
H2 {font-size: 16pt;0 B/ K7 j& {2 ^/ V
font-weight: bolder;3 f% N/ j+ j& {$ x/ p3 p" K4 [
color: red}
7 D5 K8 O! b- Q1 s q/ ^6 VH3 {font-size: 16pt;! p, Z( `9 `! a6 s3 @. `# w
font-weight: bolder;3 C& N9 {" [* K6 b
color: red}
1 W5 a" ^! O% k5 v. _( u' w+ c' b9 o! }; `
上例中，H1、H2、H3 界定的标签元件均长得一模一样，因此我们可以将它们简化写成： H1, H2, H3 {font-size: 16pt;
/ A" k& u) P8 K$ i4 d# J: w" Afont-weight: bolder;9 @( B5 v* n' z
color: red}
6 o2 \4 ~# ~# N' D
$ v$ `5 Y# I6 p0 _7 o4 R而如果您想要让您的 H1, H2, H3 各自拥有各自不同的风格，那么您必须一笔一笔地条列说明清楚： H1 {font-size: 16pt;
# d" J& F2 u3 ?+ Z* mfont-weight: bolder;
2 i: |. E+ d! }8 L+ ufont-family: Times, serif;
/ y0 [) |3 j3 O- F- f$ Vcolor: red}
# @6 ^+ j2 |+ TH2 {font-size: 14pt;
" W6 M4 S8 y: p7 M7 f+ a! ]8 f1 Hfont-weight: bold;3 S1 j. P/ r& c
font-family: Georgia, serif;
8 b* [' g& n" ]" q/ Ccolor: green}
1 Z% U0 {& D$ l' e9 N0 XH3 {font-size: 12pt;+ A! J6 k9 H0 g0 G
font-weight: bold;9 t3 J4 ]! L3 `, e& U/ k
font-family: "New York", serif;
! ^0 o1 c z6 H: u( Tcolor: gray} ?( N: U2 j1 J) H! J. E# }
% _! h. M) L' ~) k
另一种简化方法
4 w F0 h) C6 g, E' i虽然在上例中， H1, H2, H3 各自拥有各自不同的风格，使得您必须一笔一笔说明清楚。但是您会注意到，我们在指定 H1, H2, H3 各自不同的风格时，其实大都是在指定 H1, H2, H3 的字体表现（字体大小、字体粗细、字体的形体）。因此，我们可以将所有以 font字眼开始的叙述，整合在一个 font 大项里： H1 {font: 16pt bolder Times, serif;
8 R& R8 _+ `+ _7 k! Q* jcolor: red}
$ Q8 x0 o' y/ K9 o" _$ EH2 {font: 14pt bold Georgia, serif;
, H( r5 D! E g% x' @7 z2 Bcolor: green}7 X: n+ p- a9 R
H3 {font: 12pt bold "New York", serif;5 X, F/ z+ H9 |$ o) W$ @, z) K
color: gray}
; ]8 S x% |2 o b$ q% h3 P* {- \4 g% P; _. v( Y+ O3 }1 |
特别值得注意的是，在上例中，H3 的字体使用 "New York" 字体， "New York" 是两个字，所以必须将它 "括号" 起来。而 H1, H2, H3 的颜色规定，并不能一道并入 font 大项中，而必须另外标清楚。
( K0 Z4 G# n2 K3 H2 E0 b2 V: \
; |- ^5 Q4 v! S: }顺便一提的是，CSS 与 HTML 一样，都有「注解」的符号。HTML 使用 做「注解」；而 CSS 使用 /* 这里是注解 */。
@' Y% h: o2 k z
3 u' d" ]0 K1 @' y# I' H" G' H! nCSS 中 Font 的扩充属性
; R% y; A9 w& P前言：
4 `! ?. O. I4 B: r( k/ q1. CSS-Cascading Style Sheet 只能展现于有支援 Style Sheet 的浏览器内，例如：网景的 Navigator4 与微软的 IE3, IE4。版本不够新的浏览器显现不出 Style sheet 规定的风格。 / S& x" d' ?, K& C8 b9 ?
2 S `$ @& [- t6 H2. 本系列文章只说明介绍 Navigator4 与 IE3、IE4 浏览器 共同支援的 CSS1 扩充属性。至于 W3C 详细规定的完整 CSS1 文件，或者 网景 、 微软各自支援的 CSS 扩充属性，请到其网站的 Style Sheet 部门观看。 ; w# L, A* g, l7 ~) z
V$ ^; @" g5 a: e5 ]6 Z' I* v8 H
3. CSS 的写法使用大写或小写均可。
" _: X- C4 i- V! l, d# O& a* g# _ L3 p6 B5 {, T
{font-family: Times} : g6 J9 S% N5 n* u7 l, z
# ?, M3 X$ T }$ W6 \; I
此属性用来指定字体的形体。画底线的部分可以用各式各样的字体来替换之。您可以同时指定好多种字体，以防 user 端没有第一种字体时，可以继续依照您的指示，选用第二、第三种字体。
; O4 f% {* D* _# O, X* @ S( u! q2 O& z c2 j
参考范例： 9 x/ `& K8 ~, _4 ^! N. O
6 T- f4 { L c
P {font-family: Times,"New York"} 5 }, G& ^* Q1 R0 K) _- `
LI {font-family: "中黑体"}
4 [0 B5 j5 y% i/ @2 e7 D0 dBLOCKQUOTE {font-family: monospace} " `( X$ g+ n: n' X4 U$ ~, s
5 B! u \1 g+ `8 x
特别值得注意的是，在上例中，字体 "New York" 、 "中黑体" 因为是两个字(以上)，所以必须将它们 "括号" 起来。此外，第三例中的 monospace 是用来指定写程序码时使用的等距字体。
3 x# x9 H! L4 |) j1 O( g0 e" M$ f5 B. b- J( E: t
{font-weight: bold}
4 h1 L+ O( t+ h$ P$ }* h
7 q! }1 T* L( }; y* P- |2 l* `此属性用来指定字体的粗细。画底线的部分可以使用下列 2 组表示法来替换之：
* \! \) J! t; h' i7 i; `: r& D+ i: q8 S, F7 V: y4 x, L4 h: ^ \/ ?& a
* normal, bold, bolder, lighter
- R7 G; A! M9 G$ V* 100, 200, 300..........900
7 R6 G( G |3 K: I' _6 g0 {0 C, p5 B6 `
此属性的内定值为 normal。
- K' E9 C# X/ Y5 z+ w
1 Q1 L) i/ j# n1 {参考范例：
. a) B! t% t* @+ v# A- q2 } V
9 F% r' C2 D9 K9 { vH1 {font-weight: bolder} ) ?/ B& U2 H7 Y) `0 `
BLOCKQUOTE {font-weight: 200}
/ p/ }9 D9 Z8 _* m% n- k
, E5 B1 C2 f) I& {{font-size: medium}
8 m3 R2 c9 J+ T3 V4 {! C
/ _4 [% \/ l2 `( k此属性用来指定字体的大小。画底线的部分可以使用下列 4 组表示法来替换之： 3 F) H0 Q- y4 o4 J* X
; u6 c+ W5 B2 _ ~7 k
* 绝对 size: xx-small, x-small, small,medium, large, x-large, xx-large
1 L7 G& o5 ]1 _: u7 {, ^! }" s$ ?8 K7 f
* 相对 size: larger, smaller（与母标签相对比）
( m- I% H! c' `0 @) X+ W0 `& z) `& H& _
* 字体的点数 (point): 12pt,16pt, 20pt....
) {- l' H; j! F/ B3 G `- W* y! b' r6 p7 X: v8 A9 E
* 百分比: 80%, 120% .... （与母标签相对比）
- L7 K) d2 S$ ~3 ?; O1 ]
3 ? |2 G9 x& k" `4 t( i此属性的内定值为 medium。
0 T# d# T7 O+ C3 ~6 j7 e9 n$ L6 A c; B/ {' X
参考范例： : } P. F' d2 m. y' l1 a
9 ]' V" Q1 G m( Y
BODY {font-size: medium} $ Y+ Z% f @9 O3 o/ s( ?; {! `
H1 {font-size: 18pt} , v$ }; I& o% w9 ~8 z
H2 {font-size: 90%} $ ^9 e7 F. b& d
) k3 t& W6 R8 y3 j) M
{font-style: normal} # x. _. p# o- e
' ?8 a( q- b& ~5 q, G* x# _此属性用来指定字体的正体或斜体。画底线的部分可以使用 normal, italic, oblique (仅 IE4 支援 oblique） 来替换之。 : w+ N! O8 h3 Y* }4 \
6 S# G4 n& X4 C
此属性的内定值为 normal。
1 W& {* {0 }+ ?/ I5 M7 U v' b/ L% I0 ^* _) j# ^; R+ P
参考范例：
5 A3 o% n0 e2 n; G' l1 K
3 |* c! g! }0 e% O9 EH4 {font-style: italic} 2 L9 u. E( C( h9 e. C
P {font-style: oblique}
. n3 F5 E2 G+ G* H) \$ r. z4 H! G/ g- z) B
{font: 12pt/14pt} 4 B. h. t& V3 Y6 v/ R
$ b( [7 E# |9 _$ o( \
此属性用来指定字体的大小与每行行距的高度。上例中，12pt 指的是字体的大小，14pt 指的是行距的高度。 9 ?1 S4 n) n3 X$ f, F9 {& x- t
" r5 L* K: r; S
事实上，{font: … } 可以集结所有跟 font 有关的扩充属性在此标签内，所以您除了在 {font: … } 内指定字体大小与行距高度外，还可以在此标签内加入所有上述介绍过的属性。
3 C' Q) k* X2 n1 Q7 c; O) N9 N0 O& t
, s& v$ e1 s$ r" v- X2 Q3 s$ f. ]参考范例：
$ N" `" }. O6 G% A* G/ w0 U4 [4 c
1 N$ M A: A7 XP {font: italic bold 12pt/14pt}
1 N5 c! v% S4 r eSTRONG {font: 14pt/18pt bolder italic Times, serif}
' h$ H1 L5 Y% q. `3 \6 F" ^, r% _+ W/ k0 o) U5 ~2 d7 `
CSS 中 Color 的扩充属性/ t9 t& I: l( k# |- p
{color: red}
6 K. q* V5 I1 T5 r. |( D6 z7 E, ~5 X# g) w
此属性用来指定字体的颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。
0 [6 ]/ g, I4 e# V/ {! N5 |( u3 Z% l4 E& F# C2 x
如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。
6 I, v9 p' ]7 G
% [& F, J" C: {4 N! p/ J8 v参考范例：
& C4 v9 Q+ V) Z7 q5 @. b6 A# w
) \" Y; a% e. A3 }) h( mBLOCKQUOTE {color: navy}
3 ~2 B: x e) F% J8 F* sLI {color: #eedd44} * X! \& `: `( E$ l/ I5 R
LI {color: #ed4} ( P D7 U* q! g. i6 F! V
P {color: #007f3a}
; X. U) B( w$ Q% n+ x0 T3 u+ ?5 b. E/ c1 F T+ M: O
{background-color: red}
# ?; [2 D% Z/ X# f& `( C
8 I: e- j/ H2 r此属性用来指定整个网页的背景颜色，或某一段落，某一区块的背景颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。 ( e8 a- `' F+ K) y
# J" Y' U# e- M5 `3 P9 q; a
如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。 / F3 l' B1 i- a- H3 @
2 G9 n+ {1 {' i [* D参考范例：
, E9 h1 D6 t6 u7 z" @# L; R/ v* e6 |7 n/ \5 _
BODY {background-color: #ed4} $ f% Y$ J3 A" X/ L b
BLOCKQUOTE {background-color: navy} . I, W* d+ ], Q! Q9 R, y
H2 {background-color: #007f3a} ( A; E) x% {4 i @
) q& z: W: u% _3 o" n/ P: r1 D{background-image: url (/images/xyz.gif)} 0 L3 H: l4 k/ c( e
9 A' f; {* V1 B/ `' M+ C, _此属性用来指定网页或某一区块的背景图案。画底线的部分可以使用图档的绝对位置或相对位置来表示之。
4 c4 E" { @# h) i4 A8 K4 o8 r8 G' P" c. t+ N
使用此标签时，最好同时也指定一个类似的颜色做背景颜色。
: q8 u Z- v6 c8 b {. W6 B0 i- q: n2 x1 b
参考范例：
7 M! |- `) ~; }! T2 J
" s% l$ }0 |# b2 GBODY { # z' T9 @) a5 y3 t5 u$ H3 v" r
background-image: url (/images/2T_logo.gif); 6 \" c: m2 V: Y! G! C9 z& ^
background-color: #ededff+ S: s6 R; D1 ~: r& J2 `- R. \
}
: c6 \! C; _& \2 c5 R. nLI { 0 s' r, l. p2 S. h& N' N
background-image: url (http://www.2T.com/2T_logo.gif);
* D: p9 q7 D- f- \background-color: #cef
7 h! O* m, I' C. ?} 1 F' T d- q- t7 i+ @; K
$ r# I' w! x9 ` S: G2 A5 m& ?{background: (…)} + P' ]$ s6 L9 ], f T8 X* N. ~3 ^
8 z9 |2 l7 `2 V) b" U$ D8 t
此标签可以集结所有跟 background 有关的扩充属性在此一标签内，所以您可以将所有上述介绍过的 background 属性一起加进来。 9 x( e3 `$ v6 [, H& e
0 e5 D p+ O" ]
参考范例： ' [; G: G9 z2 _# S! C7 M; W$ b4 b; a
/ n2 a- q# W# S& y2 N) R* }
BODY {background: white url (/images/2T_logo.gif) repeat-y} 3 E ?: v( ~/ g7 B7 j! Q
LI {background: #cc88ff url (http://www.2T.com/2T_logo.gif) no-repeat}
9 [* j* _; z! Y! n- b
$ p1 B5 s. X3 s* h- ~( i! k( _) u& K+ R
5 m; x5 u+ H! b; OCSS 中 Text 的扩充属性
* ` Y l$ A! w{text-decoration: none} 7 {- [6 ]# D, o' i; |8 N
. V. g$ d i- ~# b7 q% b: _此属性用来指定文字是否画有底线或被线条杠掉（如：被线条杠掉此例）。画底线的部分可以用 none, underline, line-through 来替换之。 ( e+ y+ H7 _% v3 h ~3 _& s& c
1 V% [- t. _9 S此属性的内定值为 none。 ; r" M; ?% R4 C" D8 e f
6 ]0 V7 T5 s9 Z t% Y参考范例：
! k5 `/ I; G% V. c. _* F }2 ?! P3 ~. Q) U% z, a( q
P {
, F) l! @3 Y8 gcolor: navy; 8 r, G! r0 o5 L3 u
text-decoration: none, ^3 Q$ D. y4 H: f
} : O" }; E; H# [! D" ?) a* b
A:link, A:visited, A:active {
# K$ c/ z$ Z( x: M6 ?text-decoration: underline + y$ L. N5 X- B: R0 j
}
* `& ^0 j9 n( U( R3 A
$ |& S( }& @! p( Q7 n% n( O, n0 \- N0 g: j# x7 b# R! W
{text-align: left}
/ _) ^( J. n; L- p; c/ G! ^( m" y# B7 J
此属性用来指定文字是向左、向中、或向右对齐。画底线的部分可以用 left, right, center, justify 来替换之。 5 r# ?# V, V. R4 O |
2 o: |5 ~9 n1 d
参考范例： 0 o: @( j; B- ~) ~* g; n
8 l& J9 {# Z6 Q: r
P {text-align: left} 0 H& N- z6 S7 J) s' x3 C' ~$ o
H1 {text-align: center}
1 m- a- y+ H+ O" D) Q! w' o) G" k6 t/ }3 R$ z0 e
{text-indent: 2cm} " O; }: d) p5 N
; C# S! L# U6 v. r$ T. j2 K) g
此属性用来指定文字向右凹进去多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 0 g7 i& w& k- R
* \: ]. z: Z) i. E参考范例： ! V8 d$ B' w8 D% ~# U. G$ Q' E
2 Y, }/ d0 M8 V7 F6 h
P {text-indent: 3cm} . Y6 [+ h& e. R' h6 b0 X9 x
LI {text-indent: 60px}
) ^, u! [, J& }5 Q% H! ?* uBLOCKQUOTE {text-indent: 20%} 6 d9 i; [. ?4 _; C1 W
@7 G0 ?. Q: O. C! E# D% |, V{line-height: 14pt} ! w4 U- u' ]4 P" v+ r, s; d
' r7 [1 {3 o) S此属性用来指定每行行距的高度。line-height 常与字体大小 font-size 一起并用，写成 12pt/14pt (12pt 指的是字体的大小，14pt 指的是行距的高度)。line-height也可以用 % 表示之。 % 是以母标签来相对比。
7 ?4 `4 b. N4 p! r4 c1 U2 w3 }3 n- K7 N
参考范例： ( b. E5 h( E) C/ p* E- F( I
" F$ ^& ]0 [; B5 G+ h( D) GBODY {
' K# M4 n% v5 O5 K& Z" ^! nfont-size: 12pt;
& J5 |( l' L5 J& H5 w0 `! Xline-height:14pt
: R* r: s" A8 |3 k$ L( j3 {+ z}
$ [, y# J2 M% b6 P0 P* A5 u8 QH1 { 2 H. @) T, o+ F
font-size: 150%; 7 @, j: P4 I: ~# L7 ^
line-height: 200%
: i1 Z, q1 L. z}
+ _- u* t5 O6 Z0 @; z4 w/ R- r3 C" z- ]% ~$ o0 c
H4 {font: 16pt/20pt bold italic} * Z7 y8 G# L+ ?0 X, \& p
# y% i) {% [+ c2 g. R1 Z
# n) G7 x: b; f% p4 G
CSS 中 Margin, Padding 的扩充属性
% Z n+ t8 |+ h5 p: L7 x{margin: 3cm} 0 r: J1 [8 \% C! [
# `1 T. ~; E9 L! }
此属性用来指定网页的上下左右边缘，各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 % ~5 d, A! x, x. t
2 b6 a! U! M- u9 y: @% X
margin 可以用 margin-top, margin-bottom, margin-left, margin-right来替换之。
+ J% |8 x: \ I8 b( _, x5 X# y1 l9 Y0 T4 z- q+ a1 A
此属性的内定值为 0。 9 R" @; e# P0 {
5 V3 W6 J% ^7 b. R
参考范例：
" _3 B9 o& Y3 x& N4 {& k. T$ N9 I6 W+ F! d F- {% z
BODY {
) f% K8 L& l) ]+ M6 x: P. `margin-top: 44px;
# P7 m4 h& I* u, M) ~margin-bottom: 2cm;
/ |' |1 x5 r0 f" F; tmargin-left: 66px; $ h$ h: q# s, w6 q" i5 g
margin-right: 1.5in $ L2 |; k5 D$ j$ h5 S3 _) n
} 8 ]8 K7 e) X6 s# ]7 K
P {margin: 15pt}
! U- R# F6 L. s
( u! ?9 u; }* R1 V7 U9 z! q
# s& A6 R2 c. v/ \3 M& t5 g
% ^: m2 K$ n8 a/ d7 h3 Q{padding: 14px} 4 g4 Q" ~( D5 J
$ g' i8 L A+ s
此属性用来指定各段落或各区块间，上下左右边缘各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 8 `% b0 _7 \* y& F2 e6 r
; {6 |0 P) M3 k* Apadding 可以用 padding-top, padding-bottom, padding-left, padding-right来替换之。
* |3 B8 s9 ?5 a6 J
' U2 H" b* P& y8 [( A1 ^& b9 o( Y此属性的内定值为 0。IE3 不支援所有与 padding 相关的标签。
' Y% g$ `) O9 p. U& d
9 G1 O/ m$ A" J: k6 D, V参考范例： 5 r9 u4 M& T: { c7 d2 t
0 Z! n; A" ~7 S- E- F! h/ \/ C
BODY {margin: 15pt} * b% _0 @$ n) L; D' Z; ^5 {* m
DL { % L4 d X6 a+ B0 m" n! S+ q8 G
padding-top: 22px;
. T8 W8 w' E7 mpadding-left: 20%;
6 ^, ]* @. ?' s- o/ Z6 f}
4 L {% _1 C+ [1 F M
/ }. z1 z& l/ L" a/ [
- |8 @2 j( ?3 G' m1 o% A9 i. F5 u+ S
5 I1 J6 ~/ C9 `- v4 _
! |8 k, r. b+ W# V* ~! l% J
$ F$ h( S' p! w1 Z3 [/ U1 | 7 J0 [) \& q& s( Z5 h% C
( R2 o) Z7 w% lΘ2001-2003 版权所有：『上海博峰网络科技有限公司』 电子邮件：gf1818
! g+ Z3 y+ Q1 B/ ?& P
/ @9 q. g& W# K. x5 Y4 _- J4 N) O |
/1 
发表于 2002-11-29 18:22:00
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
千斤顶
显身卡