如何将 CSS 加入网页

您可以利用下列 3 种方式，将 CSS 指定的格调加诸于网页上： * ]/ q; [" S! U7 c. E0 Z# F4 m1. 在 HTML 档案里加一个超连结，连到外在的 CSS 档 : _ }0 M C$ i 这个方法最方便管理整个网站的网页风貌。它让网页的文字内容与版面设计分开。您只要在一个 CSS 档内（副档名为 .CSS）定义好网页的外观风格，所有参考连结到此 CSS 档的网页，便会依照指示，反应出定义好的风格。 8 q/ [1 ~: ?! _5 C0 ]9 M: m0 ? 它的写法是： 5 ?/ Z4 L( ~5 K/ W6 KHREF="http://www.xyz.com/xyz.css" & g/ b1 ^8 {8 b, i* E0 |; cTYPE="text/css"> 4 n3 b" [8 l" l1 e 1 v$ E$ Z1 U. ~6 S此种方法 Navigator4 支援得仍十分 Buggy，请小心使用。 2 M2 f2 R+ Y$ h! M " a$ d$ Z9 ^7 p+ C T. t( ^2. 在 HTML 档案的 ....... 标签间，加一段 CSS 的叙述文 1 {& O' P5 R5 z/ o/ O1 ?4 Q7 _这个方法适用于指定某个网页，除了展现外在的 CSS 档定义好的网页风格外，同时还要展现本身 HTML 档内加注的 CSS 。 : r2 ~3 m, G) | ]! ? 如果内在加注的 CSS 叙述与外在连结的 CSS 叙述相冲突的话，网页的展现将以内在加注的 CSS 叙述为主。 h# Q! p7 o/ p它的写法是： ' b* t% R3 z$ n& e" Q ! g. }" U1 Z" Y" f: s# i开始本页内容… ; P7 D' a& [4 ^: z( K# x , f4 W: |. Y- Y; k% f n5 w- O: w 特别值得注意的是，为了防止不支援 CSS 的浏览器误将 标签间的 CSS 风格叙述当成普通字串，而展现于网页上，您最好将 CSS 的叙述文字插入 标签之间。 3. 在 HTML 档的字里行间中，随时有需要，随时加一小段 CSS 的叙述指定 , b( k+ S3 m' Z i! d2 c 这个方法适用于指定网页内的某一小段文字的呈现风格。 1 \# h# ?; }4 ^6 C/ V 导览器除了会展现出外在的 CSS 档与此 HTML 档 内定义的 CSS 风格（如果有的话），同时还会展现字里行间的 CSS 风格。 2 Q. T1 t b2 p; N 1 P8 v. n$ E0 k* U" z如果字里行间的 CSS 叙述与 内在定义的 CSS 或外在连结的 CSS 叙述相冲突的话，导览器的展现将以字里行间的 CSS 叙述为主。 ` R4 D& f6 z$ u 它的写法是： * D% C0 W/ S y: ~5 d ) i* d% @6 y1 |5 m# ?3 e" y8 S7 V ' o: W$ ?9 t3 p% i 5 A) [$ J. p6 }% b

8 p0 p( z0 L/ _6 m; T- }开始本页内容… , V) z4 i3 x( t+ o

& Q! E; J; w4 h! g - U1 q. C1 ]2 F- a) O |上述的 3 种 CSS，可以同时并用，也可以择您所好，单一或成双地使用。如果各 CSS 间的叙述相冲突，则内在定义的 CSS 会盖过外在连结的 CSS ，字里行间的 CSS 会盖过 内在定义的 CSS 。 + @& N0 p2 U% M4 _ 这样一层一层地推展、补充下来，使得「阶层性格调控制」清楚又有效率地帮助网页设计者，一方面中央统筹整个网站的网页风貌，另一方面又可以随著各个网页、各个文字段落的特别需要，而分别调配不同的格调。十分有条不紊，十分方便管理，所以称之为「阶层性」的格调控制。 1 D: F% B7 B0 b+ n % _% a: A$ s' F# `: wCSS 语言的基本语法 " j9 |8 m9 j8 v; \' a # b1 O: L1 X/ V4 M: `! ?( HCSS 的语言与网页排版语言 HTML，在内容上有一点点类似重覆，但是语法却大不相同。它的基本语法是： H1 {font-size: 16pt; $ l6 w3 W9 t, y vfont-weight: bolder; color: red} & ]( R9 J/ `5 K6 v) {$ T 2 Y4 }# a* K; v' x4 E上例中，H1表示您想要界定的标签元件为 H1，font-size、font-weight、color 这些扩充属性则表示您想指定 H1 应该长成什么模样。在上例中，我界定我的 H1 应该展现出字体大小 16 点，特粗黑体，红色的模样。 7 s7 i! F+ |+ H7 C. U' i7 O 简化之 : ^. X, e) [$ m+ y _' i. A+ {$ R因此，顺著这个基本写法，我们可以继续定义其他的标签元件： H1 {font-size: 16pt; - {( T4 g& c ~# L1 G2 B# K; Xfont-weight: bolder; color: red} H2 {font-size: 16pt; font-weight: bolder; color: red} 5 l( m; }/ V6 q7 _2 Q1 H. gH3 {font-size: 16pt; * \) u1 u1 u; T+ kfont-weight: bolder; color: red} ) f1 b7 `, n0 F( B+ @ 上例中，H1、H2、H3 界定的标签元件均长得一模一样，因此我们可以将它们简化写成： H1, H2, H3 {font-size: 16pt; font-weight: bolder; + ?/ q5 }- l' lcolor: red} - j3 i# c2 C2 ^* m; e0 f) @7 H而如果您想要让您的 H1, H2, H3 各自拥有各自不同的风格，那么您必须一笔一笔地条列说明清楚： H1 {font-size: 16pt; font-weight: bolder; ! T# i/ k; K/ _font-family: Times, serif; 6 M& C' \1 Q: g8 `- a Ycolor: red} H2 {font-size: 14pt; font-weight: bold; font-family: Georgia, serif; 9 F4 e2 N, P4 U$ f- @. Pcolor: green} * K5 ?. B' Q) ~$ y! Z2 c) V* VH3 {font-size: 12pt; font-weight: bold; ) w9 S4 r9 |% V) ?2 K' Ifont-family: "New York", serif; color: gray} 1 q: l* G3 }+ U1 q% m: C 另一种简化方法 ) } I. H& `5 t( @ l, \虽然在上例中， H1, H2, H3 各自拥有各自不同的风格，使得您必须一笔一笔说明清楚。但是您会注意到，我们在指定 H1, H2, H3 各自不同的风格时，其实大都是在指定 H1, H2, H3 的字体表现（字体大小、字体粗细、字体的形体）。因此，我们可以将所有以 font字眼开始的叙述，整合在一个 font 大项里： H1 {font: 16pt bolder Times, serif; 0 Z# Z& ?) q G' g" a' }+ ?/ U' C' }color: red} H2 {font: 14pt bold Georgia, serif; color: green} H3 {font: 12pt bold "New York", serif; color: gray} 8 m: T2 @% a3 u; Z特别值得注意的是，在上例中，H3 的字体使用 "New York" 字体， "New York" 是两个字，所以必须将它 "括号" 起来。而 H1, H2, H3 的颜色规定，并不能一道并入 font 大项中，而必须另外标清楚。 , J# @. W6 K) n# y* \ 顺便一提的是，CSS 与 HTML 一样，都有「注解」的符号。HTML 使用 做「注解」；而 CSS 使用 /* 这里是注解 */。 CSS 中 Font 的扩充属性 前言： 1. CSS-Cascading Style Sheet 只能展现于有支援 Style Sheet 的浏览器内，例如：网景的 Navigator4 与微软的 IE3, IE4。版本不够新的浏览器显现不出 Style sheet 规定的风格。 2. 本系列文章只说明介绍 Navigator4 与 IE3、IE4 浏览器 共同支援的 CSS1 扩充属性。至于 W3C 详细规定的完整 CSS1 文件，或者 网景 、 微软各自支援的 CSS 扩充属性，请到其网站的 Style Sheet 部门观看。 9 n3 H" E W' |& h, F2 k + `% d- Z; q- D8 f3. CSS 的写法使用大写或小写均可。 1 g$ m, a" E0 {" Y& |{font-family: Times} 4 B6 l6 a; {+ I+ g此属性用来指定字体的形体。画底线的部分可以用各式各样的字体来替换之。您可以同时指定好多种字体，以防 user 端没有第一种字体时，可以继续依照您的指示，选用第二、第三种字体。 参考范例： P {font-family: Times,"New York"} " K9 p+ X# y- I' bLI {font-family: "中黑体"} BLOCKQUOTE {font-family: monospace} 特别值得注意的是，在上例中，字体 "New York" 、 "中黑体" 因为是两个字(以上)，所以必须将它们 "括号" 起来。此外，第三例中的 monospace 是用来指定写程序码时使用的等距字体。 9 o; [; B! P: @ 0 y: ^' v8 A& C- c$ q{font-weight: bold} 此属性用来指定字体的粗细。画底线的部分可以使用下列 2 组表示法来替换之： * normal, bold, bolder, lighter & |0 b `7 P2 o* 100, 200, 300..........900 4 u& D1 F6 E9 r 此属性的内定值为 normal。 参考范例： # { @4 s# ^% x9 } H1 {font-weight: bolder} 5 _: q4 I9 {0 h1 r) OBLOCKQUOTE {font-weight: 200} 2 [. l. h* k- p4 Y {font-size: medium} 4 ~3 Y6 X$ |2 s/ Z4 O+ g% Q$ V 此属性用来指定字体的大小。画底线的部分可以使用下列 4 组表示法来替换之： / n9 L0 C: V. E * 绝对 size: xx-small, x-small, small,medium, large, x-large, xx-large / t& l# [( h; s9 h * 相对 size: larger, smaller（与母标签相对比） 6 M; q# ?6 I: s" W* r* 字体的点数 (point): 12pt,16pt, 20pt.... * i% J# Y8 R9 q* 百分比: 80%, 120% .... （与母标签相对比） 7 P) h1 P7 {9 R; a此属性的内定值为 medium。 参考范例： & t2 |+ ^7 _# f# \: K, N& n$ Q1 |, d . j6 ~ u) r z; M3 r6 E5 hBODY {font-size: medium} 9 f2 G; }* |! j3 ?H1 {font-size: 18pt} * t5 T/ G9 W- \' n( d" _H2 {font-size: 90%} 4 z2 F" V! B. K1 U" V6 E! m2 } 0 L% m! R9 y0 f: t- o; w* i0 ~3 d2 r{font-style: normal} % P7 B$ {" B3 m0 `6 J此属性用来指定字体的正体或斜体。画底线的部分可以使用 normal, italic, oblique (仅 IE4 支援 oblique） 来替换之。 # S* o& ~! l8 K4 E y: S 此属性的内定值为 normal。 ; ?3 e0 g6 Y( X, j, Z% B6 _参考范例： ( ]' B* L9 L! G; h H4 {font-style: italic} % B. r0 p3 ]! e$ S: m/ g8 H7 cP {font-style: oblique} & ~+ X9 y: ~9 W1 T/ l : U1 Q N5 a+ C% x{font: 12pt/14pt} # h% y' ?& k+ ?2 S+ T, R 此属性用来指定字体的大小与每行行距的高度。上例中，12pt 指的是字体的大小，14pt 指的是行距的高度。 事实上，{font: … } 可以集结所有跟 font 有关的扩充属性在此标签内，所以您除了在 {font: … } 内指定字体大小与行距高度外，还可以在此标签内加入所有上述介绍过的属性。 ) o+ D' m; F1 b3 U ; C' Z) g/ a( d3 F) s! P参考范例： 6 D9 e; M" I5 k& x! @' PP {font: italic bold 12pt/14pt} " B4 R+ j4 l7 MSTRONG {font: 14pt/18pt bolder italic Times, serif} $ O% d6 q6 c* u# p4 W/ c% K 0 q! z0 n; m9 H3 y1 gCSS 中 Color 的扩充属性 {color: red} 9 J% Z$ g8 }' v3 M' W' L 1 R. {0 A) h- f此属性用来指定字体的颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。 如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。 参考范例： 9 I, q2 j* ~$ Q+ j - O7 R( V$ ?7 b! tBLOCKQUOTE {color: navy} ' l7 ]0 a3 E- k' U& D6 SLI {color: #eedd44} $ K2 F+ G5 g* A. B! \: f1 J8 ~2 ~6 cLI {color: #ed4} P {color: #007f3a} + [. k: }5 \: w$ y9 q0 R& j{background-color: red} 6 O' \6 F4 f3 Y- |3 P5 H此属性用来指定整个网页的背景颜色，或某一段落，某一区块的背景颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。 * F$ W* \5 ^. j p3 m2 T 如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。 * Q6 w, s5 }* D: W3 o3 A4 s4 ?参考范例： , N( m0 [2 ~ b/ s, G! g& b2 }BODY {background-color: #ed4} BLOCKQUOTE {background-color: navy} H2 {background-color: #007f3a} {background-image: url (/images/xyz.gif)} $ R6 I4 n U, \此属性用来指定网页或某一区块的背景图案。画底线的部分可以使用图档的绝对位置或相对位置来表示之。 ! v# c. q1 o9 p( E: K" `4 S使用此标签时，最好同时也指定一个类似的颜色做背景颜色。 ; H, d4 k- D) H& j$ n * s# Z2 X2 [/ w( d5 D; D参考范例： % k$ T3 P6 f$ X) x3 l% b/ y$ G! uBODY { 6 A% e& H; U& Y+ j) D$ Mbackground-image: url (/images/2T_logo.gif); background-color: #ededff 0 s# g7 `# B- V/ ]; P2 t7 }} LI { p6 h+ l8 m/ G# \- Ybackground-image: url (http://www.2T.com/2T_logo.gif); 4 h; _2 Y3 a6 K7 abackground-color: #cef 8 U. n3 i |. j& u1 N} 3 ?2 [) k/ y! U' ~9 d* G9 r {background: (…)} ; H4 w5 C0 J; G( F* G 此标签可以集结所有跟 background 有关的扩充属性在此一标签内，所以您可以将所有上述介绍过的 background 属性一起加进来。 参考范例： - }2 e B' R$ h B0 g, BBODY {background: white url (/images/2T_logo.gif) repeat-y} LI {background: #cc88ff url (http://www.2T.com/2T_logo.gif) no-repeat} ( u3 m9 v/ S* @7 Z- F7 y2 l 4 R0 o4 a' Q h% L' a" nCSS 中 Text 的扩充属性 {text-decoration: none} / @8 L: Q) E$ `/ Z 此属性用来指定文字是否画有底线或被线条杠掉（如：被线条杠掉此例）。画底线的部分可以用 none, underline, line-through 来替换之。 4 H% T6 L2 R3 E" c# \* ? 9 O1 W# o/ j8 f此属性的内定值为 none。 参考范例： ! @2 b; r8 h5 f9 I c6 w8 E P { color: navy; 7 s" _8 a1 G* ~) u$ n! Wtext-decoration: none , ]$ ]* A$ c& W. g( i} ; a! @& p4 H5 S# w/ A6 qA:link, A:visited, A:active { 1 D1 c& v3 y. B# P( n* @/ ptext-decoration: underline , H' O/ {7 T/ I2 @5 [$ N$ l} 7 [( ~. z. t- o! S$ x % L. L9 r% B3 B; y{text-align: left} ( R1 o2 y4 {: s" p4 R 此属性用来指定文字是向左、向中、或向右对齐。画底线的部分可以用 left, right, center, justify 来替换之。 ; J7 V8 A/ Z1 d' J3 Q( w & s( _; A! U: c7 k参考范例： ) X& _6 \: L; w" n) X P {text-align: left} & V* z; a$ N% S+ ~, cH1 {text-align: center} {text-indent: 2cm} 2 }2 c' Y8 F: ^7 T1 _- \ 此属性用来指定文字向右凹进去多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 参考范例： ' i& Z7 @' l. O, @* j# r. `" N7 ? }4 Y% t7 s2 \7 f1 d, ?P {text-indent: 3cm} LI {text-indent: 60px} BLOCKQUOTE {text-indent: 20%} 6 F l' t P) D! U - m& Q& t, u0 z{line-height: 14pt} 6 z9 O" _6 f8 m: [4 M此属性用来指定每行行距的高度。line-height 常与字体大小 font-size 一起并用，写成 12pt/14pt (12pt 指的是字体的大小，14pt 指的是行距的高度)。line-height也可以用 % 表示之。 % 是以母标签来相对比。 参考范例： BODY { + u" P8 ~7 u0 Jfont-size: 12pt; line-height:14pt } j& `* X1 z. J7 F* j7 ZH1 { font-size: 150%; line-height: 200% 2 i( e0 H3 J( c} ! \9 p, q( `% R H4 {font: 16pt/20pt bold italic} : B. I) Q# U; z( ^+ \! o% W- Q % c& i/ I% r, I# xCSS 中 Margin, Padding 的扩充属性 {margin: 3cm} 此属性用来指定网页的上下左右边缘，各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 # g3 S! f9 J5 B" v margin 可以用 margin-top, margin-bottom, margin-left, margin-right来替换之。 此属性的内定值为 0。 . ~" l3 a* _- n# h( [" X参考范例： * \# ^3 s' q2 X# g v7 zBODY { margin-top: 44px; margin-bottom: 2cm; margin-left: 66px; margin-right: 1.5in 2 H( l( E: Y4 v( u! U} ! y7 E& |, X1 bP {margin: 15pt} {padding: 14px} , u3 v5 N/ W1 o% [ |+ p2 b 此属性用来指定各段落或各区块间，上下左右边缘各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 * C3 g7 q) Y. |* |+ S padding 可以用 padding-top, padding-bottom, padding-left, padding-right来替换之。 7 D- g; T5 B4 j1 t* P6 f 此属性的内定值为 0。IE3 不支援所有与 padding 相关的标签。 - h9 a$ v. b6 Z2 Y6 @! b6 k+ @参考范例： ) \* I J8 @- P, p0 _ . F7 `! u- J2 H3 \- H7 L, OBODY {margin: 15pt} / K& F+ b6 w- t+ D' z/ MDL { padding-top: 22px; padding-left: 20%; ; m! t4 H4 |/ c) \6 ?3 @} ( R/ N" b; F- l; Q9 d1 }& O' L 6 X1 L" }& q2 t) G# [# L X! { . o! `0 @. p6 F( f, P 4 D/ b5 S" a' ?4 m7 { Θ2001-2003 版权所有：『上海博峰网络科技有限公司』 电子邮件：gf1818 , N- g8 p7 D9 w/ y! m: W

呵呵！！不错！！

还不错啊？
应该算是很好了。
; r) y( H7 z; S# R* G4 l4 g# u就是觉得多了一点。