如何将 CSS 加入网页

您可以利用下列 3 种方式，将 CSS 指定的格调加诸于网页上： & A/ G5 a5 C) \& z! m) e. L* a 1. 在 HTML 档案里加一个超连结，连到外在的 CSS 档 6 X. Q3 [# [7 \6 R' m 这个方法最方便管理整个网站的网页风貌。它让网页的文字内容与版面设计分开。您只要在一个 CSS 档内（副档名为 .CSS）定义好网页的外观风格，所有参考连结到此 CSS 档的网页，便会依照指示，反应出定义好的风格。 7 e A* L- _8 A 它的写法是： 9 Q$ l) x1 u4 P5 Q9 i / Q3 J# ?% w' i7 QHREF="http://www.xyz.com/xyz.css" " l: G9 @9 n% C$ ?& E9 \TYPE="text/css"> 7 S/ u$ p: I1 ]5 R9 L) U ( m4 k: m; S Z- X! }9 r$ X 1 W: |4 \. q. I" f此种方法 Navigator4 支援得仍十分 Buggy，请小心使用。 2. 在 HTML 档案的 ....... 标签间，加一段 CSS 的叙述文 这个方法适用于指定某个网页，除了展现外在的 CSS 档定义好的网页风格外，同时还要展现本身 HTML 档内加注的 CSS 。 " Z1 X- p5 x; a% T* o0 d* u7 z如果内在加注的 CSS 叙述与外在连结的 CSS 叙述相冲突的话，网页的展现将以内在加注的 CSS 叙述为主。 它的写法是： $ I3 h6 U3 @ C, J0 S- G8 q 0 O6 v8 l) e! t/ w0 i% J 开始本页内容… 8 I1 z6 e( ? v8 Q' C ' t& J; W9 X) X" ?: o( m h: \ 4 y/ K; y& j `2 _' x特别值得注意的是，为了防止不支援 CSS 的浏览器误将 标签间的 CSS 风格叙述当成普通字串，而展现于网页上，您最好将 CSS 的叙述文字插入 标签之间。 - S8 J( ~( [4 Q3. 在 HTML 档的字里行间中，随时有需要，随时加一小段 CSS 的叙述指定 这个方法适用于指定网页内的某一小段文字的呈现风格。 导览器除了会展现出外在的 CSS 档与此 HTML 档 内定义的 CSS 风格（如果有的话），同时还会展现字里行间的 CSS 风格。 ) v' O7 b, u; a1 x. X0 U 如果字里行间的 CSS 叙述与 内在定义的 CSS 或外在连结的 CSS 叙述相冲突的话，导览器的展现将以字里行间的 CSS 叙述为主。 + l1 Z% N# \3 E" N 0 l2 l& V6 T) B; Y0 c8 g$ H它的写法是： * R' M0 n# \ K0 d 4 k' N( w( z( n / j7 e" }1 l2 D% r7 K' f # w3 w4 X5 P# l) G! ~' |7 R' O' z7 }

1 a. y1 ?8 m k开始本页内容… ! M6 H5 G7 {) l7 C

1 x; m/ ?- Y* c+ g5 x 0 u/ J- f/ H% y Q+ | 9 H4 p+ S0 X. m% ~; M" }& f上述的 3 种 CSS，可以同时并用，也可以择您所好，单一或成双地使用。如果各 CSS 间的叙述相冲突，则内在定义的 CSS 会盖过外在连结的 CSS ，字里行间的 CSS 会盖过 内在定义的 CSS 。 5 L. }, m7 Z. _* _! Z/ a这样一层一层地推展、补充下来，使得「阶层性格调控制」清楚又有效率地帮助网页设计者，一方面中央统筹整个网站的网页风貌，另一方面又可以随著各个网页、各个文字段落的特别需要，而分别调配不同的格调。十分有条不紊，十分方便管理，所以称之为「阶层性」的格调控制。 CSS 语言的基本语法 ' U$ P0 w0 h* U/ U. ]+ @ . ?2 s3 X* j7 q3 w% ^2 ECSS 的语言与网页排版语言 HTML，在内容上有一点点类似重覆，但是语法却大不相同。它的基本语法是： H1 {font-size: 16pt; font-weight: bolder; , @2 S5 l* u( J. L, ^% Y* Icolor: red} 上例中，H1表示您想要界定的标签元件为 H1，font-size、font-weight、color 这些扩充属性则表示您想指定 H1 应该长成什么模样。在上例中，我界定我的 H1 应该展现出字体大小 16 点，特粗黑体，红色的模样。 简化之 % b; E: h' c& h因此，顺著这个基本写法，我们可以继续定义其他的标签元件： H1 {font-size: 16pt; font-weight: bolder; . F' B$ s# Y, K# Ecolor: red} : e* B6 B ~* ? a9 n- p$ GH2 {font-size: 16pt; + g! W- k f4 sfont-weight: bolder; ' Z- [# q2 X, a1 f% T8 ycolor: red} - J$ {8 A- S6 u9 NH3 {font-size: 16pt; font-weight: bolder; color: red} , }! ~" i" z; u% r; G" i" p上例中，H1、H2、H3 界定的标签元件均长得一模一样，因此我们可以将它们简化写成： H1, H2, H3 {font-size: 16pt; " m0 m: {$ N- }3 `; Z4 efont-weight: bolder; 3 X- ?1 b& n, fcolor: red} 而如果您想要让您的 H1, H2, H3 各自拥有各自不同的风格，那么您必须一笔一笔地条列说明清楚： H1 {font-size: 16pt; ! [1 ~8 R. M( g9 U) D9 c+ M, Sfont-weight: bolder; font-family: Times, serif; 0 Q" w2 y N$ a- O0 |color: red} H2 {font-size: 14pt; + U/ v8 `9 @' K$ @7 }7 sfont-weight: bold; font-family: Georgia, serif; ' N, g2 R, f0 C/ u0 z s# Z2 r \4 bcolor: green} 0 L0 ]! T+ e5 a4 t; U& _H3 {font-size: 12pt; : `) |- N7 g' j6 Z, [6 ifont-weight: bold; font-family: "New York", serif; ! O2 P6 }! i S8 d! A2 j4 B& _color: gray} + T' b2 Z1 s4 \' g5 ]6 x $ Q. I1 G Q9 D) Y另一种简化方法 . C; B# g1 l* D8 I' r2 A虽然在上例中， H1, H2, H3 各自拥有各自不同的风格，使得您必须一笔一笔说明清楚。但是您会注意到，我们在指定 H1, H2, H3 各自不同的风格时，其实大都是在指定 H1, H2, H3 的字体表现（字体大小、字体粗细、字体的形体）。因此，我们可以将所有以 font字眼开始的叙述，整合在一个 font 大项里： H1 {font: 16pt bolder Times, serif; + F0 o6 h q0 `color: red} 2 {4 \4 o$ l1 r7 M$ fH2 {font: 14pt bold Georgia, serif; 8 H/ e( g4 t7 ^) z9 rcolor: green} 2 M/ f5 a2 N! w; a7 Y8 yH3 {font: 12pt bold "New York", serif; & L- ]1 L$ W0 J0 y1 a2 Jcolor: gray} / V; ^! b* h# U, `* u 特别值得注意的是，在上例中，H3 的字体使用 "New York" 字体， "New York" 是两个字，所以必须将它 "括号" 起来。而 H1, H2, H3 的颜色规定，并不能一道并入 font 大项中，而必须另外标清楚。 & ~9 \/ S) ~5 p( W顺便一提的是，CSS 与 HTML 一样，都有「注解」的符号。HTML 使用 做「注解」；而 CSS 使用 /* 这里是注解 */。 # [$ n$ t- \% D* y+ Z ! J' Y6 u3 G$ a; H5 jCSS 中 Font 的扩充属性 1 y3 d& x$ D, t. f( f前言： - ?+ \" k; q* d' a+ _1. CSS-Cascading Style Sheet 只能展现于有支援 Style Sheet 的浏览器内，例如：网景的 Navigator4 与微软的 IE3, IE4。版本不够新的浏览器显现不出 Style sheet 规定的风格。 2. 本系列文章只说明介绍 Navigator4 与 IE3、IE4 浏览器 共同支援的 CSS1 扩充属性。至于 W3C 详细规定的完整 CSS1 文件，或者 网景 、 微软各自支援的 CSS 扩充属性，请到其网站的 Style Sheet 部门观看。 3. CSS 的写法使用大写或小写均可。 : G# p4 P/ j5 D- V O4 N0 K! y . A1 R% |& ~7 s% E( w{font-family: Times} 此属性用来指定字体的形体。画底线的部分可以用各式各样的字体来替换之。您可以同时指定好多种字体，以防 user 端没有第一种字体时，可以继续依照您的指示，选用第二、第三种字体。 参考范例： 8 }+ z( w& U8 T1 A( T3 | P {font-family: Times,"New York"} LI {font-family: "中黑体"} 4 E) J# t& B3 k! }+ {5 sBLOCKQUOTE {font-family: monospace} $ K5 W. {' ~! F7 G2 m/ O特别值得注意的是，在上例中，字体 "New York" 、 "中黑体" 因为是两个字(以上)，所以必须将它们 "括号" 起来。此外，第三例中的 monospace 是用来指定写程序码时使用的等距字体。 {font-weight: bold} * J3 J+ J; I0 }$ G7 j! h此属性用来指定字体的粗细。画底线的部分可以使用下列 2 组表示法来替换之： 4 ^2 ^. o& M: r: v 0 Q/ `2 y4 z3 K" `7 P3 }* normal, bold, bolder, lighter * 100, 200, 300..........900 1 W7 \- ~: J% \/ O0 c4 D e1 Z此属性的内定值为 normal。 # [& ^ l. p$ e9 v3 z. v. M+ R参考范例： & i* V% h8 Z+ M% y O 7 ~ F C9 M6 | v( s6 D! `; N. KH1 {font-weight: bolder} BLOCKQUOTE {font-weight: 200} # [& _( m" x8 a5 D{font-size: medium} ' j# M+ V5 |: y# u' E此属性用来指定字体的大小。画底线的部分可以使用下列 4 组表示法来替换之： * 绝对 size: xx-small, x-small, small,medium, large, x-large, xx-large 5 ]$ r/ I3 v/ @5 O; l * 相对 size: larger, smaller（与母标签相对比） - p: r6 \. w1 v) w+ g& ~ * 字体的点数 (point): 12pt,16pt, 20pt.... 5 Y( W3 R2 V |+ Z+ } , P) R. ^5 f! o$ E* 百分比: 80%, 120% .... （与母标签相对比） ' I( P9 @( J' M! w* E : @3 X" k' L2 R6 n3 l此属性的内定值为 medium。 , ~/ G) |; A" N/ T2 b; ? 参考范例： ; a% P$ q' Z; l w0 A BODY {font-size: medium} 1 h+ q+ q" h5 q' w. w ~H1 {font-size: 18pt} ' k5 q \( k, j y2 e; xH2 {font-size: 90%} {font-style: normal} 8 H: I3 w- \6 z 此属性用来指定字体的正体或斜体。画底线的部分可以使用 normal, italic, oblique (仅 IE4 支援 oblique） 来替换之。 3 e4 d) s7 `# r2 T2 t5 R% ` I p $ U$ F4 b. |* n8 }此属性的内定值为 normal。 # R: S# N& ~ q4 z参考范例： + m9 `* v9 j: |2 u6 AH4 {font-style: italic} ( s+ g" `( d; W+ p) f& x$ {P {font-style: oblique} % }/ I6 Y9 Y8 O" _+ M 6 c, L( t6 U2 l! L# c+ D+ M{font: 12pt/14pt} + |3 U; {' |, {1 p8 o此属性用来指定字体的大小与每行行距的高度。上例中，12pt 指的是字体的大小，14pt 指的是行距的高度。 0 G4 d" Z% Q3 F A1 h* p ) a4 I9 K c7 J$ A5 y事实上，{font: … } 可以集结所有跟 font 有关的扩充属性在此标签内，所以您除了在 {font: … } 内指定字体大小与行距高度外，还可以在此标签内加入所有上述介绍过的属性。 参考范例： P {font: italic bold 12pt/14pt} 5 T4 p% y9 f) ISTRONG {font: 14pt/18pt bolder italic Times, serif} 5 d" d& J+ ]2 q4 N CSS 中 Color 的扩充属性 {color: red} 此属性用来指定字体的颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。 4 g, o. N, h7 ]' @: t% I / [" B7 r2 L4 O* n, D6 m- Z; N+ A如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。 ( U7 f* C* d! A" n8 [$ O- i! m + y5 g7 x5 x' c E/ k参考范例： 2 \0 r0 M$ u% ^8 bBLOCKQUOTE {color: navy} 5 P' X" }, ~- z! I8 q) cLI {color: #eedd44} + [/ h$ P: _, G( J! |LI {color: #ed4} P {color: #007f3a} ; C6 d( I9 x) ?1 \. h; u {background-color: red} & W: M n% Z" X7 y) L此属性用来指定整个网页的背景颜色，或某一段落，某一区块的背景颜色。画底线的部分可以用各式各样的颜色来替换之。您可以使用16 进位颜色码表示（如：#00ff77）或利用浏览器既定的英文单字表示颜色（如：gray, blue..... 详细请见： Table 的扩充属性 ）。 如果您指定的颜色如同 #00ff77 一般，是两位数字、两位数字重覆组成的话 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7简化表示之。 参考范例： 5 x+ p' O! L) g4 { BODY {background-color: #ed4} ; C) g# m- R5 M) `" }! @# _. rBLOCKQUOTE {background-color: navy} H2 {background-color: #007f3a} + X8 e9 D, b C- d5 l6 U! }$ U& m : D2 ^; f2 `6 d% l* M{background-image: url (/images/xyz.gif)} 7 K9 _, W4 P' B. ~2 X, k此属性用来指定网页或某一区块的背景图案。画底线的部分可以使用图档的绝对位置或相对位置来表示之。 _' M& m2 y, [8 X使用此标签时，最好同时也指定一个类似的颜色做背景颜色。 . D' g: S- t2 Q8 a# `; p3 w 参考范例： " }9 i! C# R" [ z/ h+ M; \6 \$ d ) E5 v$ Y! J2 n. I" TBODY { background-image: url (/images/2T_logo.gif); background-color: #ededff } LI { ( k# O' g0 k9 V6 B* dbackground-image: url (http://www.2T.com/2T_logo.gif); background-color: #cef 6 a3 P) I( R9 p} / ]" |7 v' u3 C& {! f 4 C& s# T. R N" P{background: (…)} & U d+ C0 n7 j1 T$ }; D 3 M- E% q, T8 r' f此标签可以集结所有跟 background 有关的扩充属性在此一标签内，所以您可以将所有上述介绍过的 background 属性一起加进来。 6 q- |5 p# ^3 {1 R$ N9 o! Z- \参考范例： * P3 V7 X5 A% M7 A - o+ j3 ]* W3 {5 F2 UBODY {background: white url (/images/2T_logo.gif) repeat-y} LI {background: #cc88ff url (http://www.2T.com/2T_logo.gif) no-repeat} 2 j3 Y1 d& S. [# P, G2 {& k1 V " n5 ?+ \' E5 i9 y9 p5 b CSS 中 Text 的扩充属性 8 B5 e% d" t Z7 Q{text-decoration: none} 3 B/ _; L/ @- ^, E2 e* {6 M7 U 此属性用来指定文字是否画有底线或被线条杠掉（如：被线条杠掉此例）。画底线的部分可以用 none, underline, line-through 来替换之。 + k, w# ?2 `# X此属性的内定值为 none。 " ]) Y4 p0 z" C; Q! A% V ; M W# K5 s' q! O2 A1 f& i参考范例： 1 p, Y/ H( Y4 WP { color: navy; 1 q, |5 X7 S5 Y1 Q' T* G0 e3 ptext-decoration: none } # K$ Z4 e7 X: YA:link, A:visited, A:active { " P1 L! ^6 S5 x, a# mtext-decoration: underline $ M9 @6 Q, G8 E} ( m% t4 ^. O0 m/ s. Z * f, z8 C4 f$ y, Y* t3 i' C+ Z7 ^{text-align: left} 此属性用来指定文字是向左、向中、或向右对齐。画底线的部分可以用 left, right, center, justify 来替换之。 参考范例： 9 G, t0 @8 q( o# o: k; t& f! MP {text-align: left} H1 {text-align: center} 8 A" t9 l9 o2 }/ T ~; g3 [ {text-indent: 2cm} 此属性用来指定文字向右凹进去多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 / {; B, B0 l/ `$ u参考范例： 4 \: H2 w& ]. X2 G/ F$ e" l. b/ } P {text-indent: 3cm} . F( h, g, N/ HLI {text-indent: 60px} l. p; C! V, G# A; u0 b- _BLOCKQUOTE {text-indent: 20%} # T0 n9 X* P3 K5 f/ c" h {line-height: 14pt} / ? T# H0 ^) l3 M. Z, R4 x 8 x0 `+ s# n1 M& k8 r2 c) a此属性用来指定每行行距的高度。line-height 常与字体大小 font-size 一起并用，写成 12pt/14pt (12pt 指的是字体的大小，14pt 指的是行距的高度)。line-height也可以用 % 表示之。 % 是以母标签来相对比。 参考范例： - c! w2 ?+ o7 Q# o + X' u# C6 O& C9 T+ mBODY { font-size: 12pt; line-height:14pt } 7 J( ?# i9 k5 \. { ?9 iH1 { font-size: 150%; & t, ~; z$ P* K# X5 b4 d6 tline-height: 200% } 0 w2 r/ A8 P" Y5 U5 `: R 2 F. I5 h$ t0 zH4 {font: 16pt/20pt bold italic} 5 y" V2 T( e( F$ C8 Z9 r, L# Q 4 X+ F' e4 W2 W$ y : S1 J* G6 P5 z# i& |CSS 中 Margin, Padding 的扩充属性 9 s3 D n4 q% {8 f" ?{margin: 3cm} 7 G2 u: `5 d, T! Y $ K, `, s# g8 S此属性用来指定网页的上下左右边缘，各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 & u7 @; \7 q' }0 ` a' A6 t" i7 k9 x margin 可以用 margin-top, margin-bottom, margin-left, margin-right来替换之。 $ {7 w$ s9 }6 b( {; F) a' R 此属性的内定值为 0。 1 A6 b8 L- \, X) Q ?3 j参考范例： / p0 D. _8 E P) r- o R: A& N5 `BODY { margin-top: 44px; 9 F, `8 x) |" J7 G+ {1 ymargin-bottom: 2cm; 3 D/ q8 m1 L$ z8 B# A4 _% W% Wmargin-left: 66px; margin-right: 1.5in } # D+ h N" l1 x# i$ YP {margin: 15pt} % ?6 I- {/ ~1 x7 U. k" V % Z+ s0 l$ R+ ~! n8 K2 M! q{padding: 14px} + F# ]. H" H' I# X' d" ^ 此属性用来指定各段落或各区块间，上下左右边缘各需留白多少公分、厘米、英寸、点数(point)、图素(pixel)、或多少 % 。测量单位可以用 cm, mm, in, pt, px, %来表示之。 % 是以母标签来相对比。 ' j. k# Q; ~" {" X: \2 u padding 可以用 padding-top, padding-bottom, padding-left, padding-right来替换之。 8 S/ \: p0 Q1 c3 a3 ~ 此属性的内定值为 0。IE3 不支援所有与 padding 相关的标签。 $ ?9 t( P" }2 S1 S 参考范例： BODY {margin: 15pt} ; O& R! i3 N* a* K/ ~! MDL { ( l5 G' e7 Y V7 d, a6 lpadding-top: 22px; . a! U" `9 }* \; Kpadding-left: 20%; - [9 ]/ j5 p- y# a} + O9 f1 ]: M, p: Y* d/ E 7 k6 l$ n. s( s2 V1 }& }* o! d" J ) M+ Q' @' f; Q0 s U * a8 ~8 x" q; F1 C" o5 V) d7 Z Θ2001-2003 版权所有：『上海博峰网络科技有限公司』 电子邮件：gf1818 ( @% p3 ^, d0 t, o

还不错啊？
& U8 l1 a+ y6 q9 t7 w, [( C应该算是很好了。
就是觉得多了一点。

呵呵！！不错！！