如何将 CSS 加入网页

您可以利用下列 3 种方式，将 CSS 指定的格调加诸于网页上： 1. 在 HTML 档案里加一个超连结，连到外在的 CSS 档 这个方法最方便管理整个网站的网页风貌。它让网页的文字内容与版面设计分开。您只要在一个 CSS 档内（副档名为 .CSS）定义好网页的外观风格，所有参考连结到此 CSS 档的网页，便会依照指示，反应出定义好的风格。 4 v. J8 A! z% P" G/ t8 P- D它的写法是： , P4 I8 C6 D" R, Y: S: A2 Z ' h0 K* @* [+ N/ G/ c& J% q/ D" G$ C0 THREF="http://www.xyz.com/xyz.css" TYPE="text/css"> 9 W' Z0 A* V: | W 8 u5 h3 b8 ` \' C' A+ k' V 此种方法 Navigator4 支援得仍十分 Buggy，请小心使用。 2. 在 HTML 档案的 ....... 标签间，加一段 CSS 的叙述文 2 X- U# c8 p! I: C7 W 3 B2 g; Z# [% C! F4 I) s这个方法适用于指定某个网页，除了展现外在的 CSS 档定义好的网页风格外，同时还要展现本身 HTML 档内加注的 CSS 。 如果内在加注的 CSS 叙述与外在连结的 CSS 叙述相冲突的话，网页的展现将以内在加注的 CSS 叙述为主。 3 Y% O& n9 b7 r, e! I& m $ [9 a6 o% X; z它的写法是： + ^7 e0 ~* {: W# B+ S + m+ i4 R8 Y& ] _( p 4 U' W; t9 c; Q( } * E3 Q$ Z6 e! B) c$ {9 a6 A0 u: U 5 Y6 X+ Y6 Q; m2 o开始本页内容… # U6 s- I! y3 x$ |$ j+ c $ R! v9 C& d2 Q' I* E1 B # X% N+ d6 R( h9 { K2 z特别值得注意的是，为了防止不支援 CSS 的浏览器误将 标签间的 CSS 风格叙述当成普通字串，而展现于网页上，您最好将 CSS 的叙述文字插入 标签之间。 0 U- [2 ^; W) R; }3. 在 HTML 档的字里行间中，随时有需要，随时加一小段 CSS 的叙述指定 : M6 e& G, n: _, H! Y 这个方法适用于指定网页内的某一小段文字的呈现风格。 / E/ E& k. D+ a; H* M导览器除了会展现出外在的 CSS 档与此 HTML 档 内定义的 CSS 风格（如果有的话），同时还会展现字里行间的 CSS 风格。 ( A# |1 Z) w! v如果字里行间的 CSS 叙述与 内在定义的 CSS 或外在连结的 CSS 叙述相冲突的话，导览器的展现将以字里行间的 CSS 叙述为主。 : d) P2 A6 _) K W5 C9 J& U 0 A5 m- p2 y* \它的写法是： # B% M0 @" W. q5 G

开始本页内容… 7 w/ d% X6 B+ K, w( V1 ^

7 A$ M: R/ B, |9 g # {4 i8 Q+ q+ n2 e; O 4 y. J* X% k `7 v. T6 ^, C 上述的 3 种 CSS，可以同时并用，也可以择您所好，单一或成双地使用。如果各 CSS 间的叙述相冲突，则内在定义的 CSS 会盖过外在连结的 CSS ，字里行间的 CSS 会盖过 内在定义的 CSS 。 5 n; V2 `# T: X8 b0 m7 G' R这样一层一层地推展、补充下来，使得「阶层性格调控制」清楚又有效率地帮助网页设计者，一方面中央统筹整个网站的网页风貌，另一方面又可以随著各个网页、各个文字段落的特别需要，而分别调配不同的格调。十分有条不紊，十分方便管理，所以称之为「阶层性」的格调控制。 : r# v4 C; B8 o9 S( f/ t" zCSS 语言的基本语法 4 H$ q* B* c* F7 q+ kCSS 的语言与网页排版语言 HTML，在内容上有一点点类似重覆，但是语法却大不相同。它的基本语法是： H1 {font-size: 16pt; font-weight: bolder; color: red} 7 h# T1 N/ h5 c* @ 上例中，H1表示您想要界定的标签元件为 H1，font-size、font-weight、color 这些扩充属性则表示您想指定 H1 应该长成什么模样。在上例中，我界定我的 H1 应该展现出字体大小 16 点，特粗黑体，红色的模样。 4 g2 g! n$ ?9 P# N $ W6 N, m% T7 `( g: f3 }简化之 # |* q$ Z& `! K! ?2 P, v+ S. S因此，顺著这个基本写法，我们可以继续定义其他的标签元件： H1 {font-size: 16pt; 3 F/ ^9 s* T( U+ Nfont-weight: bolder; color: red} 6 Z2 M: Q- n% c R) S B* o& C2 {. SH2 {font-size: 16pt; font-weight: bolder; color: red} 8 D$ t& s" |" u& y8 Q+ P' sH3 {font-size: 16pt; + C7 y0 u' v! X8 cfont-weight: bolder; color: red} - P$ z) b+ ]/ J' V9 m上例中，H1、H2、H3 界定的标签元件均长得一模一样，因此我们可以将它们简化写成： H1, H2, H3 {font-size: 16pt; : \6 D, Q/ q, n6 n# u* X( h9 Hfont-weight: bolder; / E, F, q! A7 Q2 ncolor: red} 而如果您想要让您的 H1, H2, H3 各自拥有各自不同的风格，那么您必须一笔一笔地条列说明清楚： H1 {font-size: 16pt; : S; C6 x3 n6 w" O" W1 A; o/ {font-weight: bolder; . O7 s$ w+ F% Yfont-family: Times, serif; color: red} H2 {font-size: 14pt; font-weight: bold; font-family: Georgia, serif; color: green} 5 k+ L5 o+ y. [/ Q [+ OH3 {font-size: 12pt; . ]5 P! ]' t1 q# B; mfont-weight: bold; font-family: "New York", serif; * Q6 r' H5 }( acolor: gray} * D. G+ _/ w- _ 另一种简化方法 虽然在上例中， 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} , Z8 Q3 a6 ~9 {1 PH3 {font: 12pt bold "New York", serif; " |# G {6 a: P& Scolor: gray} ! V1 }: o; w6 J3 J% w特别值得注意的是，在上例中，H3 的字体使用 "New York" 字体， "New York" 是两个字，所以必须将它 "括号" 起来。而 H1, H2, H3 的颜色规定，并不能一道并入 font 大项中，而必须另外标清楚。 6 p- n7 Z4 `! ^ 顺便一提的是，CSS 与 HTML 一样，都有「注解」的符号。HTML 使用 做「注解」；而 CSS 使用 /* 这里是注解 */。 U4 ?8 _" k. x 2 v% M8 c5 v! H9 `! sCSS 中 Font 的扩充属性 前言： 1. CSS-Cascading Style Sheet 只能展现于有支援 Style Sheet 的浏览器内，例如：网景的 Navigator4 与微软的 IE3, IE4。版本不够新的浏览器显现不出 Style sheet 规定的风格。 2. 本系列文章只说明介绍 Navigator4 与 IE3、IE4 浏览器 共同支援的 CSS1 扩充属性。至于 W3C 详细规定的完整 CSS1 文件，或者 网景 、 微软各自支援的 CSS 扩充属性，请到其网站的 Style Sheet 部门观看。 8 A( d% }, r* l+ j 3. CSS 的写法使用大写或小写均可。 r1 D; i$ s0 v1 _9 I9 ~+ ~ * F0 m4 g! a5 d/ X{font-family: Times} 此属性用来指定字体的形体。画底线的部分可以用各式各样的字体来替换之。您可以同时指定好多种字体，以防 user 端没有第一种字体时，可以继续依照您的指示，选用第二、第三种字体。 参考范例： P {font-family: Times,"New York"} ! c% u& n2 \0 W5 ULI {font-family: "中黑体"} BLOCKQUOTE {font-family: monospace} . P6 g% f$ J. X特别值得注意的是，在上例中，字体 "New York" 、 "中黑体" 因为是两个字(以上)，所以必须将它们 "括号" 起来。此外，第三例中的 monospace 是用来指定写程序码时使用的等距字体。 " c% O# _5 @* O+ O8 _! Z{font-weight: bold} 此属性用来指定字体的粗细。画底线的部分可以使用下列 2 组表示法来替换之： : n1 z' {- Y8 C+ L5 a+ _0 | + s9 ?2 C! [" L) a* normal, bold, bolder, lighter ' N+ m' y2 f# {4 N9 y3 Z* 100, 200, 300..........900 此属性的内定值为 normal。 3 z4 @5 @2 O2 c# W8 E) ? 7 C( {4 D" [, B2 i( D参考范例： H1 {font-weight: bolder} BLOCKQUOTE {font-weight: 200} ; d5 ]! ?( K) {- o7 Z. F1 m1 C {font-size: medium} 4 o8 \, p7 W1 }) ~此属性用来指定字体的大小。画底线的部分可以使用下列 4 组表示法来替换之： 0 }1 Y) u2 B; _$ i# k' o * 绝对 size: xx-small, x-small, small,medium, large, x-large, xx-large 8 i- e' ^) i, y9 o+ B* 相对 size: larger, smaller（与母标签相对比） / E* o" i2 Q# Y g9 ]4 a+ H* 字体的点数 (point): 12pt,16pt, 20pt.... * 百分比: 80%, 120% .... （与母标签相对比） 5 v- C0 R3 w }. }0 n2 L7 m; l# _0 G* ^ 8 A4 v# p2 G- z2 F7 i$ s此属性的内定值为 medium。 ; Y, R; U8 q6 @$ ^参考范例： # j5 q/ p' u+ [ v0 o$ k; L: r BODY {font-size: medium} H1 {font-size: 18pt} H2 {font-size: 90%} {font-style: normal} # M# r' A+ b+ G9 Y* K4 U% O . s0 ?3 t u u此属性用来指定字体的正体或斜体。画底线的部分可以使用 normal, italic, oblique (仅 IE4 支援 oblique） 来替换之。 , o$ j& p4 c2 K+ n/ t2 m0 ?此属性的内定值为 normal。 5 ]. \6 V8 \; ?! K \+ |5 C% Y & Y: `# s3 f, I! @; D参考范例： & w2 v2 K5 U F$ BH4 {font-style: italic} ( m$ G+ m, d4 q; v4 u! VP {font-style: oblique} 4 X, r3 n. u5 {+ r L) z& X {font: 12pt/14pt} k9 E8 |- h% j, p 5 o% |+ Q% }) z# I4 j+ n- @+ L, b此属性用来指定字体的大小与每行行距的高度。上例中，12pt 指的是字体的大小，14pt 指的是行距的高度。 事实上，{font: … } 可以集结所有跟 font 有关的扩充属性在此标签内，所以您除了在 {font: … } 内指定字体大小与行距高度外，还可以在此标签内加入所有上述介绍过的属性。 8 x* p% Y" y# l7 ]* m1 t 参考范例： ! A4 j% g, R# c% F4 m1 F P {font: italic bold 12pt/14pt} $ l5 V% C0 [/ \6 W" m+ pSTRONG {font: 14pt/18pt bolder italic Times, serif} / a) U: o, K* X4 o CSS 中 Color 的扩充属性 . d, Y' E* x( i, f! @3 `{color: red} ) {& K$ n, G3 o- R 此属性用来指定字体的颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。 如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。 参考范例： . b6 Q- X, d4 R3 nBLOCKQUOTE {color: navy} - S, b$ V% a( B7 X: `+ oLI {color: #eedd44} LI {color: #ed4} P {color: #007f3a} " b, X: E# N2 l- s- R8 n! } & H) k) U1 n; p* A3 |& m{background-color: red} 此属性用来指定整个网页的背景颜色，或某一段落，某一区块的背景颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。 $ p5 K+ i; [4 L 3 D. e- d, ^6 O' R r4 r4 o如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。 参考范例： BODY {background-color: #ed4} ; Y$ z1 [) `7 Z' F0 B5 wBLOCKQUOTE {background-color: navy} H2 {background-color: #007f3a} {background-image: url (/images/xyz.gif)} % v& g/ Q! q) s8 d7 o此属性用来指定网页或某一区块的背景图案。画底线的部分可以使用图档的绝对位置或相对位置来表示之。 ' u( s) F0 A" q% h7 w使用此标签时，最好同时也指定一个类似的颜色做背景颜色。 参考范例： ; U7 F+ f9 q% W4 ^" \1 v BODY { background-image: url (/images/2T_logo.gif); % _8 v) I$ K5 @% n3 S O/ Nbackground-color: #ededff $ D0 J8 F+ x m$ t9 _' L$ j5 @} LI { 6 {% x$ c3 D7 wbackground-image: url (http://www.2T.com/2T_logo.gif); # c7 j. c+ H: M' u6 c7 q) Fbackground-color: #cef } ( E/ D+ G7 z1 p5 C u4 K7 H) m' Q$ _ {background: (…)} & k5 m$ _) l* \ n# s ) l& [' X2 K; a+ M0 G9 W4 {# p此标签可以集结所有跟 background 有关的扩充属性在此一标签内，所以您可以将所有上述介绍过的 background 属性一起加进来。 4 \' ]; X; s6 W. ? t参考范例： 5 O/ \+ X7 t" a) D$ ]! q, _ BODY {background: white url (/images/2T_logo.gif) repeat-y} 2 \% X `' E; e/ _$ QLI {background: #cc88ff url (http://www.2T.com/2T_logo.gif) no-repeat} 4 L/ j1 {4 W- M( W* H8 g; fCSS 中 Text 的扩充属性 5 N, Y3 i7 r4 u8 }. u{text-decoration: none} 此属性用来指定文字是否画有底线或被线条杠掉（如：被线条杠掉此例）。画底线的部分可以用 none, underline, line-through 来替换之。 此属性的内定值为 none。 参考范例： 5 t) D2 J D9 m P { 8 q1 Y; g' P! h! ecolor: navy; text-decoration: none } A:link, A:visited, A:active { - t& [0 H* L2 v* Z4 w$ p! htext-decoration: underline & B6 T( f9 R9 h X6 g$ A" M# {} + h! k) d" o3 {; i3 Y{text-align: left} ! u* u) v: O: I( J 此属性用来指定文字是向左、向中、或向右对齐。画底线的部分可以用 left, right, center, justify 来替换之。 & L0 m# f1 Y5 B) G8 R5 l$ T' W参考范例： P {text-align: left} H1 {text-align: center} 0 s1 y1 r i0 Q' S # h5 X. N+ B, C3 ]+ M8 y{text-indent: 2cm} 6 Z2 U/ [, N2 X2 p此属性用来指定文字向右凹进去多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 参考范例： ) O( q0 K8 d: f" Q8 g" v P {text-indent: 3cm} LI {text-indent: 60px} BLOCKQUOTE {text-indent: 20%} {line-height: 14pt} 9 |6 g/ d$ `5 U % c: b2 G: b" a- E此属性用来指定每行行距的高度。line-height 常与字体大小 font-size 一起并用，写成 12pt/14pt (12pt 指的是字体的大小，14pt 指的是行距的高度)。line-height也可以用 % 表示之。 % 是以母标签来相对比。 参考范例： BODY { font-size: 12pt; . E v8 [/ K1 t) c' I* g% k) Eline-height:14pt / B ]5 R: {' m9 p} H1 { ( g3 X3 s- L% M( N- Yfont-size: 150%; 2 f+ D/ J$ C0 c1 x0 s8 p% tline-height: 200% } H4 {font: 16pt/20pt bold italic} # L2 T, _2 f/ |8 |, K - l) q6 }+ s% JCSS 中 Margin, Padding 的扩充属性 " e; M0 ^. v: @4 u# D{margin: 3cm} 0 Y- B! M! _7 n8 ?# F4 p- y V此属性用来指定网页的上下左右边缘，各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 1 M. h u% M! N+ C) P8 |# g margin 可以用 margin-top, margin-bottom, margin-left, margin-right来替换之。 ' W( D+ Q: N" h6 p ) J- ^5 H# ~; R Z% s4 I( I# \此属性的内定值为 0。 / H; E6 k% d. l0 m# w参考范例： 9 K, A# q* n: ?7 S2 t5 V ) k! q. L6 V& L( S2 }4 x: [BODY { margin-top: 44px; ' i5 g! C( F+ d; g2 g. ^margin-bottom: 2cm; margin-left: 66px; . @' f/ s5 d; k4 Pmargin-right: 1.5in } P {margin: 15pt} - k5 u q; [9 l8 L+ U. B0 @" e ; \' ]/ U7 `% F8 \7 y, B {padding: 14px} $ L2 D4 K0 n; @5 V* u7 A! M# Q 此属性用来指定各段落或各区块间，上下左右边缘各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 / f% o8 B+ c1 t A' h4 epadding 可以用 padding-top, padding-bottom, padding-left, padding-right来替换之。 此属性的内定值为 0。IE3 不支援所有与 padding 相关的标签。 * ?0 d! f1 A* S& d( j& ` # u9 I: V: n }( t L0 H) i i: L( o参考范例： 0 D" n9 c g8 i8 [: J9 j4 U E2 Q8 J5 Z% q9 T) ?BODY {margin: 15pt} - b' C0 h0 X3 u$ f; N' YDL { 4 L2 `3 {9 A8 Z( Hpadding-top: 22px; padding-left: 20%; 5 Z) C' y5 ~$ b8 O; f/ h} 0 }* g+ O7 q" y3 e, z! [ 4 }3 j2 z) x) }3 Y, [4 ` . B% ?7 Z7 y- k- } , ^3 F6 R$ @" `$ G l: RΘ2001-2003 版权所有：『上海博峰网络科技有限公司』 电子邮件：gf1818 + e8 H7 ~9 x Z }/ l ) e0 W3 u. j: q* P. ]

呵呵！！不错！！

还不错啊？
  [+ n0 k, Z  }$ p) s& o, I应该算是很好了。
. D3 B3 Q$ J2 v8 E1 A就是觉得多了一点。