|
您可以利用下列 3 种方式，将 CSS 指定的格调加诸于网页上：
. u6 `" s! R/ b0 a# C" R" z% K+ M3 z' P" F$ ~1 M( Q0 K
1. 在 HTML 档案里加一个超连结，连到外在的 CSS 档
- D% L/ ?6 y8 ^' ], e
9 }0 w" m; D0 H# M9 `7 s% @这个方法最方便管理整个网站的网页风貌。它让网页的文字内容与版面设计分开。您只要在一个 CSS 档内（副档名为 .CSS）定义好网页的外观风格，所有参考连结到此 CSS 档的网页，便会依照指示，反应出定义好的风格。
/ e* {: i. K* }4 y: U
4 e2 o2 U( h" s* q它的写法是：
7 Z& e" H* \8 m+ M7 J d$ P7 U4 i) f. a0 m$ b! G
<span style="display:none">0 \: M* D# U6 M+ i, H. L* s* {</span>本页标题
<span style="display:none">& @8 V( @- q$ a4 n- ]9 \' Z</span>
# P) V% G. t$ Z+ P F4 \& K/ P" n. v2 Q5 l9 [
HREF="http://www.xyz.com/xyz.css" 0 _5 [; H1 [. b' Z$ d- w
TYPE="text/css">
1 V/ Q6 Z; R1 s5 ?! k, m
$ o" x- K$ A' Y% H5 v2 L6 G) {: A* A& K6 A
此种方法 Navigator4 支援得仍十分 Buggy，请小心使用。 ' K$ i; f9 E5 V4 k. o$ y+ C5 ^
* Z) `8 U$ e9 Z, V$ r$ L! X8 t
2. 在 HTML 档案的 ....... 标签间，加一段 CSS 的叙述文
* s v1 S4 V3 P( a/ x4 i9 c% S" k
这个方法适用于指定某个网页，除了展现外在的 CSS 档定义好的网页风格外，同时还要展现本身 HTML 档内加注的 CSS 。 7 H+ C# ~2 c; [* o; |
* ^, O/ x8 z& N如果内在加注的 CSS 叙述与外在连结的 CSS 叙述相冲突的话，网页的展现将以内在加注的 CSS 叙述为主。 , _2 f* O; b' c) {- O: b
. e3 y+ h9 K/ d: r! ]/ P' e
它的写法是：
* h; Q0 _; u( }+ T/ U$ ?# l% v" ~' r( O1 F% Z( b3 I
<font class="jammer">% k) @+ }' }0 d5 v</font>
本页标题<font class="jammer"># e, x3 b% }* a( D% J; [</font>
y$ |; B! j. W! H
$ V% I; W2 i/ M( q8 T/ n" e' `+ u' X- w: i9 r
6 C2 m# V9 n* f% q
开始本页内容…
6 J0 ^0 [2 {3 z. @# v# z$ I) \1 y: V' e2 Y
0 `1 d: }+ d8 F7 C( I4 B
& {# y- A( B P: }3 E
特别值得注意的是，为了防止不支援 CSS 的浏览器误将 标签间的 CSS 风格叙述当成普通字串，而展现于网页上，您最好将 CSS 的叙述文字插入 标签之间。
* P( j. D) ~! W% j3 D4 P& ], O2 Y; v
3. 在 HTML 档的字里行间中，随时有需要，随时加一小段 CSS 的叙述指定 5 x. N4 R1 X. f! y
# S0 G6 l, h. Q
这个方法适用于指定网页内的某一小段文字的呈现风格。
( Y: |; [7 a3 B; V4 b+ A3 O4 S# g& k* j4 z# z$ H( L
导览器除了会展现出外在的 CSS 档与此 HTML 档 内定义的 CSS 风格（如果有的话），同时还会展现字里行间的 CSS 风格。
% u% B z% B: f7 H! I. g! W X
k6 ^5 u+ S* }/ d" b如果字里行间的 CSS 叙述与 内在定义的 CSS 或外在连结的 CSS 叙述相冲突的话，导览器的展现将以字里行间的 CSS 叙述为主。
' c$ c" e# t+ Z! o& N' N& E5 V8 @( X; T4 @! _% o9 p! o3 I
它的写法是：
* R) x9 m, D5 Y% U) o4 ~' w
2 f& Z# Z& B6 `# O' ]( }, [<font class="jammer">+ [& C3 G- o3 l n3 E</font>
本页标题
<span style="display:none">' H h3 Z/ x5 ^) s% ~; M</span>8 i1 S+ I; [8 v& {! T8 `+ G
# f! j1 Z" d7 G( ^
1 E, Y, ^8 v% ^1 C, N" [' m! @
0 \, J0 o+ A" f" T0 M开始本页内容…" d! U9 r% B- t7 j0 F
! ]- m2 S( A+ A/ e6 b3 X8 n- m' o
9 I$ b, s) }( U/ q( d+ C- }6 ~3 j: K
( h/ V6 l0 V6 T& C) O5 O1 s# ^$ v2 _上述的 3 种 CSS，可以同时并用，也可以择您所好，单一或成双地使用。如果各 CSS 间的叙述相冲突，则内在定义的 CSS 会盖过外在连结的 CSS ，字里行间的 CSS 会盖过 内在定义的 CSS 。 3 q5 `7 C, G; a7 p! c
* Z% Y6 |; R$ Q; @2 N! Z这样一层一层地推展、补充下来，使得「阶层性格调控制」清楚又有效率地帮助网页设计者，一方面中央统筹整个网站的网页风貌，另一方面又可以随著各个网页、各个文字段落的特别需要，而分别调配不同的格调。十分有条不紊，十分方便管理，所以称之为「阶层性」的格调控制。
$ w3 O U( Y4 Z. J. C' y n# e [! q- G3 B% T) [
CSS 语言的基本语法 0 L, ~: s- v0 A1 M6 _ s' x
8 ^( L# z+ ~6 x+ j1 f W: `CSS 的语言与网页排版语言 HTML，在内容上有一点点类似重覆，但是语法却大不相同。它的基本语法是： H1 {font-size: 16pt;
9 x6 ^0 ^6 u% `) l) Afont-weight: bolder;- d: k+ a% O4 e2 @! T4 [
color: red}+ a0 u( o% x3 n( e3 y' U- M' v
. |4 m6 [& u) l; ~
上例中，H1表示您想要界定的标签元件为 H1，font-size、font-weight、color 这些扩充属性则表示您想指定 H1 应该长成什么模样。在上例中，我界定我的 H1 应该展现出字体大小 16 点，特粗黑体，红色的模样。
7 ^- t! J$ x, f& r8 B# O- e1 J% z' Q9 d
简化之9 Y0 y' e1 l& M- V4 N/ K& \
因此，顺著这个基本写法，我们可以继续定义其他的标签元件： H1 {font-size: 16pt;( a7 Z7 f4 G- X* O4 p% T
font-weight: bolder;1 J* b: j" T \
color: red}# g& R# x7 [2 o9 q; a3 P
H2 {font-size: 16pt;
7 ?- p" x k" H8 {$ G0 V! Zfont-weight: bolder;
" q- P) H% K5 f7 r/ N( y$ B4 scolor: red}
# n! q, v$ D! x8 JH3 {font-size: 16pt;
0 R) \( L9 }- {- ofont-weight: bolder;
; _ k, i" t9 X; i; Jcolor: red}
' I: C' L- M: M/ J9 S! Z, B7 y2 _" W# W( F2 b$ ]. ]3 P- Q. U
上例中，H1、H2、H3 界定的标签元件均长得一模一样，因此我们可以将它们简化写成： H1, H2, H3 {font-size: 16pt;
% x4 X; |% b$ [# M- ?font-weight: bolder;, C" x/ y+ S/ T+ R* i
color: red}
" P% @1 h. ]7 |9 L7 u4 W2 d7 I3 J' C3 ^$ y+ y, f, J# h6 ]
而如果您想要让您的 H1, H2, H3 各自拥有各自不同的风格，那么您必须一笔一笔地条列说明清楚： H1 {font-size: 16pt;
5 i3 f9 N8 L' Gfont-weight: bolder;
9 ?" F7 y. _/ \/ R+ cfont-family: Times, serif;- M) k' O: d6 B
color: red}
# d7 W, P. h/ Q; }H2 {font-size: 14pt; ~7 G% p& W. i8 t1 s
font-weight: bold;" x n9 L$ |9 H7 O* D6 [
font-family: Georgia, serif;% m/ o U, A+ J# T2 c! |
color: green}/ p1 ^3 {) K! X( b( d; R
H3 {font-size: 12pt;
$ K8 k9 H0 P7 M! p. F' Y2 y3 Cfont-weight: bold;5 N* N( _0 i1 P3 O/ G( U
font-family: "New York", serif;
; o2 c1 m r$ N8 [$ j2 A8 [color: gray}( E4 U! t" |' | H2 O
) X% o9 h8 k8 t: e' [0 x另一种简化方法
% g9 a1 e6 ^9 {- }4 V虽然在上例中， H1, H2, H3 各自拥有各自不同的风格，使得您必须一笔一笔说明清楚。但是您会注意到，我们在指定 H1, H2, H3 各自不同的风格时，其实大都是在指定 H1, H2, H3 的字体表现（字体大小、字体粗细、字体的形体）。因此，我们可以将所有以 font字眼开始的叙述，整合在一个 font 大项里： H1 {font: 16pt bolder Times, serif;
5 c. f& u2 p3 X: }2 ecolor: red}
# a9 Y) q/ e7 H' f. GH2 {font: 14pt bold Georgia, serif;
6 G! c) |; T; w$ g$ E6 J! }color: green}# _& D: e C3 J, x0 \1 r# e
H3 {font: 12pt bold "New York", serif;
9 i+ q' c- G& C. i6 w4 L9 @color: gray}7 d5 m# D. ]3 e% H& j; o# N& A
# d/ N8 ^) | b( F: S
特别值得注意的是，在上例中，H3 的字体使用 "New York" 字体， "New York" 是两个字，所以必须将它 "括号" 起来。而 H1, H2, H3 的颜色规定，并不能一道并入 font 大项中，而必须另外标清楚。
% U, ^7 Q: d6 B, Z; {) A) A- ^
7 t2 u2 v) ]0 H( k顺便一提的是，CSS 与 HTML 一样，都有「注解」的符号。HTML 使用 做「注解」；而 CSS 使用 /* 这里是注解 */。
8 R/ A3 X# p$ q5 r" X; l& m q ?- ~: _0 [
CSS 中 Font 的扩充属性& `% E+ D' m& e+ f
前言：& C" Y" r& @1 u" a/ ?5 o
1. CSS-Cascading Style Sheet 只能展现于有支援 Style Sheet 的浏览器内，例如：网景的 Navigator4 与微软的 IE3, IE4。版本不够新的浏览器显现不出 Style sheet 规定的风格。 * c9 P ^* w5 E$ @6 f
' b5 L. z5 [( l2. 本系列文章只说明介绍 Navigator4 与 IE3、IE4 浏览器 共同支援的 CSS1 扩充属性。至于 W3C 详细规定的完整 CSS1 文件，或者 网景 、 微软各自支援的 CSS 扩充属性，请到其网站的 Style Sheet 部门观看。
% G$ ]( c) z5 n8 r" X1 W: v+ o
" W4 z3 T: x: T/ l) n0 `3. CSS 的写法使用大写或小写均可。 & P2 w0 i3 c+ |2 x5 ?4 ^
/ Z e/ _* @/ F; U& ^$ q6 P5 x+ q{font-family: Times} : P5 w5 o, I. H/ t% H0 y$ b
8 w: v! y4 u$ }9 V, A8 L, S: k此属性用来指定字体的形体。画底线的部分可以用各式各样的字体来替换之。您可以同时指定好多种字体，以防 user 端没有第一种字体时，可以继续依照您的指示，选用第二、第三种字体。 0 l) j1 g5 U8 F2 ~$ o9 H+ {) N
, n1 U+ E0 l' j% y2 m, U参考范例：
, E# K# f+ L- x9 k/ a- _1 n) o e0 ]) v
P {font-family: Times,"New York"} " |0 ?+ y' I! w+ D8 O$ K
LI {font-family: "中黑体"}
$ |4 q4 j F2 K7 E# g' aBLOCKQUOTE {font-family: monospace} 3 u. A, }- [5 x
' l3 ~* n% c$ u& T$ g特别值得注意的是，在上例中，字体 "New York" 、 "中黑体" 因为是两个字(以上)，所以必须将它们 "括号" 起来。此外，第三例中的 monospace 是用来指定写程序码时使用的等距字体。
0 h. \3 j& y6 Z3 d# a1 F8 G" N; H9 F
2 j; K( x& g3 x( E{font-weight: bold}
" U. {! v/ f' w* _ }+ p- k* W7 q5 l* G
此属性用来指定字体的粗细。画底线的部分可以使用下列 2 组表示法来替换之： . C( _$ H1 z% z) |
) B+ M3 v5 s/ N _
* normal, bold, bolder, lighter
) m8 m, x4 Z. b) ?; e' G* 100, 200, 300..........900
/ K$ Z, P `! w3 `. V9 a& ]
; m. V1 [6 o/ |6 w2 q; n此属性的内定值为 normal。
' t4 | M6 L) p0 {! f9 L7 t6 i; L( z5 {% K# X9 n
参考范例：
0 c; R4 W: H1 D! u- j$ y" d- ^, L# V7 i6 e! y, E
H1 {font-weight: bolder}
1 l" M0 F, k! O2 M# L0 F7 `5 YBLOCKQUOTE {font-weight: 200} 0 e0 ^/ }& j1 G' S0 s3 L6 v7 [
2 p; X5 C3 ^' f- _{font-size: medium} ) k/ j7 G- n% l& u# H' e7 J
: Q& P. i$ I. `. j* ^此属性用来指定字体的大小。画底线的部分可以使用下列 4 组表示法来替换之：
1 _. }! N* {( b9 D. L
' `' |; X3 r0 ^8 r( i+ n. B* 绝对 size: xx-small, x-small, small,medium, large, x-large, xx-large , _5 z$ i( B4 ^0 J+ i
5 M$ {. _3 z T) Y- D1 ~' J* 相对 size: larger, smaller（与母标签相对比） ' s I5 g3 s( {9 \; k" A; L
6 c8 a+ P/ C. }3 e2 u8 ]/ D& O8 A
* 字体的点数 (point): 12pt,16pt, 20pt.... ' M5 e: \/ ^3 B! N) H4 ]2 f
/ | g7 a' R% p% |
* 百分比: 80%, 120% .... （与母标签相对比） ( {: o& o! P- A3 P' Z
' i# B9 l7 J5 j此属性的内定值为 medium。 ; p7 v, ]3 D3 \2 `. O! P; L; o- J
0 z0 ?, u& o2 q( z
参考范例： " b. a, ?) N% W! N
3 [' p8 s) t' j% b- m+ c8 _4 PBODY {font-size: medium}
7 @9 {% ^" h3 L; pH1 {font-size: 18pt} 3 A5 {7 |' N; h& i# }9 B
H2 {font-size: 90%}
9 T( ]4 d9 W3 B6 J6 f' u; i
5 r4 y4 x% D9 m1 s5 r( O1 F{font-style: normal}
H8 ~' q# p2 M3 z% v( V: z' j7 ^* ?# X# w% n6 ^2 t; @
此属性用来指定字体的正体或斜体。画底线的部分可以使用 normal, italic, oblique (仅 IE4 支援 oblique） 来替换之。 * a6 e, b3 ]( F# E
9 _/ s' z* P( V* k; w
此属性的内定值为 normal。 , S6 J" T1 Z7 _# p% S
5 i* ]; i: k9 S2 Y5 S! V/ ]
参考范例：
/ S) R; y6 i: A' E; |( R& k5 W; S# s. Z; @5 M2 C
H4 {font-style: italic} 5 C3 }8 R# g2 H; c- h# x% B
P {font-style: oblique} ' @0 v# @: \( B o
* U3 p" m( i z$ G; B3 O8 B
{font: 12pt/14pt}
- W5 n0 Z$ u% \% u
5 `! R6 j" P3 m6 w& a此属性用来指定字体的大小与每行行距的高度。上例中，12pt 指的是字体的大小，14pt 指的是行距的高度。
( \. H* E4 X# h2 G( _7 z8 ]3 @. c3 S
事实上，{font: … } 可以集结所有跟 font 有关的扩充属性在此标签内，所以您除了在 {font: … } 内指定字体大小与行距高度外，还可以在此标签内加入所有上述介绍过的属性。 ' w: n# A" R- |- `
( i2 }5 K: K6 j! D参考范例：
9 l5 l8 T' O% _# E( |4 ^0 Q0 O3 r4 Z3 k$ m' x
P {font: italic bold 12pt/14pt} 5 D3 _4 T" E! `5 j
STRONG {font: 14pt/18pt bolder italic Times, serif} $ _" ^" T- U% P0 v" z* y
* f% N) G; _; w1 a5 P0 C4 r
CSS 中 Color 的扩充属性
6 z" `+ {0 I7 P7 D9 I! F+ e{color: red} + F* `" L/ b5 u) h6 Z; [
9 ^& {9 ^0 B/ `8 }- ?
此属性用来指定字体的颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。
- T: m# C# R1 `& E$ }& J& P' ]7 c/ H3 D+ j2 e/ i
如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。
7 K, Q4 y/ F1 Q' q5 d( M3 }0 W6 ?5 I. l
参考范例：
8 s* M% J2 }9 i3 F: A, F: v; X$ i4 X* G
BLOCKQUOTE {color: navy} 0 l2 Y) J$ m! v: v
LI {color: #eedd44} : k# f* ~* ~6 p/ h a4 j
LI {color: #ed4} : i3 a; Y$ q" C& a. G
P {color: #007f3a}
7 E. Y" Q6 x5 a: U3 i- Q, |) c N$ r2 \7 m
{background-color: red}
' Q) X" t, [2 y M" Q4 T6 F: t2 {8 y5 ~2 d, T0 w
此属性用来指定整个网页的背景颜色，或某一段落，某一区块的背景颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。 * b: z4 p! t, D( K Y
: ~+ L" C4 L2 z7 G如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。 ; k _# f6 m$ t
, s" ^( O4 l5 w+ T8 Z( \, \参考范例： / p4 o# T+ [/ R6 ?: i& X! E$ u C4 K. ^6 P
7 ]/ l* ?3 ?: M9 G1 [BODY {background-color: #ed4} 6 X/ A6 r6 x* F
BLOCKQUOTE {background-color: navy} 7 F: N/ o& @/ W8 r7 j
H2 {background-color: #007f3a}
* H. Z8 e" x2 I i' M
3 o' |6 f5 [ |* D4 n{background-image: url (/images/xyz.gif)} , i, Z# p% ]3 z% }/ t; H, o2 f; v) {
6 L+ P% z8 ^: |) {4 R; l
此属性用来指定网页或某一区块的背景图案。画底线的部分可以使用图档的绝对位置或相对位置来表示之。
; z+ g- s& x9 V
' M; ?7 g8 L. G$ x- I8 R* W* ?使用此标签时，最好同时也指定一个类似的颜色做背景颜色。 ' ~% z7 q8 Z, z2 G
& K8 Q* G$ y- H! s0 Z
参考范例： 5 r3 e9 ] M: y# ]% N6 A/ |
& Y, k: L% X" _4 B, YBODY {
8 m3 V I1 i Z# Lbackground-image: url (/images/2T_logo.gif); * N Q5 n6 R: j. M; Y
background-color: #ededff- n& p1 m. P8 J$ ^4 u y
}
# R$ j4 C+ D1 U `. c8 E4 f+ F5 uLI {
' U2 ?8 z. m+ O$ M9 A. @+ f" ibackground-image: url (http://www.2T.com/2T_logo.gif);
) Q& V) b7 m! H3 C) o0 mbackground-color: #cef
! @! S; h' B1 m8 L' v5 h6 A} 8 o5 u; X# F3 J3 `
' c$ U+ g$ ~4 O: q
{background: (…)}
, f- q4 M7 \0 Y8 |. |; ~& D; o% ^( \7 z1 u8 K+ a+ I. s
此标签可以集结所有跟 background 有关的扩充属性在此一标签内，所以您可以将所有上述介绍过的 background 属性一起加进来。 8 j( L5 o. o8 ^# X1 ^
3 b" z' _( M) Q$ t2 }' d- D
参考范例：
2 i. ^$ g7 f' d7 n7 A; K2 C
+ u! Y+ N4 _, d& NBODY {background: white url (/images/2T_logo.gif) repeat-y} {+ R. o% M* w4 C
LI {background: #cc88ff url (http://www.2T.com/2T_logo.gif) no-repeat}
0 d4 O! c2 o; L( P4 y; \7 ~3 k2 | v+ C1 k
+ Y! A" l7 y+ I! l4 u' D
CSS 中 Text 的扩充属性0 ^" v; O' z; L+ Y
{text-decoration: none}
8 f: u$ C7 ^* d2 o9 U- N4 S9 ?. O/ u- D* G0 M
此属性用来指定文字是否画有底线或被线条杠掉（如：被线条杠掉此例）。画底线的部分可以用 none, underline, line-through 来替换之。 * a! C4 q4 ^0 u; @. R. _ H4 s( e6 t
; C; r& X2 e" `: h( J% r$ d+ `此属性的内定值为 none。
7 H$ K7 g) P* q7 B2 E8 Y9 ^# H! F9 a9 O8 J: {' I
参考范例： # \7 {. M) N9 v# C) r8 d4 G5 H3 n; t
y9 s/ |: X9 F5 P6 r6 LP {
* L, _6 w. L) A* bcolor: navy; # f/ X% l& k0 C8 Z1 M' W, f
text-decoration: none/ Z, w) w7 A. k! u W' O3 o
} " Y5 [# d/ _: }6 Q4 j8 c# t. d: n
A:link, A:visited, A:active { . u) ?" _ }! T4 [# G
text-decoration: underline . I. Q2 z5 ?" h1 e9 f8 }
} ; V& P" j, K4 r3 J' H1 j. |
, Y& n6 ]) O; s& |6 C T& B. `* `
{text-align: left}
4 @2 \* L5 o0 `
, a W3 d3 K$ _$ x$ {9 }此属性用来指定文字是向左、向中、或向右对齐。画底线的部分可以用 left, right, center, justify 来替换之。
3 q# U" G& c. I/ S/ {
2 }% M* G, _: h0 ^: c参考范例：
: d( p9 ]/ j& Z' A3 z b8 {; E( m, K* w! I
P {text-align: left} # N1 m. D, S+ G
H1 {text-align: center}
" {/ o) e9 P% v6 `: h: F& h2 ^
# x& D' |) q9 ?# e7 X, ^9 k{text-indent: 2cm} 0 [+ ]" w* ^0 p1 V
3 S% F* i O3 {; h此属性用来指定文字向右凹进去多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。
5 n! o" i! A/ m3 X' `2 ^
0 q3 F: x) I2 F' b. E7 K参考范例： 7 d& E0 [* P2 F% a# M0 @" ]# M
, c7 y' Z; K; j @1 }/ W
P {text-indent: 3cm} 9 d+ l2 f" s1 ?7 ]. R
LI {text-indent: 60px} - n7 e' I: u5 V6 e8 @. u
BLOCKQUOTE {text-indent: 20%}
) C, J3 J3 X/ C+ ?/ Y: Z+ x. C, k2 X: u9 C$ x) P
{line-height: 14pt} 0 L% T5 f& f& G. \5 s) l
$ j0 k* e: h' k! z2 k, I) ]此属性用来指定每行行距的高度。line-height 常与字体大小 font-size 一起并用，写成 12pt/14pt (12pt 指的是字体的大小，14pt 指的是行距的高度)。line-height也可以用 % 表示之。 % 是以母标签来相对比。 ' e- u, [: \4 d9 [* A U3 t0 H
0 F: q% H; V4 \9 u" w0 H6 v/ W Q参考范例： # a: ]7 S) M8 d1 q% ]
0 d: F: z! [& G8 V) l3 Z* w" EBODY {
8 x9 O7 c/ _1 R& ]7 I* Efont-size: 12pt;
9 y5 R0 L, D: E I( ~0 Hline-height:14pt. W! }. ?/ R" K& Q8 u
} , q& r5 U/ L" _9 I3 k- T
H1 { 3 `2 e9 |- ]9 L9 x6 _& S! _& d9 e
font-size: 150%;
# j5 F7 E/ U7 ^1 y8 ?+ E6 mline-height: 200%# W- @" I& T/ T2 J0 u* e( L4 v
}
. M9 L5 n3 v# B1 c! _( M. F9 }, D8 k) \ e& g$ r
H4 {font: 16pt/20pt bold italic}
3 G7 q. h# D# F! Y) k( V8 @ w0 `4 y6 \$ h; l/ u
: H! N+ q1 ]: N1 TCSS 中 Margin, Padding 的扩充属性- {( l) n' o$ a+ Z1 k* {
{margin: 3cm}
9 Z4 G3 v- a0 y6 g! b& \. u7 {2 \* G0 E- n+ S
此属性用来指定网页的上下左右边缘，各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。
. H1 g \1 m0 C! g" s: v+ h c3 e8 m
7 O- X' L. J; i4 {# Y4 Q* Y( m- wmargin 可以用 margin-top, margin-bottom, margin-left, margin-right来替换之。
* c$ @2 v2 f" }6 z8 D, u: Q5 `9 }; R, D( J- {3 q; J8 O1 e
此属性的内定值为 0。 % n1 N1 L6 z3 b' w
: p7 A! [1 }( p3 s+ Z; x" s
参考范例： 0 Y5 y% p2 `- o' L8 t' i! a5 R
& {. s5 p% z" ^2 E5 p1 \- j! J" HBODY {
/ X5 u/ ?6 L: d& Gmargin-top: 44px;
& F4 A' L e5 X3 _margin-bottom: 2cm;
9 Y& H2 A# r6 \# A+ n& q9 lmargin-left: 66px;
2 D' v h# v* L% }, u" @margin-right: 1.5in
+ j9 ^2 h4 p/ E$ r$ E# }}
& l( N9 f/ ~, A" p( \P {margin: 15pt} ; p7 v& B2 l$ `" t
7 |" ?8 n5 v/ v5 K, v6 W
5 W! p3 `0 i& |, w
' E* z/ l9 H9 E( L6 ^1 ~
{padding: 14px}
6 X$ z) T" E" B ?9 J8 R$ p( H$ I6 G* S. N) s# E0 V" y8 h
此属性用来指定各段落或各区块间，上下左右边缘各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。
4 j) y5 a* N% r+ r1 g* q* f1 t$ i* ` X0 j$ h7 G
padding 可以用 padding-top, padding-bottom, padding-left, padding-right来替换之。
T) L- Y6 O* d* r* l% c7 }+ L. d5 j
此属性的内定值为 0。IE3 不支援所有与 padding 相关的标签。 + a! J7 _- W+ k. r0 I4 m
5 C/ r( c- {* V3 Z2 e
参考范例：
# j' W' Q" d1 i) B! M8 ^) t C% r8 }% \5 l9 n& c$ I, T) n5 ^7 D
BODY {margin: 15pt} * w5 w2 k7 f; u! y$ A
DL { 9 w, s3 q" F6 Q0 X
padding-top: 22px; & l1 X4 t9 g2 ?( P2 I
padding-left: 20%;
0 o) y% R6 e% I$ u0 G} " H& o; J5 ]$ J1 j" l. H" F9 `
, }8 k. C" o, T3 j7 L( r9 e $ X/ \* T5 J' D/ {( {
! ], N; k* o; E1 F' D3 y
" t y3 v6 D9 Y" {) U# b% F
5 ~+ R* D7 G+ X, L
5 a2 T; z: U8 S6 B1 X: E- I
8 L. d* d' w6 U
Θ2001-2003 版权所有：『上海博峰网络科技有限公司』 电子邮件：gf1818! n6 w# F5 ^) Q
" K+ `0 R% L: \+ i# ^' ~- O- h, Z' v |
/1 
发表于 2002-11-29 18:22:00
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
千斤顶
显身卡