如何将 CSS 加入网页

您可以利用下列 3 种方式，将 CSS 指定的格调加诸于网页上： 7 \3 ]* q2 X/ A$ D1. 在 HTML 档案里加一个超连结，连到外在的 CSS 档 8 e# D$ u |/ a5 }这个方法最方便管理整个网站的网页风貌。它让网页的文字内容与版面设计分开。您只要在一个 CSS 档内（副档名为 .CSS）定义好网页的外观风格，所有参考连结到此 CSS 档的网页，便会依照指示，反应出定义好的风格。 1 p" P9 P; t, \2 E" [6 c G( ~* Y 0 ^9 w5 y; f) R: c; h它的写法是： ) k- U2 c7 d6 Y# j' a 4 L# _) f, V4 y5 w- l0 l/ f : M! r% y7 L1 ?1 c! |( q; B1 F2 z2 gHREF="http://www.xyz.com/xyz.css" 8 D+ W L4 M; @3 Q1 w6 ITYPE="text/css"> . @8 P3 K/ V; l& B4 f- u- } 此种方法 Navigator4 支援得仍十分 Buggy，请小心使用。 2. 在 HTML 档案的 ....... 标签间，加一段 CSS 的叙述文 2 C k- J* g& Q ? 这个方法适用于指定某个网页，除了展现外在的 CSS 档定义好的网页风格外，同时还要展现本身 HTML 档内加注的 CSS 。 6 C8 h, S7 O, X 3 d& V' \" h8 q# T! {5 T& P如果内在加注的 CSS 叙述与外在连结的 CSS 叙述相冲突的话，网页的展现将以内在加注的 CSS 叙述为主。 % W. |. ?1 ~) Z* Z 它的写法是： 9 {; U& I1 z$ h5 A* \( l: U8 ^/ e 开始本页内容… 特别值得注意的是，为了防止不支援 CSS 的浏览器误将 标签间的 CSS 风格叙述当成普通字串，而展现于网页上，您最好将 CSS 的叙述文字插入 标签之间。 8 d/ M& j/ F' \7 m. [( J5 @ % y% c5 i# @, j3 g) S$ y# A3. 在 HTML 档的字里行间中，随时有需要，随时加一小段 CSS 的叙述指定 5 n' }5 Z$ l3 _5 V ?$ o. d 这个方法适用于指定网页内的某一小段文字的呈现风格。 0 V, s; D v+ L! J5 o2 s/ c0 \/ \ 导览器除了会展现出外在的 CSS 档与此 HTML 档 内定义的 CSS 风格（如果有的话），同时还会展现字里行间的 CSS 风格。 7 ]. v' O0 v' g4 L, b 5 \: Q( W/ x `; j9 M' N如果字里行间的 CSS 叙述与 内在定义的 CSS 或外在连结的 CSS 叙述相冲突的话，导览器的展现将以字里行间的 CSS 叙述为主。 + B0 {6 {. U4 P7 A- w/ U 它的写法是： / ^9 O6 a$ j" r # w* V. e, n7 Q7 P1 p/ r- _: ? 0 ]* K# o. ^1 F( {) } 9 ^' s4 U/ Y; p 7 E5 F6 m# z2 r! l( ]+ q

开始本页内容… ' ^. `1 r# X$ ?, o

/ e* H$ O7 B2 U% ^( ~9 k7 E 7 @: \2 |: a8 l 7 Q3 M |4 S6 e" F" h/ B上述的 3 种 CSS，可以同时并用，也可以择您所好，单一或成双地使用。如果各 CSS 间的叙述相冲突，则内在定义的 CSS 会盖过外在连结的 CSS ，字里行间的 CSS 会盖过 内在定义的 CSS 。 这样一层一层地推展、补充下来，使得「阶层性格调控制」清楚又有效率地帮助网页设计者，一方面中央统筹整个网站的网页风貌，另一方面又可以随著各个网页、各个文字段落的特别需要，而分别调配不同的格调。十分有条不紊，十分方便管理，所以称之为「阶层性」的格调控制。 CSS 语言的基本语法 " u* {$ H1 T, B% Y' e( b" [" ~ 0 d! i# b5 ~+ M( M0 I# ~, MCSS 的语言与网页排版语言 HTML，在内容上有一点点类似重覆，但是语法却大不相同。它的基本语法是： H1 {font-size: 16pt; font-weight: bolder; color: red} 上例中，H1表示您想要界定的标签元件为 H1，font-size、font-weight、color 这些扩充属性则表示您想指定 H1 应该长成什么模样。在上例中，我界定我的 H1 应该展现出字体大小 16 点，特粗黑体，红色的模样。 # \1 D1 [1 E3 z" F " G9 m" p* H3 h1 S简化之 * F+ o" ?3 |' H0 j因此，顺著这个基本写法，我们可以继续定义其他的标签元件： H1 {font-size: 16pt; font-weight: bolder; & q% f! _1 z4 F% N pcolor: red} H2 {font-size: 16pt; # p9 R; v$ w( p3 ]: Afont-weight: bolder; 3 I9 d: N( u9 y* fcolor: red} H3 {font-size: 16pt; font-weight: bolder; color: red} 6 J1 r2 w# |! V/ h上例中，H1、H2、H3 界定的标签元件均长得一模一样，因此我们可以将它们简化写成： H1, H2, H3 {font-size: 16pt; font-weight: bolder; ; l3 @/ n3 K8 L1 Y4 A; ccolor: red} $ a2 Z1 T- i9 x" h1 |# p- e1 F6 { 而如果您想要让您的 H1, H2, H3 各自拥有各自不同的风格，那么您必须一笔一笔地条列说明清楚： H1 {font-size: 16pt; font-weight: bolder; font-family: Times, serif; color: red} H2 {font-size: 14pt; font-weight: bold; 8 ~' K9 Y7 I- H8 qfont-family: Georgia, serif; : W n9 m3 m6 u3 W" Fcolor: green} H3 {font-size: 12pt; 9 D0 ]2 w$ q% P4 W4 cfont-weight: bold; - p$ O2 {% [" j/ Q* Hfont-family: "New York", serif; 5 x1 Y$ ~! ]1 a9 P1 rcolor: gray} ' I. W& ?/ Z4 Q2 W: [1 G 另一种简化方法 % I) v2 E) n. n0 ` R+ `# t虽然在上例中， H1, H2, H3 各自拥有各自不同的风格，使得您必须一笔一笔说明清楚。但是您会注意到，我们在指定 H1, H2, H3 各自不同的风格时，其实大都是在指定 H1, H2, H3 的字体表现（字体大小、字体粗细、字体的形体）。因此，我们可以将所有以 font字眼开始的叙述，整合在一个 font 大项里： H1 {font: 16pt bolder Times, serif; * w! X$ }" O) L6 wcolor: red} , L9 d* j& A. V$ HH2 {font: 14pt bold Georgia, serif; ( J3 I R; g1 r1 Qcolor: green} H3 {font: 12pt bold "New York", serif; color: gray} # L% W! c Y- F/ D. y5 J% T' c z特别值得注意的是，在上例中，H3 的字体使用 "New York" 字体， "New York" 是两个字，所以必须将它 "括号" 起来。而 H1, H2, H3 的颜色规定，并不能一道并入 font 大项中，而必须另外标清楚。 顺便一提的是，CSS 与 HTML 一样，都有「注解」的符号。HTML 使用 做「注解」；而 CSS 使用 /* 这里是注解 */。 CSS 中 Font 的扩充属性 前言： 1. CSS-Cascading Style Sheet 只能展现于有支援 Style Sheet 的浏览器内，例如：网景的 Navigator4 与微软的 IE3, IE4。版本不够新的浏览器显现不出 Style sheet 规定的风格。 4 g; m L( m a8 H! [+ R$ U" L8 Y2. 本系列文章只说明介绍 Navigator4 与 IE3、IE4 浏览器 共同支援的 CSS1 扩充属性。至于 W3C 详细规定的完整 CSS1 文件，或者 网景 、 微软各自支援的 CSS 扩充属性，请到其网站的 Style Sheet 部门观看。 3. CSS 的写法使用大写或小写均可。 {font-family: Times} + t* D" o! c0 k+ V . x* n' ]7 \( i/ z' M- a( T: y- E; J此属性用来指定字体的形体。画底线的部分可以用各式各样的字体来替换之。您可以同时指定好多种字体，以防 user 端没有第一种字体时，可以继续依照您的指示，选用第二、第三种字体。 8 v9 m n$ L, y) v参考范例： P {font-family: Times,"New York"} LI {font-family: "中黑体"} BLOCKQUOTE {font-family: monospace} 5 n! j' ]* f. I. P3 |: W 特别值得注意的是，在上例中，字体 "New York" 、 "中黑体" 因为是两个字(以上)，所以必须将它们 "括号" 起来。此外，第三例中的 monospace 是用来指定写程序码时使用的等距字体。 . I& {: s* H: a% W; o' ? L, O5 B4 D P{font-weight: bold} - ^, h. s5 @, G! x9 X+ k \ 此属性用来指定字体的粗细。画底线的部分可以使用下列 2 组表示法来替换之： # y3 o! c* B8 k* normal, bold, bolder, lighter + s9 W+ C6 Z2 T0 a# H) E2 ~+ b* 100, 200, 300..........900 # O+ P3 G% S& p, i* e d9 b 2 n* `) U1 b/ a此属性的内定值为 normal。 " {% T- Z! F! b6 [8 p/ D5 ~ ( H( J! a- Q7 J% g6 A" I参考范例： H1 {font-weight: bolder} % {. P. o$ u5 p& _. ^; l- I# {BLOCKQUOTE {font-weight: 200} : @! | ]9 ~/ B Z2 }! b . I7 A# `8 k' a( J# B* `{font-size: medium} 0 x/ M1 k8 S, j' y8 H5 M0 }, \此属性用来指定字体的大小。画底线的部分可以使用下列 4 组表示法来替换之： 3 P) _8 ^( O/ n% E & K- o8 o$ {; s2 w: J* 绝对 size: xx-small, x-small, small,medium, large, x-large, xx-large * 相对 size: larger, smaller（与母标签相对比） : v& F; T' j4 w- ]3 i% D + m* S W; A: B* Z. W& S2 V* c* 字体的点数 (point): 12pt,16pt, 20pt.... . M4 E& b5 F5 A h0 w: o$ H8 I( X * 百分比: 80%, 120% .... （与母标签相对比） % r+ I+ n8 L" Z- P; R% } 此属性的内定值为 medium。 8 H( v0 r& K- |! H8 Q8 M- A: H 参考范例： BODY {font-size: medium} 9 b% z: H! d/ j+ f3 _: f: aH1 {font-size: 18pt} H2 {font-size: 90%} 6 C- B; t9 C6 _5 K$ N. o1 N ( `) N/ m7 v! `% r/ |$ Y( X{font-style: normal} ! c- X3 p f; L+ J# W' I0 M; H 3 t; v- e4 B5 l/ B此属性用来指定字体的正体或斜体。画底线的部分可以使用 normal, italic, oblique (仅 IE4 支援 oblique） 来替换之。 7 O% i" d0 q) g: c0 I; t 此属性的内定值为 normal。 ! z5 V1 M" f' }: C! n 参考范例： H4 {font-style: italic} ! F# z! H4 F D+ kP {font-style: oblique} 0 F: p4 l8 C2 h1 w" N 1 {8 g& \# q' k# u{font: 12pt/14pt} ' v$ p" t: ^0 D: J & A- u, ?# Y( O8 V此属性用来指定字体的大小与每行行距的高度。上例中，12pt 指的是字体的大小，14pt 指的是行距的高度。 事实上，{font: … } 可以集结所有跟 font 有关的扩充属性在此标签内，所以您除了在 {font: … } 内指定字体大小与行距高度外，还可以在此标签内加入所有上述介绍过的属性。 & l4 N) R/ k$ L . z6 ^, O% Z. d' a# e( U参考范例： 4 ]; p; ^0 p8 d4 |0 B3 _& ^ ; w, I B( ]! V3 s8 d5 U- dP {font: italic bold 12pt/14pt} ' J/ g- B% S2 [+ U+ E. ^4 HSTRONG {font: 14pt/18pt bolder italic Times, serif} 9 w- j; V0 D+ C) N% S - P1 |/ Y2 {( Z* HCSS 中 Color 的扩充属性 {color: red} e, J) D ^1 X0 o) u, i2 R" N此属性用来指定字体的颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。 如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。 参考范例： BLOCKQUOTE {color: navy} / ~1 x8 j! X) I; a- x3 y& SLI {color: #eedd44} LI {color: #ed4} P {color: #007f3a} {background-color: red} + s# W( D7 ]- c% C0 I- }5 y0 {此属性用来指定整个网页的背景颜色，或某一段落，某一区块的背景颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。 如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。 ' R6 l2 p6 \& b/ |# Z 参考范例： + G& a+ _/ G+ w 6 R: _ S( V# z" R7 qBODY {background-color: #ed4} BLOCKQUOTE {background-color: navy} H2 {background-color: #007f3a} % j5 B3 q4 B4 p7 ^' M7 s* b K+ ^ x3 h/ I{background-image: url (/images/xyz.gif)} % o+ F5 W9 w& y4 }3 l: q! W f 此属性用来指定网页或某一区块的背景图案。画底线的部分可以使用图档的绝对位置或相对位置来表示之。 使用此标签时，最好同时也指定一个类似的颜色做背景颜色。 6 A8 M8 C6 I. Z 9 m5 a( M& w' r6 y* H参考范例： ' K0 A$ R2 u1 W: s' o; a3 e# l0 i& T ) b# Q" V* B+ r3 ?. }( ?BODY { background-image: url (/images/2T_logo.gif); background-color: #ededff } LI { 6 Q4 B8 Z& L9 `3 w: X& ibackground-image: url (http://www.2T.com/2T_logo.gif); background-color: #cef } 7 X, Q( S; q& t3 _5 z9 Y( g2 F ' ?% B9 W; R) `- w N6 R{background: (…)} " \' N7 c- U. |3 N此标签可以集结所有跟 background 有关的扩充属性在此一标签内，所以您可以将所有上述介绍过的 background 属性一起加进来。 参考范例： $ B' I$ d. C& ~0 zBODY {background: white url (/images/2T_logo.gif) repeat-y} LI {background: #cc88ff url (http://www.2T.com/2T_logo.gif) no-repeat} 1 T$ Y g) Y/ {7 {) K' j$ | 7 ]) i* g) d- L% |+ U* W9 j* f CSS 中 Text 的扩充属性 {text-decoration: none} 6 x; {6 D9 D* s# x2 r 7 H. e+ n: J7 ?此属性用来指定文字是否画有底线或被线条杠掉（如：被线条杠掉此例）。画底线的部分可以用 none, underline, line-through 来替换之。 此属性的内定值为 none。 4 U) U* H: A& e参考范例： : {0 o0 m; Z, x2 @# G 5 Z' J3 e8 {/ R+ W- v2 dP { * \1 M! q+ e* `3 P I. F4 @color: navy; . w! j& o) f$ x$ R$ [text-decoration: none 2 F* S2 F- R2 }- V; p$ V} A:link, A:visited, A:active { text-decoration: underline 7 U, N$ E Q p' Z( t8 b1 A3 @0 L5 C} % d; C9 b- a% T# b B 8 K: y" g, V& l# \{text-align: left} 2 M1 a" I6 d* e 此属性用来指定文字是向左、向中、或向右对齐。画底线的部分可以用 left, right, center, justify 来替换之。 . C2 H4 m$ u$ Z 参考范例： % u* X w5 q/ U6 h2 LP {text-align: left} H1 {text-align: center} {text-indent: 2cm} . n1 R& _/ X5 c& { 此属性用来指定文字向右凹进去多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 " U% ]* b {6 f' O; e参考范例： : o7 ]2 |, V; s1 X l) eP {text-indent: 3cm} LI {text-indent: 60px} ) ^& |1 _3 Y. _. y: E9 l2 L( ZBLOCKQUOTE {text-indent: 20%} {line-height: 14pt} 2 A1 s g7 M, C' X0 L此属性用来指定每行行距的高度。line-height 常与字体大小 font-size 一起并用，写成 12pt/14pt (12pt 指的是字体的大小，14pt 指的是行距的高度)。line-height也可以用 % 表示之。 % 是以母标签来相对比。 7 l3 }- L0 M3 Q9 y9 M 参考范例： k5 I) M! b3 {3 g7 d2 Z 3 P" K" R+ P d+ V0 [! mBODY { font-size: 12pt; 8 \4 P0 s! Y7 z& Tline-height:14pt } H1 { font-size: 150%; ; W; I& y& V7 z: ^! U% y! fline-height: 200% 2 \3 e; n1 R+ S. P9 k) d/ y} 5 I7 w! r$ n2 q" ~% l9 R # u' V/ @! |( `" @# P$ `) Q- TH4 {font: 16pt/20pt bold italic} 3 }( J8 X1 n3 {* e6 ~+ H7 `+ ] , W9 o9 Y; h: F7 w/ e p* a d$ |CSS 中 Margin, Padding 的扩充属性 {margin: 3cm} 6 V- h' P$ O3 ]1 n, S0 M: K 此属性用来指定网页的上下左右边缘，各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 7 ?( O0 V- C$ i margin 可以用 margin-top, margin-bottom, margin-left, margin-right来替换之。 8 X8 E) H3 ^0 z* N 此属性的内定值为 0。 " X& j2 B9 B* `8 A, X% e, b5 R - A2 F) h1 K* x R @; e参考范例： % X9 v3 O- s% T% @& Q BODY { 4 W1 Q9 f8 n$ l2 m/ {margin-top: 44px; % g4 Z- H4 F1 t) q0 Omargin-bottom: 2cm; margin-left: 66px; margin-right: 1.5in } P {margin: 15pt} 1 p* e: W* I% @9 j: {3 a {padding: 14px} 此属性用来指定各段落或各区块间，上下左右边缘各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 # C; q# j$ d' W# T; Epadding 可以用 padding-top, padding-bottom, padding-left, padding-right来替换之。 0 b- Z. K; ]4 f% B$ o$ B / b! P, _" q0 t2 Z9 v( L此属性的内定值为 0。IE3 不支援所有与 padding 相关的标签。 参考范例： 5 }2 j: T* v2 c7 d7 r2 mBODY {margin: 15pt} DL { 0 m5 v5 L+ d* m1 A, }# j# ]4 h5 qpadding-top: 22px; ( x0 v! a) a7 M: D3 {padding-left: 20%; } + ~4 P/ _! Q$ C! f/ w9 ?8 A; e1 P : g6 @0 M$ x9 j, }. o4 T* j 2 y% {8 X" J1 D 3 [7 o ~5 z& s% v9 T; uΘ2001-2003 版权所有：『上海博峰网络科技有限公司』 电子邮件：gf1818 ' B) i; f4 C: v7 ?

呵呵！！不错！！

还不错啊？
应该算是很好了。
就是觉得多了一点。