过期域名预定抢注

 找回密碼
 免费注册

CSS實例教程[轉]

[複製鏈接]
發表於 2006-8-18 03:24:55 | 顯示全部樓層 |閱讀模式
從這一節開始我們將要討論 CSS (Cascading Style Sheet). 中文大概叫樣式表吧. 在我們這個教程中還是把它叫做 CSS 方便點兒.
5 D: d) s: @* l+ t/ r- p5 y2 j5 G+ ?
( h7 Z: {* h$ [1 C3 m! n什麼是 CSS 以及它的功能! L1 d% B5 j. H3 l: x  {; }9 f
雖然 CSS 在網頁裡是和 HTML 在一起的. 但它不算 HTML. 它的使用可以擴展 HTML 的功能. 使得我們可以重新定義 HTML 元素的顯 示方式. CSS 所能改變的性質如下
. B0 [( J8 t9 W/ p' Q
7 _, Y; D+ w1 U7 Z& X, Y字體 5 a1 k8 Y/ g' ^$ Q; Z, v) t! o
文字間的空間 % k* A3 G! X$ U# V1 Y2 Z
列表 % s& w7 U3 V: k* u
顏色 , ^: \7 _. J  n+ T  M! U
背景 + u" T! ~& Y: c! c
Margin
& J' h; G; ]9 D位置 8 z  ?. _$ s4 S) q
我們將會在後面的七節裡討論上面的每一個性質的改變. 在這一節 我們給你提供 CSS 的基礎.
5 n  v& |- ~1 B- y9 Q! p4 [" T# x8 u3 i
CSS 的定義 (rules) 4 @7 p2 f. j9 Z9 d) t; u( G
CSS 的每一條定義都有如下的形式 ! V+ i3 U8 t% E6 l: ?- H

: {; N) b, [9 n4 Aselector {property:value; property:value; ...}# w" ~1 [3 w* @& t" @3 U' B2 X2 C

) \5 @  \! |0 p/ z/ `( Rselector: 第一種是 HTML 的 tag, 比如 P, BODY, A 等等. 第二種叫 class, 第三種叫 ID. 你這裡先知道有這麼三種 具體的咱們以後在談.
: V- \" ]- Q/ Bproperty: 就是那些將要被修改的性質, 比如 color 6 R# f0 s9 v; W+ @- z$ g
value: 給 property 的值, 比如給 color 的可以是 red
; a; P/ |5 V3 b3 c7 J請看下面的一個典型定義 0 ?" Y, j/ _, n6 n7 C

0 e' w3 Z, w$ q3 G# tA {color: red}
8 g* P9 ^7 E# R" i! W! v
1 R4 t7 S; a2 G% A用這條定義所有的聯接都變成紅色的了. 一般來說我們把所有的 定義全包括在 STYLE 元素裡面放到 HEAD 裡面. 請試驗下面的 網頁
# Y$ ~1 i/ B7 s, Z
4 ^- H) f# |  x; E. U<HTML>
5 |3 l  A6 c5 n( A& p<HEAD>
/ a- A) w! }1 m4 C9 t7 p, M<STYLE>% a8 v4 \) R5 O) X2 ^; s
A {color: red}; y( d' h" e- S* U
P {background-color:blue; color:white}
- X% W0 _+ k2 ?) e</STYLE>( v( Y# z) i4 D1 D
</HEAD>
" c0 E7 N; t: k* N; r5 m2 h<BODY>
) j3 B- D7 N* g" ?: o6 Z4 g<A href="http://www.nease.net/~haidian">動態網頁製作</A>+ |, F$ V) V5 m
<P>你注意到這一段文字的顏色和背景顏色了嗎?</P> 怎麼樣?
9 W  U7 j. b$ W% k</BODY>
4 V* a3 c3 w, W  q</HTML>
* }8 v" S" z) j* R: @/ R8 S4 p, I8 k, E, L* c
怎麼樣? 很簡單把. 你只要知道所有可以改動的元素和它們的性質靈活的運用 CSS 的定義, 你就可以使得你的網頁製作更上一層樓. 下面一節我們將要告訴你其他兩種 selector 以及其他一些基礎.
 樓主| 發表於 2006-8-18 03:25:06 | 顯示全部樓層
從這一節開始我們將要討論 CSS (Cascading Style Sheet). 中文大概叫樣式表吧. 在我們這個教程中還是把它叫做 CSS 方便點兒.
0 E# T# Q8 v$ x2 _- a( U
5 t" a/ K  K% v' Q; j什麼是 CSS 以及它的功能
5 h9 J3 {& T3 ]; k8 {, U. w9 v雖然 CSS 在網頁裡是和 HTML 在一起的. 但它不算 HTML. 它的使用可以擴展 HTML 的功能. 使得我們可以重新定義 HTML 元素的顯 示方式. CSS 所能改變的性質如下 & L$ x7 P( x1 |, r: B
0 @: g/ @  M& G+ R" d0 v
字體
7 m  P) a+ j. ~7 L( p4 S% X( k文字間的空間 # o$ O1 I  c$ V& F  v- d- b8 @
列表 ' s$ f6 d8 S8 A
顏色
* g3 U  l9 J) f& Q背景 % z. s9 G% o5 Q
Margin 9 Q7 f/ M+ Z5 ?8 s5 V4 G; A9 h0 c/ H
位置
& S  J0 {/ w+ `# D( y我們將會在後面的七節裡討論上面的每一個性質的改變. 在這一節 我們給你提供 CSS 的基礎. # {/ g7 K9 D# W3 v$ r6 w9 ]
8 v# r; N5 p- B: P* A% q0 b! u
CSS 的定義 (rules) # [, Q/ o- d' n+ c, Y
CSS 的每一條定義都有如下的形式
0 P- n0 E' y: i0 M; |  A
+ E! I: X2 v  D0 e4 Tselector {property:value; property:value; ...}
8 p. k0 ~0 \& Y( k& V& N  Y
0 {  Y/ D  j' m; x+ ^) B8 W2 l7 Lselector: 第一種是 HTML 的 tag, 比如 P, BODY, A 等等. 第二種叫 class, 第三種叫 ID. 你這裡先知道有這麼三種 具體的咱們以後在談.
7 U7 Q8 v1 `7 x; p, _- \1 F3 lproperty: 就是那些將要被修改的性質, 比如 color
0 E0 @* ?$ h3 T0 X8 Y5 Avalue: 給 property 的值, 比如給 color 的可以是 red
3 X2 T. }2 e5 `1 P( g請看下面的一個典型定義 8 U2 V. t/ ]& o# x$ z
% D; E! P# s( K" p9 A, S
A {color: red}3 \' B' s- {' F% `- O
! s5 O% ?& G% ]1 k( c1 m8 k. `
用這條定義所有的聯接都變成紅色的了. 一般來說我們把所有的 定義全包括在 STYLE 元素裡面放到 HEAD 裡面. 請試驗下面的 網頁
' b& P( G/ u- ]5 m! |  T+ m" S
/ R5 I. [2 F) z, H<HTML>
4 l! H- Q" b0 |( e& ~2 L<HEAD>1 S  H5 Z9 z/ K' z
<STYLE>
* E; K$ g% K$ n& M9 O% GA {color: red}
' E, G* n  h9 ~5 R" UP {background-color:blue; color:white}
: k8 a' o: ]7 F( e5 Z+ ]0 @' M</STYLE>
0 K# `! |# u. T, j</HEAD># k8 q. R# i+ l( h! u; u( u
<BODY>
& U8 \& Z5 x- @* Z( w3 V<A href="http://www.nease.net/~haidian">動態網頁製作</A>5 H# e) m) e! n( G9 B
<P>你注意到這一段文字的顏色和背景顏色了嗎?</P> 怎麼樣?4 `0 y2 H& W- ?+ y1 Q
</BODY>6 Y# ~1 m4 t' h
</HTML>
- j, P( I9 {2 k/ X+ n7 M  z& [+ ]
怎麼樣? 很簡單把. 你只要知道所有可以改動的元素和它們的性質靈活的運用 CSS 的定義, 你就可以使得你的網頁製作更上一層樓. 下面一節我們將要告訴你其他兩種 selector 以及其他一些基礎.
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2006-8-18 03:25:18 | 顯示全部樓層
一個樣式表由樣式規則組成, 以告訴瀏覽器怎樣去呈現一個文檔. 有很多將樣式規則加入到你的HTML文檔中的方法, 但最簡單的啟動方法是使用HTML的STYLE組件. 這個元素放置於文檔的HEAD部分, 包含網頁的樣式規則.5 f3 z9 q: T& ^, ~' D
  P$ q3 |" |9 R4 d0 x: c
要注意到儘管STYLE元素是試驗樣式表的好方法, 它具有某些在用戶使用這種方法之前應該考慮的缺點. 不同方法的優點和缺點在將樣式表加入到HTML中部分中有討論。
# p+ s! P2 H" H: U/ |7 D; ]6 `1 [5 O3 G2 l5 g
每個規則的組成包括一個選擇符--通常是一個HTML的元素, 例如BODY, P, 或EM--和該選擇符所接受的樣式.! F* Y7 Y4 G% Z; O

+ n  U" v$ Y: z- \. _有很多的屬性可以用於定義一個元素. 每個屬性帶一個值, 共同地描述選擇符應該如何呈現.
* G2 p% C' [: v
. w5 f# a) n3 K% ?樣式規則組成如下:/ S# z0 k; {" T3 ~, J! g
9 Y6 e7 R9 p- ~. E/ O1 C
選擇符 { 屬性: 值 }1 _& V: M9 o+ |/ o5 M  p9 f
單一選擇符的復合樣式聲明應該用分號隔開:/ d) ^: a! [6 A) L4 j6 A1 G" A

6 A* E  {3 H5 ?" M& Y& y# h5 R選擇符 { 屬性1: 值1; 屬性2: 值2 }2 K6 ]- v& r2 U$ H

% ^2 D& Y9 f  V5 T3 F  L以下是一段定義了H1和H2元素的顏色和字體大小屬性:
0 t  `4 ?7 k0 M
* O- M" Q2 B: s4 X) t# `; R<HEAD>
6 Z" r1 w8 L( a7 _<TITLE>CSS例子</TITLE>
1 n% P  m! r. c0 a: ?. X& l<STYLE TYPE="text/css">" R/ Z; j6 o4 `. M$ L3 g  U, M2 L
H1 { font-size: x-large; color: red }* B7 K) J5 ], c* c9 s  Y8 E4 V
H2 { font-size: large; color: blue }
. |& O3 b2 d9 \& f: h9 m</STYLE>5 j' W- i0 G8 ]
</HEAD>
. X! j6 B4 c2 W% T0 M" M2 L3 p4 `上述的樣式表告訴瀏覽器用加大、紅色字體去顯示一級標題, 用大、藍色字體去顯示二級標題. CSS1 規格正式地定義了所有的有效屬性和值. 屬性和值在本網站的CSS 屬性部分也給出了.
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2006-8-18 03:25:29 | 顯示全部樓層
上一節開始我們討論 CSS (Cascading Style Sheet) 的基礎. 告訴你有三種 Selector. 但只介紹了其中的 HTML selector. 這一節我們把三種都詳細介紹給你
, I/ m) h7 d, A- A
2 n) h/ c' F. H* OHTML selector 2 }4 ^" p  r; h; Z6 l* p& V! n; P
class selector:
- n. T8 e+ a2 u4 |/ C0 k* zID selector:
0 n" c. J* Z0 m" U4 sHTML selector
/ Z4 F1 a* p' [/ F% r; o8 k: Z. E1 t5 v2 Q
HTML selector 就是 HTML 的 tags, 比如 P, DIV, TD 等. 如你用 CSS 定義了它們, 在整頁中, 這個 Tag 的性質就按照你 的定義來顯示了. HTML selector 的語法如下
& \) M( G5 G( w! d
6 n! J3 t0 A# v  tag {property:value}4 X% L9 w' f1 X: x  x. v( m
比如我們想叫 H1 的顏色是紅的 2 P* H) ^: J: m' O2 j# n
8 k4 r3 D2 }3 W! ~
  H1 {color: red}
7 K* l2 H# Q# J! P2 Z% f! F0 \+ Z這裡還要告訴你 CSS 的一個特點, 它可定義好幾個 selector 在一個 rule 裡. 比如 5 D1 p/ |/ [3 C* h  a' s( Q& Y* t

& ^  f2 b7 o7 j) Z9 |4 `1 x( a  H1, H2, TD {color: red}
, y# s0 [2 f. P: q; g這個定義就能讓所有的 H1, H2, 和 TD 的顏色都為紅色.' p) @. ^: ]0 ]9 E
- ?- m" n  x0 i7 K: U
Class selector + H# ]) @3 z# ]0 R! C+ [2 n5 \& r
' Y) W/ X) ^; B. l! @  K( e" o
Class selector 有兩種, 一種叫相關 class selector, 它跟一 個 HTML 的 tag 有關係. 它的語法是 ( S' ~0 R) @$ f9 o' d3 M
# b; X5 w7 C1 C" s% ^; s
  tag.Classname {property:value}) `) I# P& s- x5 y
比如我們想叫一些而不是全部 H2 的顏色是紅的
( P! m; U0 Q% N  v( \4 ^7 d
0 Q: B( R. J! ]1 [<style>
9 \' K1 o2 U- I( O1 [  H2.redone {color: red}
. ]0 w/ U- ?( g% e( Y( N</style>( ^0 K9 T$ c" c: h& D2 z# O

& y$ ^; L* x" j. p. o, S<H2>This is H2</H2>. g. r; v+ }" M5 J1 s
<H2 class=redone>This is red H2</H2>2 W' b/ e1 M% C/ j: M" e9 {
This is H27 C+ ^5 O) R9 Q" W) M' a. D
This is red H2 8 S4 {* W/ T+ ~0 ~  x' r- j
0 M. ?7 M) {) `

5 b) t7 C% R+ O( h
9 {1 c; P0 Y5 u* s! R1 Z7 q第二種是獨立 class selector . 它可被任何 HTML tag 所應用. 它的語法如下 $ T( P4 ~0 a/ j7 p

" {! h; |) v* P& C1 k) f  .Classname {property:value}
5 W( D1 t/ O! C1 E. W  x假如我們有下面這個定義   v# _. d3 |8 p/ H1 @9 B5 n% v
: Z. H4 `- Y& @
  .blueone {color: blue}
0 ^2 B4 n( ]/ z1 ^. x4 |那麼我們可以把他應用到不同的 Tag 當中去. 比如
" w+ S  |' X5 Q% g7 u, t/ T4 m: ]4 J& Y. C  k) r4 P% \( Z5 n& |
<style>8 \+ b+ r. U  j" k0 u# X& u  ?
  .blueone {color:blue}3 C: n& w* S! D
</style>
9 M; Q3 V. ~4 k# p0 j6 Z<H2 class="blueone">Blue H2</H2>
. G5 W; L7 b1 T3 ^0 H<P class="blueone">Blue paragraph</P>- q5 X  J- j  T# ?9 d( C6 N
Blue H2& }7 f( Y1 N0 e
Blue paragraph
8 M+ \% I$ ]6 g" }- ]: R6 |# W+ m 5 m6 _2 P% f+ l4 `0 ]: w1 k1 H: ~

3 T! ?5 d. H+ c4 T
( K: ]  {" T7 \1 [
$ [; q; V9 H  Y8 K( n' }+ a7 q7 R6 c顯然 class selector 給了我們更多的自由.: ?, Z$ Q& J3 H, e' K

) N& T% G' V  Y) B* G+ n  JID selector
/ L3 C  {6 B. E$ R* P' h
+ G! `" I+ c8 M1 _9 G( dID selector 其實跟獨立 class selector 的功能一樣. 而區別在於它們的語法和用法不同, 以及對於 Javascript 縱 HTML 元素有幫助. 它的語法如下 ( W5 x- i4 v: I& O1 k& W
& l9 s7 k1 m6 W( ]! X
  #IDname {property:value}6 `5 b/ H4 X+ J" a
假如我們有下面的定義
2 h1 B2 u2 |% J7 Q8 @
0 ^- ?5 a$ V' g% ]7 r9 L8 i  #yelowone {color: yellow}
0 R. e& V0 i9 H! i我們可以運用這個定義到任何的有同樣 ID 名字的 tag, 比如
; l" y' |; X4 y5 L8 U3 Y& P7 T& F# L9 M& D  ~+ [) i2 P
<style>
$ V1 U8 V4 J5 ~& R. G/ N  #redone {color: red}+ w, F, `$ B, E( k: A" ~; m# B$ K2 o$ Z
</style>
3 k: T* b" D0 q6 @  R' E  <P ID="redone">text here</P># A/ W( W5 k. h4 S2 R
text here( b7 o' q1 h; V( i: f# J/ H( s8 D

( e9 `* `" t6 p 2 X7 a0 Y8 @/ _& ?8 T0 |
. I, g5 }5 M* \1 f
* M  y1 x# g. g4 Y9 J$ c" i
你可能覺得既然 ID selector 和獨立 class selector 功能一 樣, 為什麼兩者都存在呢. 如果你知道用 CSS-P 來定位的話, 你就明白它們的區別了. 有 ID 的 HTML 元素可以被 CSS-P 和 JavaScript 來縱. . Q- q( P! L' k8 A; {9 x

) l; j( d, [( p0 e到現在為止, 你已經大概知道如何來寫 CSS 的定義了, 下面我們將會告訴你如何用 CSS 來縱或修改
& D0 g- }  V5 l1 {7 X6 o4 s( X
8 F5 L' L/ Z# c字體 + h1 g) o  i0 S0 R% _
文字間的空間 1 d$ c/ F" m& B. w( r; T  n9 z
列表 + T& b/ w+ @9 ~5 h, Z
顏色
4 s- p  F' j7 F1 e  i. K( L背景
8 k) Y  ~! [" J# q! U+ }) p) L7 LMargin 4 m% c6 c' P. {. D
位置
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2006-8-18 03:25:44 | 顯示全部樓層
這一節我們將討論如何用 CSS 來控制元素中字體的形狀, 大小, 風格.
/ R4 V3 ~( j% E3 |# ^& L- k
$ s  d5 ?) x  w5 F0 n8 ^# |  ]字形 3 K1 Z/ I2 m3 X8 ?- l
/ F* g, H) n3 `4 l
CSS 用來控制字形的性質是 font-family. 你可以用它來決定 任何一個元素中文字的字形. 比如
0 m. E" ?, O6 [/ V! Z+ X1 @1 Y# T8 W% Y
+ E+ N/ n/ I8 ]2 C  P.v {font-family: Verdana}5 t7 Z6 \# {$ s* t: o8 {! M8 C
  H2.a {font-family: arial}
% q" h' `) V, ~2 m4 A! p$ s& KThis H2's font is "Times New Roman"
* L( }+ @5 F+ Y4 X! r* r1 v4 z) x& RThis paragraph is using "Verdana" font$ U6 E$ ^( k! U* Q+ Y& i  _

4 ]$ R" ~( p- Z( N
( [/ p( ^- c, P1 g4 f- E
. @1 W  u; I+ w- C2 J2 c. `0 ]4 F5 X; C
有的時候, 你所給的字體瀏覽器不見得有,你可以多給幾種比如 & ~0 n3 M' u% K' O" j5 P
  |4 {- n9 H0 e" |3 O
  P {font-family: Verdana, Forte, "Times New Roman"}
, |  @5 t  H% ^3 T上面這個定義可以使得瀏覽器先用Verdana, 如果沒有就用Forte... 記住每個字形之間要用逗號隔開.
) m% ^( A" x! J+ [2 M" Y
! o# y& h4 W2 P. v4 `7 o大小 4 O' k$ ?9 O. v1 r* r
) X* E/ N$ I8 A8 W! ?% ^
用來控制字體大小的性質是 font-size 比如 $ I5 \' `$ `" ^
1 `0 C4 X" C+ i: v; l$ d
  P.f12 {font-size: 12pt}3 U4 x2 W; h8 h! _" O$ T
  P.f18 {font-size: 18pt}8 T: {' X9 r2 z/ u) _( [. E: ~0 k
This paragraph's font is 12pt0 T& H$ R+ K# `( S' P
& E2 r; i! g7 L$ I, j8 u
This paragraph's font is 18pt
& U$ }0 ?- p2 I0 M% [" o
" _( h9 Q8 [8 ?! O* h: D: \: l
' h7 w* F( u: ~2 M4 M! B, ^& X
# F" Z, N4 O3 K5 \
0 `* Q" ]4 T, Z9 N8 R你可以自己慢慢調整字體的大小直到滿意為止. 一般來說, 字體的大小沒什麼限制, 但 500 以下比較安全.
2 O. X2 Y' F- a; W. m( Z
4 e8 [+ _$ ]; Q& Z2 U  `斜體 3 K" F, `+ C$ W: g, \6 F  x# C0 c6 w

& X9 Z: L3 [5 J. W% X如果想讓字體成為斜體, 要用 font-style 性質, 比如 ! s( Y9 X/ s2 s4 @6 v, j

/ X7 T" i7 M) U  P {font-style: italic}. |+ s9 P7 e, g' R3 L) t
This paragraph's font is italic
: _5 E* [2 }) v- S
7 C8 F. w; N2 j- e ( y8 o/ N6 o$ ~
加重
0 ~" y. T& d: z" C( m2 ]& B: S" w' ~, Q7 }1 w
用 font-weight 來調節文字的粗細, 比如
; d' k0 d1 g. h* W# H0 a/ F6 Y+ w7 B% `/ o* _- E. u
  P.bold {font-weight: bold}( F8 [9 h9 H. `+ j
This paragraph's font is normal5 H3 h! H$ S: S
) ]! C' O/ H9 K: E; r: a% }2 b
This paragraph's font is bold# H8 l" H" a0 ]; j5 s! f+ t

5 z& O+ E' H( i# H; o
, T* }* B: j' v; T: ~
$ q2 x3 t  a6 F( A8 H* z3 V0 v  X9 t( S
font-style 的可能的值是 lighter, normal, bold, bolder ' w' f. X* ^( i( |+ Y
! H6 h- L8 @' Y8 z0 U- C2 ?
我們只介紹在 Netscape 和 IE 上都通用的性質. 下一節我們討論文字的定位.
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2006-8-18 03:25:58 | 顯示全部樓層
這一節我們將討論如何用 CSS 來控制網頁中文字定位, 這些性質是
0 D6 Z& U/ a& u$ H4 Q0 H/ @9 x8 d3 Q3 [- e' ~3 F2 g! g1 F8 d
line-height: 行距
( y, s. [( I$ a9 f- ntext-align: 向那個方向看齊
# `0 Q; f$ u, }" L& @; X4 }vertical-align: 向上還是向下看齊 ' A: |# ?1 ?" P
text-indent: 段落第一行空格 2 V. P( L$ Z: X" I* u
text-transform: 字母的大小寫
. A- ?+ j% Y+ _+ |5 P& Stext-decoration: 給文字加裝飾, 比如下滑線 ( K3 A4 T6 M# n/ \
行距
! M$ ~/ R# u% d: W6 l& F. i0 W; a/ l) E
我們有時候可能會想把行距加大點使得文字看的清楚一些. CSS 中的 line-height 可以取得這種調節 ' j/ _& {8 c# C( R% a7 k

: ?* m3 r4 @* @/ @9 {1 x  P.double {line-height: 2}
- W' j" m" l6 r+ N' P請看下面的比較. 這 一 段 的 行 距 是 正常 的. 這 一 段 的 行 距 是 正常 的. 這 一 段 的 行 距 是 正常 的. 這 一 段 的 行 距 是 正常 的.: s  i& E2 Z( N  y  y
/ x' u  h8 {) I: q0 k9 P; d
這 一 段 的 行 距 是 雙 倍 的. 這 一 段 的 行 距 是 雙 倍 的. 這 一 段 的 行 距 是 雙 倍 的. 這 一 段 的 行 距 是 雙 倍 的.
. {$ W. `0 D, I 2 n, o9 u9 w1 z4 @. j" L6 v

+ {0 v: R9 l) v) C& \0 r
( c, V& b; r/ {+ r2 p2 j* m
% U( D" q" \7 j9 Z你要讓 line-height 等於 3 的話, 那行距就更大了.
" p" o- j/ _$ w. S
0 y+ D2 d  h( F7 o! u看齊 & T. g8 I( ^. m/ X$ d7 Z7 B) l$ a1 G
8 ]4 g" d2 V2 a: I. f& |3 G. D
一般來說我們都是向左邊看齊. 但有的時候也有其他的選擇, 比如說向右邊看齊.
4 ]* M$ D( K2 Q, {
5 Q8 c0 t) B% N0 S    P.right {text-align: right}) U0 T- x, t2 z( o& {8 C) a
    P.center {text-align: center}, w+ S" o% r3 }7 \4 F3 ^7 w+ a3 i
    P.justify {text-align: justify}
, H) S% h/ G' K9 k) c9 g請看下面的比較. 這 一 行 左 邊 看 齊  Q1 b+ [* @& c/ {$ Y6 A) J, Y
6 d! u) b( m$ i& h
這 一 行 右 邊 看 齊
& ]+ f3 N7 Z8 h這 一 行 在 中 間
* o4 U5 x. g& r  S" V % x6 N6 L+ E' d: W0 x- V0 F8 a' J) V
# h* v& l8 {6 C2 b( k, N: V1 d5 q

+ E4 m+ t( d. J" ~2 _6 D6 L1 n2 a: M0 w5 H1 p9 {7 f/ d; G
text-align 可以有 left, right, center, 和 justify
: L- V) j- t  n, _! w- G* b* u* w: m3 T- n; ]0 i
段落的首行空格
; B& r& p, o* M; G" }
7 L4 B2 v- q# e+ ], @0 N. G2 B7 N如果我們想讓第一行的開頭空幾格, 可以用 text-indent, 比如
* |0 Z# P9 n* S: F6 T  N( e
$ b8 k8 L; }. e) D" ~9 j/ t( E  P {text-indent: 1cm}
- n$ d# `" ^* F  u5 {" o! L請看下面的例子. 這 一 段 開 頭 空 了 1 厘 米. 這 一 段 開 頭 空 了 1 厘 米. 這 一 段 開 頭 空 了 1 厘 米. 這 一 段 開 頭 空 了 1 厘 米.
( S+ e' h9 m. v" }+ J- c+ I$ V / Y6 P! g+ |0 F4 U; m
/ n# c( r7 i2 o4 |$ R8 K
字母的大小寫 - g, {2 f3 k# R. L; j* f! z4 ~9 {6 c+ S

* T- K; e: N6 o/ T: `/ j5 v這個性質顯然跟中文沒關係, 但如果我們要處理英文, 你可以 用 text-transform 來改變英文的大小寫. 比如, 讓每個字的 第一個字母大寫
8 O# n% ^& T6 H: C/ p7 B8 T) W0 N+ c, I
    P.capitalize {text-transform: capitalize}
3 H% Q4 K& b! _/ `    P.up {text-transform: uppercase}! ~, O% B' A, z+ I- O
    P.low {text-transform: lowercase}: k# \4 m) x5 S3 T1 H
請看下面的比較. All the words' first letter have been capitalized in this line1 q" o1 U/ p0 q/ O+ o. c0 M

6 {. y! K" R9 v+ u+ H4 j8 Y4 IAll the letters are uppercase in this line
; ~* @8 l4 z/ v0 U/ i- f' r3 u* a" C% ]: ?2 G) t1 s4 x2 q! A
All the letters are lowercase in this line: C" T* }/ |+ R& Q/ V

2 R# p; c- \7 V! M4 H( p
+ s3 m& w# T* ~& v( |( `# _" E) C文字的裝飾
) N, j" [- E6 K' |8 H6 h
: [$ f% _8 W0 @* h7 U就是在文字上加下滑線, 或中間加條線的. 比如
7 ~9 x6 V( j9 e2 }% n$ K; u7 j# H7 m5 Q$ F# e" p; W7 q& w
    P.underline {text-decoration: underline}
+ A! ~& ^0 E' F5 C' e5 p. ]    P.line-through {text-decoration: line-through}
) y7 R; e7 A& L% O0 W) f* t$ F請看下面的比較. Underline line& Q* @% F% v( [0 t1 _- S1 C
- ~8 P" y2 c2 L/ v
line-through line# _; u; c) E* [' b2 A7 y( u
3 X% Z8 A" R/ Q# n5 U% F* u

+ @* ~" r" C$ a# `
4 d5 `4 l* S( k6 K1 W; C8 d+ S$ f% m6 R4 a; T$ S6 H
其實最常用的是我們想去掉聯接下面的下滑線.
: B% X  W9 }, j; U4 b6 eA {text-decoration: none}
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2006-8-18 03:26:35 | 顯示全部樓層
這一節唯一我們將要討論的是如何用 CSS 來改變列表 前的標識。我們知道有兩種列表:有序和無序。有序 列表用阿拉伯數字為標識, 無序列表用黑色小圓圈來 做標識。用 CSS 的 list-style-type 這兩種列表的標 識都可以有四種選擇: ( N) T8 ~" m3 _5 c4 q' @( X
0 a4 Z1 y# b7 g2 y9 O
無序: disc, circle, square, decimal
  e' E5 W- I' o; o- r有序: upper-roman, lower-roman, upper-alpha, lower-alpha.
7 U. E4 q2 j8 k. q4 r1 Q+ n假如你想叫有序列表的標識為大小羅馬字母 * R7 N$ u( R$ H- |/ ?
0 ?; n. N8 _/ B3 n) I- O$ m) d' r$ m
  LI.upperroman {list-style-type: upper-roman}
5 s6 D, \2 R1 b, @5 ^( n請看下面的比較 disc
9 d. E! _* @. Y8 t% Xcircle
& ]4 n+ d* X( C. g1 usquare " K- t9 y3 G% e# B. a6 b
decimal 9 `# K) u& b- X0 E$ N/ J
3 D* g: d2 ]4 K+ ~- E2 H

/ A7 s$ y+ T( `, N; I4 M大寫羅馬 / W3 F7 C6 T/ ?# C0 P  M
小寫羅馬 0 |) o+ F# e6 h9 s: ?9 {* A
大寫字母
, p% M0 r0 x" ~( v- O" }% b7 T9 f小寫字母
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2006-8-18 03:26:46 | 顯示全部樓層
用 CSS 你不但可以改變整個網頁的背景你還可以控 制其他元素的的背景,比如 P,DIV 等。這一節我們將要討論的性質有: 0 l) H2 O- i1 `

' e% f" u6 s  B& A3 ]5 {1 j% Scolor: 文字的顏色 3 `1 |5 A' n" u+ S2 e  K( x
background-color: 背景顏色
5 k! M, @. v# N, n6 bbackground-image: 背景圖像 $ L# u$ H0 A! N/ `% v; W
background-repeat: 重複背景圖像
8 z3 K( s) S4 m& ebackground-attachment: 是否凍結背景圖像 : u- A7 U8 V% a6 r
文字的顏色
' j; U# X" k7 h2 n: [
8 @" p. I, k" }我們用 color 可以來決定文字,周邊,以及橫線的顏色
3 Y- g! K' L. ~; V: U+ p
0 Z- d9 V; e+ w0 {* ^  P.greentext {color: green}6 k/ Z0 ?5 P- m  I4 }' d
請看下面的例子 這一行文字的顏色是綠色的
: O: d3 |  v2 @, P! ^  H: @, f
/ F# f3 ]5 e* \- z3 ]背景的顏色 + q, z9 m$ P6 a1 I" e8 }) P3 L

6 x, \3 f2 [! |- E5 k/ h$ P背景的顏色可以由 background-color 來控制, 比如我們想叫 一些文字段落的背景顏色為淺綠色的,
6 o4 H8 U' `9 c4 p" e: c8 O; }6 Y. a7 ?- i
  P.greenbg {background-color: #CCEFCC}& a  ~- z8 ^& `5 v
請看下面的例子
+ g! A! {) {1 n2 Z1 U* K1 S5 G& w; F2 t+ X0 ^
這一行的背景顏色是淺綠色的# e) F, l2 B- u# k9 d0 P) p
) a& z7 E* ?3 J3 L+ T
背景的圖像 / h3 U  b. K+ z7 F& }# @: q

7 Q+ t2 k4 G4 T) i& X& ^  F- P我們不但可以給整個網頁加個背景圖像,我們還可以給其 中一個元素加個背景圖像,比如說我們給 P 的背景加上天 空的背景 0 @3 X2 F" M, D$ d/ Y; G
! j2 W4 z0 S# s4 `4 p7 X) a
  P.sky {background-image: url(../image/sky.jpg)}- o: W5 |) W! t/ b/ @
請看下面的例子
3 p. d" g3 r! D/ R( L, ^5 u+ S  W1 i6 v- F5 b
給元素背景加顏色或加圖像使得我們能自由的強調一些我們想讓大家注意的文字。而沒有 CSS 我們只能改變整個網頁的背景顏色或圖像
$ D; }+ \, `" s2 `7 E3 v, }5 u
% s& l4 f& G+ z# q, {1 o我們不但可以決定是否給背景加圖像, 還可以確定是否讓這個圖像重複以及在哪個方向重複。比如我們只讓圖像在整個網頁的豎直方向重複我們就可以去掉左邊有個圖像條的效果。 5 y  R5 H4 e# A6 d
) V! |  M; ^& k# K
  body {background-image: url(../image/cdbk009a.jpg);
' F, }$ Q% g0 U' S: O' E: B, Q        background-repeat: repeat-y}/ \* @) _. {' W! ?2 y6 I( p
background-repeat 可以有這些可能值:no-repeat, repeat-x, repeat-y
  k* z6 _" T+ y
0 D/ s% J+ R: i% _3 t我們還可以用 background-attachment 來決定當別人瀏覽你的網頁的是否讓背景圖像隨著內容一起滾動。比如我們如果不讓背景圖像動,
9 \8 X; }' K! M# Q8 g) f, C4 o- ^4 K7 ~+ i4 C4 }
  body {background-image: url(../image/cdbk009a.jpg);
( U! u! ?. J4 w$ m& X$ ~        background-attachment: fixed}
7 c: F1 ^6 D/ o) w8 z這個性質挺有意思的。 如果你的背景圖像是你自己網頁的logo, 你想讓它固定在中間不動, 用這個性質可以達到這個效果.
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2006-8-18 03:26:57 | 顯示全部樓層
這一節我們討論如何用 CSS 來控制四周的空格以及邊框的設定 ! ?: Z. F% f& H1 B

# k7 a4 h0 o, a: v  I# U# q! l元素周邊的空格 margin
3 s- Z+ X" h0 z% v$ m; t; S3 B性質 margin 可被用來決定周邊的空格, 假如我們想讓整個網頁在左邊有 5em 但讓標題沒有任何空格
4 A# q( H' `' d" f' `5 M# d( {
" c9 t6 E& J8 P7 `5 a& ~  BODY {margin: 5em}& G7 e, U7 y  g
  H3 {margin: -5em}- d) Z: ~' f: U1 l
H3 的負值 -5em 抵銷了 BODY 5em 的空格。
/ H( O* _# b% X; K9 g! E3 f: ?6 P1 S: e+ J; j6 y
另外我們還可以分別用 margin-left, margin-right, margin-top, 和 margin-bottom 來設定 左,右,上,下的空格
$ v! @" I) B& u5 j8 [' u0 S0 k  E# [* ?8 h4 H% j
元素內部周邊的空格 padding% _' D7 C; F, b. {
初看起來這個性質跟 margin 好像一樣。 其實它們之間有很大的區別。margin 的空格是相對於其他的元素所空的,而 padding 是在元素的周邊和內部的內容所空的空格。在下面的例子,我們用有背景顏色的 TABLE 來讓你注意這個性質
) A( Y. N0 [2 i- `  Y1 p+ G
9 i" m* F1 R2 I$ c$ E; @  TABLE.pad {padding: 5mm; background-color: #CCEFCC}7 D0 ^+ |# t) M$ ^+ k( E
Petersen was arrested in a modest apartment building in Studio City, Calif., which he had been sharing with three other people. The Marshals entered the apartment using a key provided by the building's manager. When they entered, the Marshals said, they found Petersen alone -- sitting on his bed and using his laptop computer.
9 y' [$ N5 m# B2 O% e7 V$ l9 T9 M: j3 E/ z4 b# P

4 i4 F. p4 ]0 z! h; G1 ?3 V我們同樣可以用 padding-left, padding-right, padding-top, 和 padding-bottom 來分別控制左,右,上,下的元素內部的周邊空格。 - y/ I5 c. n8 E% ?! Y+ L* J

% E, T( p& O, r元素邊框的寬度% }) I8 c0 x6 q( n
我們可以用 border-width 性質來調節邊框的寬度。 比如 ' t+ g% F* u, s9 Z; j4 c( w
& X( j( @; U. Q- o' L1 X) l* j
  P.width5 {border-width: 1px}6 b: k1 P" K9 C% {/ w
這個 P 元素的邊框寬度是 1 px
6 B# z6 L- P4 n5 C$ B& O' C) J3 s* Q- u& l. \9 R4 p
你可以用 border-left-width, border-right-width, border-top-width, 和 border-bottom-width 來分別決定左,右,上,下邊的寬度 5 r3 T" p7 ~  G3 k

0 M: i7 A, W& [# c5 @元素邊框的顏色
1 U& H8 R6 t9 N2 f我們可以用 border-color 性質來調節邊框的顏色。 比如
( G+ i# \% A- {7 ~( p/ O5 v5 \6 k5 r6 v" C5 ]+ S6 Z
  P.colorred {border-color: red}  K( E% D" ^% ^. k- K2 S% }; Y$ P% l
這個 P 元素的邊框的顏色是紅色的
3 E( e; |  b" z2 Y% y- h  N% v5 }! v- ]4 ^# \8 ~3 |
元素邊框的形態
3 B$ I3 U: O# s' M$ Z: d我們可以用 border-style 性質來調節邊框的形態。 比如 : I/ j- G& _4 L! Z

- i  K- `; k+ x% d' b6 ]) @# x  P.inset {border-style: inset, border-width: 5px}1 H% A$ ^  r7 V& @; l
這個 P 元素的邊框的形態是 inset+ o5 U' J* H. E8 D, M. X7 f8 l
! _0 S6 I6 U4 O+ ~1 {6 m
這個 P 元素的邊框的形態是 outset3 O& ]! O& p, d* P1 z
/ s1 z5 K3 m! v$ Q4 z
這個 P 元素的邊框的形態是 double5 l" Y" y" W% S5 w5 I
" K( }% n5 O4 d+ H
這個 P 元素的邊框的形態是 groove
" D- p# L! \5 O- Z6 B
& K* K1 y: Y, {6 F! \0 d' M這個 P 元素的邊框的形態是 ridge
回復 给力 爆菊

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 免费注册

本版積分規則

點基跨境 數位編輯創業論壇

GMT+8, 2025-7-19 06:45

By DZ X3.5

小黑屋

快速回復 返回頂部 返回列表