|
您可以利用下列 3 种方式，将 CSS 指定的格调加诸于网页上：
: I% Z. S; I1 B' d3 I* a6 @* B- O8 A. E8 C4 q
1. 在 HTML 档案里加一个超连结，连到外在的 CSS 档 # s1 Q6 e0 U3 e. j" d, I6 V N3 G
$ u2 ^* V! n3 q; P$ G' `6 P! F0 J这个方法最方便管理整个网站的网页风貌。它让网页的文字内容与版面设计分开。您只要在一个 CSS 档内（副档名为 .CSS）定义好网页的外观风格，所有参考连结到此 CSS 档的网页，便会依照指示，反应出定义好的风格。 ( `2 A* W* n( s
* N6 G2 W% s1 j6 y
它的写法是： $ z+ Q! T+ D2 W% @# w
# B6 ~& F- @" y
<span style="display:none">: X+ W$ @9 ] d/ J+ {</span>本页标题
<span style="display:none">. O0 E3 t3 Q& ]: y</span>
: ^3 D/ _1 o% g1 j0 C. I3 ?4 j6 }$ ^
HREF="http://www.xyz.com/xyz.css"
% U9 J. {3 `; b3 A) K z) Y5 h1 zTYPE="text/css">
% l1 a, ]2 s8 d4 x% i( \6 f, [ K: x- T% M/ A( t
; _! u* Y. K9 s' l; ^# M* j此种方法 Navigator4 支援得仍十分 Buggy，请小心使用。 . h- v( s. f, ^
' {, A1 L& W# [2 m: k* q& S. u2. 在 HTML 档案的 ....... 标签间，加一段 CSS 的叙述文
' S* G' Y4 H( K% n- ~6 \+ Z; O
2 Z3 S) b) n5 S8 K5 _这个方法适用于指定某个网页，除了展现外在的 CSS 档定义好的网页风格外，同时还要展现本身 HTML 档内加注的 CSS 。
8 W0 U& ?0 P c0 A1 ]" `3 |) E& C6 f1 b4 ?3 S1 ~3 F3 S" F
如果内在加注的 CSS 叙述与外在连结的 CSS 叙述相冲突的话，网页的展现将以内在加注的 CSS 叙述为主。 7 m. y4 Q( o! c0 u3 I
/ Q& D/ y0 {( Z s; ^它的写法是： . `1 U2 ~/ V% l" Q M( D
# a5 \- ]* k8 @) z$ s7 `
<span style="display:none"># ^* k7 r: P8 I! u# D9 v( [2 S8 C</span>本页标题<font class="jammer">& A: F. o! k$ O! \' e! S/ k</font>
, f) P3 o# [% T" d. k7 {
# Q7 { V. F- ~/ {. m3 x5 d$ Q$ r; P8 x* j3 I# w, J- z
& h# A/ D% V7 F3 H0 W开始本页内容…/ W+ Z$ L; D2 y/ a/ E2 A w6 m
5 w7 d3 R" q$ x+ N7 Q, Z, [' D$ [
( u/ l0 p9 t/ `, C8 ]6 Z' n2 J
# `, d4 c6 T7 k# J: e特别值得注意的是，为了防止不支援 CSS 的浏览器误将 标签间的 CSS 风格叙述当成普通字串，而展现于网页上，您最好将 CSS 的叙述文字插入 标签之间。
' A( j( A6 e1 O+ y
. _4 S$ d! X& ~$ [3 J' x3. 在 HTML 档的字里行间中，随时有需要，随时加一小段 CSS 的叙述指定 ' }) _% C0 E1 N3 J8 q/ m
, r; Q% [. t4 z9 R1 q这个方法适用于指定网页内的某一小段文字的呈现风格。 / a! J/ B9 \/ Y) x' \: R: L
, I* X' s7 n5 R导览器除了会展现出外在的 CSS 档与此 HTML 档 内定义的 CSS 风格（如果有的话），同时还会展现字里行间的 CSS 风格。
; T7 x6 N8 K/ }7 `2 h- F" m' W, {' A! h4 F
如果字里行间的 CSS 叙述与 内在定义的 CSS 或外在连结的 CSS 叙述相冲突的话，导览器的展现将以字里行间的 CSS 叙述为主。
- Y h7 N9 C8 Q' D* ]
7 a- s" x7 I+ z它的写法是：
2 N# k% X+ P/ r. i& Y% M* I7 C! k' @' |8 G" r' [5 T
<span style="display:none">5 ^) L" V1 P* j; _( _8 ?& ?</span>本页标题
<span style="display:none">- J7 Y3 l! V) u</span>
# P- C! Q4 H: @& R8 R' I
' ?/ m( C$ ^5 | P2 b( X% {$ L
8 a# w9 t# x0 y! W- h
开始本页内容…6 T. @8 _; S+ w1 q1 ?' I- {
5 L4 ]" ^( ^$ R V s% m
4 }* @: X3 w- c9 U
( N! s ~+ ]! {
( v& N. V% ^* {& B) n上述的 3 种 CSS，可以同时并用，也可以择您所好，单一或成双地使用。如果各 CSS 间的叙述相冲突，则内在定义的 CSS 会盖过外在连结的 CSS ，字里行间的 CSS 会盖过 内在定义的 CSS 。 / \ r7 ~& E9 O4 e4 F
?, `2 w9 k0 c8 P这样一层一层地推展、补充下来，使得「阶层性格调控制」清楚又有效率地帮助网页设计者，一方面中央统筹整个网站的网页风貌，另一方面又可以随著各个网页、各个文字段落的特别需要，而分别调配不同的格调。十分有条不紊，十分方便管理，所以称之为「阶层性」的格调控制。
, I+ b3 r1 @; } k$ B9 ~0 [: T& H0 O& V2 P
CSS 语言的基本语法
2 v$ l8 U4 D# a3 J, e0 B9 H2 _9 b1 ^$ c9 V+ R N P4 i5 d7 W
CSS 的语言与网页排版语言 HTML，在内容上有一点点类似重覆，但是语法却大不相同。它的基本语法是： H1 {font-size: 16pt;+ ?6 x0 _* N$ v9 i# y& |
font-weight: bolder;6 D8 w, Q3 `, E) H, f3 c, D3 f6 |
color: red}! F8 R% N, H+ F/ J+ e! R
0 D7 F, w3 j5 k# S/ _( f! P上例中，H1表示您想要界定的标签元件为 H1，font-size、font-weight、color 这些扩充属性则表示您想指定 H1 应该长成什么模样。在上例中，我界定我的 H1 应该展现出字体大小 16 点，特粗黑体，红色的模样。
& }2 e/ J6 V: ]; N- r! W2 ]
8 C4 P1 ^' h+ r简化之
, {4 Q, |0 k( C5 E2 ~2 w因此，顺著这个基本写法，我们可以继续定义其他的标签元件： H1 {font-size: 16pt;, W/ P9 Q8 ~) { R" _, N8 E# i
font-weight: bolder;
8 K, T% a" r, Ccolor: red}
( c1 p3 n/ U K0 G5 hH2 {font-size: 16pt;
( p2 e/ q- \* D Cfont-weight: bolder;
( _+ `7 y$ c: C1 Q$ Ncolor: red}
: s, I3 n4 q, M' a! |5 SH3 {font-size: 16pt;
5 ?1 l: X+ R! F$ X9 ]' cfont-weight: bolder;
9 y/ t$ h( r$ Z4 S3 ccolor: red}
" Q. I8 c, q. T+ z3 h2 G5 v
. R% Y& E& X `+ {) B$ x) m M7 F上例中，H1、H2、H3 界定的标签元件均长得一模一样，因此我们可以将它们简化写成： H1, H2, H3 {font-size: 16pt;' Z8 [" z$ O1 k5 C( K# {
font-weight: bolder;6 O0 O/ {1 `7 Q4 L+ K7 o4 S- }
color: red}
- N: _9 n/ e* o1 H) d; j5 i* b/ t
而如果您想要让您的 H1, H2, H3 各自拥有各自不同的风格，那么您必须一笔一笔地条列说明清楚： H1 {font-size: 16pt;/ w+ `4 _/ w/ g
font-weight: bolder;# h0 n8 ^3 _% b, h. z/ w" g3 \, [
font-family: Times, serif;2 L$ |' c' ^, c+ a
color: red}
9 u/ l5 z, i/ z$ UH2 {font-size: 14pt;- r) w/ a' m! K
font-weight: bold;- L* }" \9 _5 Y
font-family: Georgia, serif;
% V8 G* L) L2 c, D w; w& P" t# mcolor: green}! z H. a2 j: ]
H3 {font-size: 12pt;
! U! E: P9 r% F# c) T* D7 S( Xfont-weight: bold;
# O# o% r& O5 I4 Kfont-family: "New York", serif;" J; ]0 `9 q) X- }, o: b3 l6 I( w
color: gray}# T. ?, V/ l3 s
. b' Y# B. [- I6 K另一种简化方法
, s4 N8 H5 z8 p$ o8 t/ }' c. h虽然在上例中， H1, H2, H3 各自拥有各自不同的风格，使得您必须一笔一笔说明清楚。但是您会注意到，我们在指定 H1, H2, H3 各自不同的风格时，其实大都是在指定 H1, H2, H3 的字体表现（字体大小、字体粗细、字体的形体）。因此，我们可以将所有以 font字眼开始的叙述，整合在一个 font 大项里： H1 {font: 16pt bolder Times, serif;
, b& l& K4 c( I7 D5 |% Lcolor: red}- l% u/ [0 a9 \$ p+ s) V8 @* t9 r. d
H2 {font: 14pt bold Georgia, serif;
0 c \9 D* U* s# x& [# N% _color: green}* w( G5 t( m$ I5 Z$ M0 N
H3 {font: 12pt bold "New York", serif;* U& o( D: `0 ?) @' Y
color: gray}
5 d1 O3 A, F2 P& r1 A; e& p2 J# |& D) p+ _
特别值得注意的是，在上例中，H3 的字体使用 "New York" 字体， "New York" 是两个字，所以必须将它 "括号" 起来。而 H1, H2, H3 的颜色规定，并不能一道并入 font 大项中，而必须另外标清楚。
, D0 ~7 @2 D9 v S% y. X; f/ Z) F
) F* o- r5 |2 s4 Y3 {顺便一提的是，CSS 与 HTML 一样，都有「注解」的符号。HTML 使用 做「注解」；而 CSS 使用 /* 这里是注解 */。
5 @- J* Y2 n' j" c4 N" a
( q. @6 P9 ~" T+ o% qCSS 中 Font 的扩充属性, U- k- L5 k9 S M" d* F
前言：
" j5 L% j* l7 B1. CSS-Cascading Style Sheet 只能展现于有支援 Style Sheet 的浏览器内，例如：网景的 Navigator4 与微软的 IE3, IE4。版本不够新的浏览器显现不出 Style sheet 规定的风格。
0 m/ i& @" k; R1 [' M
! s% H+ T" g0 @* ]9 v+ _ O. d2. 本系列文章只说明介绍 Navigator4 与 IE3、IE4 浏览器 共同支援的 CSS1 扩充属性。至于 W3C 详细规定的完整 CSS1 文件，或者 网景 、 微软各自支援的 CSS 扩充属性，请到其网站的 Style Sheet 部门观看。 ( v0 [. S$ Y; i
: [5 }7 C1 D5 H2 X1 T. `+ X2 m9 R W
3. CSS 的写法使用大写或小写均可。
l. }7 L2 }: C: r+ Y7 `0 p, b L9 l- X5 {' L/ k
{font-family: Times}
1 Q# H1 g3 Y+ i n: J6 o
% w' V2 D9 [1 @& m此属性用来指定字体的形体。画底线的部分可以用各式各样的字体来替换之。您可以同时指定好多种字体，以防 user 端没有第一种字体时，可以继续依照您的指示，选用第二、第三种字体。 % n+ f8 R! e$ M! l% |+ ~* B _
: e' V) u* W. k3 n5 a0 E# p
参考范例： ( b+ M. }) N( V
- Q! l" Y5 A" V% s2 L% V, N
P {font-family: Times,"New York"}
- L C, n+ Z% ~* J$ ^. r7 U+ x* nLI {font-family: "中黑体"}
. o S- U3 G. u, I- n) d' PBLOCKQUOTE {font-family: monospace} * M, j% ~5 f9 _1 ~1 v
" R/ e1 Q7 m0 }特别值得注意的是，在上例中，字体 "New York" 、 "中黑体" 因为是两个字(以上)，所以必须将它们 "括号" 起来。此外，第三例中的 monospace 是用来指定写程序码时使用的等距字体。 / P9 ^1 Z" v4 R
. o% i- z2 Q3 h0 u
{font-weight: bold}
/ N4 g7 l' S+ n( e* O1 S: D+ y4 a6 n% V- D
此属性用来指定字体的粗细。画底线的部分可以使用下列 2 组表示法来替换之：
' B* N. d0 ^; I" {7 _
" p8 F/ X, [. ]: ^( Q* normal, bold, bolder, lighter , }9 z$ d7 n; u: v6 @( {
* 100, 200, 300..........900 8 i" n$ C/ Q8 P6 ^8 M
: F* D% z4 N; s0 v h6 u此属性的内定值为 normal。
7 b J6 S# t( t2 @# A' i; ^3 R# G9 O# y, z
参考范例： % o' Z/ a* h; Q% v; }" h
0 _0 ]: ]2 o9 R) D: |
H1 {font-weight: bolder}
, E$ e, E6 J1 \# r* G: s W, D9 i1 @BLOCKQUOTE {font-weight: 200} ( k" ^- ?) n( X2 \6 j
0 a4 u# p: J+ ^& @* r
{font-size: medium}
) D5 ?+ ]/ o( Q$ {+ ~
0 E! w7 P4 H8 l8 j1 N此属性用来指定字体的大小。画底线的部分可以使用下列 4 组表示法来替换之：
5 H* U+ ~0 s% o, C, b
+ g! q% x: f: q6 u3 z5 P: G* 绝对 size: xx-small, x-small, small,medium, large, x-large, xx-large
# a e( w B+ ~9 |; `
4 ?: u& D# F, B! ^0 j' @/ e) k* 相对 size: larger, smaller（与母标签相对比） # b* h( [& x' w& x) @" w
' G5 X/ Y, T0 |. J; f! P
* 字体的点数 (point): 12pt,16pt, 20pt....
& }" d3 D7 B& R7 q2 C, @* S# @5 i. _5 m. h! ~
* 百分比: 80%, 120% .... （与母标签相对比）
9 J5 M0 r6 t% W/ j0 `) `
2 m Y" W& L& `. I此属性的内定值为 medium。
6 k6 W$ U$ p" Y: x
9 X. M) n/ `. p4 H4 q参考范例：
, r. F$ G" x7 N/ Z
4 q6 {& W; G' b1 cBODY {font-size: medium}
# w2 [9 t, q1 |- h3 K/ |- _H1 {font-size: 18pt}
2 v. `$ v! t9 K% b0 L; y" {" b; BH2 {font-size: 90%}
, a/ l$ r/ v0 y. ~- \& ^+ `
- w3 ]( I" \1 p a% y7 H/ f+ l{font-style: normal} . b/ L3 c7 M2 Y( U5 y8 c0 w
! G1 ^6 x) W& a. x- Y此属性用来指定字体的正体或斜体。画底线的部分可以使用 normal, italic, oblique (仅 IE4 支援 oblique） 来替换之。 ( k$ s2 G' S" y+ I4 ^2 T
4 J6 K, V' ?% ~5 \) W4 Y& A- K" y此属性的内定值为 normal。
. g1 n+ a" l: U" g4 Y5 b) b: ^
/ V6 b! Q( P; l$ H; ? Q( Y+ w$ x参考范例： 1 S @7 h ^& Y8 p. `) U+ W& P
% I- k; N; V" x" V" g/ D9 R
H4 {font-style: italic}
; n' F5 c" z( v1 }P {font-style: oblique} 5 M; Z9 p/ k# N1 f) c$ P: O
' Y3 U; t$ @5 Q* x
{font: 12pt/14pt}
+ c- t, c* {7 ~
: b+ ~7 F, n0 g( N% J此属性用来指定字体的大小与每行行距的高度。上例中，12pt 指的是字体的大小，14pt 指的是行距的高度。 2 f4 j- w: q* t6 g
8 F6 |4 e% G+ @9 _& y" O事实上，{font: … } 可以集结所有跟 font 有关的扩充属性在此标签内，所以您除了在 {font: … } 内指定字体大小与行距高度外，还可以在此标签内加入所有上述介绍过的属性。
9 ?/ Q( C1 f, B1 g$ N" o/ F7 A: W d1 o7 `0 H3 f% P1 }8 _' C
参考范例： w1 K3 U* l( R7 x+ o, j9 l
. u7 k! ~1 V/ }, ^$ x; ]# X- P$ T
P {font: italic bold 12pt/14pt} & q- g# I- w) b
STRONG {font: 14pt/18pt bolder italic Times, serif}
. K4 ~" _0 k3 \( I; T8 R( [0 `" ~" c$ v' r" j3 A; M
CSS 中 Color 的扩充属性8 A% B7 B+ G6 X. m2 p: @
{color: red}
2 ^; Q2 G5 H2 [& z0 v
9 A; @$ f& c8 z- M( `此属性用来指定字体的颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。
* E9 O+ y% L J
. Z' Z& h! ?$ B3 Q9 C% S( D如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。 , j# q# R( b2 _* _
$ H U7 C0 u. H# u5 c2 V
参考范例： 7 e( H) \: G9 R, A
' q+ S9 [6 J+ T
BLOCKQUOTE {color: navy} ) \, b9 s! |2 S- y6 H
LI {color: #eedd44}
. j; z3 ~/ S5 h6 s* q; ~" F) wLI {color: #ed4}
! B6 F- L' X2 [) yP {color: #007f3a}
: |9 M$ b% ]/ B% J% @) q6 L( P0 o1 K" X3 |
{background-color: red}
( ]/ ~5 Z4 D6 m) K8 Z/ ]1 N7 r& I. H0 D6 U& m4 C- J. {
此属性用来指定整个网页的背景颜色，或某一段落，某一区块的背景颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。 , \# _ e1 E0 ?( r" H) {
e: w7 {# s# _3 G6 m如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。 0 N/ I8 q5 U: n6 Q8 p2 G. w3 [; F
) L# b( s% m, ?% R, M3 O/ g# _! v参考范例：
. N( L& Q3 _; c6 P2 `, {
& |( T! G1 t" Z# p/ D$ JBODY {background-color: #ed4} + B8 y4 A/ A: c s+ s
BLOCKQUOTE {background-color: navy} . |6 C0 s( p$ r' F( P) L( R( j
H2 {background-color: #007f3a}
" J) Y6 S$ ]. t3 R
l! G2 O7 `" ]( M0 L4 z{background-image: url (/images/xyz.gif)}
) E0 Q' B+ e0 W# w3 L+ A9 c3 b5 h: ?
此属性用来指定网页或某一区块的背景图案。画底线的部分可以使用图档的绝对位置或相对位置来表示之。 9 Z, N3 g5 [0 o3 E: R1 D* C
( O) r) o* L' B( H8 ^* x
使用此标签时，最好同时也指定一个类似的颜色做背景颜色。 ' x' q8 J! f) G
& v+ U. b. q: S+ |参考范例：
$ q+ _5 b7 \3 J6 E" p$ j; G p3 Z' n
* d$ Q( |, b" c1 l! k; eBODY {
1 a3 o- |5 D( W! f) k% D8 ~background-image: url (/images/2T_logo.gif); - T1 o0 O% C! ?+ e+ M
background-color: #ededff
0 P2 R2 I0 v- k! p; l}
- ~/ k/ V( H; q8 jLI {
- |, ~0 }1 z* \& S/ _background-image: url (http://www.2T.com/2T_logo.gif);
- Q4 _* h8 Z2 v) Zbackground-color: #cef1 f! ^0 Y! ?# e
} + B2 ^( t& u, \; K6 Y3 K+ [2 M
) A; V) v% z: [- V8 i" Z/ n{background: (…)} : u2 o/ `6 w5 @" s
- w# g7 l' S: a$ G* \9 S b此标签可以集结所有跟 background 有关的扩充属性在此一标签内，所以您可以将所有上述介绍过的 background 属性一起加进来。
! t: g6 c/ k1 d: G; }3 [
; ~4 {. }6 C: P* [$ R4 M- H! @参考范例：
4 p7 j8 Z6 v8 }# J0 k* S2 ]! C- g- @. Q7 y
BODY {background: white url (/images/2T_logo.gif) repeat-y} $ ] y; Q2 N8 S( i- `( K4 W
LI {background: #cc88ff url (http://www.2T.com/2T_logo.gif) no-repeat}
& K8 c8 A* Q, e& c) K V3 N/ q: K7 l% N0 p- W; H/ i# U D6 m
, k9 X2 t) j5 P1 J, ?# D
CSS 中 Text 的扩充属性$ k" Y: H& n5 i' t% A
{text-decoration: none} ( ~1 W' o6 @5 X* r3 m% a9 |0 v
$ P- `; u, N6 p" E
此属性用来指定文字是否画有底线或被线条杠掉（如：被线条杠掉此例）。画底线的部分可以用 none, underline, line-through 来替换之。 3 K. `% X- v/ k5 _3 w; Q
9 a0 T ~" S3 L) C
此属性的内定值为 none。 ; x2 y0 ?/ {1 D% g ^. z
/ \1 g. f K! `, f0 V参考范例： 3 M& T+ x* {8 H" g
; B% x4 D/ }( e! k5 C$ ^P { ' m0 M) I$ z4 e, K P) o4 L% U
color: navy; ) r+ N" R! _' p; U( [* n; ]% f
text-decoration: none+ k( y8 B5 I- Z; G
}
8 T, Q; h* J# W- hA:link, A:visited, A:active {
3 f( E- C. K) ftext-decoration: underline
, J9 a' m. g1 L' K) t/ y}
4 _1 Y6 w% U. j0 [7 T" m1 o
4 G7 p! \4 L+ G K! B2 ]7 Q, p
6 w# N6 J; B8 G5 p{text-align: left} / a- A! X Q3 g2 b1 v
7 c2 F4 X/ t/ `, h$ P, t8 y
此属性用来指定文字是向左、向中、或向右对齐。画底线的部分可以用 left, right, center, justify 来替换之。
8 `4 ~- N/ [6 P$ s% D( [/ m* o# }6 ^5 i0 _( Z& U* v
参考范例：
) `9 n1 D7 b. T% B1 f; l! O# A8 |% y
P {text-align: left} . i9 b% k% @5 q, e8 x
H1 {text-align: center}
1 x5 f9 k/ Z7 m3 ^5 K, w4 B4 J/ c3 A& k: c! U6 {0 w& t
{text-indent: 2cm}
1 @2 }/ N& y8 \, K+ r
1 V5 {; F9 n3 B$ W4 X此属性用来指定文字向右凹进去多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。
* Z4 E( b) y$ V( `0 k; {8 ^( E5 @, i+ c
参考范例： 0 U' }+ B2 L6 t0 |
/ r% ^7 n% a# r0 W- N
P {text-indent: 3cm} & s% H r$ B/ P6 t
LI {text-indent: 60px} # a/ P0 U E' E5 h6 Y" W: @! @
BLOCKQUOTE {text-indent: 20%}
* n3 ~' J% l" h; }! n3 b" C0 G) W: E0 G: Z+ M$ ?" j
{line-height: 14pt}
9 ~, A: m: v' u- G, x1 q# M% \
( c. G5 r. X4 O) u5 U7 `此属性用来指定每行行距的高度。line-height 常与字体大小 font-size 一起并用，写成 12pt/14pt (12pt 指的是字体的大小，14pt 指的是行距的高度)。line-height也可以用 % 表示之。 % 是以母标签来相对比。 5 U, O% S' i$ k
# N: k8 u# o" g
参考范例： ( q0 ^+ I. [" J6 X
) B$ b; ]9 c& L! _* kBODY {
. T8 {+ c% k; Yfont-size: 12pt; 8 D6 ^ P2 I. F& J
line-height:14pt& q" ^( r" A& u( K
}
% |/ G4 o/ L) N/ G5 @/ |H1 { % F; W5 l" i$ h
font-size: 150%; * ^/ U- I9 I, E0 K- d
line-height: 200%
& o) y: p- ~+ Y$ b F} 4 ~8 J6 t% n4 ~) u
8 C$ Z* |2 s* Q6 UH4 {font: 16pt/20pt bold italic} $ S( H$ A7 n3 C$ M& P' A
- s$ e! {. x( \7 [/ a2 q
. G2 T" y2 t# E8 n* vCSS 中 Margin, Padding 的扩充属性, t5 E+ o; u2 P* h
{margin: 3cm} : C5 k* s" r9 t' H( e
) Y' ~4 g N3 D
此属性用来指定网页的上下左右边缘，各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。
/ g. K) C/ |. s1 ~6 S% ?0 d- i, u( T
7 j1 o& G; E- b4 j9 \' @, O; }7 wmargin 可以用 margin-top, margin-bottom, margin-left, margin-right来替换之。 % k5 O X1 g7 A& f. }, }
! ~% z! R) g8 ?" H7 X4 E
此属性的内定值为 0。
( B. `; Q1 @# x3 |/ p1 i, a3 X) D* F, e& Q" t0 K8 [( W' x
参考范例： # ]# g& k$ z8 H* n9 t3 U3 I
/ d% ]6 l4 x) K. h6 I! U6 |
BODY {
) R/ l" j( U% cmargin-top: 44px; P7 _& R4 ^2 z3 m/ X, L
margin-bottom: 2cm;
6 d' I# x0 W/ q6 qmargin-left: 66px;
* ]7 u- P* P, G. F; cmargin-right: 1.5in : _% v8 d% j. E7 G/ m4 T; Z
} . _6 |1 i6 @# M+ j8 }; j
P {margin: 15pt}
# Z2 B0 P/ ^( @$ Q8 A4 u& Z- j2 a. {/ ]- P& r2 K% e$ Z* y
+ \5 M j# z; k* c- y) R
4 d4 Y3 r4 f. `6 l" v
{padding: 14px}
: W8 p1 \; A- {! W+ I- j
7 G! }9 d1 @9 \1 `& `0 \此属性用来指定各段落或各区块间，上下左右边缘各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。
}+ K- r' y+ x M5 H( N$ K% t, {& W' q; f, J5 C5 f
padding 可以用 padding-top, padding-bottom, padding-left, padding-right来替换之。
' \+ k& s( \; _' {7 {% P% X- v1 S: A, V0 R
此属性的内定值为 0。IE3 不支援所有与 padding 相关的标签。
3 o+ S# C' \# @! F9 x/ q, D; g
参考范例： 6 d2 L6 r! h4 M1 Y! W/ j. D
& }& F: L% |# U- C5 o
BODY {margin: 15pt} ; r( i/ I# B8 r' V' U1 h; V
DL { 3 n, j) j4 o& I# e! D
padding-top: 22px;
2 O( ^1 N4 h% E, E: J4 \( |1 Ipadding-left: 20%;
% T. U% u9 Q8 c1 B} ; U* A! [ e/ {- s% y Z {+ A. B
?4 s$ h2 n9 d6 E1 y
1 ~$ e% R3 m' L$ I 1 c4 \- v, r8 o1 |- |
! P- i2 o5 I7 H' N
( R6 u$ S1 c3 d0 e: V! Q
- @- R7 E" X( h) v
% T2 d0 c; T, K% U" J+ `* N/ o2 NΘ2001-2003 版权所有：『上海博峰网络科技有限公司』 电子邮件：gf1818
5 ^, J& n2 c: `# G; i% e
# }# d; P5 a! ^4 j |
/1 
发表于 2002-11-29 18:22:00
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
千斤顶
显身卡