七.控制文字的样式 k.0pPl
控制文字的样式包括文字大小写、文字修饰两个部分。 0xutG/-&N
1.文字大小写 _`94CC:
文字大小写使网页的设计者不用在输入文字时就完成文字的大小写,而可以在输入完毕后,再根据需要对局部的文字设置大小写。 Ks7kaX
基本格式如下: PI")^`
text-transform: 参数 j%&^qD,
参数取值范围: )&elr,b/y
·uppercase:所有文字大写显示
X?"Ro`S
·lowercase:所有文字小写显示 #lm1"~`5
·capitalize:每个单词的头字母大写显示 01^W Py9l
·none:不继承母体的文字变形参数 @l2AL9z$m>
注意:继承是指HTML的标识符对于包含自己的标识符的参数会继承下来。 u`X}AKC
t#J
#DyY5
2.文字修饰 Neb%D8/Kn
文字修饰的主要用途是改变浏览器显示文字链接时的下划线。 ~oBSf+N
基本格式如下: {Q~A;t
text-decoration: 参数 q}R"
参数取值范围: &-Zg0T&tZ
·underline:为文字加下划线 e.g$|C^$m
·overline:为文字加上划线 E~!FEl;
·line-through:为文字加删除线 -1u N
Z{0
·blink:使文字闪烁 Y-,1&$&
·none:不显示上述任何效果 k}Vu!+c z
4a~9?}V:
八.控制文本的样式 M*c`@\
控制文本的样式包括单词距离、字母距离、文本行距、文本水平对齐、文本垂直对齐文本缩进六个部分。 {GH
0
J"
I-q@@!=
1.单词间距 dQFx]p3L
单词间距指的是英文每个单词之间的距离,不包括中文文字。 8:A6Ew&\]O
基本格式如下: xF{<-b
word-spacing: 间隔距离 BPKeG0F7
间隔距离的取值:points、em、pixes、in、cm、mm、pc、ex、normal等。 :U;ZBs3
L``K. DF
2.字母间距 HPj7i;?O
字母间距是指英文字母之间的距离,功能、用法,以及参数的设置和单词间距很相似。 9X{aU)"omQ
基本格式如下: = %7:[#n
letter-spacing: 字母间距 1k>*
Z-j%``I?h
3.行距 R=M${u<t
行距是指上下两行基准线之间的垂直距离。一般地说,英文五线格练习本,从上往下数的第三条横线就是计算机所认为的该行的基准线。 {Z|.-~W
基本格式如下: p.1|bXY`
line-height: 行间距离 #6JCm!s
行间距离取值: i_&&7.
·不带单位的数字:以1为基数,相当于比例关系的100% UkL'h&J~
·带长度单位的数字:以具体的单位为准 oZ~M`yOz.
·比例关系 [OsW
注意:如果文字字体很大,而行距相对较小的话,可能会发生上下两行文字互相重叠的现象。 A|@d4+
Rf\>bI<.
4.文本水平对齐 .,x08M
文本水平对齐可以控制文本的水平对齐,而且并不仅仅指文字内容,也包括设置图片、影像资料的对齐方式。 %P9Zx!i>
基本格式如下: D058=}^HE
text-align: 参数 ~c3CyOab
参数的取值: 6q8qq/h)
·left:左对齐 aARm nV
·right:右对齐 zUxF"g-W
·center:居中对齐 GL1!Z3
·justify:相对左右对齐 T ,gMc
但需要注意的是,text-alight是块级属性,只能用于< p>、< blockquqte>、< ul>、< h1>~< h6>等标识符里。 .|{*.YE
I#f<YbzD
5.文本垂直对齐 F+AShh
文本的垂直对齐应当是相对于文本母体的位置而言的,不是指文本在网页里垂直对齐。比如说,表格的单元格里有一段文本,那么对这段文本设置垂直居中就是针对单元格来衡量的,也就是说,文本将在单元格的正中显示,而不是整个网页的正中。 BZx#@356N
基本格式如下: y?aOk-TaRA
vertical-align: 参数 g!%csf
参数取值: ]0dp^%
·top:顶对齐 /^0Hi4+\
·bottom:底对齐 +;z4.C{gM
·text-top:相对文本顶对齐 d8
ve$X
·text-bottom:相对文本底对齐 Hj;j\R >2
·baseline:基准线对齐 eGLLh_V"
·middle:中心对齐 <
v_ ?}
·sub:以下标的形式显示 2Sb~tTGz79
·super:以上标的形式显示 Dx Vt
'F[Q E9]*
6.文本缩进 K)0 6][,
文本缩进可以使文本在相对默认值较窄的区域里显示,主要用于中文板式的首行缩进,或是为大段的引用文本和备注做成缩进的格式。 mnXaf)"
基本格式如下: 4(YKwY2_L
text-indent: 缩进距离 /{1 xpR
缩进距离取值: /sdkQ{J!.
·带长度单位的数字 R{6.O+j`
·比例关系 T cSj`-
但是需要注意的是,在使用比例关系的时候,有人会认为浏览器默认的比例是相对段落的宽度而言的,其实事实并非如此,整个浏览器的窗口才是浏览器所默认的参照物。 )WEyB~'o
另外,text-indent是块级属性,只能用于< p>、< blockquqte>、< ul>、< h1>~< h6>等标识符里。 z/rN+ ,
"Rs^0iT7>
九.控制颜色和背景的样式 ^#%$?w>wI
控制颜色和背景的样式包括颜色属性、背景颜色、背景图片、背景图片重复、背景图片固定、背景定位六个部分。 kAbT&Rm"
JVTG3:zD
1.颜色属性 6576RT
基本格式如下: %r~TMU2"
color: 参数 Mk[_yqoCO
颜色参数取值范围: F=^vu7rf
·以RGB值表示 mKnkHGM
·以16进制(hex)的色彩值表示 WFN5&7$ W
·以默认颜色的英文名称表示 n2Ycq&O
以默认颜色的英文名称表示无疑是最为方便的,但由于预定义的颜色种类太少,所以更多的网页设计者喜欢用RGB的方式。RGB方式的好处很多,不但可以用数字的形式精确地表示颜色,而且也是很多图像制作软件(如Photoshop)里默认使用的规范,这样一来就为图片和网页更好地结合打下了坚实的基础。 <6n(a)L1
7,jh44(\=
2.背景颜色 94|BSxc
在HTML当中,要为某个对象加上背景色只有一种办法,那就是先做一个表格,在表格中设置完背景色,再把对象放进单元格。这样做比较麻烦,不但代码较多,还要为表格的大小和定位伤些脑筋。现在用CSS就可以轻松地直接搞定了,而且对象的范围很广,可以是一段文字,也可以只是一个单词或一个字母。 rxCuV
基本格式如下: <h7C_^L10\
background-color: 参数 0t*q5pAG".
参数取值和颜色属性一样。 {u46m
2J|Yc^b6
3.背景图片 rmR7^Ycv/
基本格式如下: %qfEFhRC
background-image: url(URL) 4 "wuqr|o
URL就是背景图片的存放路径。如果用“none”来代替背景图片的存放路径,将什么也不显示。 <r3F*S=
D
7H$!(F>
4.背景图片重复 S|!U=&
背景图片重复控制的是背景图片平铺与否,也就是说,结合背景定位的控制可以在网页上的某处单独显示一幅背景图片。 le|e 4f*+
基本格式如下: RpS'Tz}
background-repeat: 参数 }e9:2
参数取值范围: WGVvBX7#
·no-repeat:不重复平铺背景图片 UTmX"Li
·repeat-x:使图片只在水平方向上平铺 Sjj &n S
·repeat-y:使图片只在垂直方向上平铺 't^OIil
如果不指定背景图片重复属性,浏览器默认的是背景图片向水平、垂直两个方向上平铺。 [al$7R&
k9WihejS
5.背景图片固定 MWsBZJRr
背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性,浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时伤害浏览者的视力,所以可以解除背景图片和文字内容的捆绑,该为和浏览器窗口捆绑。 \\x``*
基本格式如下: `Nu3s<O7CF
background-attachment: 参数 K}! VY`
参数取值范围: ] X4A)%i
·fixed:网页滚动时,背景图片相对于浏览器的窗口而言,固定不动 )>$xbo")k
·scroll:网页滚动时,背景图片相对于浏览器的窗口而言,一起滚动 .#J'+LxFr
6.背景定位 A'6>"=ziP
背景定位用于控制背景图片在网页中显示的位置。 *wyaBV?*K
基本格式如下: A^
t[PKM"
background-position: 参数表 Kv!CL9^LX7
参数取值范围: )UZ
's>O
·带长度单位的数字参数 (+bk +0
·top:相对前景对象顶对齐 n>Q/XQXB
·bottom:相对前景对象底对齐 #th^\pV
·left:相对前景对象左对齐 d^WVWk K
·right:相对前景对象右对齐 F
~
/{1Q*
·center:相对前景对象中心对齐 JyYg)f
·比例关系 !1)lGjMW
参数中的center如果用于另外一个参数的前面,表示水平居中;如果用于另外一个参数的后面,表示垂直居中。 AXz'=T}{
HDA!;&NRS
十.控制列表的样式 &d 9tR\}
列表是HTML里一种很有用的显示方式,可以把相关的并列内容整齐地垂直排列,使网页显得整洁专业,并让浏览者有一目了然的感觉。 tX&Dum $
样式表为列表增加了一些功能,控制列表的样式包括列表样式、图形符号、列表位置三个部分。 4wMKl6mL
LYkW2h`JQ
1.列表符号 lJu2}XRiU
列表符号是指显示于每一个列表项目前的符号标识。 x>;!`}x
基本格式如下: VGA?B@
list-style-type:参数 Nx;U]O6A
参数取值范围: @B*?owba>
·disc:圆形 >Ex\j?
·circle:空心圆 O,]t. 1V
·square:方块 l)HF4#Bs
·decimal:十进制数字 >j_,3{eJ
·lower-roman:小写罗马数字 \ d+&&ns
·upper-roman:大写罗马数字 *>9#a0cp
·lower-alpha:小写希腊字母 %{5mkO&,2
·upper-alpha:大写希腊字母 kiZA$:V8
·none:无符号显示 *" >ek k
参数中的disc是默认选项。 4 )*8&
b qEwi[`
2.图形符号 u==bLl=$
图形符号指原来列表的项目符号将可以使用图形来代替。 DU4NPys]y
基本格式如下: ,cYU
list-style-image:URL QOcB ]G
URL是用来代替项目符号的图形文件的地址,可以使用相对地址或绝对地址。 2r,K/'
{Z3B#,V(g
3.列表位置 9L]x9lI;
列表位置描述列表在何处显示。 [>oq~[e)?
基本格式如下: a(NN%'fDD
list-style-position:参数 tB'F`HM:mq
参数取值范围: `<8~tS/. w
·inside:在BOX模型内部显示 k6QQoLb$V
·outside:在BOX模型外部显示 IFH%R>={
这里又出现了一个新的概念:BOX模型。BOX是指一种容器,包含了应用样式规则的对象,具体介绍将在后文中给出。 Ma:xxsH.
IE+$ET>t
十一.控制用户界面的样式 .&TJSIx$
在网页上,鼠标平时呈箭头形,指向链接时成为手形,等待网页下载时成为沙漏形……这似乎是约定俗成的。虽然这样的设计能使我们知道浏览器现在的状态或是可以做什么,但这些好像还不能完全地满足我们的需要。就拿链接来说,可以是指向一个帮助文件,也可以是向前进一页或是向后退一页,针对如此多的功能光靠千篇一律的手形鼠标是不能说明问题的。值得庆幸的是,CSS提供了多达13种的鼠标形状,供我们选择。 ~}i&gd|(
基本格式如下: ;KWR/?ec
cursor:鼠标形状参数 8h78Zb&[
CSS鼠标形状参数表: T""X~+{Z@
CSS代码 SVpvx`&kT
鼠标形状 3YR6@*!f/
style="cursor:hand" KtA0
8?B
手形 fF;Oz"I{\
style="cursor:crosshair" >w9fFm!Q
十字形 Y]0oF_ :7
style="cursor:text" #^"\WG7{
文本形 Bi]`e_(}
style="cursor:wait" ;l[/<J
沙漏形 7,d^?.~S
style="cursor:move" 5^t68
WOl
十字箭头形 /iQ}DbtRb
style="cursor:help" t IdH?x
问号形 P)XkqOGpT9
style="cursor:e-resize" #)AcK|*y
右箭头形 u 3wF)B{
style="cursor:n-resize" $M@SZknm
上箭头形 E%:!* 9
style="cursor:nw-resize" KN'l/9.
左上箭头形 ja$ e)
style="cursor:w-resize" [#fXmW>N/
左箭头形 d7g/s'ZHt6
style="cursor:s-resize" U#gHc:$
下箭头形 72GXgah
style="cursor:se-resize" ;<1O86!
右下箭头形 3/H^YM
@
style="cursor:sw-resize" 9TjAEeU
左下箭头形