|
您可以利用下列 3 种方式，将 CSS 指定的格调加诸于网页上： # L6 G+ E( J) O6 Z
! z( \$ U% n9 p5 d4 g0 @) D x1. 在 HTML 档案里加一个超连结，连到外在的 CSS 档
y0 D7 z& S$ u, |: }" F5 g j1 ?0 ?. u c7 y! t! M
这个方法最方便管理整个网站的网页风貌。它让网页的文字内容与版面设计分开。您只要在一个 CSS 档内（副档名为 .CSS）定义好网页的外观风格，所有参考连结到此 CSS 档的网页，便会依照指示，反应出定义好的风格。
! L) z6 {1 X3 \, w# ~: Y& e* W. R! B k$ f4 q
它的写法是：
, s" E5 o% M* a/ w% P9 e7 u- m1 T r/ `8 a, P* k9 [3 `
<font class="jammer">9 F( Q5 f2 V4 @9 A& k</font>
本页标题<font class="jammer">! k0 J" [. ?( I% V; r</font>
; b9 Y8 K2 d' x+ n/ [' Y% g2 j3 g, C
HREF="http://www.xyz.com/xyz.css" 7 F: J4 L2 r& p8 G+ D* ]4 L% Y
TYPE="text/css">; N% q! T! G$ A0 m1 ]7 R7 w
. ^ r. A- X( o% Y0 ~3 t
8 B" p: p0 f. Y9 \4 d3 y" c8 M* j
此种方法 Navigator4 支援得仍十分 Buggy，请小心使用。
8 T* R& e$ U* @ \" C2 d5 D, S3 }; j, m% g. c
2. 在 HTML 档案的 ....... 标签间，加一段 CSS 的叙述文
+ G* {0 {& K1 k
7 _+ b' _1 z5 C6 V1 @这个方法适用于指定某个网页，除了展现外在的 CSS 档定义好的网页风格外，同时还要展现本身 HTML 档内加注的 CSS 。 . P' d6 s; F) u( C8 U3 v: w; z
3 {' I) T- p4 ]4 a! Q9 [ C8 R! o
如果内在加注的 CSS 叙述与外在连结的 CSS 叙述相冲突的话，网页的展现将以内在加注的 CSS 叙述为主。
% @1 x) k, l# ]4 S7 @" G, r! [- r7 H" Z* q$ c# P
它的写法是： # ~: y c9 O) D! K& x. ~7 ]( D/ Z: U
3 G4 E( T5 e% ~3 K8 v
<font class="jammer">+ B- w {& t; ^$ m7 T _) V</font>
本页标题
<span style="display:none">, `5 E8 C* H7 m( G+ K</span>7 S7 m! Q; T0 c# q4 v
% @% g/ s0 F0 j
1 H# k; T3 n" D; u1 f9 d Q7 M6 S$ I0 _
开始本页内容…' ^, ^. _ i- R! S
- f. k% d* T/ E# e% W. ]- t
* U p: J9 _/ x; l: A: q: Z& P
" Q$ i, S" `( e. k7 p. \特别值得注意的是，为了防止不支援 CSS 的浏览器误将 标签间的 CSS 风格叙述当成普通字串，而展现于网页上，您最好将 CSS 的叙述文字插入 标签之间。 & G" l: E* u; x4 F0 x% T! D
* w$ m( F$ P& ^) u" O6 T2 B
3. 在 HTML 档的字里行间中，随时有需要，随时加一小段 CSS 的叙述指定
5 K9 p/ ^+ @) d; G n- M
6 d1 N6 |5 s& J9 ^4 d, {这个方法适用于指定网页内的某一小段文字的呈现风格。
9 Y, N7 Z8 H7 {# ^4 f9 _- J. X0 M+ l! \6 b* o* X6 ^4 M
导览器除了会展现出外在的 CSS 档与此 HTML 档 内定义的 CSS 风格（如果有的话），同时还会展现字里行间的 CSS 风格。
" m3 B* D4 Z' o- S. Q
0 d6 B( F! G# ], N- D1 b4 d如果字里行间的 CSS 叙述与 内在定义的 CSS 或外在连结的 CSS 叙述相冲突的话，导览器的展现将以字里行间的 CSS 叙述为主。
+ U! J' T& H t1 J0 j
7 J' @% s- T( z6 v3 ~: V它的写法是： z0 G E D0 p+ K3 i
. q* @6 ^" R' s( b. ]' l& A
<span style="display:none">' F/ d, p5 A6 A</span>本页标题
<span style="display:none">" d; H" e% }2 L+ P</span>) {+ {& i l. J; U; g/ u
" c# I" ]) S2 q; f! Z% D: B
; c. f6 h7 o3 Y7 k8 R( N& u2 P
& e" t# F3 n" o开始本页内容…
: L- B* h5 M% |- ^) n: m! @ + ?6 R. f1 A3 `( o
" x+ F2 I: F' |1 b8 ]% e! ^, R# s, ?4 j2 c0 O9 Q9 x2 }: F
0 b2 M+ _$ p& G' X# N上述的 3 种 CSS，可以同时并用，也可以择您所好，单一或成双地使用。如果各 CSS 间的叙述相冲突，则内在定义的 CSS 会盖过外在连结的 CSS ，字里行间的 CSS 会盖过 内在定义的 CSS 。
, u: j) J( T8 W* X, g% [: ^: D5 y, v* U9 |* ^* p
这样一层一层地推展、补充下来，使得「阶层性格调控制」清楚又有效率地帮助网页设计者，一方面中央统筹整个网站的网页风貌，另一方面又可以随著各个网页、各个文字段落的特别需要，而分别调配不同的格调。十分有条不紊，十分方便管理，所以称之为「阶层性」的格调控制。 - a9 o0 f' K2 z
( K& Y, M* H& C G& @* P& L; ^1 L! x
CSS 语言的基本语法 6 M; { v+ [ M
3 F- R4 g( E: z, ]CSS 的语言与网页排版语言 HTML，在内容上有一点点类似重覆，但是语法却大不相同。它的基本语法是： H1 {font-size: 16pt;1 m0 ?) Z' {; H# i
font-weight: bolder;
, }9 ?/ b5 P. Y! R: d; a: ^color: red}& Z7 ~. T, D& c4 r5 }
$ v) [8 t% M) O C4 G9 A上例中，H1表示您想要界定的标签元件为 H1，font-size、font-weight、color 这些扩充属性则表示您想指定 H1 应该长成什么模样。在上例中，我界定我的 H1 应该展现出字体大小 16 点，特粗黑体，红色的模样。 / ]. F+ h2 ~- G; Y8 t
* v5 h. A- X+ _0 s) D5 r' v) L
简化之 T0 s: S% K- c1 Q2 f- D
因此，顺著这个基本写法，我们可以继续定义其他的标签元件： H1 {font-size: 16pt;0 w% c- w' W4 H; k
font-weight: bolder;
0 x: ^3 q/ j: {+ B( wcolor: red}
( L5 ^* @$ F1 \4 N8 d0 z; M. C1 oH2 {font-size: 16pt;
/ d+ Y0 D/ q' }& H2 V1 `font-weight: bolder;
& R/ k l1 v& p. S# X/ Wcolor: red}
( R* A6 \" C, g1 kH3 {font-size: 16pt;2 g+ j& f0 Z* C% f' w
font-weight: bolder;
+ m& m+ ^* ^$ t( E, F7 Q/ Icolor: red}
" B, a5 @5 T5 f# k! i" }( T8 X- v) X% D- @, ?
上例中，H1、H2、H3 界定的标签元件均长得一模一样，因此我们可以将它们简化写成： H1, H2, H3 {font-size: 16pt;
: ~6 j0 l) S' Z* O% [" h5 ffont-weight: bolder; Y! t$ k# Q* r2 S- T6 p' ~
color: red}
4 J: ~& g) q0 m+ M4 J# b" E( ~
$ q. T& ]1 l; |而如果您想要让您的 H1, H2, H3 各自拥有各自不同的风格，那么您必须一笔一笔地条列说明清楚： H1 {font-size: 16pt;
3 {* G4 O/ |% s) U7 w$ c0 kfont-weight: bolder;
; J) K) i# Z6 ~/ X( {font-family: Times, serif;
& _: E9 @) E0 c* X8 Icolor: red}
1 s8 i3 Y$ y l* R. c! i: [H2 {font-size: 14pt;+ m0 D, g* z* K5 Y1 H% r
font-weight: bold;
3 {+ G% `$ n6 Jfont-family: Georgia, serif;
- b) C$ d$ O2 w \' q9 V* }color: green}. B ~ k9 W4 R
H3 {font-size: 12pt;
1 n. i, w w' B' Lfont-weight: bold;- ^- m3 e$ q' x$ M) f3 Y
font-family: "New York", serif;: {& C. z& Q* S% m: Y- J! m; t' m4 U
color: gray}
. p4 F9 V) C$ A4 v) F1 m) h6 i% H7 l- O. g% o$ Q" P
另一种简化方法: S" F# e, ^% c% {' M2 |% Y
虽然在上例中， H1, H2, H3 各自拥有各自不同的风格，使得您必须一笔一笔说明清楚。但是您会注意到，我们在指定 H1, H2, H3 各自不同的风格时，其实大都是在指定 H1, H2, H3 的字体表现（字体大小、字体粗细、字体的形体）。因此，我们可以将所有以 font字眼开始的叙述，整合在一个 font 大项里： H1 {font: 16pt bolder Times, serif;
% L$ E) s* t( ~2 g Scolor: red}5 Q. z! T. Z; o( q0 V \
H2 {font: 14pt bold Georgia, serif;
0 K( D+ ^) i! Z1 l2 a L+ {1 ccolor: green}, z! Y& t* x7 X" d, j r
H3 {font: 12pt bold "New York", serif;
" T; s) _& Z" S# W% n" l6 jcolor: gray}/ c5 S% o3 L( b6 i( Q
$ h i( Z0 a0 T, S5 n% n
特别值得注意的是，在上例中，H3 的字体使用 "New York" 字体， "New York" 是两个字，所以必须将它 "括号" 起来。而 H1, H2, H3 的颜色规定，并不能一道并入 font 大项中，而必须另外标清楚。
3 B3 }9 G3 Q+ C$ @
0 ^1 j+ U2 a" T3 [. \5 H顺便一提的是，CSS 与 HTML 一样，都有「注解」的符号。HTML 使用 做「注解」；而 CSS 使用 /* 这里是注解 */。
8 ?" ]# D) s+ |8 J3 r3 i, Y4 I
CSS 中 Font 的扩充属性
2 \8 ]3 o9 A5 E+ y' x' H前言：
9 b$ G7 Q' \8 Q- d) g1 H% c* \1. CSS-Cascading Style Sheet 只能展现于有支援 Style Sheet 的浏览器内，例如：网景的 Navigator4 与微软的 IE3, IE4。版本不够新的浏览器显现不出 Style sheet 规定的风格。 2 k% {* Z' P9 D) W; g. P5 Q
* b% E6 |$ q9 A9 _2. 本系列文章只说明介绍 Navigator4 与 IE3、IE4 浏览器 共同支援的 CSS1 扩充属性。至于 W3C 详细规定的完整 CSS1 文件，或者 网景 、 微软各自支援的 CSS 扩充属性，请到其网站的 Style Sheet 部门观看。 & I* V1 U; t# x1 Y
4 p- D# H, T4 |5 e4 d6 B3. CSS 的写法使用大写或小写均可。 0 s" L' R/ j: |9 K3 {5 I
3 F, [; x+ s% ]& s/ z- s
{font-family: Times} 5 \. C8 o2 d1 A" [" G6 k
M3 B5 W4 s! T% m此属性用来指定字体的形体。画底线的部分可以用各式各样的字体来替换之。您可以同时指定好多种字体，以防 user 端没有第一种字体时，可以继续依照您的指示，选用第二、第三种字体。
@6 s% V- }7 C5 |6 M: @! C% o) M! z1 z2 v1 l& R$ I2 L. q
参考范例： 5 p- `6 F" [& D3 Q+ k% ?
5 G) B* }1 K6 S# p+ ] _8 RP {font-family: Times,"New York"}
( h' S( B3 c) ?LI {font-family: "中黑体"}
& Z! z* ?; l. C8 p* J) _* L& xBLOCKQUOTE {font-family: monospace} 6 i7 N5 }: H% k9 c% R. ?
" k: L! B3 c. M0 _! E7 m+ W特别值得注意的是，在上例中，字体 "New York" 、 "中黑体" 因为是两个字(以上)，所以必须将它们 "括号" 起来。此外，第三例中的 monospace 是用来指定写程序码时使用的等距字体。 7 e6 {, o9 f m1 O
; E% t3 o: T# d
{font-weight: bold} $ I" c; I9 X# b- C
* H/ F& r% T0 c, q此属性用来指定字体的粗细。画底线的部分可以使用下列 2 组表示法来替换之：
]: W4 `( V: Q( f! x# q# Q% c) L
; m, h$ m% U8 |9 P g* normal, bold, bolder, lighter + I& I* u/ Y/ W4 P1 |& Q
* 100, 200, 300..........900 3 k1 k, l2 M. k2 D: L
1 L0 x0 D4 d' D此属性的内定值为 normal。
$ F5 z+ J3 u# l2 @0 a f2 v# |6 o! a* z+ I1 l) _7 m: h+ Y
参考范例： - h' L+ b+ ?6 j- g
! P0 V% Z1 i( N# u% g: i
H1 {font-weight: bolder}
! ?+ d+ O$ c0 c. |0 ]/ i, I% c* GBLOCKQUOTE {font-weight: 200} 8 T0 z2 ^" L! p2 f
) o! G9 Y9 l e* a
{font-size: medium} ' v1 i! g. y( h8 b
8 s4 i o; F, Y4 r6 i3 e- ?
此属性用来指定字体的大小。画底线的部分可以使用下列 4 组表示法来替换之： 8 o* j9 p F1 W p, P( d
, o, \- c: ^( y/ I3 L8 B* 绝对 size: xx-small, x-small, small,medium, large, x-large, xx-large
& Y0 W2 W: F' F0 F4 n' f/ K1 t0 o: M6 n# V4 x; a
* 相对 size: larger, smaller（与母标签相对比）
6 ^1 S5 d8 D4 U$ i: V# v
9 I# q! Q+ _8 H, o" u* 字体的点数 (point): 12pt,16pt, 20pt....
$ T3 i2 T: x; c- \
. v' S" x9 l! N* 百分比: 80%, 120% .... （与母标签相对比） 8 t: e( Y, V( V
$ x* u, K5 b' Y6 U) X' ^+ d
此属性的内定值为 medium。
) I$ m+ v2 d$ |- ^0 S3 w& S3 D' c
& Q% d X. g* C) H$ i参考范例： * `& x6 V1 y) `9 \4 X/ ]
* n& ?* M# H5 m( a! p# d
BODY {font-size: medium} 6 z0 j1 |, |: [4 ~9 P
H1 {font-size: 18pt}
' o b* S+ _& _) o2 m9 M; [H2 {font-size: 90%}
( H# N* j1 r8 p8 `* I& `% r5 N) Y, m! _4 b
{font-style: normal}
1 F& x* }7 N4 L) v9 S1 ~4 Q6 C
+ O( f5 x0 Z# o此属性用来指定字体的正体或斜体。画底线的部分可以使用 normal, italic, oblique (仅 IE4 支援 oblique） 来替换之。 ' {5 f6 M5 z$ O
4 @/ G) ^8 U+ U! P' c此属性的内定值为 normal。 - W2 i. b6 w* n, \6 q ]3 v0 J+ o
9 ?( k' `3 J. T9 F3 w# X
参考范例： & N! N2 c+ |- G* M
/ f' u7 e/ O% b3 O1 i! PH4 {font-style: italic} 7 H w( B- \4 j, t5 C
P {font-style: oblique}
: B" y7 _5 o! ^* _. B m
$ d8 i# o. H& q& f{font: 12pt/14pt}
% h2 k& ^) A4 O, G1 P$ `4 b6 r9 S4 S X( _% T/ w
此属性用来指定字体的大小与每行行距的高度。上例中，12pt 指的是字体的大小，14pt 指的是行距的高度。
3 l: e) H" Q' o1 G- r( _ Q
- K2 u9 E) D+ N* Z8 h) T8 N& i: _( g事实上，{font: … } 可以集结所有跟 font 有关的扩充属性在此标签内，所以您除了在 {font: … } 内指定字体大小与行距高度外，还可以在此标签内加入所有上述介绍过的属性。
2 q8 d2 [6 N! c* |* B; B, t, A: N( i' W& y# `
参考范例：
7 C: m7 u; A1 W# u8 v3 L! U; [" M
# e) J: ?4 Z, e. c z" iP {font: italic bold 12pt/14pt}
8 O+ k# l) i5 v$ eSTRONG {font: 14pt/18pt bolder italic Times, serif} ; o% e5 l' o, H. _- `& j @
! g7 g2 c* e1 t' j$ U: N
CSS 中 Color 的扩充属性- O q y8 M+ p
{color: red}
/ P B7 ?% B' m# a- q. b. j/ y- b
此属性用来指定字体的颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。
( k! M" i6 s1 h4 B1 _, M" G C, b$ t) S: ?
如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。
( P x# m6 e0 y% K
& I3 {/ F8 w7 r' k参考范例：
$ Q9 H- _5 k- k# G' n
$ J" M# N- V2 jBLOCKQUOTE {color: navy}
% u0 A' o$ o8 l( a& c% n+ |LI {color: #eedd44}
: d# U! }( Q3 w" G, S2 SLI {color: #ed4} 4 K4 {: |* d; h9 i3 V
P {color: #007f3a}
: x$ Q/ Q1 G. \/ d9 Z9 f* k( W5 C' |4 m; P$ K5 ?6 N
{background-color: red} , U+ e3 Z8 Q9 L, ?) G5 F4 p
' r( w1 v3 L! U7 ^* p& ~此属性用来指定整个网页的背景颜色，或某一段落，某一区块的背景颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。 ; E `; E) f9 @; x) f+ l
, l \# A- `) J
如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。 $ k9 J/ p1 _, U' r3 e$ @! E
. @0 W+ v) A* c
参考范例：
7 @. T' _1 {8 T$ @! }: [: U) }8 b F. K8 j* r
BODY {background-color: #ed4} + g% q2 H: e9 Z# T
BLOCKQUOTE {background-color: navy} * I* k; x- `' N% o
H2 {background-color: #007f3a}
( r: I4 S. s2 |3 F& d7 s$ t7 w: h9 n8 e, N2 c ? ^- j% n
{background-image: url (/images/xyz.gif)} 2 P5 c6 h( p0 w: \: I
( W( {; {# Z1 d
此属性用来指定网页或某一区块的背景图案。画底线的部分可以使用图档的绝对位置或相对位置来表示之。
1 b% \: S1 S! q$ D ]
# Y" L4 ?2 ~5 p# I( `7 ?! J使用此标签时，最好同时也指定一个类似的颜色做背景颜色。
) p; D. _+ x. c' s7 R$ Y2 ^" o z2 E* P3 N- E/ |
参考范例：
5 J& C* N# E- V7 L! l3 s& a
/ g. y2 l5 ]: FBODY {
$ _' K5 \4 N0 A, `4 i% k# J/ F! p/ H& @background-image: url (/images/2T_logo.gif);
. H' b1 f* ~; F7 i/ jbackground-color: #ededff
7 T8 ^6 m3 ]3 G, ^' K7 l F}
) ?: A3 i& b( \3 O7 I% P/ Y+ ULI { ( C( n8 g+ ~6 `# [+ t
background-image: url (http://www.2T.com/2T_logo.gif);
* Z& N @) v) w( N, U' hbackground-color: #cef# n) Q2 f/ z( P
} i! Y$ B) x( a) R& }: l: m
# s3 t0 T. \% i) a
{background: (…)} * {+ c1 Z8 e1 |" j {: \# a
2 b8 m5 f8 I; N2 B$ S* I! n
此标签可以集结所有跟 background 有关的扩充属性在此一标签内，所以您可以将所有上述介绍过的 background 属性一起加进来。 9 [: W5 x; S# O$ |
9 ]" X0 A4 T: H) f
参考范例：
$ J" }+ f* Y: f" G$ s3 w. f& K( e! R
BODY {background: white url (/images/2T_logo.gif) repeat-y}
8 ] f$ E& E0 m9 |1 MLI {background: #cc88ff url (http://www.2T.com/2T_logo.gif) no-repeat}
! D( [' ?& x% j# w* G- _ J* N& \* a5 _# o& m
; ?- Y3 H' {+ i7 H7 t' o( fCSS 中 Text 的扩充属性1 X+ U, t/ M9 O
{text-decoration: none} ) m X+ o7 Q* |: \# A: \
4 ]6 r- z9 b& F( k9 U此属性用来指定文字是否画有底线或被线条杠掉（如：被线条杠掉此例）。画底线的部分可以用 none, underline, line-through 来替换之。
- Q* D4 c& O. |- X( O5 S! @3 e
& q' N+ o8 x: p |* G! _此属性的内定值为 none。
" t3 L& @7 i. p1 S3 d
4 C& E/ J/ w; u- q4 c7 k, k参考范例： ! [( G4 b8 k1 D6 Z2 r; H
- B0 c( P* L% C4 h. z# Y0 q
P { 2 q; b" o! l; G$ @, n2 U, |1 }
color: navy; ( y F- t" w, [$ J3 P. ^8 }
text-decoration: none$ Y# K$ A/ W6 a4 X4 V
}
! I$ ?7 B* Z2 y4 c7 d; JA:link, A:visited, A:active { $ }7 U! Q- q: t7 l! }
text-decoration: underline 7 ~' S* ^5 K1 ]3 c m4 Q
}
- U1 z3 {; N% W& E
& ~+ y @# Z7 H( _. \( v$ c7 N& a1 t! X
{text-align: left}
+ G' U3 P/ ?! ^, ^
6 v" ~5 i1 Y; m; X+ o9 G# N. }2 f此属性用来指定文字是向左、向中、或向右对齐。画底线的部分可以用 left, right, center, justify 来替换之。
& E6 z% k9 W' l
- L8 b0 q0 ~# d+ {% d- A& l; I参考范例：
- |% P- M3 z0 k7 D% J \- Z: b) G& b# S, u) r% X) U) R7 z/ U
P {text-align: left} 0 s. M4 I6 t! P5 o' U
H1 {text-align: center} - k9 d/ a( b! l5 I
( B# M2 n5 ? N1 B1 E{text-indent: 2cm} , s) E, U& X K# K3 n
9 g# O' t" F, ?" r此属性用来指定文字向右凹进去多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。
O0 h9 t: H% r5 S- j
+ ~; T( R; j- a* Q+ _# T参考范例： ; _0 g3 j, }6 E* Y/ T# Y4 k: Y
+ p( e. B, p4 p0 L' p9 J
P {text-indent: 3cm}
0 Y, |7 i5 w) r: t3 z* Q) sLI {text-indent: 60px} $ l/ ~$ Z, }& d' P! Q
BLOCKQUOTE {text-indent: 20%}
4 O% ] W$ N* {4 I W1 d
5 `; P+ n( q5 G{line-height: 14pt} & D$ d1 X, G; a" c# C: @
- K$ V4 _0 n: @- J7 O0 Z- m' z
此属性用来指定每行行距的高度。line-height 常与字体大小 font-size 一起并用，写成 12pt/14pt (12pt 指的是字体的大小，14pt 指的是行距的高度)。line-height也可以用 % 表示之。 % 是以母标签来相对比。
( J4 S" u* Y8 T+ U4 |
" M* @& N, j( k8 x4 \参考范例：
9 e [8 r/ j( |% ^6 F0 X
& C. u6 J5 n7 Q v1 @8 ]$ ]' e& ZBODY { ' O: ]/ e. i, |; O" n: z
font-size: 12pt; ' u# \" E8 ~, q
line-height:14pt& r) h+ A f7 b6 Y. z' n" {3 v
}
- \3 d; S, B, H8 pH1 { / B" y7 ~% S/ i% ` B3 D
font-size: 150%;
8 E/ ^% t3 S6 ^line-height: 200%
: w, T9 L' @& ~: a} " s- R' o0 j6 A
$ W% M$ v1 F/ fH4 {font: 16pt/20pt bold italic}
2 A- Q8 Z5 |& _+ i- U' l" M
) {) L, u. |. ~% i3 m7 ?+ p6 D6 R; [
: |8 M ?# C* I# P8 O1 g8 B3 fCSS 中 Margin, Padding 的扩充属性
; X% I! Z6 c P{margin: 3cm}
0 H4 k& m2 V' I5 n% f ` o5 R: [3 {4 L) f
此属性用来指定网页的上下左右边缘，各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。
, \9 M, b" ^+ K+ j+ W
3 J, N" T( B' ]margin 可以用 margin-top, margin-bottom, margin-left, margin-right来替换之。 % a. J, y4 t7 I9 n) V6 d
! Q8 J6 v$ k6 p$ `$ m# ~
此属性的内定值为 0。 # ]# ?4 Z. {: F: S2 A3 W2 i
( \, r: p# n6 h" j# t8 \
参考范例：
5 x9 g& b. p5 O$ W4 @; n7 o; k! H- N
, K) z" }; Y/ bBODY { 3 f" p+ e3 Y0 B4 o9 i
margin-top: 44px; 6 t3 U4 U. _3 |/ y( K
margin-bottom: 2cm; 6 r4 s9 [3 u) h1 N+ H
margin-left: 66px;
* O5 ]2 `% t7 Rmargin-right: 1.5in
' W9 a. u$ v+ z$ ]7 _$ H}
2 V" r" {4 q3 q1 y/ MP {margin: 15pt}
" H1 ~' O: O9 l
3 f' q1 Y* `: B) N8 q% [9 @" T: B; q1 j/ K8 ^* I; O
2 T% G! U& f/ \% [" ~) J0 I{padding: 14px}
8 o; U: }1 \: m# T0 O, j7 t' r# ?2 }' L
此属性用来指定各段落或各区块间，上下左右边缘各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 1 D( h+ T5 ]# q! |
% C% h2 k! T/ S6 U* m) b7 N. @- Q1 L% Lpadding 可以用 padding-top, padding-bottom, padding-left, padding-right来替换之。
% @; Z5 W* [% Z+ d( j+ a; x8 a/ O, ]' \" A h+ ]. w3 l# Z* W
此属性的内定值为 0。IE3 不支援所有与 padding 相关的标签。
! |7 j$ z% k) v% }% i4 N, E/ t' b/ s
参考范例：
, q9 f( E9 f/ B% h/ M, Z" L' z" i" t9 w; s
BODY {margin: 15pt}
{7 U5 S A8 V* S, r8 RDL { 9 n0 N' T+ W& K Q5 @
padding-top: 22px; ! X/ t- T+ l! ]' |" B5 r0 W4 W7 {7 C
padding-left: 20%; ! E" p* b, ?" Z& i9 e$ }/ H
}
2 S7 @* B" \. E( y: M$ {4 [ 1 V7 \' r) n! ^9 c3 X) y$ j
; ~$ `* s6 D0 h% o2 \7 a9 W6 [: |
/ Q1 b- ~9 v; p& |0 \- ~ / ^ i* K& l8 t6 U9 t$ ~
: p' ]& J3 h& c3 d
4 b0 D0 U# ?4 f# S& q
$ V/ B6 P9 W. P9 O6 j0 e8 jΘ2001-2003 版权所有：『上海博峰网络科技有限公司』 电子邮件：gf1818
7 y0 L D2 X+ S * U' R& u/ s" i
|
/1 
发表于 2002-11-29 18:22:00
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
千斤顶
显身卡