从基础开始:CSS实用教程(二)
七.控制文字的样式
2 j D0 G* }) x( w# g Y- V) y7 `8 r9 w. l% F& k( M
控制文字的样式包括文字大小写、文字修饰两个部分。 / e' C: O( b; x6 F6 d8 Z0 q' h
+ T0 c. ~6 [& A$ r1.文字大小写
' o+ ]7 k% p2 P) j$ ] l: c3 v6 T$ e1 |; s! D) [ _8 z( v# }
文字大小写使网页的设计者不用在输入文字时就完成文字的大小写,而可以在输入完毕后,再根据需要对局部的文字设置大小写。
. S0 f6 `2 a/ @8 m6 i: D( n$ G4 s1 j2 a( D- p1 a% ]- i
基本格式如下:
1 n$ j0 M2 k3 ^/ T7 V6 q: E% J
1 J4 L7 I9 w1 a' b; B7 [; `text-transform: 参数
: r2 `$ a( t8 h# v( o9 s; {$ B
$ \2 f/ x, s Q8 \1 f) s7 l/ J' r参数取值范围:
% W+ t2 \9 X9 A0 E. R8 t/ a" l1 Y- e, J* d9 D v
·uppercase:所有文字大写显示 : |' D+ ]; v( y# U ^, T r
: [/ J, z% B! V5 T, k1 i! n0 a+ t- f·lowercase:所有文字小写显示 1 f- w: t+ @; M6 ^
, ^2 v2 s. a+ B* S- |; `2 G
·capitalize:每个单词的头字母大写显示 1 H; ?/ Z- @) @/ v1 {" [
$ Z7 V9 g1 h( x- A·none:不继承母体的文字变形参数
; |/ T7 D" n+ C* ~, B2 H* t5 b/ O! H8 V. Q% V4 d0 C) R
注意:继承是指HTML的标识符对于包含自己的标识符的参数会继承下来。
5 t* {; g4 G4 [; T8 p/ J3 F: y \/ z% a! X9 o' ~
2.文字修饰
& `/ w' f' j @- \4 a
% d6 t" T+ `) e1 P, i$ L文字修饰的主要用途是改变浏览器显示文字链接时的下划线。 8 d4 x& k& S8 Q, G' l5 c& A
; L/ b R, {' @9 @) ?% l' w& j
基本格式如下: & K/ O: P$ F5 R9 c2 k" d0 r% o$ |
# H- P' Y, n, @/ h- a0 D
text-decoration: 参数 , r) v- ^6 j* q' x
5 p$ ]* m7 i( F( X% T( \7 J$ j1 B& Y
参数取值范围:
; {+ |& t: t" l# d# }: j# X; | t+ i) l. H j
·underline:为文字加下划线 9 l6 l) ~. {6 \9 H0 Z' G
. T, T- h* {% V) u·overline:为文字加上划线 ) |! s) s8 @ U5 v' j' ^
* d# D( M/ \' `/ u( R7 J
·line-through:为文字加删除线
7 C! r( h; y) O* ?3 d |5 @7 k* \* ^9 u7 b* \
·blink:使文字闪烁 . B3 h G# z$ h& |$ Y6 [
3 e% o8 o: s' \0 J2 g# |
·none:不显示上述任何效果 , R+ F9 h: @; o8 S
9 D; i7 c! Y, u* o; R- H八.控制文本的样式
t7 d' w7 D/ \( |& {8 U% n0 C9 ^6 r7 A! B
控制文本的样式包括单词距离、字母距离、文本行距、文本水平对齐、文本垂直对齐文本缩进六个部分。
& o- T# s& o0 e, M! l( k, C, ?9 `+ Z
1.单词间距
J7 P( V0 l3 k+ q$ j% ?: B" W- Z" |( R
单词间距指的是英文每个单词之间的距离,不包括中文文字。 ) L$ w3 d" P# ~: C
. D0 ?' n2 D) K1 z' [% |% z7 W3 Z0 _
基本格式如下:
- N$ U! H# d& y h% N2 d
5 |. K0 U% T) a2 Gword-spacing: 间隔距离 + Q+ U% }0 F, a, k
: F+ [4 F. b3 P6 d: S
间隔距离的取值:points、em、pixes、in、cm、mm、pc、ex、normal等。
" [# ^; ]1 R7 `* E; i7 Q
4 @# a7 Q9 _0 {2 ~5 l6 H2.字母间距 9 m. M2 V- d% q/ e( n8 h: N
% L4 |: Z) z1 n0 t
字母间距是指英文字母之间的距离,功能、用法,以及参数的设置和单词间距很相似。
. |3 A% Q8 t# _* L+ w3 u
( A" U2 g7 F& c( q3 O基本格式如下: 3 ^% E. O6 U: t/ H
# D5 X- B, N9 \/ w- L5 O% tletter-spacing: 字母间距
. W: ]6 @5 F" t) O1 S6 {- v* a4 M
& `# V/ D4 }" F- {3.行距' [# R9 k+ `0 j
. L9 {4 u- ?% \# |( f行距是指上下两行基准线之间的垂直距离。一般地说,英文五线格练习本,从上往下数的第三条横线就是计算机所认为的该行的基准线。' i, T2 {* }9 \" b% _# x5 V# y
. k1 _1 S4 ]% X4 D4 J& b( ^2 W5 \& B L基本格式如下:
5 }, T. A" `7 b% J" Y4 N
: o. e! L- ?6 L* Zline-height: 行间距离: K$ s! v: l `( ~$ K7 }- Q R+ s
8 W0 z3 C, _7 z+ ~" ~2 a
行间距离取值:; j; e9 h$ j- H4 p( `& o' {
" H. y) w+ _7 M* z* i" O8 G, I·不带单位的数字:以1为基数,相当于比例关系的100%
' G3 e3 A; L2 T
2 A4 a/ B O# Z2 e+ ^·带长度单位的数字:以具体的单位为准$ Z+ N& I) e% K4 p7 E% T H8 N( j3 @9 ?
( d& h P3 Y* B; @7 S/ ^
·比例关系
; w/ a! r% c7 Z7 ?& B
- D z J- N/ j0 |% q注意:如果文字字体很大,而行距相对较小的话,可能会发生上下两行文字互相重叠的现象。
# S0 L6 L H3 a& s
7 J, n5 J. b/ o$ T4.文本水平对齐( Q& p2 z2 H3 y/ n# O
; B' X8 p5 K6 {
文本水平对齐可以控制文本的水平对齐,而且并不仅仅指文字内容,也包括设置图片、影像资料的对齐方式。
1 ~4 N; |; G) b9 a% ?' E4 a0 P. K: K9 @
基本格式如下:9 R. u) ~3 ?" X% E' h2 N
9 l3 W. g" ~; f, L0 rtext-align: 参数
: B5 s& Q% u1 ~3 |- T4 O! r* n: S2 |/ o) n
参数的取值:, e9 d" g C! g
- `# y7 O; e7 n( t2 v! J; X& r p2 c
·left:左对齐
7 V) J0 E$ S1 Z8 X( ?7 q! J0 ]& y/ _* s$ T8 q/ Q3 F
·right:右对齐
/ G0 e0 y: t* W- v& e; m2 U* `: [; v; `
·center:居中对齐* H6 g4 G8 K- D4 f8 \
$ @& d+ G3 M/ G
·justify:相对左右对齐3 M* o/ r: V* h% E: G
, L* H. ^+ S0 m2 s+ G: Z9 _
但需要注意的是,text-alight是块级属性,只能用于< p>、< blockquqte>、< ul>、< h1>~< h6>等标识符里。
4 A1 k2 z& x! t8 Y
+ X( K8 j1 d" x2 f1 {3 V! O5.文本垂直对齐
; X, W* r0 E- h' y0 }0 K/ X3 i3 T' m, [1 ~$ A" j/ o/ s
文本的垂直对齐应当是相对于文本母体的位置而言的,不是指文本在网页里垂直对齐。比如说,表格的单元格里有一段文本,那么对这段文本设置垂直居中就是针对单元格来衡量的,也就是说,文本将在单元格的正中显示,而不是整个网页的正中。
( h! m& [6 {) L3 N& f
. x6 c( \$ j6 `! ]基本格式如下:
* P9 m( N% e/ _" h W3 F8 L9 t4 i8 c* S3 Y
vertical-align: 参数! c6 h; x) D; u' @: P
" q+ v/ q ?$ a7 q
参数取值:. e! v: |( n5 P p8 `! t# b
, M5 V9 k6 v$ f. @. T* E2 U·top:顶对齐5 b; H7 i) |6 x" y0 h
$ k: S/ O8 U. U0 c/ h
·bottom:底对齐
/ t2 R( C/ a4 M8 q4 @* u' v: w& L, d) y% b% f$ ~# I2 ^
·text-top:相对文本顶对齐* \$ }7 L# u# D3 s y
+ _# H6 Y; m( c& v! q$ c$ g1 p
·text-bottom:相对文本底对齐% f# X- b8 `" n$ }. @0 x
, }/ X: J0 S1 z" R' l( M! p2 X: ~4 S& E
·baseline:基准线对齐
. z. u' |' \: L9 o; i+ K$ C7 d
0 R1 p$ J" y. Y' N! t·middle:中心对齐4 b( P* \$ B5 e$ X7 ?
1 @) X' R, e( {6 } A' x3 F' }$ Y
·sub:以下标的形式显示
H6 r6 q0 I( u4 ]. n6 c9 q7 p; S( G( b
·super:以上标的形式显示+ i( f; p6 i5 o& y6 z
0 D# a6 i- o3 ~. }6.文本缩进
! P3 }! J0 I9 ~$ E* Y9 R
9 D. H+ {6 U) F# d; P) q文本缩进可以使文本在相对默认值较窄的区域里显示,主要用于中文板式的首行缩进,或是为大段的引用文本和备注做成缩进的格式。
% B, ~) }; j/ q# u4 G& o; l$ ^% g {: x
基本格式如下:
/ @. ~2 @. O9 A6 p, l* V+ O& J( l# s
text-indent: 缩进距离
0 ?9 _5 f, s- p* I
3 m2 D' H! a7 U0 A缩进距离取值:8 n1 W' A$ y" T/ r0 ^/ j& w& [
1 @0 V* @, O7 b·带长度单位的数字
+ }% o+ i' f3 v6 i' J
8 G4 J/ T* t' o/ j·比例关系
! v( h% X/ |4 O0 r6 Y& C! v# y
( i: v* ]* C- n但是需要注意的是,在使用比例关系的时候,有人会认为浏览器默认的比例是相对段落的宽度而言的,其实事实并非如此,整个浏览器的窗口才是浏览器所默认的参照物。# i. u. U7 b7 a/ @9 H
2 p0 k6 A2 z; C( `2 R另外,text-indent是块级属性,只能用于< p>、< blockquqte>、< ul>、< h1>~< h6>等标识符里。