|
您可以利用下列 3 种方式，将 CSS 指定的格调加诸于网页上：
/ v. n/ v( y! q' j. | ]/ W7 e0 [# a0 t9 j4 n. q* W, `
1. 在 HTML 档案里加一个超连结，连到外在的 CSS 档
) X; h& j6 O! x- d
1 e7 a+ }8 Q* V/ g4 G这个方法最方便管理整个网站的网页风貌。它让网页的文字内容与版面设计分开。您只要在一个 CSS 档内（副档名为 .CSS）定义好网页的外观风格，所有参考连结到此 CSS 档的网页，便会依照指示，反应出定义好的风格。
0 M) b2 s% K* x! p& ?5 b
2 H2 Y8 _# ~/ s! a" q* ~" s它的写法是：
, @- i: d3 c! X+ l: F% A
& E- o7 Z* v$ D7 K" p) o
<span style="display:none">) u" \4 ^; }! a7 L" U4 [</span>本页标题<font class="jammer">3 ]* O# O/ y$ G' M1 x+ |</font>
5 h X' n* y' z8 x; T g- C1 l6 M: x4 N5 D9 B) r( ^ r. x- J- R
HREF="http://www.xyz.com/xyz.css"
{' U( d& m' E9 uTYPE="text/css">' s, i$ X' ~6 D; k: |; ]
' S; i! ^1 p. D% y7 W4 K: @$ a5 j7 U4 R$ V2 r) ]
此种方法 Navigator4 支援得仍十分 Buggy，请小心使用。
0 @, ?0 e5 Q6 V
( K: P. c7 E/ ~3 J! Y, w; Z' U3 C2. 在 HTML 档案的 ....... 标签间，加一段 CSS 的叙述文 # f; Q' b x% T4 F4 x8 R3 s- v! f8 E3 k
8 \% K# N3 t5 `9 {5 J* t
这个方法适用于指定某个网页，除了展现外在的 CSS 档定义好的网页风格外，同时还要展现本身 HTML 档内加注的 CSS 。
, X3 p3 L2 D; b& T% @2 L8 G* m0 W- n7 r
如果内在加注的 CSS 叙述与外在连结的 CSS 叙述相冲突的话，网页的展现将以内在加注的 CSS 叙述为主。 ( n Q! V9 V' F. M
3 f( t# T# N7 w) m. u* W# ^
它的写法是： - f. L+ \6 ~- k* N3 W
' N% r& I0 w. S3 N<font class="jammer">9 R3 j P, ~, C. O/ U</font>
本页标题
<span style="display:none">$ o* @) H" i, j% _* n- H</span>' k. [6 @: D: @& i. V& @; b
+ |9 ?: ]! x$ `( c9 p7 k# p' \
4 e5 H7 \+ n/ r
; e4 D! g6 C/ W开始本页内容…
; @6 O7 E/ o* P1 A; F) ^
1 c& X- j% x7 P; ]* y! E4 @3 q- P) ^$ [' |
# q& W% V+ Q' x1 ]# M6 x特别值得注意的是，为了防止不支援 CSS 的浏览器误将 标签间的 CSS 风格叙述当成普通字串，而展现于网页上，您最好将 CSS 的叙述文字插入 标签之间。
7 |1 l; ]2 x' C7 J5 r2 O
' Z* f! `$ v' W, b. F! \- T; R" A3. 在 HTML 档的字里行间中，随时有需要，随时加一小段 CSS 的叙述指定
3 Q: S E. @" p9 v* r/ p5 `( Z( v4 S( s0 I
这个方法适用于指定网页内的某一小段文字的呈现风格。 " i+ `" r8 O2 E( }" `- z% M5 o$ t+ }" }
$ _4 t2 |4 }+ L) K' C- S导览器除了会展现出外在的 CSS 档与此 HTML 档 内定义的 CSS 风格（如果有的话），同时还会展现字里行间的 CSS 风格。
- L4 F, U9 F9 D- p2 q2 ?6 G/ f, p- {) s
如果字里行间的 CSS 叙述与 内在定义的 CSS 或外在连结的 CSS 叙述相冲突的话，导览器的展现将以字里行间的 CSS 叙述为主。
# S1 J+ h# g* z/ y. _; E+ [' _5 a3 B: V
它的写法是： % S) I. t! B8 [6 ~6 p& i+ ^
# `8 b, `7 S- ]$ S
<span style="display:none">$ O5 F5 m- B1 A</span>本页标题
<span style="display:none">& q3 l; C0 o: g! C</span>
' d+ S- R$ T% L/ f5 K1 Z D& r+ J0 Q
0 j; ^- J, o S4 J% n . {8 y7 l. |) X8 l c4 Y7 T/ }0 x( K r
开始本页内容…
: Q6 ^& c* X2 M$ j6 ?3 y {' |& i; s) K3 u! \8 p. H
% V8 H+ g* V, X6 E$ H" d- v9 B: D3 C, Z" s$ [( `3 \
$ [/ k @8 S i7 }. x上述的 3 种 CSS，可以同时并用，也可以择您所好，单一或成双地使用。如果各 CSS 间的叙述相冲突，则内在定义的 CSS 会盖过外在连结的 CSS ，字里行间的 CSS 会盖过 内在定义的 CSS 。 ) s4 Z+ o) m4 X; f8 d( A
1 \' y! N" F. Q7 |1 z: _这样一层一层地推展、补充下来，使得「阶层性格调控制」清楚又有效率地帮助网页设计者，一方面中央统筹整个网站的网页风貌，另一方面又可以随著各个网页、各个文字段落的特别需要，而分别调配不同的格调。十分有条不紊，十分方便管理，所以称之为「阶层性」的格调控制。
. f/ ^5 Y- E; X6 d1 p" ?5 o( g8 a B1 i' J# u3 D
CSS 语言的基本语法 $ M4 Z+ C* e8 I9 ]. x' n v/ o: p
) q- T& c- M: j: s% b
CSS 的语言与网页排版语言 HTML，在内容上有一点点类似重覆，但是语法却大不相同。它的基本语法是： H1 {font-size: 16pt;- h: l/ {/ J: A3 A7 `; o
font-weight: bolder;( s6 }! @+ \- f4 P9 J! u$ [5 u. o
color: red}# O( K; F* r2 x7 m4 n0 S
6 a- j' @& J/ X) h2 N6 j: ^
上例中，H1表示您想要界定的标签元件为 H1，font-size、font-weight、color 这些扩充属性则表示您想指定 H1 应该长成什么模样。在上例中，我界定我的 H1 应该展现出字体大小 16 点，特粗黑体，红色的模样。 ; K' e/ C- P7 o" z8 N
9 [0 X, d: e9 U w
简化之
& w, H! k9 q1 f! M6 {# B因此，顺著这个基本写法，我们可以继续定义其他的标签元件： H1 {font-size: 16pt;
7 B3 {3 i) B* ^$ g/ {, \; `+ Zfont-weight: bolder;
8 K" Q6 y' T6 p; A) Ucolor: red}4 r# B0 N# P a$ p
H2 {font-size: 16pt;
7 f( k: w2 l4 X: pfont-weight: bolder;
# e. ?: L: T$ w- J1 mcolor: red}
# ?; C" U/ ]- W( W: o gH3 {font-size: 16pt;% q2 y; f2 h4 b& B. ?
font-weight: bolder;
2 `8 Y+ G$ p/ m- \% [1 lcolor: red}
+ E$ ~2 [, I& |- q5 @8 z6 \: G; \+ z# W! @* h
上例中，H1、H2、H3 界定的标签元件均长得一模一样，因此我们可以将它们简化写成： H1, H2, H3 {font-size: 16pt;$ I: g+ M# X3 j* P
font-weight: bolder;
' M: R% z0 |+ ~4 e& vcolor: red}: E1 `4 U9 `. U7 h/ `( a4 H8 r! f
% v8 u! b& r) i5 I- `7 A0 t而如果您想要让您的 H1, H2, H3 各自拥有各自不同的风格，那么您必须一笔一笔地条列说明清楚： H1 {font-size: 16pt;5 f i" B: r8 X0 {: d* X0 n
font-weight: bolder;
7 ~+ E9 I/ o H1 ~ ^$ J3 G2 nfont-family: Times, serif;
0 p. s1 `# X) R/ }- H/ jcolor: red}
! Z4 d+ i' [1 W/ uH2 {font-size: 14pt;
; Z3 p2 }- J' P& ?* k3 |$ Wfont-weight: bold; R4 ]- a& X. e
font-family: Georgia, serif;0 C& l/ X" O- O9 m7 o; A
color: green}
" s3 D, w& X) X' c2 [H3 {font-size: 12pt;& g9 {, G; Z4 l0 A; J
font-weight: bold;3 L& s1 ~4 p6 W/ t4 V
font-family: "New York", serif;% h* @3 O% k1 W2 Q O
color: gray}
, s1 a7 r/ U$ M
/ V! l l: T/ j& `另一种简化方法
3 O G( V H& g O/ v/ X0 {6 B8 @& [& s虽然在上例中， H1, H2, H3 各自拥有各自不同的风格，使得您必须一笔一笔说明清楚。但是您会注意到，我们在指定 H1, H2, H3 各自不同的风格时，其实大都是在指定 H1, H2, H3 的字体表现（字体大小、字体粗细、字体的形体）。因此，我们可以将所有以 font字眼开始的叙述，整合在一个 font 大项里： H1 {font: 16pt bolder Times, serif;
: E) g: [; `$ T( y% tcolor: red}
/ c2 c0 o A3 ?: h9 R6 kH2 {font: 14pt bold Georgia, serif;
" _ v9 @# b& }& [5 P& ycolor: green}
5 {5 ]( N8 ]- Q. f+ r% f+ y% S1 TH3 {font: 12pt bold "New York", serif;6 S0 `5 ^6 x; K& s! J
color: gray}
* s6 F# d1 f& O$ m1 w5 E, u7 T( o/ ]( O* U3 c4 X2 v: [9 ^
特别值得注意的是，在上例中，H3 的字体使用 "New York" 字体， "New York" 是两个字，所以必须将它 "括号" 起来。而 H1, H2, H3 的颜色规定，并不能一道并入 font 大项中，而必须另外标清楚。
: X4 ~3 B( x3 u% S
- v4 s4 U& D8 z) C1 D# r% o顺便一提的是，CSS 与 HTML 一样，都有「注解」的符号。HTML 使用 做「注解」；而 CSS 使用 /* 这里是注解 */。 ) S0 E' V6 h+ D8 q: ]3 B
! ?: U- f( u6 v/ x1 x& RCSS 中 Font 的扩充属性% v- I7 t2 e7 {
前言：
9 X* f3 ?- A5 q/ s# Q1. CSS-Cascading Style Sheet 只能展现于有支援 Style Sheet 的浏览器内，例如：网景的 Navigator4 与微软的 IE3, IE4。版本不够新的浏览器显现不出 Style sheet 规定的风格。 ' L! A! ?" K- s9 P
& `! H, i/ Q7 _2. 本系列文章只说明介绍 Navigator4 与 IE3、IE4 浏览器 共同支援的 CSS1 扩充属性。至于 W3C 详细规定的完整 CSS1 文件，或者 网景 、 微软各自支援的 CSS 扩充属性，请到其网站的 Style Sheet 部门观看。 * ?) q6 p+ d; Q8 A# l9 t; E
% h# B) | [" j6 F' B6 g2 ]( S
3. CSS 的写法使用大写或小写均可。
) I- p2 ^7 Y; Q& t2 B: y6 m3 E. h0 v* b; ?; f
{font-family: Times}
: Q9 c8 n8 R- Q4 F3 P+ f6 I. m9 m
此属性用来指定字体的形体。画底线的部分可以用各式各样的字体来替换之。您可以同时指定好多种字体，以防 user 端没有第一种字体时，可以继续依照您的指示，选用第二、第三种字体。
4 R/ j9 V0 ?/ L( Y( C- R2 x
8 S! T3 h. T& T8 o& j5 {; o7 L* i3 l2 K1 I参考范例：
+ ~- F2 F2 w( V( k) l! L7 I' x7 Y* h( Y
P {font-family: Times,"New York"}
$ k9 z e7 d+ F9 jLI {font-family: "中黑体"}
( o2 r) O1 w. g/ UBLOCKQUOTE {font-family: monospace} ; S/ }* \( C/ ]6 a+ H* ?- {
) }) E9 k7 E- i |) s$ C; u2 A
特别值得注意的是，在上例中，字体 "New York" 、 "中黑体" 因为是两个字(以上)，所以必须将它们 "括号" 起来。此外，第三例中的 monospace 是用来指定写程序码时使用的等距字体。
6 ^4 R8 x* y1 y' z5 ]
3 ^( t+ J: H% ?% h( P3 o{font-weight: bold} . _4 R5 T1 g4 s# G1 u" W
1 M8 x4 O# ~9 U! a此属性用来指定字体的粗细。画底线的部分可以使用下列 2 组表示法来替换之： 4 A) w/ u7 q' U0 r+ K& H6 @$ n2 A
\3 p @3 _3 T T% r- r* normal, bold, bolder, lighter ! x3 b* c4 w; P
* 100, 200, 300..........900
- s$ P: |" t: @$ w8 B
" {- y4 l S! Z( o, m此属性的内定值为 normal。 $ w3 C9 V- _5 F) e X! U o% b" u
' y# c: {0 I& a( T( G7 O6 Z
参考范例： 0 \! r- ? Z& F* f/ g6 p
. B: } Z$ N9 d( U; xH1 {font-weight: bolder}
4 u& _6 R* r0 T7 OBLOCKQUOTE {font-weight: 200} 4 o* d0 A5 y. h
* R0 j3 N, i6 U3 [7 Z+ N
{font-size: medium}
* _! w8 [$ O5 V( r
+ n4 J' @6 @; X$ u+ B此属性用来指定字体的大小。画底线的部分可以使用下列 4 组表示法来替换之：
) V7 Z7 G H3 t; m
) T* J* n F4 y8 ]8 f4 L, d6 Z0 u* 绝对 size: xx-small, x-small, small,medium, large, x-large, xx-large 8 Z" M: b0 x5 [1 _* l+ ]0 G: B
+ C% K1 r( X, [* M. H* 相对 size: larger, smaller（与母标签相对比）
: `* q5 i, j+ n) t2 I& u% [/ z5 A7 V, q+ D
* 字体的点数 (point): 12pt,16pt, 20pt.... : R/ K/ Z- s. p* G
- N. [1 M/ ^; {) Q. q* 百分比: 80%, 120% .... （与母标签相对比） - k5 y4 F' g) S2 } g1 F! I
" a. {" r* N0 N" a
此属性的内定值为 medium。
; R8 X3 U( X* N) l+ j) T/ Y5 n
' s6 A. s2 w+ K0 Y4 O' P参考范例： + ^, J2 _5 V, `
; e' G9 E+ s+ J$ G9 J5 ~
BODY {font-size: medium}
7 E6 e* M- E4 ]8 LH1 {font-size: 18pt} ' c; g- O- M' [- r+ E; J: ?( I2 Q
H2 {font-size: 90%} - E" i7 y/ Z9 C0 H2 i' @$ T2 U3 V& R
" N) W/ \* e+ B+ C& z" k8 v. m6 l{font-style: normal} 2 C* s8 V$ l5 H0 I: h
4 X: m& V1 W6 J( @此属性用来指定字体的正体或斜体。画底线的部分可以使用 normal, italic, oblique (仅 IE4 支援 oblique） 来替换之。
7 d: }# f; `: y# B o& @" k( I/ s* }) Q, [ w4 @. z, M
此属性的内定值为 normal。
/ r; E9 _% a/ Z* I% j, q2 ?1 ]8 @( n: O: W8 A5 S/ |( y% _+ d' C
参考范例： ! V9 b# Z' ^& s0 f: L; W
% ?, h# v6 r: d8 M! O) [4 q5 |H4 {font-style: italic} * ^' \: n1 Y$ ^1 K, Y
P {font-style: oblique}
$ q% x1 s- ?5 f, T
6 z' [8 A5 s% o8 p A3 o7 k) |{font: 12pt/14pt} $ ?7 D9 P! A9 u8 d7 W& _: t% G/ h
" E. s$ v* X% {" j0 D( `此属性用来指定字体的大小与每行行距的高度。上例中，12pt 指的是字体的大小，14pt 指的是行距的高度。
* ]7 ?; E; a/ o- _' ]8 v( C7 a/ Y$ m
事实上，{font: … } 可以集结所有跟 font 有关的扩充属性在此标签内，所以您除了在 {font: … } 内指定字体大小与行距高度外，还可以在此标签内加入所有上述介绍过的属性。
* }# S( K+ D% D: W5 z# j0 Y8 s& d- i0 t2 X
参考范例： ) M. h3 h8 M8 v1 d }
1 k3 F$ i6 s) O$ E7 t# S
P {font: italic bold 12pt/14pt} + s$ x" \& O$ @, i" | q
STRONG {font: 14pt/18pt bolder italic Times, serif} " V+ r' Q1 B1 l0 }) O
+ k; F F- K! rCSS 中 Color 的扩充属性
& Q9 J4 t& x |: N{color: red} , ~2 c3 t6 N0 X! z3 {; l
( ^( i& [5 O- O, ~( E0 O1 [7 Z( \, V此属性用来指定字体的颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。 . A" }2 C2 V+ p8 x9 J) }
' G( \4 r! W; P) |3 w
如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。
( k: k; T. A, i( |: z6 k
8 H! T+ c" R6 W参考范例：
* g E7 k& ?4 f/ O+ w; }* T0 l( Y+ k; V/ p' I+ {# c
BLOCKQUOTE {color: navy}
& m6 i9 W: X% @LI {color: #eedd44} : t% \6 W6 E+ V& l
LI {color: #ed4}
. \6 L0 _0 G( z& h' \7 V5 TP {color: #007f3a}
{! `0 @/ K( |7 T* C
2 i; Q( C3 l$ o9 m: }7 v Y* v- h{background-color: red}
8 s5 R% q2 d Q
# D9 c) R1 Z5 P( t- a: D' p此属性用来指定整个网页的背景颜色，或某一段落，某一区块的背景颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。 2 M3 e0 j( c3 [) ? Y; C9 n$ }
* `! u5 D% ~6 B" r如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。 / | v- L1 t. S: I
. c2 g; x2 L2 D4 D: [/ A1 Q% ^
参考范例：
6 u( f1 ]9 Z! d+ C0 b5 ~, l! `, s% X- b e8 ~
BODY {background-color: #ed4}
& s5 c: S7 x% X9 S% ]BLOCKQUOTE {background-color: navy} 6 q. K0 h& T1 |% j+ F$ P
H2 {background-color: #007f3a}
' N: i" i5 H0 g7 V1 W/ z9 }4 Y4 W. W. ^- ]4 _% T% G
{background-image: url (/images/xyz.gif)} / _2 J4 j8 r6 C
5 }" I& { [& o9 J4 K( j0 m此属性用来指定网页或某一区块的背景图案。画底线的部分可以使用图档的绝对位置或相对位置来表示之。
2 m2 }, ]3 l4 j2 L3 s. J9 S3 y, l3 d& J# C' a3 l2 K
使用此标签时，最好同时也指定一个类似的颜色做背景颜色。 5 u! U0 @: R+ x' p& i
5 ]( u# Z/ r5 c
参考范例：
* X) O3 r7 H1 D$ z
`9 U0 e6 M8 C# k- w4 [% ]BODY {
9 q; o k* \+ s: m0 Zbackground-image: url (/images/2T_logo.gif);
, u( I1 j+ Q+ a* |" y* m0 A: Qbackground-color: #ededff) J( K( D$ I6 d% f+ \, ~0 e: a: Q
}
, j% i; ]$ D4 E# J) q; T T6 d. g( g; uLI {
- j; M. D& v& Z7 L% [+ Y, `; Ubackground-image: url (http://www.2T.com/2T_logo.gif); 4 S- Y1 w X7 m: ?; Y5 J
background-color: #cef/ D: _7 p! A% P# j
} ( A' P3 g) o8 K$ ?9 ?
* i$ k# O) _3 u; J5 S) {{background: (…)}
$ c$ h) C8 l; [' u( H+ e0 L
( O2 I1 Y2 p2 T! k8 f" o! [此标签可以集结所有跟 background 有关的扩充属性在此一标签内，所以您可以将所有上述介绍过的 background 属性一起加进来。
& o. ]2 @* s: Z7 {. c; r
! H% }5 c) Y, \& A参考范例： 8 y( q% U# m3 C; T U) p
7 U' S R& J! b% C& x
BODY {background: white url (/images/2T_logo.gif) repeat-y}
& L. Q- w7 Q9 L! LLI {background: #cc88ff url (http://www.2T.com/2T_logo.gif) no-repeat} 7 k: Y q# s- `7 E
5 `& V* I) {1 |$ @5 `
+ h* P% P& B" Z; f1 ]
CSS 中 Text 的扩充属性
5 P: R8 P2 Y+ }% J6 g# P4 Z{text-decoration: none}
2 B! t& B( a) g9 g( x. [ a* X* _& d2 [7 k: B, |7 D& P" ]. q
此属性用来指定文字是否画有底线或被线条杠掉（如：被线条杠掉此例）。画底线的部分可以用 none, underline, line-through 来替换之。
7 A2 s4 g9 J' u1 ^9 @. b B N1 o! m, S. o
此属性的内定值为 none。
9 R5 e; S2 G$ }2 X# P0 @! o# C; X- |
参考范例：
/ \9 k5 i8 Z3 _
6 t6 I/ H+ F6 l- Q7 I0 V& UP { 0 M4 L! B8 {' U* v
color: navy;
$ N" {8 e, T% p( i. m- c/ P+ f9 }text-decoration: none
4 p8 l) i. t+ r& [} 9 w# |6 [- a" }2 d
A:link, A:visited, A:active {
' o ]* w* ?. t! Y P: otext-decoration: underline " Q4 {8 i, e8 J/ r- D+ T [
}
" Y+ U# P! ^/ D, O: b2 t- L- X' l+ d% @$ c
- [2 D# u1 m5 O P' E/ m; l3 `
{text-align: left} * @7 L! W/ K2 u7 D$ p3 ^
S! j. V5 y" {: G/ ~5 ~6 c( H4 ^# n此属性用来指定文字是向左、向中、或向右对齐。画底线的部分可以用 left, right, center, justify 来替换之。 / b n& {8 P0 p1 D& }
$ W9 B5 l. j' S6 `3 _* s% g) j4 y" F参考范例： [- a' y. C3 ^" ?, R
: w+ @6 v& k9 S# \% ]7 E. x7 jP {text-align: left} 4 x$ W1 Q7 d. l7 q
H1 {text-align: center} 2 W! x, d( t& n8 X
/ U' x$ o9 ]6 z0 ^8 U{text-indent: 2cm} % z' m. F0 b ~0 r5 p: [4 A
, ^4 X3 ]0 y# p) x2 M此属性用来指定文字向右凹进去多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。
9 x+ V. v: d7 m5 e/ R
& y( y) A8 d% M8 s参考范例： 4 k/ A, K1 b2 V. k1 G% K
: d% a9 c$ l0 H% x& a( p
P {text-indent: 3cm}
) P: r& X+ B2 zLI {text-indent: 60px}
! k. n; G" ?& W# N( [$ U3 OBLOCKQUOTE {text-indent: 20%} 8 ?+ N u. ?' |% F' S' [+ {6 L1 l
) M7 \3 m$ Y) @2 R& {! p{line-height: 14pt}
% s4 @+ Q' n6 \6 K3 \
" l' x6 P3 Q8 ?) n此属性用来指定每行行距的高度。line-height 常与字体大小 font-size 一起并用，写成 12pt/14pt (12pt 指的是字体的大小，14pt 指的是行距的高度)。line-height也可以用 % 表示之。 % 是以母标签来相对比。 4 m0 g) N# ]2 w% F( m s
5 d% V- W8 _8 j! R' j参考范例：
4 B* S) `+ N1 v. u# N, T7 q. Q. i4 h2 \& `1 i( n
BODY { % q \% Q- l O; V( U" I; B/ W7 k
font-size: 12pt;
0 Z* c: S# ~% p3 Eline-height:14pt
4 a) R. C) O! ^: [# m} 6 d# p: j! `' I
H1 {
5 x+ ~* w+ J7 B- ifont-size: 150%;
2 B, |: B- g. ?1 Iline-height: 200%
% z- W3 f4 U& E6 \+ m! y( T$ a} + f! J, A' f/ v. L' x$ k. O0 B
1 V4 Z5 V4 ? p5 f) y# [1 v
H4 {font: 16pt/20pt bold italic}
7 h8 x0 D+ w* [. M" d( `2 C% v9 |. N1 L' }+ @9 J
' }/ C! `2 {6 v- N& ^0 wCSS 中 Margin, Padding 的扩充属性
+ M. C1 L! D( F2 V$ R! J# Y% P{margin: 3cm} . ?; ~5 D) R6 }6 |" [ ]8 i; N
1 { i- n: Z% w0 {4 ?9 D
此属性用来指定网页的上下左右边缘，各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。
2 X' F' K% j2 D0 D- K8 s* S! f6 E$ L
. I; j% J, b5 p% Wmargin 可以用 margin-top, margin-bottom, margin-left, margin-right来替换之。 ' R; b* g* o- F9 s# A0 Q
/ a% B$ H* f2 F8 w; y( `8 ?# ?
此属性的内定值为 0。 5 o" E- p- ?; I
( D3 [1 p9 H F8 S2 H5 }# e
参考范例：
! [. E; n9 b5 K$ \9 v2 V6 V& m* S0 b4 v# |1 T6 k
BODY {
! O1 `$ K+ ^, Y! ]1 z6 ~1 ^5 ^margin-top: 44px; 1 U6 Q: b) }; R, h @8 T
margin-bottom: 2cm; - J- N% I. C8 g9 M4 B, [
margin-left: 66px; 7 g5 `9 h5 K7 B6 |1 Q, ^2 x
margin-right: 1.5in
9 k- {& s9 s& M8 J}
" y2 z, }' c$ f' Q# |5 ~P {margin: 15pt}
! \4 E& t O+ X- Q) ^; O ^
+ o9 A5 U: o4 l& b
3 j) a6 [& d4 Q
u" ?* p2 F# K- ~! J{padding: 14px} ) Z+ G+ D# }# L/ X, f
; w+ ?) b" v: s: {6 E; j6 M) r此属性用来指定各段落或各区块间，上下左右边缘各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 ) n1 f% a# A' h: g
6 @ T. D5 V, M7 k& R7 C7 p" L# [
padding 可以用 padding-top, padding-bottom, padding-left, padding-right来替换之。 * j1 L3 v# g7 j* [- H6 \' u
7 X- d- y+ {6 f; w, p此属性的内定值为 0。IE3 不支援所有与 padding 相关的标签。 # n7 R, J9 L6 u& S3 x J
! U1 u% Q% e! p- B9 ^7 z/ Q. o
参考范例： ( C- b+ S$ t! {9 h1 \: k/ c0 z, u3 ~% T( T
6 V- D2 W9 ^) ]) v
BODY {margin: 15pt}
3 _) [- B/ {3 N7 G7 P+ }, m: f3 TDL {
4 M+ y" f8 ^5 _/ G8 w5 j, kpadding-top: 22px;
6 `4 q$ w1 |& gpadding-left: 20%; ; h, L- b, O; k1 X
} $ V9 ?' g1 \# {5 K6 A o* \
5 N; k- r) |7 A. A4 A0 ?
$ h. S4 \6 a$ }2 G$ ^$ I6 Z
" ?: N3 ^0 |+ p8 n- K- w$ F
! U( Q( F+ S: o J# N. [2 z' H
$ Z7 x5 n# L- f8 x9 k
0 b+ b1 d' X, B0 M" N' T* e O/ u2 y5 T5 n4 C+ y `
Θ2001-2003 版权所有：『上海博峰网络科技有限公司』 电子邮件：gf1818
3 L& d) ?8 X7 d! P' I
" h* H+ ~. C2 t, r0 \* A A |
/1 
发表于 2002-11-29 18:22:00
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
千斤顶
显身卡