|
您可以利用下列 3 种方式，将 CSS 指定的格调加诸于网页上： & H% F# S; w' m5 E
# Q$ I8 e% Q& B$ M) f8 N1. 在 HTML 档案里加一个超连结，连到外在的 CSS 档
% Z) w/ l# |8 e2 B
8 G) B1 W; \( y- @这个方法最方便管理整个网站的网页风貌。它让网页的文字内容与版面设计分开。您只要在一个 CSS 档内（副档名为 .CSS）定义好网页的外观风格，所有参考连结到此 CSS 档的网页，便会依照指示，反应出定义好的风格。
6 M' l' [; x/ ^9 Y, q; h* H$ U4 L( B8 b# f: p, A- \! R
它的写法是：
- I- q% \' U" _5 q& m1 N# ^, }, @8 B: V0 G& P g5 ~
<font class="jammer">' T5 l3 `+ i# ~</font>
本页标题
<span style="display:none"> O6 v2 \6 [( L4 B5 z/ j4 O# [0 A</span>% H& M7 I2 E2 g* _, l7 J% O
) K5 h" S- f# |# `HREF="http://www.xyz.com/xyz.css"
* i: o# p! Q0 o rTYPE="text/css">
) X) z G% w; A$ X# Q( q+ w+ [- _- [* S8 S" I. f# f0 Q+ P
( U: L: d$ v& M$ E此种方法 Navigator4 支援得仍十分 Buggy，请小心使用。 ; k) v( C4 v( r. Y; \/ \
% ^: Q4 a* P7 C1 X& H2. 在 HTML 档案的 ....... 标签间，加一段 CSS 的叙述文
. s1 p, ]. p$ f
+ Q) L \8 f( c, E! ~这个方法适用于指定某个网页，除了展现外在的 CSS 档定义好的网页风格外，同时还要展现本身 HTML 档内加注的 CSS 。
3 r5 b, E: c- F) }3 c6 U- g. z K3 ~- s2 Z
如果内在加注的 CSS 叙述与外在连结的 CSS 叙述相冲突的话，网页的展现将以内在加注的 CSS 叙述为主。 ( I/ y9 p6 K9 G
/ ?( }( `7 m# D# A它的写法是：
1 Q; K2 j. O# d- `
( Y, X2 e- O5 E<font class="jammer">& r7 W+ T9 z+ [1 k0 `- z8 J1 D</font>
本页标题<font class="jammer">7 {; q9 X& y2 I$ s7 F( l</font>
0 q4 v( D+ Z; s: R, y) _! d
6 j2 z( Z# V9 B/ E: k% K
" p1 d& e* T* y6 {5 H* z- A X
+ J6 }! x2 t8 p8 K开始本页内容…9 ]! Q- N c) r, @" _- y
" h! k$ ~$ i% {! p @- f
* H \ f6 |" ?9 K
* ~: S& T, H# Q/ A+ c* V特别值得注意的是，为了防止不支援 CSS 的浏览器误将 标签间的 CSS 风格叙述当成普通字串，而展现于网页上，您最好将 CSS 的叙述文字插入 标签之间。 ) F3 X; E' V$ x: c2 ~. D* {
/ T% m* S6 ?" v2 \3 I
3. 在 HTML 档的字里行间中，随时有需要，随时加一小段 CSS 的叙述指定 ! U3 V6 K; _ v+ Z( o7 q" [& _
% R% R6 d8 B$ w, H
这个方法适用于指定网页内的某一小段文字的呈现风格。
+ p$ _/ y3 [) ?5 i+ I7 g! m7 R' D
( @0 o# s& l9 d( N( U' C# `3 Q导览器除了会展现出外在的 CSS 档与此 HTML 档 内定义的 CSS 风格（如果有的话），同时还会展现字里行间的 CSS 风格。
; s0 {$ |) W5 l [5 u0 O# q. F
' ]1 q# ?& C u# @如果字里行间的 CSS 叙述与 内在定义的 CSS 或外在连结的 CSS 叙述相冲突的话，导览器的展现将以字里行间的 CSS 叙述为主。
z/ w* }( f7 z! W \+ k& P2 e' p8 j
它的写法是：
% V f! j6 f' S2 R7 K" ]5 `
+ O8 D' m; q: E4 s5 E<font class="jammer">7 F' ~" R/ Z1 j) z</font>
本页标题
<span style="display:none">1 B) q3 \2 f i. w+ E+ p/ @% @</span>
+ B) [8 T+ r+ `9 l' V( C W7 e0 t# o* W* F- g) p4 L8 A, T
7 P6 @- P, d$ Q& M
5 W" R) d& Q; j) s3 K/ G; n) Q开始本页内容…: Z0 O0 ~+ ^) K* Z
, J( v9 p4 @& a3 |) M9 A9 Y ? R
% b1 x. M2 C8 x: F. [+ z q: ^; X1 L& Z; q! J) }8 u/ o, Q
( E& Q) D. h- g( k- t上述的 3 种 CSS，可以同时并用，也可以择您所好，单一或成双地使用。如果各 CSS 间的叙述相冲突，则内在定义的 CSS 会盖过外在连结的 CSS ，字里行间的 CSS 会盖过 内在定义的 CSS 。
9 G0 b% M, H% j3 A- F
; E* X, ~+ J- E# G% I- T! V这样一层一层地推展、补充下来，使得「阶层性格调控制」清楚又有效率地帮助网页设计者，一方面中央统筹整个网站的网页风貌，另一方面又可以随著各个网页、各个文字段落的特别需要，而分别调配不同的格调。十分有条不紊，十分方便管理，所以称之为「阶层性」的格调控制。 * C3 y+ X* P' O, u9 {
+ o9 R/ J* a+ x0 u/ E+ l& E6 I6 \CSS 语言的基本语法 8 Z6 X p, q& t2 T1 T
; t: u f V) A2 ?CSS 的语言与网页排版语言 HTML，在内容上有一点点类似重覆，但是语法却大不相同。它的基本语法是： H1 {font-size: 16pt;( X: W, u; i9 ]# k6 s k
font-weight: bolder;
7 a1 N7 K+ o8 F, n) I4 n4 B5 J! @/ xcolor: red}
% w* y) Y0 y }: i4 i
) B6 Y4 b2 c! ~! {7 Q+ f上例中，H1表示您想要界定的标签元件为 H1，font-size、font-weight、color 这些扩充属性则表示您想指定 H1 应该长成什么模样。在上例中，我界定我的 H1 应该展现出字体大小 16 点，特粗黑体，红色的模样。 0 h$ K; z6 Y' D0 \8 D
( M& B, q/ a( c( y% Z
简化之
9 }* m9 y* u# C9 i* Z% B4 q因此，顺著这个基本写法，我们可以继续定义其他的标签元件： H1 {font-size: 16pt;, X* o7 U2 [6 d3 A; T& }# H# c
font-weight: bolder;* E Z- F/ A1 ~0 [# F1 K( @7 z* J
color: red}
$ S1 \9 i3 y, S! kH2 {font-size: 16pt;
: v$ h: F: l, g/ `font-weight: bolder;5 \) p8 M3 G' f1 I- D
color: red}0 Z0 D! t+ i( i W
H3 {font-size: 16pt;6 y1 r4 ]( J: G9 l* [
font-weight: bolder;
' ~; `9 _% S/ D$ O$ Pcolor: red}, _( o" r" l4 a7 m
; _) U9 q* i# ]) o, O* ~' D上例中，H1、H2、H3 界定的标签元件均长得一模一样，因此我们可以将它们简化写成： H1, H2, H3 {font-size: 16pt;! ?4 r8 e* U( g, X
font-weight: bolder;" K P6 u: V L
color: red}
! x# U: v$ H0 ^7 j
& X x# b7 s+ U& P7 t4 {- N3 i而如果您想要让您的 H1, H2, H3 各自拥有各自不同的风格，那么您必须一笔一笔地条列说明清楚： H1 {font-size: 16pt;; o' {# x- t$ c- D# f! @% Y3 _
font-weight: bolder;
$ o, V7 j5 l/ ~font-family: Times, serif;( z. T& F3 T# Z5 o, ]8 U
color: red}
/ d) ?8 N2 _, I' B. O+ \7 @$ `H2 {font-size: 14pt;
% v8 i6 ?' S0 h2 R- p2 @font-weight: bold;
1 g; w7 G+ ~* ?, \2 D9 a; X/ ]font-family: Georgia, serif;
8 @; F! r2 P: k2 u/ Vcolor: green}& ?+ @! \- U) o9 X( l' p
H3 {font-size: 12pt;# u+ d$ ~* m; B. T
font-weight: bold;
3 D& n B4 f: e, M+ qfont-family: "New York", serif;
2 m: I3 ]0 v6 l$ `1 k( S: }2 ecolor: gray}7 y9 x$ s0 \/ f. I% }
1 a4 i1 R' B7 b7 T ~5 @
另一种简化方法, }. |( k0 U# e: m3 ?( o. g
虽然在上例中， H1, H2, H3 各自拥有各自不同的风格，使得您必须一笔一笔说明清楚。但是您会注意到，我们在指定 H1, H2, H3 各自不同的风格时，其实大都是在指定 H1, H2, H3 的字体表现（字体大小、字体粗细、字体的形体）。因此，我们可以将所有以 font字眼开始的叙述，整合在一个 font 大项里： H1 {font: 16pt bolder Times, serif;5 Z$ E# |0 c9 q5 v# b% F
color: red}
( B; a9 ~% O$ S2 |% r3 r. {H2 {font: 14pt bold Georgia, serif;5 y/ V2 r+ V7 K" J
color: green}
# C2 o: V% |- ~+ _H3 {font: 12pt bold "New York", serif;3 E8 X, {" T, k# f3 |
color: gray}1 m0 [! T1 u: {! V6 l. B
0 c1 C k, [: A8 b! Q- K/ M. p
特别值得注意的是，在上例中，H3 的字体使用 "New York" 字体， "New York" 是两个字，所以必须将它 "括号" 起来。而 H1, H2, H3 的颜色规定，并不能一道并入 font 大项中，而必须另外标清楚。 / H/ _0 r+ V+ o$ v+ K$ Z$ L; g# l; ^
, Z$ T8 y9 [' K* r0 o
顺便一提的是，CSS 与 HTML 一样，都有「注解」的符号。HTML 使用 做「注解」；而 CSS 使用 /* 这里是注解 */。 / V0 O( A$ V$ g! g; l6 v
9 H1 V7 _+ }& k$ c2 O' f% yCSS 中 Font 的扩充属性9 T0 Z' T& \( W: N8 n, Q7 |1 l
前言： k* Q9 M8 m' C0 T5 C! E
1. CSS-Cascading Style Sheet 只能展现于有支援 Style Sheet 的浏览器内，例如：网景的 Navigator4 与微软的 IE3, IE4。版本不够新的浏览器显现不出 Style sheet 规定的风格。
1 F2 O7 l; o) I% g& W$ H4 m6 w: \+ u& B5 H' r
2. 本系列文章只说明介绍 Navigator4 与 IE3、IE4 浏览器 共同支援的 CSS1 扩充属性。至于 W3C 详细规定的完整 CSS1 文件，或者 网景 、 微软各自支援的 CSS 扩充属性，请到其网站的 Style Sheet 部门观看。 " W8 Y. P. X( k) w; _
+ D$ n+ Q0 m5 B- b( E7 A3. CSS 的写法使用大写或小写均可。
' a9 v( M/ n6 N3 ?% \2 ^6 g R5 ]1 g
{font-family: Times} . \0 d* r0 ?2 F( f5 U
: G: J4 S. y- W3 G' L. K此属性用来指定字体的形体。画底线的部分可以用各式各样的字体来替换之。您可以同时指定好多种字体，以防 user 端没有第一种字体时，可以继续依照您的指示，选用第二、第三种字体。 % V" b6 A) R# G# @! }( I! Y
- j& Z$ D% X% ?5 A, J! b8 Y
参考范例：
! x( Y$ |/ d$ K8 P4 @8 u
& C6 n, A+ |% G4 GP {font-family: Times,"New York"} ! F. \4 a2 b* ?1 S+ X
LI {font-family: "中黑体"} ( ]4 o1 {& k/ b2 u
BLOCKQUOTE {font-family: monospace} & i1 u4 g* i: P' z+ ], |0 E
! z' x" G+ `' k8 J# K
特别值得注意的是，在上例中，字体 "New York" 、 "中黑体" 因为是两个字(以上)，所以必须将它们 "括号" 起来。此外，第三例中的 monospace 是用来指定写程序码时使用的等距字体。
, R: K& [# L# F
! ?! ^. ~6 [' G9 n6 \* n{font-weight: bold} 0 G, t; v# u# E* h
; o8 ]9 k) [+ s5 ?$ ]此属性用来指定字体的粗细。画底线的部分可以使用下列 2 组表示法来替换之： * R2 j' p0 I7 V$ y) w( U- Z
+ K% S& j! X$ C) H! q. M5 p: R
* normal, bold, bolder, lighter
$ W5 a9 q5 P# q' H- X& \* |* 100, 200, 300..........900 5 e/ q$ R1 r6 R3 c
$ V0 W, f3 _: L0 j2 ^$ |, [
此属性的内定值为 normal。 & P7 \4 W; |; N* E
; w! ~- {' F- S, c1 Y6 U
参考范例：
- P* |. x* Z; d- I% Z- C
+ [- Y5 I. `/ d" Y8 u" lH1 {font-weight: bolder}
* z! r/ D: C; o8 n) IBLOCKQUOTE {font-weight: 200} % v6 D; p7 E8 b: X# a
1 E. T! T1 R9 K4 P5 m{font-size: medium} S* Y8 Y @: a0 F( Z, ]" U! v; N
6 p! T D" [1 U" E
此属性用来指定字体的大小。画底线的部分可以使用下列 4 组表示法来替换之：
1 U4 U" w8 C4 g, Y5 z V6 H- Q# a
6 U' P6 `, c5 v1 z( Z2 X( U0 M* 绝对 size: xx-small, x-small, small,medium, large, x-large, xx-large
0 l4 V G- E( t+ X" z9 c
2 E O$ J7 h& G6 d* ^* 相对 size: larger, smaller（与母标签相对比）
) z9 q+ ]. G6 Q( _
, v+ e4 B" c! E+ t4 }: y _* 字体的点数 (point): 12pt,16pt, 20pt....
3 S! }6 z5 l9 |$ |! a1 @1 B t0 ~: e4 D
* 百分比: 80%, 120% .... （与母标签相对比）
6 c: j. P- |4 ^8 v; B) r/ B" ^1 e
此属性的内定值为 medium。 t7 o( Q- B6 c" a6 n) t
1 M }, a; @( K' I& Q# [" `! M# k参考范例：
G. t) b) @/ T) a% S
# d! H* j d& |- z0 {BODY {font-size: medium} 5 @% \2 m: ?: D' \
H1 {font-size: 18pt} ( P4 W+ Z6 t' D4 n0 W: }% I3 s
H2 {font-size: 90%} ' p: u/ g6 o2 g% N% h" d( o
. G- d2 D: D6 Y
{font-style: normal}
9 i& G E, H* E1 J+ i$ W0 j7 `0 A6 ?( j
此属性用来指定字体的正体或斜体。画底线的部分可以使用 normal, italic, oblique (仅 IE4 支援 oblique） 来替换之。
. _& M, [6 j% Y6 J7 [
; N' n) z, P# U `4 x( b此属性的内定值为 normal。 ! C7 {% B {' ]
~0 A, d+ r; E& _; p, l" m
参考范例：
7 n) U+ S0 @) O8 t8 ]: t& |1 W) W" J- b; K* F
H4 {font-style: italic} * v/ h6 H( ?2 f# P2 D4 v8 a. N2 S$ w
P {font-style: oblique}
# a, ?" l% B( f# o0 J- Z5 _
9 I8 t8 R r$ F/ q{font: 12pt/14pt} 3 u9 n2 v& B" s3 Y- X
$ ?9 S1 G9 c' V. |) K. y5 s- q此属性用来指定字体的大小与每行行距的高度。上例中，12pt 指的是字体的大小，14pt 指的是行距的高度。 # p- x% Y8 R' a( H" V4 D- |% W# A
5 s$ t6 i$ H4 f. u9 e, e$ Q
事实上，{font: … } 可以集结所有跟 font 有关的扩充属性在此标签内，所以您除了在 {font: … } 内指定字体大小与行距高度外，还可以在此标签内加入所有上述介绍过的属性。 7 n V7 ]$ l, r* x" Z0 h+ @
- S+ _0 e- I: o6 K2 ]
参考范例：
; f, z1 Q. D1 M1 u9 U& }4 P/ D3 l
* a0 ^8 @2 C; m sP {font: italic bold 12pt/14pt}
. z, [) J; O b" WSTRONG {font: 14pt/18pt bolder italic Times, serif} ( E" w+ E/ `. C7 V' w$ z) j
% ?% Q8 i* J0 W( @: pCSS 中 Color 的扩充属性( M" E2 _: C# m% J9 u
{color: red}
; f X" [5 |/ s: S% a& h2 K8 ~* L/ |( u c/ \4 a5 Y
此属性用来指定字体的颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。
7 c5 Z' e1 K0 E5 r9 x8 z
w, J* f4 D8 y2 l6 [如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。
$ M% T1 n' j, R+ O
( t0 A. m# \4 L( M2 w& R, P' z# o参考范例： 1 Z1 S: S9 R2 ]: @+ Z7 f
. A( G4 T' d' l! [
BLOCKQUOTE {color: navy} $ h) a# F( k3 H# n# X' C+ T5 F# [
LI {color: #eedd44}
- N: z* @4 n. a/ \LI {color: #ed4} 0 G' r; n/ N/ V! f3 J" O& Q- w
P {color: #007f3a} # @9 O% Y& [& Z6 r" U. z. X
* @! L" d. N! O e3 a X{background-color: red} ) |, J! C; Y( q0 g5 ~
7 ?) f$ I0 `+ O% t3 x
此属性用来指定整个网页的背景颜色，或某一段落，某一区块的背景颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。
+ F( ]9 U3 \ R: `
' x( F1 a7 n! w; X& V如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。 6 z. p! [3 `2 q U6 E! d
, Y b$ |' Z4 v8 V- R" q: t
参考范例：
( g) m: H( M7 U ]; M8 Y" J X, v) j7 x' `! {' p# O
BODY {background-color: #ed4} ; c' L9 G: \2 v0 I) Y
BLOCKQUOTE {background-color: navy} ; D) s8 {, R) X! a% M4 @
H2 {background-color: #007f3a} % O; M# M2 l, n- j8 m' M6 w6 I; T
# u. k3 g% f. N3 Q- U; W! D/ l{background-image: url (/images/xyz.gif)} 1 T8 W0 I" J6 N; L/ R" c/ k- `# Y
; P6 F" e" E/ g+ g8 Q
此属性用来指定网页或某一区块的背景图案。画底线的部分可以使用图档的绝对位置或相对位置来表示之。 & s* c' Q+ [: ]/ m- n
, R& l+ c+ h0 m# m$ W, F使用此标签时，最好同时也指定一个类似的颜色做背景颜色。 , E3 A$ U* G2 [$ M& b' N
6 D$ _( X* ^" L5 |" m3 B. t参考范例： , X$ ?; F* F) ]" N' K0 A) a
+ d" T- a v7 q6 x2 ?. Q
BODY {
1 }( [3 ?7 l8 S1 Tbackground-image: url (/images/2T_logo.gif);
$ C1 k2 d1 k$ r+ E4 b: dbackground-color: #ededff
2 v6 K: E1 A/ d, {1 L}
- t* Q" w6 c Z3 zLI {
0 @5 S& _6 H6 W5 f2 Gbackground-image: url (http://www.2T.com/2T_logo.gif); 5 z. t: a# }5 b; U H X3 N0 O
background-color: #cef& K f* x- R' T+ z3 C% \
} + J5 X2 v# a/ ^( ^! U8 A: |/ ^
' X3 W3 d" i! G* m+ _ e{background: (…)}
+ q. J; m' N4 k# W7 q# o: n) J* ^( q5 l2 c, D( B8 g
此标签可以集结所有跟 background 有关的扩充属性在此一标签内，所以您可以将所有上述介绍过的 background 属性一起加进来。
5 M' p9 J0 X- F7 q. F' h2 G, l+ J& n7 W; {
参考范例： H' u6 S1 p! U u8 A" W8 l; Y
+ Z% q1 K+ d* r* M- w% E" Z1 v
BODY {background: white url (/images/2T_logo.gif) repeat-y} ) S a6 j# c% v
LI {background: #cc88ff url (http://www.2T.com/2T_logo.gif) no-repeat} 1 R* P; y) D8 n8 C
, N2 Y' F/ {. i' }8 w. }
( t; S( q; B% T( O# tCSS 中 Text 的扩充属性
5 r$ P& h8 m e; X) f- q{text-decoration: none}
9 x5 X. x6 I$ f' x$ k" k6 l
' j& w, i3 O; H# a+ g2 G此属性用来指定文字是否画有底线或被线条杠掉（如：被线条杠掉此例）。画底线的部分可以用 none, underline, line-through 来替换之。
3 W, ?! D; n7 F7 g0 j# t/ l: `8 J
此属性的内定值为 none。 , q( z" I3 G, j% ]$ R' _9 ~2 W `
2 p F) k7 J s0 o6 G+ z
参考范例： # o7 T9 \6 A8 k6 V
' s' x- S" R9 Z, qP {
3 e8 k; [: U+ Q$ Mcolor: navy;
" n8 N* e4 i' r H" ?text-decoration: none- g: m0 u8 d8 F+ U3 w2 x5 X
}
0 O5 |1 o9 C: l- b7 I! qA:link, A:visited, A:active { , e8 L/ k4 e5 B e/ V, H. `8 d
text-decoration: underline # p/ ^$ \8 x0 M. l3 Z
} * A) A; m2 J7 s
% u7 k( p/ J- v, K
% P* \& z$ N- O% v0 X5 G* Y5 z6 J! _3 F{text-align: left} # A2 D4 a' s( F. Q6 A+ a; H4 Y; K
" I7 q6 ` o) }此属性用来指定文字是向左、向中、或向右对齐。画底线的部分可以用 left, right, center, justify 来替换之。 + {7 X4 Y7 ^9 E3 P. A
# v: |2 {$ Z8 S
参考范例：
, k1 i6 P1 g( d
7 B( [& S+ y" O/ ZP {text-align: left}
' K( e% i+ W( s2 z$ n% IH1 {text-align: center} + I6 K9 C4 B8 j5 w8 k
1 @, U3 d( r7 k7 t
{text-indent: 2cm} - I$ u+ A3 K: w" V
" P, F; j+ D- S0 X' R0 m. A此属性用来指定文字向右凹进去多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。
9 e% Y& x+ g4 |) {7 q/ r
+ C6 C6 A+ _' P) e参考范例：
' _8 `5 R6 D |% ~3 J) X6 @
4 J9 v" p7 k+ @$ }P {text-indent: 3cm} * n' H# p( u, }3 ~" d, P$ P( N
LI {text-indent: 60px}
9 b3 g0 z/ T2 ]0 D' r& PBLOCKQUOTE {text-indent: 20%}
# t0 h2 C( A6 \, w* L& J a9 I: H8 D$ X4 y% Z( v
{line-height: 14pt}
! p5 |8 J9 V/ k9 W9 C9 d7 v4 w) _/ k. N/ x2 @- d1 J
此属性用来指定每行行距的高度。line-height 常与字体大小 font-size 一起并用，写成 12pt/14pt (12pt 指的是字体的大小，14pt 指的是行距的高度)。line-height也可以用 % 表示之。 % 是以母标签来相对比。 2 k0 c+ D6 ^- v3 ~! [" h3 {
: M: @; G9 ]/ [; y' T
参考范例： ; S5 Y0 V, r. U& }8 B, a
0 p, L( R, \+ ^' u) RBODY {
5 k* J+ O0 q$ H; ` F( ]font-size: 12pt;
. r4 N' P: N* fline-height:14pt
3 K, ]! @3 P9 Z3 n}
; O2 l$ r* @/ F' `5 ~H1 {
* M, M( x3 |0 h/ y. H" Nfont-size: 150%; 1 I! F" `, j1 D, j
line-height: 200%
! r! \6 {7 ^; I! U4 Y4 u! f8 B} - k+ o7 x4 g$ k: o6 c# y5 ]
! l% S. V) z6 m
H4 {font: 16pt/20pt bold italic} ; {/ q1 C+ g! y! d8 P
) X( B# q/ {) x$ P! i7 V
* @% b; D% ?) w+ \: h# e4 I$ PCSS 中 Margin, Padding 的扩充属性
* J% W6 Z h9 W) z" L{margin: 3cm}
3 m5 V* }$ O. P+ A0 ]! [
9 r; D! J# f: K! d此属性用来指定网页的上下左右边缘，各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。
1 P) O3 m0 F/ Q; d/ ^! F
7 o8 \/ C; i& _4 _$ ~margin 可以用 margin-top, margin-bottom, margin-left, margin-right来替换之。 9 j6 G6 x0 Z$ L3 T9 T) [- J# b/ R
4 }; w& n& i1 h; _$ Z- X' h( N此属性的内定值为 0。 / I9 D8 T; b% j5 D1 r3 `
7 Y, K+ m0 \8 ^5 P/ z
参考范例： 0 H, ~. T5 r4 i5 N* [" W9 k1 R% `
! j, I$ T G. M3 c& o3 k3 [
BODY { 7 r# ~2 t; @7 b% A
margin-top: 44px;
4 y; N# }2 P3 Qmargin-bottom: 2cm; 5 P/ V, w8 ?* q! ?- ~/ p
margin-left: 66px;
# P1 X( E. G# X, _/ _margin-right: 1.5in / R5 x7 F9 ^' `! ^
}
" }, a, o% v+ bP {margin: 15pt}
" B$ L2 v7 d# F; Z7 F' E% P/ t9 W0 g4 t. c0 n) V5 S. o$ j5 _/ I
- C) g! L# M' u. W" b
: S6 u8 T4 s/ k3 m{padding: 14px}
, B( V J' n$ W$ l5 I; q0 m4 i( S: z, e6 O* |0 Y
此属性用来指定各段落或各区块间，上下左右边缘各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 % p3 C! n& }1 p9 ]. X5 Q% K& A
. \& k9 m. O A# O7 ~
padding 可以用 padding-top, padding-bottom, padding-left, padding-right来替换之。
2 P& W2 n$ k) D6 m7 u
1 @9 n( {$ `% p$ W1 v此属性的内定值为 0。IE3 不支援所有与 padding 相关的标签。 # I8 O3 F) V Q( S* D0 r
) m& T9 l& |: v8 J# d! T参考范例： . t) E: X# r) R
4 }% @: A% t% @BODY {margin: 15pt}
O3 X% C$ f$ P/ Y) D7 BDL { , i2 b# ?: |5 c' g8 m
padding-top: 22px;
' P4 j/ {: [ F% O2 b, Jpadding-left: 20%;
: Q' B- z" Q; @6 c: B}
5 F9 @% v: F4 A l
' p, g- X( Z6 o2 q 5 p2 A6 X% c, u0 H
9 p+ l7 Q- r& V. [
- L! J: Z, \" F
$ E# Q8 o8 s0 r, u+ s + \5 u, Q3 b' y2 V, @$ x& b* a
- o4 o& g1 x9 A( U7 rΘ2001-2003 版权所有：『上海博峰网络科技有限公司』 电子邮件：gf18187 {) G7 d) L7 p4 t
) ]/ i. c4 f3 n9 J4 {. i |
/1 
发表于 2002-11-29 18:22:00
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
千斤顶
显身卡