第10章用CSS样式进行格式化课件.ppt

1、HTML&XML网页设计网页设计 使用使用CSS可以修改文本的字型、大小、粗可以修改文本的字型、大小、粗细细、倾倾斜、行高、前景和背景斜、行高、前景和背景颜颜色，色，设设置置间间距和距和对对齐齐方式，方式，决决定文本是否增添下定文本是否增添下划线划线、上、上划线划线、删删除除线线或或闪烁闪烁效果，以及是否效果，以及是否将将文本文本转换为转换为全大全大写写、全小、全小写写或小型大或小型大写写字母。可以字母。可以将这将这些修改些修改应应用用于整于整个个文文档档或整或整个个站点。站点。第第10章用章用CSS样样式式进进行格式化行格式化font-family:namename是首选字体的名称是首选字体

2、的名称10.1 选择选择字体系列字体系列h1,h2 font-family:Arial Blackp font-family:Palatino Linotype提示：提示：包含多个单词的字体名称应该包含多个单词的字体名称应该用单引号或双引号包围起来。用单引号或双引号包围起来。可以指定你想要的任何字体，可以指定你想要的任何字体，但是访问者只会看到他们的系统但是访问者只会看到他们的系统上已经安装的字体。上已经安装的字体。可以使用可以使用font属性同时设置字属性同时设置字体系列、字体大小和行高。体系列、字体大小和行高。font-family:name1,name2.namenname1是首选字体得

3、名称是首选字体得名称10.2 指定替代字体指定替代字体h1,h2 font-family:Arial Black,sans-serifp font-family:Palatino Linotype,Palatino,serif提示：提示：浏览器将在字体列表中寻找字浏览器将在字体列表中寻找字体体1，如果访问者的计算机中安装，如果访问者的计算机中安装了这种字体，就使用它；如果没有了这种字体，就使用它；如果没有安装，则移向字体安装，则移向字体2，如果这种字，如果这种字体也没有安装，则移向第体也没有安装，则移向第3种字体种字体，以此类推。若浏览器完全找不到，以此类推。若浏览器完全找不到指定的字体时，则

4、使用默认字体。指定的字体时，则使用默认字体。因此，应该将一种常见的字体列在因此，应该将一种常见的字体列在字体列表的最后。字体列表的最后。可以使用以下这些常见字体名可以使用以下这些常见字体名称作为最后一种替代字体：称作为最后一种替代字体：serif、sans-serif、cusive、fantasy和和monospace。10.2 指定替代字体指定替代字体font-style:normal|italic|oblique10.3 创创建斜体建斜体提示：提示：字体的斜体版本是由字体设计字体的斜体版本是由字体设计者从头创建的，而倾斜版本是由计者从头创建的，而倾斜版本是由计算机动态创建的，仅仅是使字母倾

5、算机动态创建的，仅仅是使字母倾斜了。斜了。如果将字体样式设置为斜体，如果将字体样式设置为斜体，却没有斜体样式可用，浏览器会尝却没有斜体样式可用，浏览器会尝试将字体显示为倾斜的。试将字体显示为倾斜的。(演示演示)倾斜显示倾斜显示obliqueoblique斜体显示斜体显示italicitalic正常显示，初始值为正常显示，初始值为normalnormal。normalnormal说明说明参数值参数值font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900normal:正常正常,等同于等同于 400 bol

6、d:粗体粗体,等同于等同于 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提示：提示：因为在各种字体之间定义字体因为在各种字体之间定义字体粗细的方法不一样，所以预定义字粗细的方法不一样，所以预定义字体粗细的方法不一致。预定义是给体粗细的方法不一致。预定义是给定字体系列内的相对值。定字体系列内的相对值。如果一种字体的粗

7、细少于如果一种字体的粗细少于9种，种，或者这些粗细集中于数值的范围的或者这些粗细集中于数值的范围的一端，那么某些数值可能相对于相一端，那么某些数值可能相对于相同的字体粗细。同的字体粗细。(演示演示)font-size:16px或者使用或者使用关键字指定大小：关键字指定大小：xx-small、x-small、small、medium、large、x-large或或xx-large.10.5 设设置字体大小置字体大小直接指定特定字体大小直接指定特定字体大小提示：提示：不同浏览器对关键字的解释方式不同浏览器对关键字的解释方式不同。不同。IE5.x将将small作为基本大小作为基本大小，而，而IE6、

8、Opera和和Netscape使用使用medium。h1 font-size:1.37emh2 font-size:1emp font-family:Palatino Linotype,Palatino,serif;font-size:87%10.5设设置字体大小置字体大小依依赖赖于父元素于父元素设设置大小置大小提示：提示：如果字体未做任何如果字体未做任何CSS设定或者设定或者元素的设定，默认的字体是元素的设定，默认的字体是12pt，或者或者16px，或者，或者1em 新的大小由父元素的大小与百新的大小由父元素的大小与百分数或分数或em因子的乘积决定。因子的乘积决定。1个个em等于字体的大小。

9、所以等于字体的大小。所以1em相当于相当于100%。还有还有1个个ex单位，它是指父元素单位，它是指父元素的的x高度，但是浏览器对它的支持高度，但是浏览器对它的支持不太好。不太好。也可以使用相对关键字：也可以使用相对关键字：larger或或smallerline-height:normal|数字数字|长度单位长度单位|比比例例10.6 设设置行高置行高。用数字设定行距用数字设定行距 bfont-size:12pt;line-height:2 表示将利用字号来确定行距，将字号乘以设定的参数值，即表示将利用字号来确定行距，将字号乘以设定的参数值，即12X2=24，所以在本例中行高将是，所以在本例中

10、行高将是24点。点。用长度单位设定行距用长度单位设定行距 bline-height:11pt 用比例设定行距用比例设定行距 bfont-size:10pt;line-height:140%表示行距是文字的基准大小表示行距是文字的基准大小10pt的的140%，即，即14pt。注意：注意：1、如果用、如果用数字数字表示行高表示行高：所有子元素都会继承：所有子元素都会继承这个这个因子因子。2、如果用、如果用百分数或百分数或em值值：所有子元素都继承产：所有子元素都继承产生出来的生出来的行高行高。（详见。（详见p158）可以同时设置：可以同时设置：1、font-style设定斜体设定斜体2、font-

11、weight设定文字粗细设定文字粗细3、font-variant设定字母变体设定字母变体4、font-size设定文字大小设定文字大小5、line-height设定行距设定行距6、font-family设定字体设定字体10.7 同同时设时设置所有字体置所有字体值值提示：提示：前前3个属性可以以任何次序指定个属性可以以任何次序指定或省略。如果省略，它们就设置为或省略。如果省略，它们就设置为normal。大小和字体系列属性必需总是大小和字体系列属性必需总是显示地指定：先设置大小，然后设显示地指定：先设置大小，然后设置字体系列。置字体系列。（可选的）行高必需直接出现（可选的）行高必需直接出现在字体大

12、小和斜杠后面。在字体大小和斜杠后面。注意，如果没有使用这些关键词注意，如果没有使用这些关键词，至少要指定，至少要指定字体大小和字体系列字体大小和字体系列。h1,h2 font:1.37em Arial Black,sans-serifp font:87%/170%Palatino Linotype,Palatino,serif行高行高color：colorname|#rrggbb|#rgb|rgb(r,g,b)10.8 设设置置颜颜色色提示：提示：可以使用可以使用color属性修改任何属性修改任何(X)HTML元素的颜色，而不只是元素的颜色，而不只是文本。文本。当十六进制值是由重复的数字当十六

13、进制值是由重复的数字组成时。还可以使用组成时。还可以使用#rgb设置颜色设置颜色。所以，可以将。所以，可以将#FF0099写成写成#F09。（不要在。（不要在(X)HTML中这么做中这么做）（演示演示）h1,h2 font:1.37em Arial Black,sans-serif;color:navyh2 font-size:1emp font:87%/170%Palatino Linotype,Palatino,serif;color:#909.a:link font-weight:bold;color:#74269Dbackground：|10.9 修改文本背景修改文本背景。背景颜色（背

14、景颜色（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（标识为距离左上角的百分数或绝对（标识为距离左上角的百

15、分数或绝对距离）。或者对距离）。或者对x使用使用left、center和和right，对，对y使用使用top、center和和bottomtransparent：是：是background-color的默认属性值的默认属性值意为背景色透明，也就是无背景色；意为背景色透明，也就是无背景色；10.9 修改文本背景修改文本背景不重复不重复no-no-repeatrepeat背景图片纵向重复背景图片纵向重复repeat-yrepeat-y背景图片横向重复背景图片横向重复repeat-xrepeat-x背景图片水平与垂直方向同时平铺背景图片水平与垂直方向同时平铺（默认值）（默认值）repeatrepea

16、t说说 明明参数值参数值bodybackground:url(gradient_glow.jpg)repeat-y fixed left top;Bodybackground-image:url(Peace.jpg);background-repeat:no-repeat;background-position:50%20%;10.9 修改文本背景修改文本背景。提示：提示：可以同时为背景指定颜色和图可以同时为背景指定颜色和图像的像的URL。在图像尚未装在或者。在图像尚未装在或者由于某种原因无法装载的情况下，由于某种原因无法装载的情况下，将使用这个颜色，而且在图像的透将使用这个颜色，而且在图像的

17、透明部分会露出这个颜色。明部分会露出这个颜色。背景和前景之间背景和前景之间应该由足够的应该由足够的对比度对比度，从而让访问者可以轻松地，从而让访问者可以轻松地阅读文本。阅读文本。body background:#eef#toc font-size:75%;background:#EBC6F9指定单词间距：指定单词间距：word-spacing:length指定字母间距：指定字母间距：letter-spacing:length10.10 控制控制间间距距。提示：提示：可以对单词和字母间距使用负可以对单词和字母间距使用负值，但是实际的显示效果取决于浏值，但是实际的显示效果取决于浏览器的功能。览器的

18、功能。单词和字母间距值可能还会受单词和字母间距值可能还会受到所选对齐方式的影响。到所选对齐方式的影响。使用使用normal或或0将单词和字母设将单词和字母设置为默认值（即，不加额外的间距置为默认值（即，不加额外的间距）。）。（演示演示）h1,h2 font:1.37em Arial Black,sans-serif;color:navy;letter-spacing:0.4emtext-indent:length10.11 增加增加缩进缩进提示：提示：正数值会产生典型的段落缩进正数值会产生典型的段落缩进，可以在视觉上向访问者提示新段，可以在视觉上向访问者提示新段落开始的地方。落开始的地方。负数

19、值会产生悬挂缩进。对于负数值会产生悬挂缩进。对于悬挂缩进，可能需要增加文本框周悬挂缩进，可能需要增加文本框周围的填充或外边距，从而容纳突出围的填充或外边距，从而容纳突出到外边的文本。到外边的文本。使用使用0值取消继承的缩进。值取消继承的缩进。（演示演示）p font:87%/170%Palatino Linotype,Palatino,serif;color:#909;text-indent:1.5emwhite-space:pre|nowarp|normal pre让浏览器显示文本中原有的空白让浏览器显示文本中原有的空白和回车；和回车；nowarp使所有空白成为非断使所有空白成为非断裂点裂点

20、10.12 设设置空白置空白属属性性提示：提示：属性值属性值pre得名于得名于pre标记，但标记，但不影响元素的字体。不影响元素的字体。在具有在具有white-space:nowrap样样式的元素中，可以使用式的元素中，可以使用br标记进行标记进行手工换行。手工换行。IE6之前的版本不支持之前的版本不支持white-spac属性的属性的pre值。值。（演示演示）#toc font-size:75%;background:#EBC6F9;white-space:nowraptext-align:left|right|center|justify10.13 对齐对齐文本文本提示：提示：text-a

21、lign属性只能应用于块级元属性只能应用于块级元素。素。h1,h2 font:1.37em Arial Black,sans-serif;color:navy;letter-spacing:0.4em;text-align:centerh2 font-size:1emp font:87%/170%Palatino Linotype,Palatino,serif;color:#909;text-indent:1.5em;text-align:justifytext-transform:uppercase|lowercase|capitalize|none10.14 修改文本大小修改文本大小写写h

22、1 text-transform:uppercase字母以正常形式显示。字母以正常形式显示。nonenone词首字母大写。词首字母大写。capitalizecapitalize使所有字母小写显示。使所有字母小写显示。lowercaselowercase使所有字母大写显示。使所有字母大写显示。uppercaseuppercase说明说明参数值参数值使用小型大写字母使用小型大写字母font-variant:small-caps取消小型大写字母取消小型大写字母font-variant:none10.15 使用小型大使用小型大写写字母字母提示：提示：与简单地缩小尺寸的大写字母与简单地缩小尺寸的大写字母

23、相比，小型大写字母显得轻巧相比，小型大写字母显得轻巧。并非所有字体都有对应的小并非所有字体都有对应的小型大写字母设计。如果浏览器型大写字母设计。如果浏览器没有找到这种设计，那么有几没有找到这种设计，那么有几种选择：种选择：1.它可以简单地缩小大写字母的大它可以简单地缩小大写字母的大小来模拟小型大写字母（这会小来模拟小型大写字母（这会使它们显得有点儿矮胖）。使它们显得有点儿矮胖）。2.也可以完全忽略小型大写字母设也可以完全忽略小型大写字母设置置,将文本显示为全大写。将文本显示为全大写。在理论上还可以选择列表的下在理论上还可以选择列表的下一个字体，查看它是否有小型一个字体，查看它是否有小型大写字母

24、（但是在现实中作者大写字母（但是在现实中作者没有见过这么处理）。没有见过这么处理）。（演示演示）许多字体有对应的小型大写字母许多字体有对应的小型大写字母变体，其中的字母是大写的，但变体，其中的字母是大写的，但是缩小到小写字母的大小。是缩小到小写字母的大小。10.16 装装饰饰文本文本提示：提示：IE一直不支持一直不支持blink值，但是值，但是Firefox和和Opera支持它。支持它。（演示演示）text-decoration:underline|overline|line-throungh|blink|none使得上述效果那不会发生使得上述效果那不会发生nonenone文字在闪烁文字在闪烁blinkblink给文字加删除线给文字加删除线line-throunghline-throungh给文字加上划线给文字加上划线overlineoverline给文字加下划线给文字加下划线underlineunderline说明说明参数值参数值HTML&XML网页设计Thank You!Standing on Shoulders of GiantsE-mail:LOGO