|
您可以利用下列 3 种方式，将 CSS 指定的格调加诸于网页上： , M# c* @+ O! {8 T/ e
6 R% `- F0 p4 r {
1. 在 HTML 档案里加一个超连结，连到外在的 CSS 档 ) y! y4 R# v- E1 C( T8 K
$ Y1 ]! A: I0 l) S
这个方法最方便管理整个网站的网页风貌。它让网页的文字内容与版面设计分开。您只要在一个 CSS 档内（副档名为 .CSS）定义好网页的外观风格，所有参考连结到此 CSS 档的网页，便会依照指示，反应出定义好的风格。 / C+ j' L" k$ Q% d2 s
0 z2 O' ^/ S% W9 J6 u s* p; C
它的写法是：
- r- a' h& O5 ^0 C6 F% ?/ i: N) m6 v* r" p0 D/ n
<font class="jammer">% b; h% O2 t* Z5 D) t</font>
本页标题<font class="jammer">" E( U- ^, D' c# }; @</font>
; d0 B3 n8 Q7 u. K; ?) ~0 n) ^$ `. k- u7 D! E
HREF="http://www.xyz.com/xyz.css"
1 a. k& N/ y7 u- u! lTYPE="text/css">
, z6 H8 G7 v: O5 R# D7 M k
; G u) E% d/ F& A: S3 P) e7 b8 y' E0 @, h* Q- Z
此种方法 Navigator4 支援得仍十分 Buggy，请小心使用。 . D4 W7 ]% B. v) f2 e
7 B, `" g/ Y7 F; O( V2. 在 HTML 档案的 ....... 标签间，加一段 CSS 的叙述文 , I" R% f% T* E! J2 }$ [ i
2 f& W0 b W4 t这个方法适用于指定某个网页，除了展现外在的 CSS 档定义好的网页风格外，同时还要展现本身 HTML 档内加注的 CSS 。
/ e4 d% |2 J: W# d! Q% t0 K
+ g0 r/ a+ _" s; B5 r K# u如果内在加注的 CSS 叙述与外在连结的 CSS 叙述相冲突的话，网页的展现将以内在加注的 CSS 叙述为主。
( I- D4 P( G2 x8 a6 w% q4 c3 }# X3 f; H7 J4 ]
它的写法是：
4 b+ S, m9 V, S" v o8 ?- h8 B- ]$ p! x/ I
<font class="jammer">0 ?" p/ }, q; V5 r8 J; p7 r</font>
本页标题
<span style="display:none">; l m% d) T; L( h. E5 P3 J</span># O% \9 n; l7 }9 `
* Y9 r6 F f! R
3 p# n& U! h" t6 ^) B
7 |5 K3 h' n, r5 `1 `$ J6 z# ]开始本页内容…4 o: N6 W7 j" c& D
: c! n. a) i) y
7 \6 l9 w1 w" ?% [) {4 n5 K; q( N& @; _
特别值得注意的是，为了防止不支援 CSS 的浏览器误将 标签间的 CSS 风格叙述当成普通字串，而展现于网页上，您最好将 CSS 的叙述文字插入 标签之间。 ; W- G- Q. ~0 x H. d$ J+ C6 O# x
1 L( e3 ?2 j0 |% \ P; [3. 在 HTML 档的字里行间中，随时有需要，随时加一小段 CSS 的叙述指定
, t9 X$ y' s8 @: K z$ r" t- I: K) _" j1 ]) r6 H, {6 X/ w
这个方法适用于指定网页内的某一小段文字的呈现风格。 ' V. f( P' v/ T% K" i* l, ?* @2 G
# V$ i) U S% r+ q导览器除了会展现出外在的 CSS 档与此 HTML 档 内定义的 CSS 风格（如果有的话），同时还会展现字里行间的 CSS 风格。 1 H) W) b4 U; z0 o q* }0 L
: G! G! j( F& d. B% P8 H! h1 l
如果字里行间的 CSS 叙述与 内在定义的 CSS 或外在连结的 CSS 叙述相冲突的话，导览器的展现将以字里行间的 CSS 叙述为主。
( `3 ~9 B& w, g' A* R/ _7 M* B+ C* A/ B2 y8 I
它的写法是： 8 R! m' l. g: L) ^: L' l. s2 E, _
/ J+ S% J( D" ^% K8 {! p+ w% e<font class="jammer">( i$ v5 P6 k; n( o5 C; P</font>
本页标题
<span style="display:none">9 G4 G1 Y& V% o: U9 d/ L% }</span>+ @1 J2 h. j9 a$ }. L- t7 C
2 w4 Y" { l/ D3 m8 u _
4 R( I7 U) @) q! Q {
/ F# p) l% g/ J" ]/ w; {! W) E2 Z( L开始本页内容…
g; ]& E. T3 ~7 Q8 w6 i( B% ~' \
. F9 F$ S2 V2 Q, _& N3 _2 I* N* x3 f, n- k/ C
& K8 ^- V- Q9 s. Z2 P
% }+ p3 @5 n% N S上述的 3 种 CSS，可以同时并用，也可以择您所好，单一或成双地使用。如果各 CSS 间的叙述相冲突，则内在定义的 CSS 会盖过外在连结的 CSS ，字里行间的 CSS 会盖过 内在定义的 CSS 。
2 w/ G2 Z1 h* a" O6 K0 r% ]( W5 u* }& k
这样一层一层地推展、补充下来，使得「阶层性格调控制」清楚又有效率地帮助网页设计者，一方面中央统筹整个网站的网页风貌，另一方面又可以随著各个网页、各个文字段落的特别需要，而分别调配不同的格调。十分有条不紊，十分方便管理，所以称之为「阶层性」的格调控制。
4 d/ ^3 L$ R, i. x7 L' b8 K0 L7 r7 D7 j: M! a: \* L
CSS 语言的基本语法 3 v$ {1 u) w& n
2 C/ ^2 l& G, [0 uCSS 的语言与网页排版语言 HTML，在内容上有一点点类似重覆，但是语法却大不相同。它的基本语法是： H1 {font-size: 16pt;
2 I: m. N; W, i& jfont-weight: bolder;
4 [# [7 `' G1 K6 c* jcolor: red}
9 G, c, Q6 o0 V7 s8 S) h( j( O6 {% A4 S
上例中，H1表示您想要界定的标签元件为 H1，font-size、font-weight、color 这些扩充属性则表示您想指定 H1 应该长成什么模样。在上例中，我界定我的 H1 应该展现出字体大小 16 点，特粗黑体，红色的模样。 4 D' }3 o, s4 y* @- S4 K0 N
. `. d/ i' @0 h1 x8 Y4 m/ n
简化之
6 a/ P3 i0 {5 z因此，顺著这个基本写法，我们可以继续定义其他的标签元件： H1 {font-size: 16pt;8 D1 {) z! H" t/ E3 f
font-weight: bolder;
! d; r. b% R; J& t8 Ccolor: red}" ?9 V% Q8 y4 M4 G9 b
H2 {font-size: 16pt;
" H% W- L/ g% Q5 ^font-weight: bolder;
. C3 y1 o$ P1 S; [- W, f; z- Ocolor: red}9 R7 Z& K6 }: e0 x
H3 {font-size: 16pt;9 w1 t, |1 p' H
font-weight: bolder;
: Z) _, d- \; W* O9 [$ {color: red}* o0 F; p* k7 P: z. E
& B& ?9 k4 ^1 e
上例中，H1、H2、H3 界定的标签元件均长得一模一样，因此我们可以将它们简化写成： H1, H2, H3 {font-size: 16pt; P4 \: n- R) ^0 s, o% v
font-weight: bolder;
9 {, R! C( W# \; _, zcolor: red}; e$ G" A5 ?1 r7 E6 i" U+ g
' s4 d* f y2 C4 e( F而如果您想要让您的 H1, H2, H3 各自拥有各自不同的风格，那么您必须一笔一笔地条列说明清楚： H1 {font-size: 16pt;
1 E) o/ x9 x2 j! U6 x! B6 s Ifont-weight: bolder;
7 @: l ]0 d( M3 ffont-family: Times, serif;) M3 ] |4 C1 I
color: red}; {$ F; T" A. p5 A
H2 {font-size: 14pt;
6 z5 o* a! Y/ B7 w4 F& Gfont-weight: bold;
0 `9 \. k6 `" t0 Rfont-family: Georgia, serif;7 Z" Q0 j# j2 E8 d" i! b, G
color: green}: Y9 d/ {' W! ~ R V3 \/ e% \4 B
H3 {font-size: 12pt;+ w$ U5 {& W# B7 T
font-weight: bold;
8 n# Q% z9 d* {* S& t6 a) v3 G6 `font-family: "New York", serif;
$ Z; Q/ W- I0 d1 e- e- Acolor: gray}( Z% ^0 e7 T% D4 h6 _. M' y4 e0 ^( I
0 U$ o7 }) T# P. v, w/ k5 u K
另一种简化方法5 p3 R Q- S% A
虽然在上例中， H1, H2, H3 各自拥有各自不同的风格，使得您必须一笔一笔说明清楚。但是您会注意到，我们在指定 H1, H2, H3 各自不同的风格时，其实大都是在指定 H1, H2, H3 的字体表现（字体大小、字体粗细、字体的形体）。因此，我们可以将所有以 font字眼开始的叙述，整合在一个 font 大项里： H1 {font: 16pt bolder Times, serif;9 Z8 `; B$ Z# n3 [8 E" V
color: red}
9 s) L4 O& x( ?. A( gH2 {font: 14pt bold Georgia, serif;
9 y \5 K/ Y/ g1 |' `0 xcolor: green}
3 T/ O% g5 O; n6 \H3 {font: 12pt bold "New York", serif;
3 c3 U* C6 e9 ^color: gray}
. [7 I6 Q0 O% A& v5 K6 V. V) |7 X$ f& b0 h3 E5 i
特别值得注意的是，在上例中，H3 的字体使用 "New York" 字体， "New York" 是两个字，所以必须将它 "括号" 起来。而 H1, H2, H3 的颜色规定，并不能一道并入 font 大项中，而必须另外标清楚。
/ C! @1 M( q6 e7 |* t
! y+ u# L# V( N1 y1 u顺便一提的是，CSS 与 HTML 一样，都有「注解」的符号。HTML 使用 做「注解」；而 CSS 使用 /* 这里是注解 */。
( O& K4 x" O5 H4 j' j
& Y+ g2 |8 P; @9 ^2 XCSS 中 Font 的扩充属性( m, e" @: B- T1 A$ q: l( E. T
前言：
8 e# L b) { o1 L1. CSS-Cascading Style Sheet 只能展现于有支援 Style Sheet 的浏览器内，例如：网景的 Navigator4 与微软的 IE3, IE4。版本不够新的浏览器显现不出 Style sheet 规定的风格。
+ S5 J8 |' s# u# ~. U* n+ A/ T' B
2. 本系列文章只说明介绍 Navigator4 与 IE3、IE4 浏览器 共同支援的 CSS1 扩充属性。至于 W3C 详细规定的完整 CSS1 文件，或者 网景 、 微软各自支援的 CSS 扩充属性，请到其网站的 Style Sheet 部门观看。
% H) b5 y1 e- u) X4 k4 x) E9 n5 S A( ?0 S6 z
3. CSS 的写法使用大写或小写均可。
7 r& O+ L7 e9 S F8 y1 e/ h- R& I2 ?" L/ ]( \$ J4 k
{font-family: Times} ( |; m. _( B5 `! C" _
& ^4 X: X( ^1 d0 ?% A0 |
此属性用来指定字体的形体。画底线的部分可以用各式各样的字体来替换之。您可以同时指定好多种字体，以防 user 端没有第一种字体时，可以继续依照您的指示，选用第二、第三种字体。
, f) o4 g& t: Z; F4 V8 ]" B( C% u% I- u$ q) Y! ~ v: d
参考范例： 6 z; I8 m* M2 z* G* c
: `) ~* H- d% W7 H8 }$ s; NP {font-family: Times,"New York"}
0 l, n% |1 @7 i! Z0 D7 bLI {font-family: "中黑体"}
: f+ t# t) r6 J' X9 Y1 a4 j% ZBLOCKQUOTE {font-family: monospace} $ p6 T2 O% L" ^9 |7 n# m- | I
- E. F1 Y7 n! P$ L
特别值得注意的是，在上例中，字体 "New York" 、 "中黑体" 因为是两个字(以上)，所以必须将它们 "括号" 起来。此外，第三例中的 monospace 是用来指定写程序码时使用的等距字体。
$ g0 v3 h4 V! g5 L
. L3 _9 u1 c; R. L" h# X2 R{font-weight: bold} ; q* b: V+ h! x% ?2 j2 x
3 ]: b! u' `* J5 x/ s此属性用来指定字体的粗细。画底线的部分可以使用下列 2 组表示法来替换之：
# @- W: A; \, k
8 i9 l2 P8 z; d5 f( p* P; X8 s* normal, bold, bolder, lighter 9 B$ k1 q( H2 B) Y" e' x9 _5 F
* 100, 200, 300..........900
. ^6 R$ H' Y8 M* ^, t8 @, _: Q- E6 Z; X$ M
此属性的内定值为 normal。 + s( M( P1 [) o" v
9 J. p; q1 |) N2 T( `& B) s
参考范例：
: |* I8 j; c* V
/ K7 m3 C0 {! L. U* r8 u& MH1 {font-weight: bolder} * ^' [6 @; x0 j
BLOCKQUOTE {font-weight: 200} * G1 C' r6 M' K5 U- i% T# i/ S) Y
+ ^. {; O& n' d9 W9 |0 l t# z* B! y{font-size: medium}
- }: |# G2 w1 ]/ x. |# `+ e/ O" L3 e
此属性用来指定字体的大小。画底线的部分可以使用下列 4 组表示法来替换之： ; ]; W6 Y# V1 t9 @) V
- G u; F# {+ {1 }6 g# P$ Y: N
* 绝对 size: xx-small, x-small, small,medium, large, x-large, xx-large
4 G( l% k' N+ U$ p/ a" ]" E& X
3 N" v N: X8 j4 o% n* 相对 size: larger, smaller（与母标签相对比）
+ u; J. v$ z6 A* l" c3 D; g9 K6 r! P6 R6 w
* 字体的点数 (point): 12pt,16pt, 20pt.... # N9 j% ?' s' Z+ o
% C) U, m% W& q; y; @7 {4 B
* 百分比: 80%, 120% .... （与母标签相对比） & u! W2 d+ i$ d5 P6 q) |& r
( f9 F9 R$ M' q* X8 v2 C' ~" z
此属性的内定值为 medium。 / e9 d1 t5 W7 f7 q# [- }
" e' @9 o0 A' O+ E
参考范例： # {7 s9 \" u9 h3 s; V$ G- C+ g; o
3 N+ ?& F7 Y1 x/ [BODY {font-size: medium} 1 G# G' d5 ~4 y% z6 R8 k4 I
H1 {font-size: 18pt} % p. E4 x% Z0 F& r! h
H2 {font-size: 90%} 6 W6 S! c' M9 W) b
h) s# r1 f. C{font-style: normal} ! _ O7 c/ `( S$ K! Y
& ~" K8 Z0 {& e j
此属性用来指定字体的正体或斜体。画底线的部分可以使用 normal, italic, oblique (仅 IE4 支援 oblique） 来替换之。
/ Y* f( J; J) N3 {! _5 m& e/ _
5 w9 P* e# O6 z# i4 V9 k$ ?此属性的内定值为 normal。 2 M! W0 _4 W; w& M6 m% r6 \
# x2 Q5 |% P: C5 w7 E2 g
参考范例： " Z. \% B$ G9 c6 W1 n
: ^$ \8 R3 H4 [3 H5 L% S) g
H4 {font-style: italic} + a; d' j$ {' Y/ M4 j
P {font-style: oblique} ! Y# k; O' |3 S6 m
( t9 P/ f" N- S+ z7 d) X* o. H{font: 12pt/14pt} / x% l% l4 V8 Z( n% G' x
w+ j& T/ W2 z
此属性用来指定字体的大小与每行行距的高度。上例中，12pt 指的是字体的大小，14pt 指的是行距的高度。 4 x% K7 u' R1 v) V# ]* U. }
+ R0 R& F& E; C8 c
事实上，{font: … } 可以集结所有跟 font 有关的扩充属性在此标签内，所以您除了在 {font: … } 内指定字体大小与行距高度外，还可以在此标签内加入所有上述介绍过的属性。 ! Q8 S) `& S, X
2 J! K! k, {& ]4 P6 M参考范例：
% z d9 g/ |# ]% t/ E$ O5 C' x4 S K2 ~! F1 p2 j
P {font: italic bold 12pt/14pt}
2 O! a0 a* U7 I2 j1 G, DSTRONG {font: 14pt/18pt bolder italic Times, serif}
- {! Y) t8 m# j, D2 P6 Y/ @ v {* [; G% [
CSS 中 Color 的扩充属性
r" q2 O( l$ S- c{color: red} # g3 T- _% i7 |" g3 q' i% K. c
" x- K# p) ?' R+ U- W
此属性用来指定字体的颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。
; d$ R M( l0 k; ], B: i) T8 M0 G8 w
4 V, @7 m6 S" j0 f/ b如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。 2 \3 \9 k7 f5 b' j# k
. q; U$ A2 a6 ?1 Z5 u参考范例： 9 D$ e* i, q3 B
/ Z* n. Y& {* \" |% UBLOCKQUOTE {color: navy} / C6 @! ?* p' r
LI {color: #eedd44} 1 m) c- U+ X+ ?# {: G
LI {color: #ed4}
7 }" M, r- @2 ]; mP {color: #007f3a} + W/ V% i. o# W( H8 m9 a* |
% Z" n. o* x4 W# k, u* l# g{background-color: red}
1 I+ s1 Q/ j) U1 l2 k1 d4 z
. F ^# M" G* @4 e此属性用来指定整个网页的背景颜色，或某一段落，某一区块的背景颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。
5 E' r9 d( K* W' G9 t/ K H; k2 f$ W2 v: Z, D' E
如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。 4 @+ Y4 S% Z, m; v3 S
) `4 ^" W! x1 F" p: j% }0 y
参考范例：
. `2 u- C+ u# b4 F9 o' b, i$ C& ?+ d
BODY {background-color: #ed4}
5 u1 O' A* s6 _$ y, cBLOCKQUOTE {background-color: navy}
+ U6 h4 l; D$ |4 U {: CH2 {background-color: #007f3a}
( k/ E. Z! J- \- g/ @+ K; w$ c W
{background-image: url (/images/xyz.gif)} " E6 x5 a( ]- V; Q7 g. V V
9 A/ j0 q$ Z; ~4 d$ ?$ c7 `
此属性用来指定网页或某一区块的背景图案。画底线的部分可以使用图档的绝对位置或相对位置来表示之。
. \. p' K" a* f) G1 }! ^7 O4 m( o* {/ w x0 j" Y) t) I1 }
使用此标签时，最好同时也指定一个类似的颜色做背景颜色。
. V. X1 o4 T" L, f: j, v
: O5 k9 w* u! z' ?参考范例：
+ ?2 ?) U; u h* l3 ?
, D! r# ]) l6 l v f5 sBODY { % {* N! n1 K; Y3 |2 g
background-image: url (/images/2T_logo.gif);
+ H2 A+ j6 Y t6 ^$ Z8 \background-color: #ededff
/ h2 z Y3 {' g# v/ q( D! z}
0 L; r8 k7 N. a* I/ n# x; JLI {
7 L. `5 ~/ _1 U) e3 l/ obackground-image: url (http://www.2T.com/2T_logo.gif); * Q. w! k/ p! l" `1 Q) P
background-color: #cef
0 c% ~% a. [1 a4 x' o3 Q, U% h} ( k5 m: [9 x3 O) t9 s" I; O
y+ O y; e( n
{background: (…)} 3 j2 V0 h# ]% F: ^- w/ U
# o: h# H2 Z$ h0 I此标签可以集结所有跟 background 有关的扩充属性在此一标签内，所以您可以将所有上述介绍过的 background 属性一起加进来。 c9 K e* V) P7 n/ ?" A0 @
& _# s3 N' T( q# y9 L
参考范例： $ d2 S* i/ c5 _" U
% U( g6 W# [; h! k+ W, D5 }5 G- j
BODY {background: white url (/images/2T_logo.gif) repeat-y} ) D, v( Y2 p4 p+ L& |* g( f
LI {background: #cc88ff url (http://www.2T.com/2T_logo.gif) no-repeat}
J# n3 K! v" \0 W1 k
. t3 G& C C0 n/ S: i0 q+ u+ k A) [% v0 b
CSS 中 Text 的扩充属性$ Z t0 s- u9 l o* ?% K
{text-decoration: none} $ W% w% G% ? A/ z+ D4 p, d
. H" Y- z( k, P+ T% e; |0 z
此属性用来指定文字是否画有底线或被线条杠掉（如：被线条杠掉此例）。画底线的部分可以用 none, underline, line-through 来替换之。 , p+ \+ Z( g! I; O8 D4 x7 B
9 t2 W& X9 `" e5 x' ^
此属性的内定值为 none。
1 Q6 K$ S2 D# c* J4 ~" A: @1 I, W; p# C9 n/ ?
参考范例：
9 d4 x! U4 s4 D4 [5 O7 M
5 f/ J! K( y7 r" G% s& u1 x1 _( H/ OP { $ y; n7 j5 G$ _7 ]+ l# X# ~/ e
color: navy; & n+ D* ? z8 h& k* x t4 B
text-decoration: none, _# a1 p, j% G! x+ Q
} " j5 [9 E+ R( d
A:link, A:visited, A:active { ( y4 { G0 _0 K8 Z; i" w1 w
text-decoration: underline 5 a! J6 }# `; y9 q# _
}
d+ D- J. e) m- O4 Z# I, r3 c8 W
1 { a$ A) V" Z- D) D, |$ r1 h$ _1 t. d
{text-align: left} " L$ e, w; y* _; Y- A
5 a2 r( w3 C! \9 u- \) P
此属性用来指定文字是向左、向中、或向右对齐。画底线的部分可以用 left, right, center, justify 来替换之。
" R/ Z& V. [# H |6 C0 M5 @4 U2 ]/ o/ ~: {
参考范例： 8 o, w" }# n1 i9 K/ p
( m' d, u6 [4 ?- I7 bP {text-align: left}
8 _1 t- n. N( FH1 {text-align: center}
. |. \( p# v3 G- \5 B+ {
. q& z# O3 ]$ g* U{text-indent: 2cm} 5 c! i" e% i% z9 f4 Y( J$ U* `
1 Z2 S9 y6 z) p0 ~) V
此属性用来指定文字向右凹进去多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。
/ @% O# m2 g! ~8 j9 w, P, l% l' b9 N0 V, w' Q" o3 N1 E3 T, i6 ]
参考范例： - P: W* P6 `. B* h# H
* u- S& ?# F" P" m. `- lP {text-indent: 3cm}
" A; V* j. q. [. ILI {text-indent: 60px} : R. W3 U) M8 d4 x: G
BLOCKQUOTE {text-indent: 20%} . ?0 w! Y' `3 w
, o( | p& t, T{line-height: 14pt}
1 `4 N1 @. Q. B* G
- j* u7 ]- m- R& G- s此属性用来指定每行行距的高度。line-height 常与字体大小 font-size 一起并用，写成 12pt/14pt (12pt 指的是字体的大小，14pt 指的是行距的高度)。line-height也可以用 % 表示之。 % 是以母标签来相对比。 3 ^7 B/ r6 l3 e8 W; C' G1 o
" z. \$ d( x' H/ o9 J! i参考范例：
7 z5 e6 S. h2 N* T D, X; G p: z1 q4 S9 _
BODY { / }6 ~' S! ^) _& ^' t$ z, q
font-size: 12pt;
6 O4 ^- g" t9 ~line-height:14pt
% o& `4 M2 f) l$ f: b} / c. O/ [* d$ ~( r7 V- b
H1 { & n1 ?. p9 @5 ~" B5 `% W. M
font-size: 150%; ( U, C+ X3 |7 b0 s
line-height: 200%
9 V/ u2 b( z" ]5 _4 M/ w7 j}
8 F' @6 T" p$ R- \! I, _
+ L; l) M2 z2 O$ L! {* V7 d& NH4 {font: 16pt/20pt bold italic} 3 ^0 ^7 e1 C0 f1 i j# f/ J
) m# r& H. F6 M5 D6 x6 @
4 B# Q0 O+ b, pCSS 中 Margin, Padding 的扩充属性6 x8 M6 `0 c6 g$ O# {6 G
{margin: 3cm} 6 s/ i5 u% j$ a# K0 ?" B5 X
% | D% |. X1 m& l8 B
此属性用来指定网页的上下左右边缘，各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。
+ |6 Y f! C. n* ?- p2 N& ^
2 }) o; {; T* r7 v+ ]$ b7 {margin 可以用 margin-top, margin-bottom, margin-left, margin-right来替换之。
3 Q# {. c8 V! X2 \6 S, Q4 e0 U% j/ _) m+ A) Y4 g+ D
此属性的内定值为 0。 5 O. l- k- x8 a7 j; b! }
. k8 k; I. r3 I, F- {' i
参考范例：
, O' Q) s- Z1 ~( a4 [3 |7 `
5 o1 Y2 u L! H) p& ABODY {
( y* f' r* S% I4 Omargin-top: 44px; ) a! V/ F2 \2 ^9 k
margin-bottom: 2cm;
$ h9 n1 Z, `7 s% B% B1 a6 Xmargin-left: 66px;
; \& j* r4 p2 p2 D1 P& Jmargin-right: 1.5in
# \& @. }: Z( c% M7 w}
0 X: S3 X5 @. L" n5 l" l8 ~2 sP {margin: 15pt} + R2 q8 ]/ |. K4 v F
( N( b% C7 J' j1 Y! j
4 w6 ]9 m9 K- Z- ~3 V
: x& S, x9 V, a c1 \0 J8 X{padding: 14px}
3 x( K7 o9 u! ^8 J7 H3 @
' O+ q% k" K0 [" y2 E此属性用来指定各段落或各区块间，上下左右边缘各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。
0 a5 h) j- V- z) C
! A" s- C0 |/ N# F( ~2 ]padding 可以用 padding-top, padding-bottom, padding-left, padding-right来替换之。
- [: Y$ J( N7 [
5 I% Q% Q# B; }# I) I8 x$ y q此属性的内定值为 0。IE3 不支援所有与 padding 相关的标签。 + m, {' p3 x4 j' |- r7 M
. A! P6 M: c: R参考范例： , Q4 H. }% @6 [
0 n# R! a4 M% K& j- q' J- K
BODY {margin: 15pt} : O% {" ^* ~ V( G) C* X8 t
DL { ! [% M) \4 x: k; n0 G# `+ r
padding-top: 22px;
8 X9 u% S- S) K' k# I jpadding-left: 20%;
1 B! p- L+ y, I} / a6 O% g" ?9 a# R
! h! n& b Z! p4 I( d
1 n( B' d, x. W7 f* g 0 @ ^! C$ x6 U4 {3 V9 |( b7 F; `
8 _; S6 `% E5 l: [4 d, J* Y2 q$ a3 ^/ y/ n6 W6 _
6 Y% N6 ~8 n B
( X% }) T l; p! e7 ]: K9 B
Θ2001-2003 版权所有：『上海博峰网络科技有限公司』 电子邮件：gf1818
* [$ ^; P) L# d, E+ c( R- [+ ~ 8 j6 X9 O3 d1 I. c! b
|
/1 
发表于 2002-11-29 18:22:00
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
千斤顶
显身卡