|
您可以利用下列 3 种方式，将 CSS 指定的格调加诸于网页上：
& r& S% t* S3 v! J4 r# e0 X8 [- ]# o( o
1. 在 HTML 档案里加一个超连结，连到外在的 CSS 档 * n) @# Q2 ?, Q0 T
7 J" n5 T3 _* w( v4 Q( D
这个方法最方便管理整个网站的网页风貌。它让网页的文字内容与版面设计分开。您只要在一个 CSS 档内（副档名为 .CSS）定义好网页的外观风格，所有参考连结到此 CSS 档的网页，便会依照指示，反应出定义好的风格。 3 ^; Q# j `+ g
; U* v- v4 L9 F: v; G
它的写法是：
, x' D9 Q) O1 z( a7 L8 f' d+ R% b# @: D |; e
<span style="display:none">6 j: R! C7 O0 a5 K0 K' }</span>本页标题
<span style="display:none">- v, Y' C# H2 i* l</span>( i9 V! t4 l, A& L* ?8 I& b
9 I( j9 ]% M" ~8 V- z. g- g/ KHREF="http://www.xyz.com/xyz.css"
8 J' \) g- T& Z2 |$ P# g+ n- ETYPE="text/css">' \, v3 R8 ^( x. T* R M7 b" B2 G
. O( m( f# g! @9 O- T7 q* f
' k# {- V9 J/ n, t' n$ ~此种方法 Navigator4 支援得仍十分 Buggy，请小心使用。 % y8 o) _0 q( T, ^3 K
2 \7 W+ z! m6 z3 E
2. 在 HTML 档案的 ....... 标签间，加一段 CSS 的叙述文
2 B! i$ @+ t) J% l+ E- W& ]7 X8 ?
/ v4 m, Z7 _8 v这个方法适用于指定某个网页，除了展现外在的 CSS 档定义好的网页风格外，同时还要展现本身 HTML 档内加注的 CSS 。
& H- O5 H+ K3 R4 ? p
- q4 [5 b. n. d4 `0 @* E0 x7 X, f& o如果内在加注的 CSS 叙述与外在连结的 CSS 叙述相冲突的话，网页的展现将以内在加注的 CSS 叙述为主。 ( M9 j& ]) L. {2 L' q8 i
: a" Q8 d8 \6 z Q0 I( S
它的写法是：
: M2 x- ^* l2 B. h- |$ ~
0 C9 m+ [* K7 F: R, B& x8 Z# c( M<font class="jammer">" j+ o# G- M- l</font>
本页标题<font class="jammer">8 E9 [/ R, P5 _$ N% Y5 W</font>
. j* f/ t( r& J: n& c8 o* V2 Y" i6 w. q& c( {( O
* P* o1 s) \8 ?7 l
; y% |% Z: g( j" J8 V; k* V开始本页内容…" _# a' z. h0 C7 b5 f# [; E
3 l: h* r5 X( E0 r) F, m" u3 u
/ t2 @: y& o# y6 {1 [; y* T& z. d8 D
特别值得注意的是，为了防止不支援 CSS 的浏览器误将 标签间的 CSS 风格叙述当成普通字串，而展现于网页上，您最好将 CSS 的叙述文字插入 标签之间。 , K# d! y9 }; s4 n
+ ?& p. a8 m# @% W, B1 p1 j8 R* m
3. 在 HTML 档的字里行间中，随时有需要，随时加一小段 CSS 的叙述指定 ' P4 e+ |, M# H; U$ H
/ I4 s) S% Z& y. L s这个方法适用于指定网页内的某一小段文字的呈现风格。 ! I/ P, j' ?7 ~3 V+ x, n2 w* h
2 l5 m- P# r1 ]2 F% i
导览器除了会展现出外在的 CSS 档与此 HTML 档 内定义的 CSS 风格（如果有的话），同时还会展现字里行间的 CSS 风格。 8 v# I3 }: Y( M, _
9 r1 h% m, \3 ~' k$ H/ r# ^! |如果字里行间的 CSS 叙述与 内在定义的 CSS 或外在连结的 CSS 叙述相冲突的话，导览器的展现将以字里行间的 CSS 叙述为主。 3 _4 J! a, |. P" @- L9 z
' ? F- K' a. e; o# v2 K+ J6 Q$ R它的写法是： 8 d7 A# M# v" R+ |' `9 k( J5 L
* o* b+ o3 V: X. f4 _7 T8 h! r+ v1 V
<span style="display:none">. @, R4 L6 O+ @# W! x4 h. L</span>本页标题<font class="jammer">: Y9 z6 G- C) f9 D! J! `9 ^1 P</font>
6 Z, e; j4 x. I+ v, h
! {5 _+ @1 u4 [1 O3 P$ |7 ]* q6 ^& R
( s% k" s2 k% ~8 G) J7 y v7 f
开始本页内容…- P6 S3 m' S& F: |3 M( g. Z# V
- x G4 g& w8 d6 O
9 } ]% ~9 Y( ^4 j
# m' [5 b) {/ Y4 _5 @, X+ p
0 X; h( ?) N0 b" W, |上述的 3 种 CSS，可以同时并用，也可以择您所好，单一或成双地使用。如果各 CSS 间的叙述相冲突，则内在定义的 CSS 会盖过外在连结的 CSS ，字里行间的 CSS 会盖过 内在定义的 CSS 。 ' J' E1 j% @9 C; ^0 F
3 M. }: l7 Y. y4 g! G6 v6 ~5 W
这样一层一层地推展、补充下来，使得「阶层性格调控制」清楚又有效率地帮助网页设计者，一方面中央统筹整个网站的网页风貌，另一方面又可以随著各个网页、各个文字段落的特别需要，而分别调配不同的格调。十分有条不紊，十分方便管理，所以称之为「阶层性」的格调控制。 . g* G6 |8 c! p$ J6 K! r
( I, L/ D+ R4 |1 |5 P/ F1 @CSS 语言的基本语法
& l" r% i3 u: a7 n) F5 l
; {' H; x7 j. O9 K7 T% f4 X) MCSS 的语言与网页排版语言 HTML，在内容上有一点点类似重覆，但是语法却大不相同。它的基本语法是： H1 {font-size: 16pt;8 Z2 U& R- P: {7 ^4 x. H7 h
font-weight: bolder;# U7 Y6 C) }0 K6 ^* p
color: red}. \" C) h1 ^. j }. |# i# K n1 y
& p( \& n6 {1 W) |2 P; L上例中，H1表示您想要界定的标签元件为 H1，font-size、font-weight、color 这些扩充属性则表示您想指定 H1 应该长成什么模样。在上例中，我界定我的 H1 应该展现出字体大小 16 点，特粗黑体，红色的模样。
! T E* u9 G4 z0 O: k. c6 F2 i! a1 Z9 ~
简化之- o+ c3 w5 I% u& x* \. y
因此，顺著这个基本写法，我们可以继续定义其他的标签元件： H1 {font-size: 16pt;
+ M* M* L. R4 Ffont-weight: bolder;
5 M. P! W& z V; pcolor: red}
2 C) K% {- i! MH2 {font-size: 16pt;
! m( F5 @+ W- W; h7 Y/ J. r& e" ^font-weight: bolder;7 }% W8 u9 G( L2 i E8 O
color: red}
7 u4 @: t2 `1 A) fH3 {font-size: 16pt;
) A; E- ?1 C2 I% w7 _# i8 Ufont-weight: bolder;
( r2 W. e) q5 W6 x3 ]* Jcolor: red}; s: O0 s( J/ s7 V
8 R6 k8 b. [9 `6 i. e# Y. G上例中，H1、H2、H3 界定的标签元件均长得一模一样，因此我们可以将它们简化写成： H1, H2, H3 {font-size: 16pt;
1 b8 e# {& u$ l0 q+ Kfont-weight: bolder;+ H* Z: n" |! J2 }* e- C; ?
color: red}
2 _* q4 T! j S
9 Y- G2 B# [! q- t" f: M# _而如果您想要让您的 H1, H2, H3 各自拥有各自不同的风格，那么您必须一笔一笔地条列说明清楚： H1 {font-size: 16pt;
3 ?" k% F2 L. {9 nfont-weight: bolder;
4 L$ }4 L' J( Q4 Lfont-family: Times, serif;7 w) A2 A# H8 N3 C; ^) i0 _
color: red}
6 v' p; f% F: A+ Z9 A6 Z* RH2 {font-size: 14pt;
! L S0 Y) y O9 R3 L& g# lfont-weight: bold;& _. Y h" }! [8 Q# J
font-family: Georgia, serif;) L2 J, K7 u3 o8 p
color: green}
2 @# z* a1 L8 b# @, a2 }2 q, V W: cH3 {font-size: 12pt;5 l: q& g; ]3 F5 J/ g& q0 h
font-weight: bold;- J3 C3 g2 Y( r ]4 D
font-family: "New York", serif;- S# F; f! ~& g) q1 Z1 L
color: gray}
7 C( V( \6 n$ g' V' b! g& K) X" n4 p% O; w5 ?1 O
另一种简化方法8 P$ O6 t$ K% u" M
虽然在上例中， H1, H2, H3 各自拥有各自不同的风格，使得您必须一笔一笔说明清楚。但是您会注意到，我们在指定 H1, H2, H3 各自不同的风格时，其实大都是在指定 H1, H2, H3 的字体表现（字体大小、字体粗细、字体的形体）。因此，我们可以将所有以 font字眼开始的叙述，整合在一个 font 大项里： H1 {font: 16pt bolder Times, serif;
@/ g7 k- `$ w/ ^; { tcolor: red}9 U4 q4 T; j$ g* a
H2 {font: 14pt bold Georgia, serif;
Z" c, x z, `& _color: green}2 @( Y" V5 P5 q4 j {" o
H3 {font: 12pt bold "New York", serif;
! g( D, C$ g% v. S# q) q' A2 Acolor: gray}& F, R+ k6 Q" p! z+ t
0 e% C$ z/ w. p- E% M) n
特别值得注意的是，在上例中，H3 的字体使用 "New York" 字体， "New York" 是两个字，所以必须将它 "括号" 起来。而 H1, H2, H3 的颜色规定，并不能一道并入 font 大项中，而必须另外标清楚。 + w5 |7 R9 x: q. {( Y' Y. L
$ Q4 A- D D6 e1 L
顺便一提的是，CSS 与 HTML 一样，都有「注解」的符号。HTML 使用 做「注解」；而 CSS 使用 /* 这里是注解 */。 3 C( I( o8 ~) z- K( A8 I; P0 i
. Q& u' G% n. `+ s. h0 r" [CSS 中 Font 的扩充属性& G- [* C8 {( z3 \% e: H2 W1 @
前言：9 X1 @7 H5 j/ P% m
1. CSS-Cascading Style Sheet 只能展现于有支援 Style Sheet 的浏览器内，例如：网景的 Navigator4 与微软的 IE3, IE4。版本不够新的浏览器显现不出 Style sheet 规定的风格。
: O3 ?0 N0 l6 [2 W
1 K$ p, \: f5 j! `# u& M, r2. 本系列文章只说明介绍 Navigator4 与 IE3、IE4 浏览器 共同支援的 CSS1 扩充属性。至于 W3C 详细规定的完整 CSS1 文件，或者 网景 、 微软各自支援的 CSS 扩充属性，请到其网站的 Style Sheet 部门观看。
0 o3 p! H- ?6 Y! E8 Z# D2 H
: K$ p9 c- K. l8 R% b x/ ~$ I- o$ _8 |3. CSS 的写法使用大写或小写均可。 * ]. O3 _, A0 Y% F% D5 k
0 B9 N9 V9 [8 T* g N# @! @
{font-family: Times} : H$ X( M; m6 z# B
3 s/ b7 }) K# P$ A# u
此属性用来指定字体的形体。画底线的部分可以用各式各样的字体来替换之。您可以同时指定好多种字体，以防 user 端没有第一种字体时，可以继续依照您的指示，选用第二、第三种字体。
; Z% W8 ?- Q/ O, ~' c& r0 q6 L+ H) G2 c
参考范例：
/ I+ m5 @4 A0 X! b. V1 w+ X. [6 n0 l( J1 B$ V" Q5 U
P {font-family: Times,"New York"} - _1 Y5 K, w5 G$ ], N1 _% m
LI {font-family: "中黑体"}
3 l$ K' u* e' p* L) g% |. [+ n+ dBLOCKQUOTE {font-family: monospace} 3 N4 L8 u: Y7 s* S: d, I, J
7 _. S+ `2 Q6 o0 f5 s特别值得注意的是，在上例中，字体 "New York" 、 "中黑体" 因为是两个字(以上)，所以必须将它们 "括号" 起来。此外，第三例中的 monospace 是用来指定写程序码时使用的等距字体。
2 P' P# y! s( `0 D+ T) @
) l8 E; y7 h l0 \+ c$ e" m{font-weight: bold}
. m' t6 R3 e7 H/ y9 ?7 j4 ]3 n, D1 v) Q* j
此属性用来指定字体的粗细。画底线的部分可以使用下列 2 组表示法来替换之：
- U0 \3 s i0 h* o3 V/ F- G( `3 k( T$ b" H( r5 G
* normal, bold, bolder, lighter
4 t, `. n2 \( d: L; l' ^+ u* 100, 200, 300..........900
# h$ r6 M* N9 w; A$ S7 e2 P+ D! f0 m
此属性的内定值为 normal。
% _; \8 [. K9 K3 Y+ c4 |% Y
+ n) z0 M& N& {) K. q6 e/ @# Z5 j参考范例：
8 o2 Z- j y5 ?% @& J
) T& r$ ]# n( y2 e* j: h2 ^H1 {font-weight: bolder}
, |6 ]0 w- ^$ n+ _BLOCKQUOTE {font-weight: 200}
: d; G# n# u6 H: T; O4 C, O9 w P. {$ J3 _1 R: g
{font-size: medium} 9 _% z/ S! l, r. G) |5 p6 b
( m# W9 a! @' \: r* D# w
此属性用来指定字体的大小。画底线的部分可以使用下列 4 组表示法来替换之：
5 _! Y! L% A7 V$ ^! K
4 M0 i" {2 G( e4 V. a b! [* 绝对 size: xx-small, x-small, small,medium, large, x-large, xx-large
) o" h, @4 F4 y$ L, C
- c- }/ e3 C: j4 T, s# G* 相对 size: larger, smaller（与母标签相对比）
& `6 D4 P! w- i7 o. x9 l% ?: L& |! _# K
* 字体的点数 (point): 12pt,16pt, 20pt.... 4 j3 f, ]1 w( k9 X8 ?4 b
& b( O: g) I9 F4 ?# V9 L6 l* 百分比: 80%, 120% .... （与母标签相对比） ; U/ x5 Y5 _2 q, }" M
/ ^; J! J/ H" m/ [0 y
此属性的内定值为 medium。
: i* ~! Z t8 `& ~2 e
* o3 d& N. e2 s参考范例：
+ b" p! n6 R8 R! w5 {9 o( x
+ w; p& s# U2 \9 y( U; zBODY {font-size: medium} . L* m% Z- L; Y4 D2 x* ]5 D
H1 {font-size: 18pt} + F9 _3 i7 I& Y4 U, \
H2 {font-size: 90%}
) C2 r1 B6 g4 r* _/ x1 K8 T4 @
8 K5 |& T3 z3 @) X" W{font-style: normal}
& w+ B# { ~9 q |
, ?# R% {$ u5 d" n2 U+ O) X0 a此属性用来指定字体的正体或斜体。画底线的部分可以使用 normal, italic, oblique (仅 IE4 支援 oblique） 来替换之。 2 I8 q. K6 d* c* P8 W$ }' ?1 d
. R0 w5 ?8 v+ `' S5 Y; Z此属性的内定值为 normal。 0 i K( J8 B7 D
* r" W& Q/ O; t/ s+ W5 y/ a8 g, N参考范例：
; o" R: K- B% L& Q8 z% O* M; Q0 l
H4 {font-style: italic}
/ F9 g' W8 e' {7 }2 `2 g! sP {font-style: oblique}
& x x5 ]" E* B- P% t- l' p1 m+ L6 `8 a( F
{font: 12pt/14pt}
1 f3 H+ P# i# S! E& E# H7 v' B& m( w. N" L7 C
此属性用来指定字体的大小与每行行距的高度。上例中，12pt 指的是字体的大小，14pt 指的是行距的高度。 0 I$ |5 T; y: y- L
4 @+ a- B$ t& `3 U, @& ?* z8 C- X8 p( K事实上，{font: … } 可以集结所有跟 font 有关的扩充属性在此标签内，所以您除了在 {font: … } 内指定字体大小与行距高度外，还可以在此标签内加入所有上述介绍过的属性。 6 Q ?& p5 |* h: e
" N0 w* D2 e# u* ? k参考范例：
; q" Z0 {/ W$ |/ j7 e( Z. p4 _
% b& t" e8 h( ]3 AP {font: italic bold 12pt/14pt}
. y% |* z' r; \% }9 w1 ZSTRONG {font: 14pt/18pt bolder italic Times, serif}
* u; _/ ~6 A1 l& x% E6 M9 J6 K6 r2 r `
CSS 中 Color 的扩充属性7 A- h" Y9 M, k5 p& ~6 s# G
{color: red} & B# W! f) X( k2 O; A% S3 b6 K
% {3 s }. D6 B& c. K, F此属性用来指定字体的颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。 * h" a, |. z+ G2 o8 J
/ X# P! }: o$ O4 T如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。 7 R: M# Z7 R. z4 a* c
% ~- ?4 {' q" n: c0 s' ]% Y
参考范例： ' h5 e$ P! b7 b- v8 R( b8 u/ v/ C
& c( D8 j, t" L9 }8 H% fBLOCKQUOTE {color: navy}
?" w+ q7 }. |7 _* S: R& GLI {color: #eedd44}
" l5 ~& s7 D3 xLI {color: #ed4}
+ ^! f9 s. q% \+ NP {color: #007f3a} & L* d. S7 w1 d% ]5 O: I
1 |4 {* M$ ^( o" [* n
{background-color: red} + R4 D( i9 I- }9 ]
* J& R- L. s6 m* U2 r此属性用来指定整个网页的背景颜色，或某一段落，某一区块的背景颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。
- m- z) j i& q
! N: E! U. z9 O% G. h! t如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。
( E4 c* r- p; A( G4 g" B" r' I J) i6 j5 R
参考范例：
+ H7 [, S) w S8 O5 K5 g% z7 C1 J
; k$ `/ E4 n8 ~* s0 I9 A8 uBODY {background-color: #ed4} 4 g- x' |4 S+ d9 w- k
BLOCKQUOTE {background-color: navy}
' A+ v9 M- U6 C4 U' K$ hH2 {background-color: #007f3a}
9 m& k" {. h5 ^4 U0 |& e( J% N9 J+ ?/ D! s2 @- g% P
{background-image: url (/images/xyz.gif)}
1 x# Q7 L0 w# v. {8 R0 Z! Z0 t! |
+ Y9 B _& m- ^- ?, |此属性用来指定网页或某一区块的背景图案。画底线的部分可以使用图档的绝对位置或相对位置来表示之。
8 Q* I" H( C4 f E+ M
5 |+ f. ^) i) ?6 W, [6 z1 u使用此标签时，最好同时也指定一个类似的颜色做背景颜色。
! `# |% I) ^, i$ C& m
5 G/ Y# S4 y: x/ _+ p9 A4 P5 D参考范例： " |4 ^+ K: G/ g8 I0 _( X
* w3 ?3 B9 Q+ b1 B5 c$ H
BODY {
( O" D* l7 n* X( f: Hbackground-image: url (/images/2T_logo.gif);
! n* u1 ^ G+ E; k$ Gbackground-color: #ededff
, ~3 T, [) n! f* B) o# M} & P- j1 y+ N! K+ V
LI {
) _( ~, o# e1 T6 G5 \- G8 @background-image: url (http://www.2T.com/2T_logo.gif);
0 s* z ?7 F8 e3 Ebackground-color: #cef7 S1 ]1 D; Y3 P" \' \
} 1 u1 e* A1 G2 [
5 t: v" v$ E7 s, i; S5 P
{background: (…)} ; \, U3 ^3 r2 o5 M) P T) q
4 M% N- Q) Q9 L8 @
此标签可以集结所有跟 background 有关的扩充属性在此一标签内，所以您可以将所有上述介绍过的 background 属性一起加进来。
2 H1 B5 \+ ~/ {9 e* j# B! }8 v
4 v6 ]6 x6 w( O5 B+ [参考范例： ' v- U0 W# x! w+ r
* X3 P" b9 b( u6 z
BODY {background: white url (/images/2T_logo.gif) repeat-y} * K3 ]# h t8 N2 q- F; s+ i
LI {background: #cc88ff url (http://www.2T.com/2T_logo.gif) no-repeat}
: @6 z" ~" }1 n# x3 B, X* ^
8 J. @$ M7 w. a% ~+ M
; ]. ]0 f1 S# E9 X% ? ?CSS 中 Text 的扩充属性! y7 Z W& E' A4 _4 X# m
{text-decoration: none} ' f6 w s- Q: n/ o
9 w- L1 \$ s1 p$ b$ E, e8 [* }7 \
此属性用来指定文字是否画有底线或被线条杠掉（如：被线条杠掉此例）。画底线的部分可以用 none, underline, line-through 来替换之。 / O* |# C, S/ s
% v/ k$ F7 H0 L5 Z5 \
此属性的内定值为 none。 6 S- y. I6 r$ Q8 t* ]% d% U
3 ~' t. _. O- _7 C5 Z( a
参考范例：
/ x, b5 M4 ?4 t
3 e, m. s" Z6 [; X! M3 \. RP {
9 Q) c! V1 J. m6 F" ]/ w' C E9 Hcolor: navy;
( x2 E2 f2 T t, Dtext-decoration: none. f% |1 G( ^0 @3 ~3 Y
} 5 Y. P- X/ A6 [; U" e* L' c, p' [
A:link, A:visited, A:active { 6 d: E' m. {# Q( q
text-decoration: underline . x) L5 E! X, U: ^# U! ]
}
, F" z& E0 o' ^, ^8 X
7 e) h. k5 `% S( ?, b+ F. o7 I* e$ B! F: k% R
{text-align: left}
7 ^- M; `# H( p# x. G6 ~2 m g6 n) C H# X- X- w
此属性用来指定文字是向左、向中、或向右对齐。画底线的部分可以用 left, right, center, justify 来替换之。
1 { h* n6 ~9 c, F- z
% \3 L. k3 [# C, b1 v% Y- d x" B参考范例：
* }4 s& ]* y3 T" k. ~
0 A8 i% F I8 w c/ vP {text-align: left} # Q: P8 }1 {* Y- s2 p
H1 {text-align: center} 8 W. i) c7 f, k6 j0 D
8 C9 K; C; }" t) @1 J/ u2 t$ k. I{text-indent: 2cm} 8 z. |; Q7 E0 I- d9 n1 I( A
/ p6 k# W9 O4 `, W1 y) u& H
此属性用来指定文字向右凹进去多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。
6 \: ]% |6 S* R& D* E$ N8 X& q8 a6 B; }$ A$ q( f
参考范例：
3 c8 [* j. ^+ o! M/ N1 n. ^- w: m+ d$ t9 \7 m( v
P {text-indent: 3cm}
& \$ L. F! Q- gLI {text-indent: 60px}
% v7 N1 u' J1 w) Y- L" ]BLOCKQUOTE {text-indent: 20%}
+ Z2 {6 S3 l7 R7 T: ` J* _8 j; B1 C
{line-height: 14pt}
5 z" P7 N! b/ t8 z E9 T2 t0 M" H. f5 N! W. f
此属性用来指定每行行距的高度。line-height 常与字体大小 font-size 一起并用，写成 12pt/14pt (12pt 指的是字体的大小，14pt 指的是行距的高度)。line-height也可以用 % 表示之。 % 是以母标签来相对比。 . S6 T) q* N& G; F ]
/ y. l$ P P$ @8 j4 \$ x
参考范例：
! } \6 [9 ]$ M5 I) L$ y& b: t7 h
7 F0 [* V1 j4 E7 i# a# d- qBODY { ; b$ z+ Q$ a- @/ J
font-size: 12pt; " y/ X3 O( ?0 ~2 y2 ?( N
line-height:14pt
% S' g& H7 h( g- L: w' @( M} * e8 S+ x% L0 N+ W
H1 { # k( x* i7 h" N
font-size: 150%; ; U& O6 B A% x
line-height: 200%3 p$ @% d; D- \7 R* G* Q4 Q
} 5 x' z8 F/ o+ ]
S2 Q. V7 J: D, u/ H0 WH4 {font: 16pt/20pt bold italic}
. R3 P' [3 b) T, L9 L6 S
8 f3 P* G, S0 E/ t% c: R+ r8 T0 e' N) ?' S; u
CSS 中 Margin, Padding 的扩充属性2 S" u' @5 r6 m$ r
{margin: 3cm} / V) R: B) p# k7 U" [& o: T3 S# Q
7 t4 i3 B9 n1 z4 j此属性用来指定网页的上下左右边缘，各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 % S: o Z. e4 w! X
+ T/ a& y9 I8 G" F' S) V* cmargin 可以用 margin-top, margin-bottom, margin-left, margin-right来替换之。 ' P! ^6 H& C' a( L: t
* [/ `3 C( N6 p9 W( }3 E4 S此属性的内定值为 0。
/ e- z7 w6 m1 a% G- [! ^ n* B4 p: N: V
参考范例： 8 n9 Q& k0 O9 L+ n) ]0 s$ s9 X
. f/ G* j9 ?9 \. @* j. {
BODY { ) v) K+ p- O G: y, c" K% S* }
margin-top: 44px; ! _! @7 l+ D! i8 g- e3 f
margin-bottom: 2cm;
5 C8 O- x) l$ Y+ e" G" f& ^margin-left: 66px; 8 M8 x7 Y- ~) ]1 T- H( b: L
margin-right: 1.5in & H3 A5 M- J7 N' q6 \1 L& s9 ?
}
: I7 @7 Z/ |2 wP {margin: 15pt}
) }- f( O( S9 B; O2 V y4 B2 l% g2 J: @9 h& O
5 [# j |5 G+ e& X# o6 }% D
4 e( J; y5 G$ i! u{padding: 14px} 0 }( x: H; J T
) f! u; X. u! a- f( m. @0 N9 q B此属性用来指定各段落或各区块间，上下左右边缘各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 2 s8 P, @2 Z# G0 J& ]
4 r H# C" D9 |" W- s3 y* b
padding 可以用 padding-top, padding-bottom, padding-left, padding-right来替换之。
5 @6 x% b9 j# O: o0 X
1 n1 r% ]/ M: @" {" q1 r此属性的内定值为 0。IE3 不支援所有与 padding 相关的标签。 5 }% M. P0 R8 y+ K q$ [; _, y! V
- [: @; m# ?4 D. T+ Q+ f! o
参考范例：
- w4 ]/ O) X) G( ?5 e. ?$ f! U. }; M
BODY {margin: 15pt}
, w. l1 \$ N R( N5 n% [5 ]6 zDL {
- G7 \+ Y1 i1 tpadding-top: 22px; ; _. W# S* V* i1 I, w8 z
padding-left: 20%;
3 s" D( g x2 |/ Q8 W; v}
e7 { k8 g1 B# i
# W6 o; L. T# @ G5 }) z0 q
& N% s6 T, u) `3 `9 z 2 |. e# T- t& J2 H
/ M0 I) }) P2 [5 n
8 @4 v5 G+ [6 S
7 R! D- {7 p+ J8 {$ r+ [, E
6 X; s: G% N+ D% ?Θ2001-2003 版权所有：『上海博峰网络科技有限公司』 电子邮件：gf1818; m& c0 X# ~$ b! A
. o7 L: E- P% D+ S7 a' k& j
|
/1 
发表于 2002-11-29 18:22:00
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
顶
踩
转发到微博
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
千斤顶
显身卡