這一節我們將討論如何用 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} |