如何将 CSS 加入网页

您可以利用下列 3 种方式，将 CSS 指定的格调加诸于网页上： # g) r4 A3 l( C- k) x1. 在 HTML 档案里加一个超连结，连到外在的 CSS 档 这个方法最方便管理整个网站的网页风貌。它让网页的文字内容与版面设计分开。您只要在一个 CSS 档内（副档名为 .CSS）定义好网页的外观风格，所有参考连结到此 CSS 档的网页，便会依照指示，反应出定义好的风格。 3 X. {- x1 a ^/ a 它的写法是： ) Y& q1 I. f4 c1 [1 ` T% G/ \. P7 p. w# yHREF="http://www.xyz.com/xyz.css" / z, _" {6 C' G1 e5 _9 c" J0 z& I& XTYPE="text/css"> ( `; u8 y+ d: T( W) s! G! v此种方法 Navigator4 支援得仍十分 Buggy，请小心使用。 ~* f; |: l) R3 A U9 G5 ~3 q2. 在 HTML 档案的 ....... 标签间，加一段 CSS 的叙述文 4 s. A5 z! O M0 `5 c . w8 d F @8 q. O这个方法适用于指定某个网页，除了展现外在的 CSS 档定义好的网页风格外，同时还要展现本身 HTML 档内加注的 CSS 。 , u, H( R6 | `" ^如果内在加注的 CSS 叙述与外在连结的 CSS 叙述相冲突的话，网页的展现将以内在加注的 CSS 叙述为主。 # @4 t4 p+ b1 |) H它的写法是： ( l6 C8 I; ]3 u1 h2 g . ~$ ?* p1 @2 F- ^7 ~& e6 @ 开始本页内容… 5 T" | J, g6 Q. g# }6 v( ` [ # Y3 j+ L4 f1 T# y& C B6 K 特别值得注意的是，为了防止不支援 CSS 的浏览器误将 标签间的 CSS 风格叙述当成普通字串，而展现于网页上，您最好将 CSS 的叙述文字插入 标签之间。 6 S/ k3 p5 P# U! `1 H+ ? . v, S1 t' {) C# R2 H. {0 T3. 在 HTML 档的字里行间中，随时有需要，随时加一小段 CSS 的叙述指定 " e. w, I* Y" @" l这个方法适用于指定网页内的某一小段文字的呈现风格。 导览器除了会展现出外在的 CSS 档与此 HTML 档 内定义的 CSS 风格（如果有的话），同时还会展现字里行间的 CSS 风格。 如果字里行间的 CSS 叙述与 内在定义的 CSS 或外在连结的 CSS 叙述相冲突的话，导览器的展现将以字里行间的 CSS 叙述为主。 6 P7 W2 A7 \/ G3 m! u 3 v# q4 z" o3 k* E它的写法是： |+ u! F: I& B/ U ( p/ N5 V: T5 W8 n" G/ R * E( Z, {6 ]3 J% H

" h0 q) T0 I$ h" N) T0 b开始本页内容…

) G+ \; O' E \$ {% n 上述的 3 种 CSS，可以同时并用，也可以择您所好，单一或成双地使用。如果各 CSS 间的叙述相冲突，则内在定义的 CSS 会盖过外在连结的 CSS ，字里行间的 CSS 会盖过 内在定义的 CSS 。 & w# N/ F! `- f' a这样一层一层地推展、补充下来，使得「阶层性格调控制」清楚又有效率地帮助网页设计者，一方面中央统筹整个网站的网页风貌，另一方面又可以随著各个网页、各个文字段落的特别需要，而分别调配不同的格调。十分有条不紊，十分方便管理，所以称之为「阶层性」的格调控制。 + |( U1 j( j3 a CSS 语言的基本语法 # ~8 h. l6 Z/ _1 g4 ]9 S9 x) n + ~6 ^: G1 C0 z [9 A, _8 vCSS 的语言与网页排版语言 HTML，在内容上有一点点类似重覆，但是语法却大不相同。它的基本语法是： H1 {font-size: 16pt; % ?& d: w9 S6 C4 f) hfont-weight: bolder; , I6 b' e/ H+ T7 j1 Ccolor: red} . |/ r& U% z" ~( P m' R 上例中，H1表示您想要界定的标签元件为 H1，font-size、font-weight、color 这些扩充属性则表示您想指定 H1 应该长成什么模样。在上例中，我界定我的 H1 应该展现出字体大小 16 点，特粗黑体，红色的模样。 ' ^& G$ M2 ? u8 z2 z: D* m简化之 因此，顺著这个基本写法，我们可以继续定义其他的标签元件： H1 {font-size: 16pt; 6 X5 c/ |- T1 L4 z, q4 hfont-weight: bolder; color: red} . [! A8 p5 X ?8 R8 K5 U/ ~" YH2 {font-size: 16pt; font-weight: bolder; & D6 z. C; X1 u1 y& {color: red} 4 n0 ^+ I" L5 V$ ]+ _# Y+ {H3 {font-size: 16pt; $ N8 I3 r: g' x }, n" efont-weight: bolder; color: red} & ]. f h, ^7 Q0 _: q. w上例中，H1、H2、H3 界定的标签元件均长得一模一样，因此我们可以将它们简化写成： H1, H2, H3 {font-size: 16pt; font-weight: bolder; : R8 ?2 _4 V! C& A- d; mcolor: red} 0 o7 t8 o9 V+ |) v7 h! x' r" [1 m而如果您想要让您的 H1, H2, H3 各自拥有各自不同的风格，那么您必须一笔一笔地条列说明清楚： H1 {font-size: 16pt; font-weight: bolder; " @$ d' u6 `/ K# g, Sfont-family: Times, serif; color: red} H2 {font-size: 14pt; font-weight: bold; 3 Q& X( f0 n( P, o) U) i% Ofont-family: Georgia, serif; color: green} 9 p+ l: \' T$ dH3 {font-size: 12pt; : x5 a* A% v( T# Sfont-weight: bold; % Y7 T/ k: h0 k( _- Mfont-family: "New York", serif; color: gray} - K* `- @. }& d% J( G 3 d- ~ c6 N8 d( Y* {- Y另一种简化方法 虽然在上例中， H1, H2, H3 各自拥有各自不同的风格，使得您必须一笔一笔说明清楚。但是您会注意到，我们在指定 H1, H2, H3 各自不同的风格时，其实大都是在指定 H1, H2, H3 的字体表现（字体大小、字体粗细、字体的形体）。因此，我们可以将所有以 font字眼开始的叙述，整合在一个 font 大项里： H1 {font: 16pt bolder Times, serif; / k2 o2 w" [$ t! s( k& g' jcolor: red} H2 {font: 14pt bold Georgia, serif; color: green} H3 {font: 12pt bold "New York", serif; color: gray} # k8 g& c; c& n1 g( n! U$ _$ d 特别值得注意的是，在上例中，H3 的字体使用 "New York" 字体， "New York" 是两个字，所以必须将它 "括号" 起来。而 H1, H2, H3 的颜色规定，并不能一道并入 font 大项中，而必须另外标清楚。 7 R$ p: C* r& F ) J+ o o2 {( {顺便一提的是，CSS 与 HTML 一样，都有「注解」的符号。HTML 使用 做「注解」；而 CSS 使用 /* 这里是注解 */。 ! n: Q: l" W. |5 F4 v CSS 中 Font 的扩充属性 2 o0 m& V C/ [' k, O$ B. z, D前言： 1. CSS-Cascading Style Sheet 只能展现于有支援 Style Sheet 的浏览器内，例如：网景的 Navigator4 与微软的 IE3, IE4。版本不够新的浏览器显现不出 Style sheet 规定的风格。 . m, b2 A0 w4 Q, ^* D" k 2. 本系列文章只说明介绍 Navigator4 与 IE3、IE4 浏览器 共同支援的 CSS1 扩充属性。至于 W3C 详细规定的完整 CSS1 文件，或者 网景 、 微软各自支援的 CSS 扩充属性，请到其网站的 Style Sheet 部门观看。 , Y. ^) ^1 ^( o6 U/ S 3. CSS 的写法使用大写或小写均可。 {font-family: Times} 此属性用来指定字体的形体。画底线的部分可以用各式各样的字体来替换之。您可以同时指定好多种字体，以防 user 端没有第一种字体时，可以继续依照您的指示，选用第二、第三种字体。 参考范例： + Z0 @! ^, {4 ~ P {font-family: Times,"New York"} LI {font-family: "中黑体"} BLOCKQUOTE {font-family: monospace} , _6 H6 \: K1 R" y 特别值得注意的是，在上例中，字体 "New York" 、 "中黑体" 因为是两个字(以上)，所以必须将它们 "括号" 起来。此外，第三例中的 monospace 是用来指定写程序码时使用的等距字体。 {font-weight: bold} 2 h/ _/ S3 w& ?. V Q" f ( V7 v# p5 U" i W( L此属性用来指定字体的粗细。画底线的部分可以使用下列 2 组表示法来替换之： / X* C) P& t7 Z) M5 o7 Y% V* normal, bold, bolder, lighter " g/ ?: }3 _8 B0 h* 100, 200, 300..........900 8 c# [6 t T) R' `% P) P8 C! [& ]此属性的内定值为 normal。 参考范例： 8 X/ k: j6 \' n2 s; m, h7 O1 ~H1 {font-weight: bolder} BLOCKQUOTE {font-weight: 200} {font-size: medium} 6 Y3 s) Y6 B2 R0 N% R 此属性用来指定字体的大小。画底线的部分可以使用下列 4 组表示法来替换之： + t( ^2 U' J# D: _* 绝对 size: xx-small, x-small, small,medium, large, x-large, xx-large 0 `- I; G7 ]- H' t * 相对 size: larger, smaller（与母标签相对比） : q! S) g! F9 B+ A: \* 字体的点数 (point): 12pt,16pt, 20pt.... 0 I+ ^0 m1 j1 I9 h * 百分比: 80%, 120% .... （与母标签相对比） ; \# `% O" Y0 l4 I% |% l2 G6 n 此属性的内定值为 medium。 : Y+ ]8 p0 f3 d 参考范例： BODY {font-size: medium} 7 o5 `7 p. w% a5 u# ~3 c4 O3 OH1 {font-size: 18pt} / e4 r, q: t+ o2 E5 [H2 {font-size: 90%} 6 e1 }- }6 e( ]; ]( n3 e" c - t: q* Z9 Q/ D! d{font-style: normal} 5 l3 p( ?8 Y- O7 } / L0 Q5 V; j$ i( x此属性用来指定字体的正体或斜体。画底线的部分可以使用 normal, italic, oblique (仅 IE4 支援 oblique） 来替换之。 此属性的内定值为 normal。 参考范例： - C3 R% T$ w! u; _+ a5 t9 P " h% t7 m2 L( K6 n* h& Y- OH4 {font-style: italic} ) X- \) z3 e% n4 A5 wP {font-style: oblique} 8 `) {: m- K: j4 X/ l ' M! j4 ?/ g/ L6 k' ]7 C" Y{font: 12pt/14pt} 7 C$ g. P/ \ w% y 1 C" u; `( k3 r此属性用来指定字体的大小与每行行距的高度。上例中，12pt 指的是字体的大小，14pt 指的是行距的高度。 $ ~; r( \ ]: V , ?6 i `0 I8 \事实上，{font: … } 可以集结所有跟 font 有关的扩充属性在此标签内，所以您除了在 {font: … } 内指定字体大小与行距高度外，还可以在此标签内加入所有上述介绍过的属性。 / _* B* d& @6 C( v. T5 s4 [6 D5 y参考范例： 7 w n- w, P; D' O " O6 N4 j, ~& v1 t8 A* o! WP {font: italic bold 12pt/14pt} 7 U6 w# w7 F* W9 v( X' e; |. f% xSTRONG {font: 14pt/18pt bolder italic Times, serif} 1 [% z7 S/ w4 n6 q- Y5 Q2 SCSS 中 Color 的扩充属性 {color: red} $ ]7 p7 V8 C" f0 |1 j此属性用来指定字体的颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。 - X [1 O: P- e( |0 Q 如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。 ' P/ {* k2 s$ Z参考范例： BLOCKQUOTE {color: navy} - f/ }* I4 Y( R, Q, s9 f4 ZLI {color: #eedd44} LI {color: #ed4} 6 ?: i$ `9 T7 s7 J+ {P {color: #007f3a} & W4 `5 R' J- R) n( q$ M 6 }3 T" h. ]2 H( {; m, P{background-color: red} 0 x& V7 g) p' s2 a- c Z' K此属性用来指定整个网页的背景颜色，或某一段落，某一区块的背景颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。 . J. P) g4 U, n k6 k4 G# K! r如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。 6 U, N% [( [# i* y' G& X4 U! v 参考范例： # q9 R) s# d/ y2 v / Z) Y, D) o. z) t& t9 dBODY {background-color: #ed4} $ j/ N; {1 c) x7 {* x2 |9 uBLOCKQUOTE {background-color: navy} H2 {background-color: #007f3a} 3 M- ^! U+ u) c9 [" ?0 Y! u 6 D$ P6 _+ Z& [6 p- ^{background-image: url (/images/xyz.gif)} ; _/ g* B3 i- z+ l4 G此属性用来指定网页或某一区块的背景图案。画底线的部分可以使用图档的绝对位置或相对位置来表示之。 ( v& V$ M0 a( T: X8 J5 \& [使用此标签时，最好同时也指定一个类似的颜色做背景颜色。 ]' B N' B0 Y5 [3 e9 S( ?" s 参考范例： 2 G1 {8 R3 P6 @3 N& a# o* k) R 0 A! l' U/ I( W( E u' tBODY { background-image: url (/images/2T_logo.gif); 1 J1 T$ S ^$ ubackground-color: #ededff 3 T% g, m+ p' U; C, A} 6 c L& ^6 v" f& F# E, D# [/ dLI { background-image: url (http://www.2T.com/2T_logo.gif); . T: I C7 X i, E' H& B r! R2 Y: k' Ubackground-color: #cef } , p( T' m- \- L{background: (…)} " i h+ k. K3 l3 A$ \: K 2 [2 |# M' _9 _7 X此标签可以集结所有跟 background 有关的扩充属性在此一标签内，所以您可以将所有上述介绍过的 background 属性一起加进来。 1 K, ]# r, E# f参考范例： BODY {background: white url (/images/2T_logo.gif) repeat-y} LI {background: #cc88ff url (http://www.2T.com/2T_logo.gif) no-repeat} # H$ N% i" x$ o4 ] CSS 中 Text 的扩充属性 {text-decoration: none} ; O' c2 N- H9 W7 R M+ |6 } 此属性用来指定文字是否画有底线或被线条杠掉（如：被线条杠掉此例）。画底线的部分可以用 none, underline, line-through 来替换之。 此属性的内定值为 none。 参考范例： - [/ n2 F* g, {) s1 o' |P { color: navy; text-decoration: none } " {' E ~+ f2 G3 w; P1 {, r( L* f6 uA:link, A:visited, A:active { text-decoration: underline } # \3 \' K L9 A4 o- Z ) v& G( \4 n0 n/ F, D5 l% v9 z# m& S{text-align: left} $ J* ?8 G, `9 o. M3 p9 q此属性用来指定文字是向左、向中、或向右对齐。画底线的部分可以用 left, right, center, justify 来替换之。 参考范例： P {text-align: left} 9 c* |! \% |8 q: r; M4 t% |H1 {text-align: center} % ?' |. z( e ?' u4 B0 a3 F/ c {text-indent: 2cm} 0 h. D1 x; D% w. ?2 V! `1 Z& P 4 T9 M/ C* p$ H) k# q+ j% `2 p此属性用来指定文字向右凹进去多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 : B% ]' \# a3 P3 w F% y 参考范例： $ `! Q+ i* K+ H. W% x3 V P {text-indent: 3cm} ' E2 B! O7 C+ S- VLI {text-indent: 60px} BLOCKQUOTE {text-indent: 20%} # D' Y6 G: t, z9 l* h6 ?/ Z5 \9 N {line-height: 14pt} 此属性用来指定每行行距的高度。line-height 常与字体大小 font-size 一起并用，写成 12pt/14pt (12pt 指的是字体的大小，14pt 指的是行距的高度)。line-height也可以用 % 表示之。 % 是以母标签来相对比。 参考范例： BODY { % g' o- \" s. ]9 f+ Wfont-size: 12pt; ' G, F* @/ ~1 K! X, l4 rline-height:14pt , M" D4 r) ^0 q I} H1 { - b0 V+ Y, ^4 I. c7 W1 Y1 l) ufont-size: 150%; ; W! j% P/ e& S% F9 u6 u' S- xline-height: 200% 8 u2 v! D6 ^+ q" O} + P) j) Y; ~2 G$ E) l) ^H4 {font: 16pt/20pt bold italic} CSS 中 Margin, Padding 的扩充属性 {margin: 3cm} " I5 ~0 W! q. B 此属性用来指定网页的上下左右边缘，各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 + L7 z% E K! [ x7 f7 o( a3 y! Kmargin 可以用 margin-top, margin-bottom, margin-left, margin-right来替换之。 ! L9 B3 O# E% o& X* _. f( E# [' U 此属性的内定值为 0。 + A/ u" G' l! x9 ?* X, n3 r参考范例： BODY { margin-top: 44px; margin-bottom: 2cm; margin-left: 66px; margin-right: 1.5in ! z8 a- z7 Y& e: N; x: X, S} P {margin: 15pt} , m: \7 j+ o/ }- z& N {padding: 14px} 此属性用来指定各段落或各区块间，上下左右边缘各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 ' k. J0 s* c9 w. Zpadding 可以用 padding-top, padding-bottom, padding-left, padding-right来替换之。 5 v/ o+ r4 q1 e9 _+ [0 |/ y, F 此属性的内定值为 0。IE3 不支援所有与 padding 相关的标签。 8 m6 {6 j) }) X1 N ) G& X9 q4 \' r0 x/ o0 k参考范例： ( t& h- Q; e; V" s3 y/ W5 q' l0 Y6 y 9 X- F* I3 r% Q* V' @( V( qBODY {margin: 15pt} 9 T/ z# H1 w$ V0 [7 Z# {DL { : J% p# H$ F- J+ C. _% e9 _5 q: M, `padding-top: 22px; padding-left: 20%; 2 u) K8 R0 U M. ~ c} & I, r$ q8 u# c# e; V 8 @2 k6 v7 q# G. E6 E; L: T. x Θ2001-2003 版权所有：『上海博峰网络科技有限公司』 电子邮件：gf1818 3 `+ @1 ?% b5 ~5 U( \

呵呵！！不错！！

还不错啊？
7 i8 J, G3 B- I" f应该算是很好了。
- K4 r9 `1 h/ B6 P" `就是觉得多了一点。