1、HTML&XML网页设计,使用CSS可以修改文本的字型、大小、粗细、倾斜、行高、前景和背景颜色，设置间距和对齐方式，决定文本是否增添下划线、上划线、删除线或闪烁效果，以及是否将文本转换为全大写、全小写或小型大写字母。可以将这些修改应用于整个文档或整个站点。,第10章用CSS样式进行格式化,font-family: name name是首选字体的名称,10.1 选择字体系列,h1, h2 font-family: “Arial Black“ p font-family: “Palatino Linotype“,提示：包含多个单词的字体名称应该用单引号或双引号包围起来。可以指定你想要的任何字体，但
2、是访问者只会看到他们的系统上已经安装的字体。可以使用font属性同时设置字体系列、字体大小和行高。,font-family: name1,name2.namen name1是首选字体得名称,10.2 指定替代字体,h1, h2 font-family: “Arial Black“, sans-serif p font-family: “Palatino Linotype“, “Palatino“, serif,提示：浏览器将在字体列表中寻找字体1，如果访问者的计算机中安装了这种字体，就使用它；如果没有安装，则移向字体2，如果这种字体也没有安装，则移向第3种字体，以此类推。若浏览器完全找不到指定
3、的字体时，则使用默认字体。因此，应该将一种常见的字体列在字体列表的最后。可以使用以下这些常见字体名称作为最后一种替代字体：serif、sans-serif、cusive、fantasy和monospace。,10.2 指定替代字体,10.3 创建斜体,提示：字体的斜体版本是由字体设计者从头创建的，而倾斜版本是由计算机动态创建的，仅仅是使字母倾斜了。如果将字体样式设置为斜体，却没有斜体样式可用，浏览器会尝试将字体显示为倾斜的。(演示),font-weight:normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600
4、| 700 | 800 | 900 normal:正常,等同于 400 bold:粗体,等同于 700 bolder:更粗 lighter:更细 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900:字体粗细的值 inherit:继承,10.4 应用粗体格式,h1, h2 font-family: “Arial Black“, sans-serif; font-weight:bold,提示：因为在各种字体之间定义字体粗细的方法不一样，所以预定义字体粗细的方法不一致。预定义是给定字体系列内的相对值。如果一种字体的粗细少于9种，或者这些粗细集中于数
5、值的范围的一端，那么某些数值可能相对于相同的字体粗细。 (演示),font-size:16px 或者使用关键字指定大小：xx-small、x-small、small、medium、large、x-large或xx-large.,10.5 设置字体大小,提示：不同浏览器对关键字的解释方式不同。IE5.x将small作为基本大小，而IE6、Opera和Netscape使用medium。,h1 font-size: 1.37em h2 font-size: 1emp font-family: “Palatino Linotype“, Palatino, serif; font-size: 87% ,
6、10.5设置字体大小,提示：如果字体未做任何CSS设定或者元素的设定，默认的字体是12pt，或者16px，或者1em新的大小由父元素的大小与百分数或em因子的乘积决定。1个em等于字体的大小。所以1em相当于100%。还有1个ex单位，它是指父元素的x高度，但是浏览器对它的支持不太好。,也可以使用相对关键字：larger或smaller,line-height:normal|数字|长度单位|比例,10.6 设置行高,用数字设定行距bfont-size:12pt;line-height:2表示将利用字号来确定行距，将字号乘以设定的参数值，即12X2=24，所以在本例中行高将是24点。用长度单位设
7、定行距bline-height:11pt用比例设定行距bfont-size:10pt; line-height:140% 表示行距是文字的基准大小10pt的140%，即14pt。,注意： 1、如果用数字表示行高：所有子元素都会继承这个因子。2、如果用百分数或em值：所有子元素都继承产生出来的行高。（详见p158）,可以同时设置： 1、font-style设定斜体 2、font-weight设定文字粗细 3、font-variant设定字母变体 4、font-size设定文字大小 5、line-height设定行距 6、font-family设定字体,10.7 同时设置所有字体值,提示：前3个属
8、性可以以任何次序指定或省略。如果省略，它们就设置为normal。大小和字体系列属性必需总是显示地指定：先设置大小，然后设置字体系列。（可选的）行高必需直接出现在字体大小和斜杠后面。注意，如果没有使用这些关键词，至少要指定字体大小和字体系列。,h1, h2 font: 1.37em “Arial Black“, sans-serif p font: 87%/170% “Palatino Linotype“, Palatino, serif,行高,color：colorname | #rrggbb | #rgb | rgb(r,g,b),10.8 设置颜色,提示：可以使用color属性修改任何(X
9、)HTML元素的颜色，而不只是文本。当十六进制值是由重复的数字组成时。还可以使用#rgb设置颜色。所以，可以将#FF0099写成#F09。（不要在(X)HTML中这么做 ）（演示）,h1, h2 font: 1.37em “Arial Black“, sans-serif; color: navy h2 font-size: 1em p font: 87%/170% “Palatino Linotype“, Palatino, serif; color:#909 . a:link font-weight:bold; color:#74269D,background：|,10.9 修改文本背景,
10、背景颜色（ background-color ）：transparent或color 背景图片（ background-image ）：url(image.gif) 背景重复（background-repeat）：repeat、repeat-x、repeat-y、或no-repeat 背景附件（ background-attachment ）：fixed或scroll（决定背景是否应该随 画布一起滚动） 背景位置（background-position）：x y（标识为距离左上角的百分数或绝对距离）。或者对x使用left、center和right，对y使用top、center和bottom,t
11、ransparent ：是background-color的默认属性值 意为背景色透明，也就是无背景色；,10.9 修改文本背景,body background:url(gradient_glow.jpg) repeat-y fixed left top; Body background-image: url(Peace.jpg); background-repeat: no-repeat; background-position: 50% 20%; ,10.9 修改文本背景,提示：可以同时为背景指定颜色和图像的URL。在图像尚未装在或者由于某种原因无法装载的情况下，将使用这个颜色，而且在图像
12、的透明部分会露出这个颜色。背景和前景之间应该由足够的对比度，从而让访问者可以轻松地阅读文本。,body background:#eef#toc font-size: 75%; background:#EBC6F9,指定单词间距： word-spacing: length指定字母间距： letter-spacing: length,10.10 控制间距,提示：可以对单词和字母间距使用负值，但是实际的显示效果取决于浏览器的功能。单词和字母间距值可能还会受到所选对齐方式的影响。使用normal或0将单词和字母设置为默认值（即，不加额外的间距）。（演示）,h1, h2 font: 1.37em “Ar
13、ial Black“, sans-serif;color: navy;letter-spacing:0.4em,text-indent: length,10.11 增加缩进,提示：正数值会产生典型的段落缩进，可以在视觉上向访问者提示新段落开始的地方。负数值会产生悬挂缩进。对于悬挂缩进，可能需要增加文本框周围的填充或外边距，从而容纳突出到外边的文本。使用0值取消继承的缩进。 （演示）,p font: 87%/170% “Palatino Linotype“, Palatino, serif; color:#909; text-indent:1.5em,white-space: pre | now
14、arp | normalpre让浏览器显示文本中原有的空白和回车；nowarp使所有空白成为非断裂点,10.12 设置空白属性,提示：属性值pre得名于pre标记，但不影响元素的字体。在具有white-space:nowrap样式的元素中，可以使用br标记进行手工换行。IE6之前的版本不支持white-spac属性的pre值。（演示）,#toc font-size: 75%;background:#EBC6F9;white-space:nowrap,text-align: left | right | center | justify,10.13 对齐文本,提示：text-align属性只能应
15、用于块级元素。,h1, h2 font: 1.37em “Arial Black“, sans-serif;color: navy; letter-spacing:0.4em; text-align: center h2 font-size: 1emp font: 87%/170% “Palatino Linotype“, Palatino, serif; color:#909; text-indent:1.5em; text-align: justify,text-transform:uppercase | lowercase | capitalize | none,10.14 修改文本大小
16、写,h1 text-transform:uppercase,使用小型大写字母 font-variant: small-caps取消小型大写字母 font-variant: none,10.15 使用小型大写字母,提示：与简单地缩小尺寸的大写字母相比，小型大写字母显得轻巧。并非所有字体都有对应的小型大写字母设计。如果浏览器没有找到这种设计，那么有几种选择： 1. 它可以简单地缩小大写字母的大小来模拟小型大写字母（这会使它们显得有点儿矮胖）。 2. 也可以完全忽略小型大写字母设置,将文本显示为全大写。 在理论上还可以选择列表的下一个字体，查看它是否有小型大写字母（但是在现实中作者没有见过这么处理）。 （演示）,许多字体有对应的小型大写字母变体，其中的字母是大写的，但是缩小到小写字母的大小。,10.16 装饰文本,提示：IE一直不支持blink值，但是Firefox和Opera支持它。 （演示）,text-decoration: underline | overline | line-throungh | blink | none,HTML&XML网页设计,Thank You!,Standing on Shoulders of Giants,E-mail:,LOGO,
