|
您可以利用下列 3 种方式，将 CSS 指定的格调加诸于网页上：
* F2 A2 H8 x( B' B
) U% I/ V9 x# `' Y8 o4 w1. 在 HTML 档案里加一个超连结，连到外在的 CSS 档 % \) ?; I7 H3 a' P/ j' w
) @( F9 K: \4 H! L6 N这个方法最方便管理整个网站的网页风貌。它让网页的文字内容与版面设计分开。您只要在一个 CSS 档内（副档名为 .CSS）定义好网页的外观风格，所有参考连结到此 CSS 档的网页，便会依照指示，反应出定义好的风格。 2 `$ x1 Y. V+ Q8 c$ J
4 L5 V$ O& Q" {" d% E
它的写法是：
3 H3 Z& U4 v$ }: e8 _$ W8 \$ e/ y5 I# q3 T( D, R/ `
<span style="display:none">5 @( b* ^7 }$ }8 G( x</span>本页标题
<span style="display:none"># D% d" Q; y( b9 v0 O$ H4 M</span>; S: L: J2 y8 `/ P
{2 _9 P& G2 Q S& p3 EHREF="http://www.xyz.com/xyz.css"
# T( }' T: q( H& d1 n% |9 q; rTYPE="text/css">
+ t( S: I4 K3 W( t; U; U5 Z6 G/ z# c# | w. K4 K) i0 I9 g
' w+ {6 M2 \& ^- j
此种方法 Navigator4 支援得仍十分 Buggy，请小心使用。
% ~: x( e9 _. R2 M, I/ g( s
- I: H3 G6 ~" X- e, W. |2. 在 HTML 档案的 ....... 标签间，加一段 CSS 的叙述文
7 z% ?: p3 k" J# \1 W+ e5 t- _+ ?5 V: O
这个方法适用于指定某个网页，除了展现外在的 CSS 档定义好的网页风格外，同时还要展现本身 HTML 档内加注的 CSS 。 5 }4 E' f2 _5 m' r! J
& k2 V9 m- o1 p% {, y$ n" `1 z
如果内在加注的 CSS 叙述与外在连结的 CSS 叙述相冲突的话，网页的展现将以内在加注的 CSS 叙述为主。
2 |! G$ X# n+ _3 x: L0 M1 p( N. g+ ]
它的写法是： & k. t" k% \ A
9 l3 X' h) e) c, s/ y- U/ F<font class="jammer"> _: T$ C. D! |</font>
本页标题<font class="jammer">' _: b0 u5 T2 F/ n) I# V6 F7 X4 v</font>
' F% f' v4 f, y0 ?5 t6 @9 ?) r. G5 M4 X& j3 j
8 v F0 t9 ?: W9 D4 _" Z
% D% g6 f) e- n! w' e, l3 ]开始本页内容…- |4 Q5 f& h' p
# d' d/ z1 M% k( @
& }; a7 a/ V" D6 R6 ^/ x# b5 }5 F/ q! M, M+ d; s* B0 |
特别值得注意的是，为了防止不支援 CSS 的浏览器误将 标签间的 CSS 风格叙述当成普通字串，而展现于网页上，您最好将 CSS 的叙述文字插入 标签之间。 K8 y) r! o4 ^% m) N
. I( O! _0 {$ A6 U, \2 I8 L
3. 在 HTML 档的字里行间中，随时有需要，随时加一小段 CSS 的叙述指定
6 a: [$ O2 j3 F4 @
k) h+ A3 M6 f4 C% j- ~5 U这个方法适用于指定网页内的某一小段文字的呈现风格。
6 D% L1 d7 ?0 Z2 N. d) U' O0 e/ ~$ Y1 x
导览器除了会展现出外在的 CSS 档与此 HTML 档 内定义的 CSS 风格（如果有的话），同时还会展现字里行间的 CSS 风格。 # H0 a1 d: H' x% A3 ^
# Q" ?* P o& b' ~
如果字里行间的 CSS 叙述与 内在定义的 CSS 或外在连结的 CSS 叙述相冲突的话，导览器的展现将以字里行间的 CSS 叙述为主。 & Z/ `5 B0 @! F r
- U+ `3 B0 z' z它的写法是：
5 b; i- j* ?% Q9 y" C, X9 ?$ u8 n7 O2 A: F8 |+ p6 h) j j) y* G
<font class="jammer">$ d d% X4 k0 ?</font>
本页标题
<span style="display:none">. F8 U9 g% M C3 L' \# V9 C% a</span>* s" J a$ q4 W7 V6 h
: `0 T' T( O7 ^! w% v
% y& p. g& Z5 w& g' s- I% ~( ?3 G9 ~3 @ / K) I! l" `! B2 P
开始本页内容…
7 l2 M; i: X) }2 B
! e: V" A8 _' N( Q1 G
; N' a1 P z1 m2 X; }/ \
. s' J* P7 F. W2 `5 e0 \8 Z2 U2 f; B5 b! m
上述的 3 种 CSS，可以同时并用，也可以择您所好，单一或成双地使用。如果各 CSS 间的叙述相冲突，则内在定义的 CSS 会盖过外在连结的 CSS ，字里行间的 CSS 会盖过 内在定义的 CSS 。 * H. o1 R; ?5 ~5 A2 i+ u
6 x# l$ Y& |8 v* d2 `: ^( ?
这样一层一层地推展、补充下来，使得「阶层性格调控制」清楚又有效率地帮助网页设计者，一方面中央统筹整个网站的网页风貌，另一方面又可以随著各个网页、各个文字段落的特别需要，而分别调配不同的格调。十分有条不紊，十分方便管理，所以称之为「阶层性」的格调控制。 " _' t9 i0 H y5 c6 d% M
2 _0 j& |" b0 b8 qCSS 语言的基本语法
* T% v; d; {" T$ c5 V. m2 f# h8 Z( G! P) W
CSS 的语言与网页排版语言 HTML，在内容上有一点点类似重覆，但是语法却大不相同。它的基本语法是： H1 {font-size: 16pt;
( ]. i# n8 U6 s/ t; N) Cfont-weight: bolder;
4 y5 [( W* L1 h& [6 icolor: red}
* @. f4 {$ E* M) A4 X( M8 l- l9 K0 u* _
上例中，H1表示您想要界定的标签元件为 H1，font-size、font-weight、color 这些扩充属性则表示您想指定 H1 应该长成什么模样。在上例中，我界定我的 H1 应该展现出字体大小 16 点，特粗黑体，红色的模样。 $ B) O. B# G8 H7 {7 L
5 Z* t4 m$ }3 g ~' G$ b- e* K简化之
% D7 h5 U8 S& N6 s因此，顺著这个基本写法，我们可以继续定义其他的标签元件： H1 {font-size: 16pt;+ |8 r3 `) g! S E' x+ Y
font-weight: bolder;) X& p$ R% J9 j! a" F( c: J: B
color: red}
7 _0 k( j: O6 Z: W m7 ^H2 {font-size: 16pt;
3 a- y! l: D3 S5 @5 nfont-weight: bolder;; ?" `! B* A+ O' r: {5 L
color: red}
& Y2 F) k! A( K" c8 IH3 {font-size: 16pt;$ T7 G+ q% D0 T
font-weight: bolder;. V; |7 U8 k! D T
color: red}$ |4 y6 ~& r7 i6 ^
7 e: c8 ]1 G/ K8 D2 f上例中，H1、H2、H3 界定的标签元件均长得一模一样，因此我们可以将它们简化写成： H1, H2, H3 {font-size: 16pt;
. K" J# A* h, @. C& u9 t" l- Ifont-weight: bolder;
! B2 Y9 [( Z( P3 N; k& O7 gcolor: red}
& s+ j. N' H! @( a, g6 R& S. r
5 M2 S, M4 U7 z+ g5 z# A而如果您想要让您的 H1, H2, H3 各自拥有各自不同的风格，那么您必须一笔一笔地条列说明清楚： H1 {font-size: 16pt;
6 I7 }* G9 z Rfont-weight: bolder;% x3 l! g2 _6 z8 _$ y4 j
font-family: Times, serif;8 j$ B. {9 Z/ g2 }
color: red}" R2 x/ ^/ w# ^0 S
H2 {font-size: 14pt;
5 \* ?' f Y* M; kfont-weight: bold;
: z1 h% K' R" K, g! d; Kfont-family: Georgia, serif;1 Q8 h9 Q% }, z4 Y! Y, t# w* Q; z
color: green}
/ U0 j0 Y( Y5 m/ H) S, t) uH3 {font-size: 12pt;
( i5 L0 u4 z/ T2 q: R3 e; ffont-weight: bold;. S7 U' h; E1 t6 T( h. \/ P* S
font-family: "New York", serif;: k: i, H! y2 |+ i
color: gray}5 j* t0 \7 ^$ J( Q
; G$ V4 p% l; A0 ?" L8 F0 N8 N3 }* ~
另一种简化方法! _& H8 l& [: d
虽然在上例中， H1, H2, H3 各自拥有各自不同的风格，使得您必须一笔一笔说明清楚。但是您会注意到，我们在指定 H1, H2, H3 各自不同的风格时，其实大都是在指定 H1, H2, H3 的字体表现（字体大小、字体粗细、字体的形体）。因此，我们可以将所有以 font字眼开始的叙述，整合在一个 font 大项里： H1 {font: 16pt bolder Times, serif;/ X+ f6 A, k4 O( _- O6 k- R. x) I
color: red}
" f$ p& E( n- @ H4 _8 u1 SH2 {font: 14pt bold Georgia, serif;7 c$ J5 }1 U# W
color: green}
6 f0 Y9 r' `& G! @H3 {font: 12pt bold "New York", serif;
( ?% U0 u' S6 o) _1 x% Z& e1 c5 R* Gcolor: gray}+ G. G) Z- x. f- F( ~
* _8 ]: e0 d$ B: @
特别值得注意的是，在上例中，H3 的字体使用 "New York" 字体， "New York" 是两个字，所以必须将它 "括号" 起来。而 H1, H2, H3 的颜色规定，并不能一道并入 font 大项中，而必须另外标清楚。 X& K# C7 J( k$ P" H' u' o
: @7 ]3 u% ?4 r4 l8 W N) T+ ?顺便一提的是，CSS 与 HTML 一样，都有「注解」的符号。HTML 使用 做「注解」；而 CSS 使用 /* 这里是注解 */。
& N4 G% z$ E$ G; Q8 j8 [, v- I- o: V. `! j* v/ @3 {
CSS 中 Font 的扩充属性( X- E! V. Y0 K% `: ~# f
前言：
1 O" [7 a* }% v- d7 h& e1. CSS-Cascading Style Sheet 只能展现于有支援 Style Sheet 的浏览器内，例如：网景的 Navigator4 与微软的 IE3, IE4。版本不够新的浏览器显现不出 Style sheet 规定的风格。 4 O c# z5 I2 H6 @1 y8 N; M3 `$ k" T
4 h( C4 b2 }, {6 I6 E. v2. 本系列文章只说明介绍 Navigator4 与 IE3、IE4 浏览器 共同支援的 CSS1 扩充属性。至于 W3C 详细规定的完整 CSS1 文件，或者 网景 、 微软各自支援的 CSS 扩充属性，请到其网站的 Style Sheet 部门观看。
3 C- Y5 S) _; n2 y# V7 d5 X$ N3 `" a: B/ \. ~6 ^" @% Z+ L
3. CSS 的写法使用大写或小写均可。 3 `/ U4 |" K9 }' ]7 I1 ~5 {# b
: c0 \4 U4 f: I" L( M{font-family: Times}
# {/ _) d& ]- G9 \% [7 y* V. q8 P& r2 X
此属性用来指定字体的形体。画底线的部分可以用各式各样的字体来替换之。您可以同时指定好多种字体，以防 user 端没有第一种字体时，可以继续依照您的指示，选用第二、第三种字体。 ' K1 C3 u; g. x( K8 J9 C
! H7 v+ z3 A. T% ] K参考范例：
: Y2 |/ o; l$ q; ^7 D( s8 _0 f1 M$ X" h/ `" u) M
P {font-family: Times,"New York"} 6 S1 v+ F) I3 x ?
LI {font-family: "中黑体"} ! t' l8 K# }9 R6 f! X5 |) {% l& Y
BLOCKQUOTE {font-family: monospace} ' g/ P- J F, v! s/ k$ z7 m
& d. T3 q5 Z; L特别值得注意的是，在上例中，字体 "New York" 、 "中黑体" 因为是两个字(以上)，所以必须将它们 "括号" 起来。此外，第三例中的 monospace 是用来指定写程序码时使用的等距字体。 ) e P0 \" e6 L) X2 b5 F9 Y0 r
) t1 I! E3 Y# K$ a{font-weight: bold}
) j o+ j) }2 f
( m. M/ A7 _* x" R% R此属性用来指定字体的粗细。画底线的部分可以使用下列 2 组表示法来替换之： 2 R7 r2 h ?; t
0 H$ _! t) r/ X5 y1 m* normal, bold, bolder, lighter
: k( i+ M6 \# b* 100, 200, 300..........900
/ M: \: _# ~/ R! L, P5 Q
5 x4 Q; ] T) F n此属性的内定值为 normal。
& F7 {5 f5 L, v Y. j9 p5 O7 Y$ ]0 R+ W: }; c9 k+ D5 k+ `) m
参考范例： 4 o9 H8 Q8 P, Z
) _# q, S% _0 z) qH1 {font-weight: bolder}
* I4 M2 w' L0 y8 E' TBLOCKQUOTE {font-weight: 200}
0 _8 z; w+ R* A+ E3 t2 f" B. c R9 F8 T! q& j
{font-size: medium} ! U- b- w; y+ i' k0 @
8 p6 R3 ]7 U6 c6 i* y
此属性用来指定字体的大小。画底线的部分可以使用下列 4 组表示法来替换之： ' h" b/ G- z& [, Z8 c. L+ W& |. G
' o4 V. ?! a$ f9 E- V; \
* 绝对 size: xx-small, x-small, small,medium, large, x-large, xx-large
( s" [0 v) T( R7 e0 J( X" u
/ M5 t" [# M/ E8 T& b8 a' o* 相对 size: larger, smaller（与母标签相对比） ' G* _" j k% ~4 O: J
* B% C1 @: W/ d
* 字体的点数 (point): 12pt,16pt, 20pt.... R4 ?$ u- h6 m1 x
* b' P3 R2 i- Y* e/ k& V
* 百分比: 80%, 120% .... （与母标签相对比）
# I# c7 M$ Q# G _( {/ W, @3 E9 P; @% [% d! l
此属性的内定值为 medium。
8 c4 J- K: L, B, X6 T& ~4 |; E+ j# y% j6 v7 d; w
参考范例：
& V3 \0 {; L1 v5 X7 g& j& K8 V2 |& O H# t
BODY {font-size: medium} . U+ `. j3 Q2 h7 G/ P8 ~1 j
H1 {font-size: 18pt}
. \: s0 @$ g6 Q( A2 NH2 {font-size: 90%}
! [, \" `' `5 a8 | ]2 P& x) r5 i% L" F" Q
{font-style: normal}
& H8 ^+ f0 J7 H
: o8 I# e8 q ^. {0 {此属性用来指定字体的正体或斜体。画底线的部分可以使用 normal, italic, oblique (仅 IE4 支援 oblique） 来替换之。
7 ]$ \) T! @4 _ K; Q0 G$ C! G
此属性的内定值为 normal。
. @& U% E- c0 m! O$ y7 N; X' m) O; R. ^5 F9 k7 e2 B
参考范例：
' G0 l/ \( p3 W; V# C7 E# w: B" p) u6 s" ^" |
H4 {font-style: italic}
" p% r2 Y4 p4 X8 k) eP {font-style: oblique}
+ }0 h; D2 D# {' K3 t; [- I* N) {& j3 p- g$ L5 n V! |. _
{font: 12pt/14pt}
6 B8 x5 ^6 i. G! a0 H/ ]6 B- o0 {
% k% m* }3 C! A3 V/ l& [& u此属性用来指定字体的大小与每行行距的高度。上例中，12pt 指的是字体的大小，14pt 指的是行距的高度。
- A0 _- g9 Y" W- Z1 C( K/ i1 B: u5 W% M/ e; [
事实上，{font: … } 可以集结所有跟 font 有关的扩充属性在此标签内，所以您除了在 {font: … } 内指定字体大小与行距高度外，还可以在此标签内加入所有上述介绍过的属性。 1 o; F* k1 [& a# i$ L
/ R- e9 n" y% O- Y1 N参考范例： ! O0 W& n9 ]9 x' b' V5 e, T
& {3 l! G V1 E; {
P {font: italic bold 12pt/14pt} / y/ z, F! ]! I: n
STRONG {font: 14pt/18pt bolder italic Times, serif}
' ~5 W, ^$ i* |- b l+ f: |9 C% m2 V/ {; w7 N! a
CSS 中 Color 的扩充属性
, y/ W4 k( j* Q' c' A, Q{color: red}
& M2 b% f/ M: } [7 k
0 m1 N# H5 Y! D9 `' N% ]! |# O此属性用来指定字体的颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。 8 c, ^# M; h8 l1 T, e
/ O2 }0 r( A: K0 s# n8 c- A如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。
0 x3 w( g4 g2 s s; ?/ F' b% g3 o5 J( y
参考范例： + B. P( b5 u/ n2 ~& k/ k4 _% Y
4 m8 X; @8 X! S: k; P! K$ e
BLOCKQUOTE {color: navy} 0 d/ T) U7 l% `5 k$ Y
LI {color: #eedd44}
6 [# s# c/ i0 b8 r+ ?, [1 vLI {color: #ed4} 9 M+ s: \* b$ w% H3 C& R
P {color: #007f3a}
/ A* ]6 }$ J( o6 [3 y
1 K1 {7 M1 P7 [& \{background-color: red} # m: a0 ]7 b8 K9 W" ?7 K
# n' X6 {3 F6 X
此属性用来指定整个网页的背景颜色，或某一段落，某一区块的背景颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。 * t% X9 c* e# x/ r8 R* D( @' t
& j. G7 m8 x8 [: I, F4 k5 k如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。 $ }0 @: Z$ Z. v+ a0 B: c [
8 m5 X% ?! K( {, J9 y! J参考范例： / A y/ D$ E; a) [+ _& [) l- _ n5 e
: @% J+ ~$ B! V5 X0 zBODY {background-color: #ed4} / ^( p! E% F' e) f0 }
BLOCKQUOTE {background-color: navy} ; O( G" ?7 F; _5 `% Q K
H2 {background-color: #007f3a}
: f+ ]% M% J" i X" R( o& t0 @' p& ?( Q2 q
{background-image: url (/images/xyz.gif)} ! S, K4 t7 `+ m! R
& A/ ^& H: b0 D0 l3 \' d1 ^1 E Y此属性用来指定网页或某一区块的背景图案。画底线的部分可以使用图档的绝对位置或相对位置来表示之。
+ E% Q, N& ^5 i% [1 A: V
# l% l! }5 T0 k" s1 O7 D" ^5 v, \* L使用此标签时，最好同时也指定一个类似的颜色做背景颜色。 : x0 J' ^2 A1 U4 q3 ]8 a
A, k7 u. X" S! T
参考范例：
/ o7 Z. c; @1 a7 ]. W
4 [: i ^5 V4 v8 I$ k; w6 H. c2 B, } g, UBODY { 3 I% E( j: a/ J8 A* @
background-image: url (/images/2T_logo.gif);
! J( ]. k7 b3 L! ^, j/ u. gbackground-color: #ededff
/ O5 w! x6 A# @: j}
i" b( H% g: ?- N2 @& e, GLI { 2 e, Y. k! g* T
background-image: url (http://www.2T.com/2T_logo.gif); " D/ C; t" A& E Q
background-color: #cef
9 j% p4 u8 W0 a1 a}
C9 h0 Q& V0 V- [, V. s2 j/ O* x& m2 P
{background: (…)} % v; k! u; Y3 c6 g9 v; k2 A$ R, C
b# x2 W% l8 _% v: `! e此标签可以集结所有跟 background 有关的扩充属性在此一标签内，所以您可以将所有上述介绍过的 background 属性一起加进来。
9 f! X! e, N+ J' ]
- G" ^( [$ m/ ~8 U5 Z参考范例： & M( ^" {- |1 i7 N$ e
' q" R M& O$ @$ C0 B9 `BODY {background: white url (/images/2T_logo.gif) repeat-y}
& S, v4 V$ A+ Z+ u# XLI {background: #cc88ff url (http://www.2T.com/2T_logo.gif) no-repeat}
! ]; M- b$ D) J8 X# h; I# B' j3 }6 D, P8 {! s$ ^* j
7 G' J) o; W V. B
CSS 中 Text 的扩充属性
+ [; D |: f1 f5 h$ G E{text-decoration: none}
+ H0 R6 z& K# ]( e/ ]$ o
0 C7 [; v* f1 l0 v此属性用来指定文字是否画有底线或被线条杠掉（如：被线条杠掉此例）。画底线的部分可以用 none, underline, line-through 来替换之。 1 T5 |. Q5 T, [+ U; L
( x% l- L6 {# G6 x此属性的内定值为 none。
3 c0 s) L4 _, w' }. a/ F' Z
2 D. _6 y- `$ _( V+ U+ d参考范例： ' O6 K) f! ?1 L" o K i9 u
! s) X/ E6 [- v4 J, f: ^
P {
1 b8 D; x! S% ^. f- fcolor: navy; , Y8 M2 E/ A, ]
text-decoration: none. h" M4 | H' w7 a* X0 T
} 5 f6 L- ?% F' {8 e( z- G
A:link, A:visited, A:active {
K7 E# H; U8 J# f" |: D9 l: S. qtext-decoration: underline 7 H# m P; r; r4 B' U
}
* c8 v7 Q6 h D6 Q5 [5 F# i3 r% R
' m% B5 i* T. V+ K6 e" k4 i& d: |
{text-align: left} & A+ [! J7 P, E& Y3 u& j2 m
$ R z$ o/ ~5 i8 S- V/ X5 R7 H此属性用来指定文字是向左、向中、或向右对齐。画底线的部分可以用 left, right, center, justify 来替换之。
! O' i" m. i2 ?: j6 K* H: Q0 [! \- J6 f; \9 x: Y3 e9 |# M
参考范例：
& p+ `8 l5 O8 l( N3 I( P1 z9 Y6 W6 N9 V' a* I) f/ {
P {text-align: left} ; ?; d3 i' H: D! w1 \% t4 P
H1 {text-align: center} 6 m) ~8 ?+ B b8 m G% P+ T, Y7 k. c
9 d/ O& \! c e2 D
{text-indent: 2cm}
5 I$ _# K' V. u7 h$ D. m8 Y# A' S
此属性用来指定文字向右凹进去多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 " O4 [( u, O+ K. ]( Z4 x
/ k; |% I- R: }: C- j: p
参考范例：
+ A& A& k6 I% e- @4 {9 h/ N' s8 f9 U% v" x( M( A% ^
P {text-indent: 3cm} / `$ n" I; `6 M. z
LI {text-indent: 60px}
& k7 A5 ]& L) D3 |+ c. v, C; SBLOCKQUOTE {text-indent: 20%}
$ |4 c2 B9 [: s6 p I- @: `! ]2 K9 t2 M8 Q% P6 |1 h# Q
{line-height: 14pt}
, R; Y# f) m& a$ j& M: O6 {7 G! Y6 H& U) `$ O2 M
此属性用来指定每行行距的高度。line-height 常与字体大小 font-size 一起并用，写成 12pt/14pt (12pt 指的是字体的大小，14pt 指的是行距的高度)。line-height也可以用 % 表示之。 % 是以母标签来相对比。
& M U: \5 c9 X( d! V( E0 }
7 |$ y0 @* q/ M$ Z参考范例：
0 a$ {) n! U; ?: C, F' H- T4 X
& \0 ~( p3 G- E$ e* {BODY { * U3 I2 ]. s! H( R7 x2 n
font-size: 12pt;
. X9 w& x9 K6 \ O& Z9 Uline-height:14pt" [9 K0 s" p- D
}
( s! J9 Y# @6 y' }# U1 _H1 { / b. }! T' D/ f0 y
font-size: 150%; 8 n4 Q& s3 ^( l% {' b! H
line-height: 200%# e2 u* f8 H6 `; U& q3 a0 ?1 c y
} 4 B8 E- |1 o3 C+ O# g7 C' R
2 V/ ?1 V% Z( @- A
H4 {font: 16pt/20pt bold italic}
! b1 @2 \- ?' E$ S. L
' b4 l6 u/ q4 d0 Q5 ]
* @6 [; k5 H+ g: T- jCSS 中 Margin, Padding 的扩充属性
: G5 E0 a) q! I8 v' {. W* W- {{margin: 3cm}
8 D C, w$ Q9 m% f' Z
! D! a+ W6 ~+ H7 z! y此属性用来指定网页的上下左右边缘，各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 - e( p% m+ `4 l8 b
; f8 z2 z% q' I0 E
margin 可以用 margin-top, margin-bottom, margin-left, margin-right来替换之。
% M4 W8 |+ h1 T2 ]+ }0 w( B) e' g% P; r: N6 R
此属性的内定值为 0。
8 q( e+ w$ f/ _; E
( }4 j( r! S n0 S+ G ]2 t参考范例：
1 E0 _7 S& N) }( ?2 j. q
6 O* V- i& K) s0 l- ^) s& f! O% F7 IBODY {
; b# M! Y' `- ?1 {* j: Ymargin-top: 44px; 0 P5 z: I- t. ]$ V
margin-bottom: 2cm;
/ T, g* {$ F# ]' I7 Xmargin-left: 66px; ; q2 [5 F4 [: `% q" b& _" f2 C
margin-right: 1.5in
% c$ L1 R) W2 Z- M0 Q1 Z}
7 a O; F, V& B! r$ e0 Y0 y) YP {margin: 15pt} 3 b. R+ H) K7 q( f- Q
9 A- t4 f% K7 Q8 C6 K: f' T% M7 B: i/ S8 K& F/ P
, n/ n) M0 W" f( K/ D+ M{padding: 14px}
) _; p7 a5 [1 C8 f1 X2 |
! r+ |7 t0 M3 o) o! N' G$ L/ A6 P此属性用来指定各段落或各区块间，上下左右边缘各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 ; d6 x7 {9 o% ~$ O8 V
. P) F+ M0 @, I
padding 可以用 padding-top, padding-bottom, padding-left, padding-right来替换之。 ) p# _# q, Y i/ l
" Q* O- @" V. [' A) Q2 @+ [
此属性的内定值为 0。IE3 不支援所有与 padding 相关的标签。
2 x( u* u7 i: j$ o! s7 F. C
9 o, q- t# o: h参考范例：
9 D3 d5 [- t4 a% K! h9 @8 ^- X
BODY {margin: 15pt} ?% r3 b" L5 ]; W- u* X
DL {
9 D/ ]2 P$ C9 a! x3 l5 u2 i- k* e# opadding-top: 22px;
* ~/ W5 R' b4 W! p" N o4 I3 P, m% r" Ypadding-left: 20%; - M' z: \; `& C
} % s a/ w5 O/ |. ~* d
" B- A: W6 \2 Q9 k( Y5 T
' a+ z$ ~( K! f0 V' h: j 7 W2 Q& N; X4 V7 a( ^
) K0 {) @% d1 i x( {: v* n: X1 d+ A! Q; r8 o
& l" L; [% n: M1 _+ s% m- h& Q' V( I+ d5 \9 _ [
Θ2001-2003 版权所有：『上海博峰网络科技有限公司』 电子邮件：gf1818# M. l7 J1 C! o7 J- i
' @/ ?* [: k9 ^6 E1 c" @: w |
/1 
发表于 2002-11-29 18:22:00
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
千斤顶
显身卡