如何将 CSS 加入网页

您可以利用下列 3 种方式，将 CSS 指定的格调加诸于网页上： 8 _ w: F0 L: S/ A9 Y0 t1. 在 HTML 档案里加一个超连结，连到外在的 CSS 档 ( N8 [" ?- G* D: s" ]这个方法最方便管理整个网站的网页风貌。它让网页的文字内容与版面设计分开。您只要在一个 CSS 档内（副档名为 .CSS）定义好网页的外观风格，所有参考连结到此 CSS 档的网页，便会依照指示，反应出定义好的风格。 0 z9 A& w# m, h2 d5 Z4 _1 S它的写法是： 2 G: A$ i: L; r. d# h+ m1 \& u' x2 W P# A$ A! C- a; e! o $ Y+ g1 M. z* ]# ?' r HREF="http://www.xyz.com/xyz.css" + s% m# f8 u! ]2 @; a2 ]TYPE="text/css"> $ m. W+ R4 \' Y5 l8 _: l此种方法 Navigator4 支援得仍十分 Buggy，请小心使用。 % T, O Z; g, U; {# N# Y# \) R * Z) y3 ]8 `! Q# P7 {2. 在 HTML 档案的 ....... 标签间，加一段 CSS 的叙述文 & ]: L; a! v- n p& O( | 这个方法适用于指定某个网页，除了展现外在的 CSS 档定义好的网页风格外，同时还要展现本身 HTML 档内加注的 CSS 。 9 d/ I) G6 d4 V* x$ e $ h* A0 D# m. @4 C! H; v# c4 k如果内在加注的 CSS 叙述与外在连结的 CSS 叙述相冲突的话，网页的展现将以内在加注的 CSS 叙述为主。 " A( u% u7 E2 S( ]( n% k4 y 它的写法是： : Y4 `+ T2 L* g3 K3 w; f 1 X) l+ x2 k9 h* z" }# u # ]0 o& o2 i# ]2 [! q M9 D( w2 A- p & @- l* {& V4 q+ g; k 开始本页内容… * ?! Y' S+ x- C; d5 | 0 C+ K. b2 s0 H Q特别值得注意的是，为了防止不支援 CSS 的浏览器误将 标签间的 CSS 风格叙述当成普通字串，而展现于网页上，您最好将 CSS 的叙述文字插入 标签之间。 1 t V5 u" R& Y( w; E6 S 3. 在 HTML 档的字里行间中，随时有需要，随时加一小段 CSS 的叙述指定 这个方法适用于指定网页内的某一小段文字的呈现风格。 ! F5 c# g6 S- h& R4 ~1 w* J" F 3 \! b3 t- n( J. R0 @+ F导览器除了会展现出外在的 CSS 档与此 HTML 档 内定义的 CSS 风格（如果有的话），同时还会展现字里行间的 CSS 风格。 8 b8 k5 z- y) E# O如果字里行间的 CSS 叙述与 内在定义的 CSS 或外在连结的 CSS 叙述相冲突的话，导览器的展现将以字里行间的 CSS 叙述为主。 它的写法是： # W! A6 f) B0 f& G4 a. P, w 5 l, j$ J' ?+ v. x5 D

开始本页内容…

* G& ]6 s2 a, b2 G, d: _ 上述的 3 种 CSS，可以同时并用，也可以择您所好，单一或成双地使用。如果各 CSS 间的叙述相冲突，则内在定义的 CSS 会盖过外在连结的 CSS ，字里行间的 CSS 会盖过 内在定义的 CSS 。 这样一层一层地推展、补充下来，使得「阶层性格调控制」清楚又有效率地帮助网页设计者，一方面中央统筹整个网站的网页风貌，另一方面又可以随著各个网页、各个文字段落的特别需要，而分别调配不同的格调。十分有条不紊，十分方便管理，所以称之为「阶层性」的格调控制。 + x+ h4 W7 \% \) rCSS 语言的基本语法 CSS 的语言与网页排版语言 HTML，在内容上有一点点类似重覆，但是语法却大不相同。它的基本语法是： H1 {font-size: 16pt; + e1 O, `& D9 B* k& G8 Cfont-weight: bolder; & V" }6 o; o' u# {color: red} 5 Q3 f+ [- Z- x1 g * a; g1 r9 W- v上例中，H1表示您想要界定的标签元件为 H1，font-size、font-weight、color 这些扩充属性则表示您想指定 H1 应该长成什么模样。在上例中，我界定我的 H1 应该展现出字体大小 16 点，特粗黑体，红色的模样。 8 s) a5 q0 I l5 z- X* |/ l& ]简化之 因此，顺著这个基本写法，我们可以继续定义其他的标签元件： H1 {font-size: 16pt; font-weight: bolder; color: red} H2 {font-size: 16pt; 5 i! @6 A$ v% b( i7 r7 q/ ~font-weight: bolder; color: red} H3 {font-size: 16pt; / b$ a( t% @( v4 q2 {5 x zfont-weight: bolder; color: red} 5 X8 t3 e6 ]; N3 }% v3 c上例中，H1、H2、H3 界定的标签元件均长得一模一样，因此我们可以将它们简化写成： H1, H2, H3 {font-size: 16pt; font-weight: bolder; 9 z1 Q6 X+ ?( U# zcolor: red} 而如果您想要让您的 H1, H2, H3 各自拥有各自不同的风格，那么您必须一笔一笔地条列说明清楚： H1 {font-size: 16pt; font-weight: bolder; + t6 A( o0 `* ~' Hfont-family: Times, serif; color: red} H2 {font-size: 14pt; font-weight: bold; font-family: Georgia, serif; color: green} H3 {font-size: 12pt; font-weight: bold; font-family: "New York", serif; color: gray} 另一种简化方法 虽然在上例中， H1, H2, H3 各自拥有各自不同的风格，使得您必须一笔一笔说明清楚。但是您会注意到，我们在指定 H1, H2, H3 各自不同的风格时，其实大都是在指定 H1, H2, H3 的字体表现（字体大小、字体粗细、字体的形体）。因此，我们可以将所有以 font字眼开始的叙述，整合在一个 font 大项里： H1 {font: 16pt bolder Times, serif; color: red} H2 {font: 14pt bold Georgia, serif; color: green} H3 {font: 12pt bold "New York", serif; 7 G& y& b# W: c8 Z; v, }; A6 K7 { N7 ]color: gray} ' q3 S/ _5 S. E4 n8 q, A# H A+ A 1 u* _8 z# K, K0 @9 R特别值得注意的是，在上例中，H3 的字体使用 "New York" 字体， "New York" 是两个字，所以必须将它 "括号" 起来。而 H1, H2, H3 的颜色规定，并不能一道并入 font 大项中，而必须另外标清楚。 : l: O1 A- R/ V) Q; T + k/ s+ u) G0 K3 ^% w* l2 n顺便一提的是，CSS 与 HTML 一样，都有「注解」的符号。HTML 使用 做「注解」；而 CSS 使用 /* 这里是注解 */。 CSS 中 Font 的扩充属性 前言： 3 H" D( d. L8 ~# `6 b! S. x1. CSS-Cascading Style Sheet 只能展现于有支援 Style Sheet 的浏览器内，例如：网景的 Navigator4 与微软的 IE3, IE4。版本不够新的浏览器显现不出 Style sheet 规定的风格。 2. 本系列文章只说明介绍 Navigator4 与 IE3、IE4 浏览器 共同支援的 CSS1 扩充属性。至于 W3C 详细规定的完整 CSS1 文件，或者 网景 、 微软各自支援的 CSS 扩充属性，请到其网站的 Style Sheet 部门观看。 * }: }' ]3 I' l' R/ j% H& Y3. CSS 的写法使用大写或小写均可。 + S1 y* ?$ V5 `% V5 ~/ U* n ! R( O$ t! W8 m0 `* f) i+ y- O{font-family: Times} # B$ }7 d g. U( ]2 O - R: d* ^; o4 b( n' F, M6 _此属性用来指定字体的形体。画底线的部分可以用各式各样的字体来替换之。您可以同时指定好多种字体，以防 user 端没有第一种字体时，可以继续依照您的指示，选用第二、第三种字体。 5 v1 D$ u8 v) g- A 参考范例： + m& X9 K) M2 r3 M' v 0 p$ D ~, w: m$ K- I8 x6 @# v. G! dP {font-family: Times,"New York"} LI {font-family: "中黑体"} * t- F5 n- J4 I. K* b. W; t5 LBLOCKQUOTE {font-family: monospace} 8 W( \( O8 h: y# }/ x 特别值得注意的是，在上例中，字体 "New York" 、 "中黑体" 因为是两个字(以上)，所以必须将它们 "括号" 起来。此外，第三例中的 monospace 是用来指定写程序码时使用的等距字体。 1 P6 r! {3 p4 C{font-weight: bold} 2 U* k* N1 h1 a2 u" C9 A3 N1 `& C0 i 此属性用来指定字体的粗细。画底线的部分可以使用下列 2 组表示法来替换之： 5 L q9 U( E5 q/ i! _7 R- [% i* normal, bold, bolder, lighter 8 U+ Q' l+ ^8 W, X$ h2 S' H9 g1 Q* P" u* 100, 200, 300..........900 9 ] S4 I6 j, E, x3 e4 ` / N) K3 B# R; Q2 e此属性的内定值为 normal。 参考范例： H1 {font-weight: bolder} BLOCKQUOTE {font-weight: 200} 4 e! v2 ]( d3 P1 M/ y( U! T & {, J: t) b6 u( o( i9 r& \{font-size: medium} ! Q/ k# \) y Z1 h5 l / u/ m; i/ m8 h$ P此属性用来指定字体的大小。画底线的部分可以使用下列 4 组表示法来替换之： 3 J/ ]% Y+ C: j7 X' w ; i/ {/ @% G0 s- K" M3 `* 绝对 size: xx-small, x-small, small,medium, large, x-large, xx-large * 相对 size: larger, smaller（与母标签相对比） . D; o+ t+ {0 x$ N * 字体的点数 (point): 12pt,16pt, 20pt.... . V2 a" P% a! z9 e, b 1 m( d) ^- w* A% Q* 百分比: 80%, 120% .... （与母标签相对比） + a/ h- W A5 I! c' @9 W6 A5 _ ( a- |: x& ]* m) h. f( w" u0 k4 U& G此属性的内定值为 medium。 4 o# D' x: ^; i参考范例： 7 H, b: A2 P% g3 j p: o BODY {font-size: medium} . l- g8 b* v3 D6 |' n% h4 fH1 {font-size: 18pt} ) z; O, k A+ ?. y# FH2 {font-size: 90%} {font-style: normal} ' {& a6 ~9 |2 j: _# u+ w: a 2 ^" |5 }7 _+ ]& _0 O* v# h此属性用来指定字体的正体或斜体。画底线的部分可以使用 normal, italic, oblique (仅 IE4 支援 oblique） 来替换之。 此属性的内定值为 normal。 0 f6 A: ^9 T" G T8 D1 {) C8 b: P % [9 Z. f' G6 _/ ~参考范例： 9 _) X4 i! c3 k$ n( TH4 {font-style: italic} / X& A: E7 t* X6 k; w# i N# iP {font-style: oblique} * @/ c6 v: u9 C) J7 H; t $ Y9 ^* A2 W3 M4 [& K0 a{font: 12pt/14pt} v% @* A& r' M# g( i0 p, _ 此属性用来指定字体的大小与每行行距的高度。上例中，12pt 指的是字体的大小，14pt 指的是行距的高度。 2 K& F# e7 k; U- F k; y + L, _# W0 |) I {事实上，{font: … } 可以集结所有跟 font 有关的扩充属性在此标签内，所以您除了在 {font: … } 内指定字体大小与行距高度外，还可以在此标签内加入所有上述介绍过的属性。 6 O4 t/ H* q1 a: C8 k6 H 参考范例： P {font: italic bold 12pt/14pt} STRONG {font: 14pt/18pt bolder italic Times, serif} ! ? k* Q0 p; z2 H: R$ q" w CSS 中 Color 的扩充属性 {color: red} 此属性用来指定字体的颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。 8 K7 o" b; Y( |# p( l6 Z* ` 如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。 参考范例： * f/ D0 d; I1 D" j" ~BLOCKQUOTE {color: navy} LI {color: #eedd44} % k$ v% Z v2 T% p" fLI {color: #ed4} P {color: #007f3a} 5 S: Y6 f: M9 W; P# t{background-color: red} # K$ y0 c( g9 c; E 此属性用来指定整个网页的背景颜色，或某一段落，某一区块的背景颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。 如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。 8 @! F. N. Z+ {, z, |0 n! d4 |/ ^ 1 j7 `" s' s- Z/ |+ S! o参考范例： 8 M v1 H5 _' p* S 4 Q$ R) P* C$ u5 ? W- fBODY {background-color: #ed4} 3 p- X2 } T) y9 \9 K6 MBLOCKQUOTE {background-color: navy} H2 {background-color: #007f3a} 4 \7 U% [4 r. K- O1 T {background-image: url (/images/xyz.gif)} 9 A! n: m/ _0 |% D' V v 此属性用来指定网页或某一区块的背景图案。画底线的部分可以使用图档的绝对位置或相对位置来表示之。 使用此标签时，最好同时也指定一个类似的颜色做背景颜色。 - H$ G7 R8 g: Q. e; | - g6 Z3 u* k0 F3 |) g/ J9 G参考范例： 0 {9 m7 b7 z8 J& D/ SBODY { & ]$ {7 G# g! V9 j4 X2 t1 Gbackground-image: url (/images/2T_logo.gif); background-color: #ededff * v a% F$ F1 f3 S# m+ |4 q2 B} 3 t+ L2 M: ~1 F$ F4 Z; [% sLI { " d, J. d- V6 ?. Sbackground-image: url (http://www.2T.com/2T_logo.gif); ' z& ]/ h, Y' ?7 t* y5 R0 Ubackground-color: #cef } ( W& b2 H) i5 f {background: (…)} 3 ]* q) f7 i' p4 b- |/ B" k此标签可以集结所有跟 background 有关的扩充属性在此一标签内，所以您可以将所有上述介绍过的 background 属性一起加进来。 9 A0 m; A! M- `: }7 [: h参考范例： % J. _$ R, S0 f5 m& j; b3 x) q 2 r2 V4 @8 M% g3 h; qBODY {background: white url (/images/2T_logo.gif) repeat-y} LI {background: #cc88ff url (http://www.2T.com/2T_logo.gif) no-repeat} % P! t* Q8 b+ }. t( A* k CSS 中 Text 的扩充属性 " H5 X% T6 u8 C' P' v, Q{text-decoration: none} 4 `% ] M3 _0 O A , ]* F4 u; t7 V) A' p此属性用来指定文字是否画有底线或被线条杠掉（如：被线条杠掉此例）。画底线的部分可以用 none, underline, line-through 来替换之。 " J/ |' o( H: d" m/ D* e& H7 H : S: i7 b$ X7 ]5 z7 X5 A此属性的内定值为 none。 8 f( f \# {+ X4 z! U& X4 K0 h参考范例： 6 _+ D ?7 P8 U; ^$ [; C, @ P { color: navy; . g8 ]4 o+ q& i/ B/ Q) {text-decoration: none } 9 Q% m/ i1 Q! q/ W nA:link, A:visited, A:active { text-decoration: underline ( o: ]$ [% r f/ ]5 v0 _} X* N/ y# ~' E: V' w; x0 s{text-align: left} 7 B) R1 P! f ~' o+ d 此属性用来指定文字是向左、向中、或向右对齐。画底线的部分可以用 left, right, center, justify 来替换之。 7 D" Z& y) A) }5 B" i参考范例： 0 c1 \5 C4 n! } O( u P {text-align: left} 5 N2 Z# w% X/ j! j# fH1 {text-align: center} G, X# a, g* j) W- z0 c {text-indent: 2cm} 1 x$ c: m; k; N' f- B2 y此属性用来指定文字向右凹进去多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 参考范例： ( b+ |, A. M1 l' x1 wP {text-indent: 3cm} 3 Z J, M T6 x5 {. ULI {text-indent: 60px} 2 w" {0 o$ x. e0 }5 uBLOCKQUOTE {text-indent: 20%} + B) d4 l" ~& Z$ t ?: D{line-height: 14pt} 8 ]! l: G8 R B% `, {+ V; C此属性用来指定每行行距的高度。line-height 常与字体大小 font-size 一起并用，写成 12pt/14pt (12pt 指的是字体的大小，14pt 指的是行距的高度)。line-height也可以用 % 表示之。 % 是以母标签来相对比。 * _' x* o1 H9 F3 s& u" c参考范例： BODY { font-size: 12pt; line-height:14pt } H1 { font-size: 150%; ! s& Z5 m' [3 W1 l/ rline-height: 200% } & e# g* W; @" y) `; L) _& _ 5 V& W- k" L7 N. T6 M; YH4 {font: 16pt/20pt bold italic} 4 G: z3 T8 Y$ c CSS 中 Margin, Padding 的扩充属性 {margin: 3cm} : z* E) E- i3 D" F2 j此属性用来指定网页的上下左右边缘，各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 + h! Y- e7 y7 d9 t. u5 i+ I3 jmargin 可以用 margin-top, margin-bottom, margin-left, margin-right来替换之。 ' j9 v) L- b" d9 w. q % L" d5 S( D6 Z% T此属性的内定值为 0。 w' g$ l# S! G# v2 ~ 参考范例： BODY { margin-top: 44px; margin-bottom: 2cm; margin-left: 66px; margin-right: 1.5in } & \, K. u0 f$ rP {margin: 15pt} 5 t; [- Y: t+ u; t; Y 0 f t1 U6 o& @& q( } : b% B3 @9 R3 }/ a" B3 E, c- L {padding: 14px} 6 h2 z- Q3 m5 a3 M B8 [+ Z此属性用来指定各段落或各区块间，上下左右边缘各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 1 `% }9 p* ?1 b2 T/ R; Q padding 可以用 padding-top, padding-bottom, padding-left, padding-right来替换之。 $ V K ~4 d* Y$ t4 f) j 此属性的内定值为 0。IE3 不支援所有与 padding 相关的标签。 + ?' e' y( `3 q, N( j0 Z5 o( J8 G * P T7 \: E$ r! s/ W' I; N$ Q R" Y参考范例： BODY {margin: 15pt} DL { padding-top: 22px; , } E2 ]' ?& Z- I9 E/ a7 v; \( ppadding-left: 20%; & P/ n x, m! t6 | X: c# e( b8 q9 F} + t M4 g7 D9 [+ ]0 ^6 ]; x : V/ |) t8 ]7 |6 t 9 O: s* C2 ~' `4 k3 T! d p. M1 d ' H( Y" Q9 p' _7 G# Z 7 B2 E2 z% {4 y3 w2 Z$ vΘ2001-2003 版权所有：『上海博峰网络科技有限公司』 电子邮件：gf1818 " [7 }$ W. ~$ o9 O8 @, k / F$ j8 v0 u, N, I* ~8 a# I) B

呵呵！！不错！！

还不错啊？
应该算是很好了。
( q$ I4 N7 K5 [( A) O0 X就是觉得多了一点。