|
您可以利用下列 3 种方式，将 CSS 指定的格调加诸于网页上： & T0 i# e2 b9 t' Y/ T5 \# m
4 J9 W3 p/ z: Y+ n( c' ~- S; p B
1. 在 HTML 档案里加一个超连结，连到外在的 CSS 档
z" r4 n) F% }! F/ I' G, t4 o( P4 m3 D0 _
这个方法最方便管理整个网站的网页风貌。它让网页的文字内容与版面设计分开。您只要在一个 CSS 档内（副档名为 .CSS）定义好网页的外观风格，所有参考连结到此 CSS 档的网页，便会依照指示，反应出定义好的风格。
3 K% ?, G/ R- s+ p D, j8 _
% F2 [! Z& o& b- }# N- M- h! W& v它的写法是：
- a% v2 x; b8 R2 F- k4 s- ~- ~
) S. s* n' c( H( K+ k' g5 ]6 I1 `<font class="jammer">5 i. f* {5 o; ^- G2 @</font>
本页标题<font class="jammer">. I( q# ?7 C/ D! |* m</font>
- f1 W9 C+ l- m2 e7 h5 [
, _! x/ a" M* |
HREF="http://www.xyz.com/xyz.css" 6 G; ?, G8 S9 S ^7 r! H6 |
TYPE="text/css">
5 J8 |3 @/ I v: O4 C; l/ P/ t+ r' y( u* J3 e+ X% f; O3 r' } Y# F- x
+ | y5 L9 x, u此种方法 Navigator4 支援得仍十分 Buggy，请小心使用。
% n# y ^ W. M! n3 V5 ?6 j/ o$ N3 i
2. 在 HTML 档案的 ....... 标签间，加一段 CSS 的叙述文
5 B0 m: ?6 O- ?5 s* j, J. m
1 ~% J+ ]! I8 w/ I3 |; n5 g这个方法适用于指定某个网页，除了展现外在的 CSS 档定义好的网页风格外，同时还要展现本身 HTML 档内加注的 CSS 。 0 f" e, `3 e1 z
' T+ x' @ ?) e# z
如果内在加注的 CSS 叙述与外在连结的 CSS 叙述相冲突的话，网页的展现将以内在加注的 CSS 叙述为主。
( G4 a: _' D7 I! c' O8 _4 P0 M0 O* a# P% p& \
它的写法是：
! j/ A$ i0 o- X: V( l4 g
/ c' R& o" ~8 U+ W! N: a) F; B
<span style="display:none">! T9 t6 _2 y4 T4 x</span>本页标题<font class="jammer"># x) j7 R3 F% r* I. i</font>
4 I3 ]; z2 J. L: F. n- }( Q
4 M+ R2 |1 X9 Y" e' H
+ E, P6 }7 Q' T: M
$ @ Q# X2 U: ^开始本页内容…+ b% |! ?6 ^6 F) p7 X: n
% i0 q1 Q+ u. A0 Z" |
) Y/ h9 g2 A/ G2 k/ N* U% Q
9 m$ y) S/ S) C& l& b( n4 @特别值得注意的是，为了防止不支援 CSS 的浏览器误将 标签间的 CSS 风格叙述当成普通字串，而展现于网页上，您最好将 CSS 的叙述文字插入 标签之间。 3 ?$ x. y0 i8 ]: {6 S. e; o* q, [4 V* C1 W
. E' z+ W5 `" y+ W
3. 在 HTML 档的字里行间中，随时有需要，随时加一小段 CSS 的叙述指定
, d; U1 c% l% r& n! l2 ^ }* H" p' Z9 a3 K4 P; i
这个方法适用于指定网页内的某一小段文字的呈现风格。
* [1 Z, @. x3 w- w) Z. r
& e( o, u$ z# k1 j& B& j5 y导览器除了会展现出外在的 CSS 档与此 HTML 档 内定义的 CSS 风格（如果有的话），同时还会展现字里行间的 CSS 风格。
. H+ s7 L' p. i! x: i" B; i& J( A1 `4 m1 K) B" [. l
如果字里行间的 CSS 叙述与 内在定义的 CSS 或外在连结的 CSS 叙述相冲突的话，导览器的展现将以字里行间的 CSS 叙述为主。
\5 |( B, [* g' A. `, Q( Z A6 E! K* A% [! X8 L
它的写法是： 6 C' m& j$ \1 a( T
3 z' B a6 M/ k2 J
<font class="jammer">2 v! {4 K! ~$ `, Y' U* R9 ?</font>
本页标题
<span style="display:none">0 L: d+ V! j6 n/ [8 z" R- G</span> e2 Y% x s2 e3 S
" r% q1 d! w o# Y- x# X/ R
4 L: _% L& P2 g6 r9 M8 h$ a
( o- ?# ^3 \$ O0 d: M1 `% W开始本页内容…" g/ u- q8 A( y! _2 d' o
! E* _! s8 ^$ c9 G1 W
! B& S4 d a2 @% p. @
k% e* e3 w: G$ m, a2 n! T7 u5 W3 [4 Y, f4 v- e1 I! [
上述的 3 种 CSS，可以同时并用，也可以择您所好，单一或成双地使用。如果各 CSS 间的叙述相冲突，则内在定义的 CSS 会盖过外在连结的 CSS ，字里行间的 CSS 会盖过 内在定义的 CSS 。
1 s4 [. o! S+ B# P5 U
# |; X. q3 u8 H8 _/ Z( _9 z/ l/ f% [这样一层一层地推展、补充下来，使得「阶层性格调控制」清楚又有效率地帮助网页设计者，一方面中央统筹整个网站的网页风貌，另一方面又可以随著各个网页、各个文字段落的特别需要，而分别调配不同的格调。十分有条不紊，十分方便管理，所以称之为「阶层性」的格调控制。
. Z3 d0 y3 a5 @( A) X" p
3 U- u* [2 B5 Z, r# VCSS 语言的基本语法 - `9 l7 j0 M, b; m8 d( u
7 T6 [) @$ e$ [) U" `3 @
CSS 的语言与网页排版语言 HTML，在内容上有一点点类似重覆，但是语法却大不相同。它的基本语法是： H1 {font-size: 16pt;8 I2 E0 e/ O4 G9 L2 h% q
font-weight: bolder;
% Z, U' S0 F4 lcolor: red}! g; ]" U* Z' r- @$ ]8 x
1 _& V8 Z7 B. r: h' Q( t上例中，H1表示您想要界定的标签元件为 H1，font-size、font-weight、color 这些扩充属性则表示您想指定 H1 应该长成什么模样。在上例中，我界定我的 H1 应该展现出字体大小 16 点，特粗黑体，红色的模样。
9 y X2 j3 \, n' W X% _6 n" G1 h" H
简化之
( B" ]! b& n$ A4 j: E4 C* d因此，顺著这个基本写法，我们可以继续定义其他的标签元件： H1 {font-size: 16pt;
% D$ Y' n! e2 S, R0 T' {font-weight: bolder;' }( A5 x4 Z0 |; u% o3 j
color: red}
; p8 J5 m" I) }: a' QH2 {font-size: 16pt;
! T {9 z& ^, ^9 m& N- Lfont-weight: bolder;3 _( y( n9 e t6 [% J- J6 I' ]4 U; a
color: red}
: M8 s2 f+ p& e2 ]H3 {font-size: 16pt;
' K& v- `, ]6 {4 Wfont-weight: bolder;
6 f9 Y5 d2 t1 g3 fcolor: red}$ T; ?4 E. R. V* `9 V0 c6 y
- Q$ Q. B0 _: w/ ^5 r" [' I) y; V
上例中，H1、H2、H3 界定的标签元件均长得一模一样，因此我们可以将它们简化写成： H1, H2, H3 {font-size: 16pt;
$ M$ @' L* \% kfont-weight: bolder;) n7 I- `1 J+ ?. V; z- H, W
color: red}
5 }& X% v4 n7 Y. D4 e4 j9 v5 T( n- c, Y
而如果您想要让您的 H1, H2, H3 各自拥有各自不同的风格，那么您必须一笔一笔地条列说明清楚： H1 {font-size: 16pt;
* F9 @) ~7 H" L, W! @( ufont-weight: bolder;, @* s) M( n7 y- n) j
font-family: Times, serif;
9 q+ }9 o8 n( b d9 _color: red}
1 K3 T2 m3 r3 v6 Q+ T. H' LH2 {font-size: 14pt;4 q, U# D/ R, _! t; U# L
font-weight: bold;6 t# r" o2 S0 ?8 j" o; {( F2 g& b9 o- F
font-family: Georgia, serif;
2 C$ o1 D5 H- L6 Y3 qcolor: green}
! S4 n& I$ M+ f1 u% H! UH3 {font-size: 12pt;! U; v' @+ c* L) Y
font-weight: bold;+ {/ D/ o9 k" [& C
font-family: "New York", serif;* k+ q4 P6 P* W
color: gray}
5 B& S3 B( U$ p
. N& i2 q$ w% _7 T' D另一种简化方法; o5 d3 t2 D) p( ]! E1 T/ U: i
虽然在上例中， H1, H2, H3 各自拥有各自不同的风格，使得您必须一笔一笔说明清楚。但是您会注意到，我们在指定 H1, H2, H3 各自不同的风格时，其实大都是在指定 H1, H2, H3 的字体表现（字体大小、字体粗细、字体的形体）。因此，我们可以将所有以 font字眼开始的叙述，整合在一个 font 大项里： H1 {font: 16pt bolder Times, serif;
8 [, {2 G* ~7 H' ]color: red}
4 j) j8 z$ w( l0 ^2 R3 \" HH2 {font: 14pt bold Georgia, serif;
' g. z4 _& S( S% i0 Pcolor: green}
. q( l$ l! T" i; B' OH3 {font: 12pt bold "New York", serif;
, i. D6 u3 A$ K6 t* N8 R. P2 d0 gcolor: gray}
- w/ @1 w; {- F% M/ q# V4 ]8 O+ N3 g# R, N8 p7 j
特别值得注意的是，在上例中，H3 的字体使用 "New York" 字体， "New York" 是两个字，所以必须将它 "括号" 起来。而 H1, H2, H3 的颜色规定，并不能一道并入 font 大项中，而必须另外标清楚。 ( x, s& E' E# v% `; Z( l
& ?% c- J, O4 ^
顺便一提的是，CSS 与 HTML 一样，都有「注解」的符号。HTML 使用 做「注解」；而 CSS 使用 /* 这里是注解 */。 : p2 S' X/ y% O1 ?& ]
; H1 ~. C+ y* t) u
CSS 中 Font 的扩充属性
. \0 |9 P+ [( _+ x7 L/ f前言：8 @/ ~ \# ]/ i" A5 w3 v( T
1. CSS-Cascading Style Sheet 只能展现于有支援 Style Sheet 的浏览器内，例如：网景的 Navigator4 与微软的 IE3, IE4。版本不够新的浏览器显现不出 Style sheet 规定的风格。
. U0 p* d9 H7 q3 F, l' d: [( i( N: U; ~ [3 d
2. 本系列文章只说明介绍 Navigator4 与 IE3、IE4 浏览器 共同支援的 CSS1 扩充属性。至于 W3C 详细规定的完整 CSS1 文件，或者 网景 、 微软各自支援的 CSS 扩充属性，请到其网站的 Style Sheet 部门观看。 : V5 e& C# }) K! P* c x
8 p2 m8 P' Y+ w- o: V) n* @: Z
3. CSS 的写法使用大写或小写均可。 + ]2 M) M, G1 m0 B
" v0 B" z2 R( Z4 p! E4 e: i{font-family: Times} * _ ^' _" V# R, H' q' w$ [
) }7 \. n+ x! d$ k) D
此属性用来指定字体的形体。画底线的部分可以用各式各样的字体来替换之。您可以同时指定好多种字体，以防 user 端没有第一种字体时，可以继续依照您的指示，选用第二、第三种字体。 1 z' t* c0 @5 V! y: G i* g
7 _& y1 d1 R: L
参考范例： $ Z' `! a% m) O) N" |! f
" g5 v/ ^" a0 Y* E2 D( v4 RP {font-family: Times,"New York"}
+ z+ ~( F8 e- U5 Y& e) @LI {font-family: "中黑体"} ( V2 C, n' F6 o2 r6 ?
BLOCKQUOTE {font-family: monospace} 9 T3 a2 c# d# \; `7 k5 V4 l4 E' j" j
/ ~4 G5 \( P" I7 d( U特别值得注意的是，在上例中，字体 "New York" 、 "中黑体" 因为是两个字(以上)，所以必须将它们 "括号" 起来。此外，第三例中的 monospace 是用来指定写程序码时使用的等距字体。 * d' a1 d% n5 H |* V
; K' R$ m$ P9 g, v3 h0 s* B4 Q8 g{font-weight: bold} 0 h. Z5 n- C5 g* V
) p% _: j4 J+ |
此属性用来指定字体的粗细。画底线的部分可以使用下列 2 组表示法来替换之：
$ L' p6 e! o- }1 Q/ `& {5 a# q- Q) I! F2 W4 {
* normal, bold, bolder, lighter 0 y. E: |6 H2 [; \5 t& V' A
* 100, 200, 300..........900
# S$ b: h4 _+ v+ ?/ n2 a1 N. [& @* {& ~5 U# U2 G7 T
此属性的内定值为 normal。 9 i) M+ A7 d; K0 \, X
( v% Y- \9 J5 \ I# e4 x参考范例：
1 O# F/ [1 ~# T- | w G+ U& _5 ?8 P! c. i
H1 {font-weight: bolder} * s. T' e) m3 y a4 V( R V
BLOCKQUOTE {font-weight: 200} * d" g( }* J( t' @
- p) ]( d! C+ i3 B$ z0 g{font-size: medium}
$ D; g% [( g( G F7 |4 C5 T7 n' w- P$ @
此属性用来指定字体的大小。画底线的部分可以使用下列 4 组表示法来替换之： 3 o1 w7 v8 @: @& C$ l1 \& x/ {
" S- J w4 p. D& H8 t7 X$ p* 绝对 size: xx-small, x-small, small,medium, large, x-large, xx-large ' |9 w+ o% _& ^6 l" H5 j* K* c! H- g
# A$ }& ]% i4 X) O! z* 相对 size: larger, smaller（与母标签相对比）
2 Y- x( \; P- S b
$ R. b- k! }% G' I* 字体的点数 (point): 12pt,16pt, 20pt.... . d. x( ~ Q) T9 A1 {
. `( t. S* n: ^$ g1 `$ z
* 百分比: 80%, 120% .... （与母标签相对比）
! H4 ~. |- C O2 Q. w; }# ^8 E5 U% D3 O
此属性的内定值为 medium。
& V4 s9 P$ e9 G# @, o$ n' R& U
* Y9 u" E# T. v0 c+ ^参考范例： 9 A" B6 c, O7 u0 b, h) x
- g: ~6 R( q( t$ _, p- V& V( K# s
BODY {font-size: medium}
2 I6 m3 ], G1 ?4 v. p9 [8 YH1 {font-size: 18pt}
# w" a6 v* |; T- Y" F, ]5 y" x$ FH2 {font-size: 90%}
$ n: N+ \; A$ K& ] f0 z0 U; ?% K. Q {# g( T$ o2 q+ f7 c j/ y7 x
{font-style: normal} 4 e$ R3 d1 @; X8 |7 |7 N7 r
8 g2 U" ^$ B& ]# E
此属性用来指定字体的正体或斜体。画底线的部分可以使用 normal, italic, oblique (仅 IE4 支援 oblique） 来替换之。 . w8 }9 `" P- E$ `
0 Q( i, c& J: V8 I% O# x' ^# G* d
此属性的内定值为 normal。 7 x2 l% A* Y1 R3 t/ E; t
1 k( P. Z# \4 y0 z参考范例： , n7 V( _% W8 s |0 o9 h: i
/ j' Q4 y7 o) N6 ?
H4 {font-style: italic}
# ?- x: A( d* zP {font-style: oblique}
1 c- \, W1 I# I) @- |
, I! ]2 Y0 Z, A2 K! n# @/ P{font: 12pt/14pt}
( F+ ~/ Z( q: [+ k2 q
4 ^6 \8 l% F- S& V9 Q此属性用来指定字体的大小与每行行距的高度。上例中，12pt 指的是字体的大小，14pt 指的是行距的高度。
+ v$ x% |+ \6 u- b- k" ?; f; Q* ?5 K I0 s; R% J8 Z
事实上，{font: … } 可以集结所有跟 font 有关的扩充属性在此标签内，所以您除了在 {font: … } 内指定字体大小与行距高度外，还可以在此标签内加入所有上述介绍过的属性。
* Q9 @* w. i* t+ i) x, j/ a C" K; Z6 D* z) P
参考范例： $ N' z2 ^+ Y5 f# F
5 ~3 X! q; F# Y; [7 C3 |2 yP {font: italic bold 12pt/14pt} % Z" X3 b( P3 e8 A: r w" ?
STRONG {font: 14pt/18pt bolder italic Times, serif}
4 R3 e2 A% _# Y+ r9 W" L0 S- M9 G8 z u
CSS 中 Color 的扩充属性
( z0 T/ ` f+ A3 V{color: red}
3 }$ z3 M" ]# r9 `1 O4 K9 V/ z! T( c! H f
此属性用来指定字体的颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。
% s" `! v% e2 w0 e+ L% k6 v/ Y5 U }, c9 W8 i
如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。 ! W1 W2 |; h5 l! ^
7 r( s+ n% r: g* B' L: D参考范例： ( R: [' M6 B) c7 M& J( l
9 Z9 R, |" N) o# X* t4 kBLOCKQUOTE {color: navy}
% |$ O9 ^6 ^* d! m( r- @1 iLI {color: #eedd44} ( T+ A4 |& I a+ q& B+ O1 v
LI {color: #ed4}
2 y& V2 _8 d+ }/ p1 YP {color: #007f3a}
2 G3 W, J- r7 J' y# c1 j* z
, E# s) ]$ f& f R/ G) o{background-color: red} ; @, _) c* h- U, n& O, n5 M
* n; M3 b" C0 M ~; z1 }, b' l4 h" Y
此属性用来指定整个网页的背景颜色，或某一段落，某一区块的背景颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。 - d2 _( j5 ^! X1 F2 V
3 b8 v7 a( Z) q8 n1 J% B/ H4 Q2 d如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。
% U0 Q# U) X: Y/ D) s
; P$ |9 r" ?7 K0 n- B# E参考范例：
2 c$ d u& J, F/ g u6 \& j! }( o+ ]5 [( r. w
BODY {background-color: #ed4}
* l3 a" E" u" t% UBLOCKQUOTE {background-color: navy}
8 V! Z9 T( m& R# `# WH2 {background-color: #007f3a} 1 H; n0 L {0 i0 d& y7 k+ I3 `
6 G6 G4 ^) P. z f* L' ^
{background-image: url (/images/xyz.gif)}
0 I/ K+ x2 x7 r1 ~1 G1 {
( C3 V. |7 P2 T/ O9 q7 Q此属性用来指定网页或某一区块的背景图案。画底线的部分可以使用图档的绝对位置或相对位置来表示之。 + l( r( e- }4 [9 f
6 X* y0 E" z6 S$ B
使用此标签时，最好同时也指定一个类似的颜色做背景颜色。 : n! Z4 Z( v) J/ ]! b8 X
. X( m3 U, |) b- D$ j& e6 E: e. O参考范例： * g# T7 Q: b1 f/ m
3 d( }8 C/ o/ R
BODY { 1 @( m$ D9 c( I2 [# B
background-image: url (/images/2T_logo.gif);
7 {+ L) ]5 ~8 r0 m& e3 Bbackground-color: #ededff
( q0 g' R$ F* ?& K' ^8 O} 0 r( m$ X3 v! c( d
LI {
e3 M! Y: Q& t2 N/ Y- d5 k. _5 gbackground-image: url (http://www.2T.com/2T_logo.gif); " z; w+ C1 k! R# u8 ^" n
background-color: #cef
( d+ D& g; Q5 J' A}
6 m! X- E4 a0 I3 c% m% ~
% P3 e# e4 l0 ]0 l" L+ f# o' c{background: (…)} 8 t& K" d# c7 H6 a( a: x8 ]
4 U; z9 }- D% M+ l1 r/ g
此标签可以集结所有跟 background 有关的扩充属性在此一标签内，所以您可以将所有上述介绍过的 background 属性一起加进来。 4 q5 ~( P9 I7 C A3 n
. p3 ^- N9 |0 P0 ?# n
参考范例：
" l+ k1 C6 {8 A+ W, d( H. r. [- i% g& M$ ^
BODY {background: white url (/images/2T_logo.gif) repeat-y} % V" A: t% x6 I/ t
LI {background: #cc88ff url (http://www.2T.com/2T_logo.gif) no-repeat}
3 l3 h+ z( f$ z( }. m' c! L
/ U) ~, \: X4 b+ k! O
7 e9 X9 k" g0 p; P" U9 J' e6 UCSS 中 Text 的扩充属性' g2 U2 _# d7 q$ X7 z! L) q
{text-decoration: none}
- R+ ?, Y% C( A: G( o1 V c9 u% y3 E4 K T) Q9 `
此属性用来指定文字是否画有底线或被线条杠掉（如：被线条杠掉此例）。画底线的部分可以用 none, underline, line-through 来替换之。 % S" c2 T$ G' C* Z
2 z6 u& H- r! m9 }5 x5 [- A
此属性的内定值为 none。 ' Q' ?- Q# X" F$ S
% j; O s8 R }2 p2 N参考范例：
]' h5 D4 Y! J/ M4 K
$ J0 C" ?3 j: m0 B$ D, J+ y% ]" aP {
5 \. K) p5 r1 Zcolor: navy; . q3 O5 M \ r
text-decoration: none
9 Q* G. h$ N U" M9 n, B8 o! {9 I}
: s% g& N3 a X4 {A:link, A:visited, A:active { % R; l' \3 c6 P& i, J
text-decoration: underline
1 l2 k1 n9 L$ h7 Z( `7 k} 5 \) a: {. @, H
7 W z; @& `1 W+ X: I/ O1 f
; a& R4 c: E) {; }. H' }/ s! M{text-align: left} - s$ Y: w' [1 o3 n5 z
' L0 l, |( S$ X% F* U2 H* u) p此属性用来指定文字是向左、向中、或向右对齐。画底线的部分可以用 left, right, center, justify 来替换之。
8 G f6 H! k( q) L3 F$ Y* E! L1 w+ s) @4 f
参考范例： . V8 f* x" c- {8 a9 k# _- V
* Q( h: w# o. L8 x, n- r+ T
P {text-align: left}
1 ^; G+ f" `: o7 T' f$ E! g" [H1 {text-align: center} . @! {$ p+ T% ]+ p q
1 M" S! e3 O3 ^% @: _5 l1 Z& x
{text-indent: 2cm}
- E5 ]" f. s- s1 `. ]( i! L8 k- N% J3 @6 P1 v' J& H% W( J! q
此属性用来指定文字向右凹进去多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。
* C; L7 k, q& j! P9 T( [" C3 b( T( H0 o+ D
参考范例：
' l* F4 Y( G8 P1 x# r
. J' b7 p6 E; B# sP {text-indent: 3cm}
+ ?6 A4 j- Q" A% }' q0 }LI {text-indent: 60px}
% _! Y( W6 [$ w% L& e nBLOCKQUOTE {text-indent: 20%} " P6 b. f+ H1 ?- [& _# R& x( P- G
; R; R6 e3 k. p$ y
{line-height: 14pt}
0 N$ I& A6 |$ T, G# i
% F/ h9 r) F* }2 ]! B; p! w. q此属性用来指定每行行距的高度。line-height 常与字体大小 font-size 一起并用，写成 12pt/14pt (12pt 指的是字体的大小，14pt 指的是行距的高度)。line-height也可以用 % 表示之。 % 是以母标签来相对比。
$ T( j2 `2 M r/ `, T7 b( \. v
0 O- G# a# j& {9 c参考范例：
- c; o" h8 @6 c: l7 D9 ~
( S! ~8 q. O! y) m4 {BODY {
% r2 d P# r8 R [6 A6 W/ |1 Cfont-size: 12pt; $ J& q. q$ Q5 H) O5 v# G
line-height:14pt
2 W0 d( Q4 I/ O i/ X- N} * O" C( M+ s! I# W5 A0 P2 `$ r
H1 { 4 h/ T# |9 B! N' X* d$ a1 w4 U4 j. g
font-size: 150%; ) c8 t( d/ `( {0 E) ^+ I9 t+ |9 v: q
line-height: 200%
9 _' V2 u& }0 W4 J2 j3 [3 Y}
* w( \: o+ f3 A6 J$ P' v
( t7 n9 [1 ~* B p4 B# W; y" L9 lH4 {font: 16pt/20pt bold italic}
: j/ h+ |/ ^! |% X( j
( E0 k" Z2 v) W0 S: ?* D7 I. B7 E% u4 F6 L
CSS 中 Margin, Padding 的扩充属性- y' }6 J0 D& X O" _) r4 B# J! i
{margin: 3cm} - k9 D+ K4 p! c9 `$ @6 h
4 y" y' \' a2 S+ J+ b2 t, o1 n3 F此属性用来指定网页的上下左右边缘，各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 ! ]$ x% s1 {4 Q7 X2 S' u
( E& @" Q- d& R" G, b6 M$ O
margin 可以用 margin-top, margin-bottom, margin-left, margin-right来替换之。
6 y: _* {' l) z7 g" w% P0 p+ i6 e! Z
此属性的内定值为 0。
" v, s: A: |/ e/ x+ i& E. P* p+ L! P5 K1 ~: o/ `
参考范例：
. S8 T4 g; a1 C6 M- F
( }- a2 ?8 X/ E" `BODY {
8 A3 \& z i$ j7 |margin-top: 44px;
4 e6 x4 \) s3 \& t6 g4 x, xmargin-bottom: 2cm;
) i4 v# z9 c( U/ l5 Umargin-left: 66px; 5 ~7 @' C3 q) I- j- ^: `0 k
margin-right: 1.5in Z# u2 x0 U" I# A/ ]
}
* x# Y3 |0 F5 f1 GP {margin: 15pt}
9 A& p# T0 O" n" i; i4 t
$ E+ b; y* S; n' ]) [- s5 [% Q( P& J1 ^' L( M$ }1 N
& g$ @2 o* n& H; ?" L) D- {- N
{padding: 14px} " i0 s0 Q$ O. I* V, e/ E( b
" l9 v5 o9 `; P3 q4 ]8 o
此属性用来指定各段落或各区块间，上下左右边缘各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 * {4 K2 X0 @4 {1 g; H
% U8 e) c% h0 s& P6 h& r9 e
padding 可以用 padding-top, padding-bottom, padding-left, padding-right来替换之。
- E6 s, v# F$ x: v0 k# |
_: H/ }9 W V2 x此属性的内定值为 0。IE3 不支援所有与 padding 相关的标签。
- s" g+ u; C' S B8 j" Q T' f/ H* b) ^) ^, n4 P( z; D
参考范例： ! C) T$ b/ T" C# H" D2 f/ w
0 w4 U+ W3 n# U3 y+ nBODY {margin: 15pt}
7 o, ~+ p3 N4 c7 f6 gDL { - U: C; a1 G+ `5 M; Y' c
padding-top: 22px; 1 `% |4 l7 S [0 }0 ^
padding-left: 20%;
* |( h6 O9 ^/ b O}
" m A K* I4 o9 | 2 e: ?# g2 j3 h" g. l4 \6 ~* O
3 p$ p1 p4 s- |+ D# M
$ v& E9 C# B9 ], ^- L# ^ ! l) ]% w+ B1 T; ?; U8 B
' @ z- H, p! l: t& Y7 B6 m2 V
: n" }' K0 W3 k3 a( i7 j3 s# D9 u/ h4 x0 I' d
Θ2001-2003 版权所有：『上海博峰网络科技有限公司』 电子邮件：gf1818
3 m8 M( ^! g2 r5 R+ K& l, l/ m1 S # _; ]- [& |* I: X3 j( F7 d/ ]( D
|
/1 
发表于 2002-11-29 18:22:00
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
千斤顶
显身卡