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

《第10章用CSS样式进行格式化.ppt》由会员分享，可在线阅读，更多相关《第10章用CSS样式进行格式化.ppt（23页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

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

3、体大小和行高。your family siteyour site hereLOGOfont-family:name1,name2.namenname1是首选字体得名称是首选字体得名称10.2 指定替代字体指定替代字体h1,h2 font-family:Arial Black,sans-serifp font-family:Palatino Linotype,Palatino,serif提示：提示：浏览器将在字体列表中寻找字浏览器将在字体列表中寻找字体体1，如果访问者的计算机中安装，如果访问者的计算机中安装了这种字体，就使用它；如果没有了这种字体，就使用它；如果没有安装，则移向字体安装，则移向字

4、体2，如果这种字，如果这种字体也没有安装，则移向第体也没有安装，则移向第3种字体，种字体，以此类推。若浏览器完全找不到指以此类推。若浏览器完全找不到指定的字体时，则使用默认字体。因定的字体时，则使用默认字体。因此，应该将一种常见的字体列在字此，应该将一种常见的字体列在字体列表的最后。体列表的最后。可以使用以下这些常见字体名称可以使用以下这些常见字体名称作为最后一种替代字体：作为最后一种替代字体：serif、sans-serif、cusive、fantasy和和monospace。your family siteyour site hereLOGO10.2 指定替代字体指定替代字体your fa

5、mily siteyour site hereLOGOfont-style:normal|italic|oblique10.3 创建斜体建斜体提示：提示：字体的斜体版本是由字体设计字体的斜体版本是由字体设计者从头创建的，而倾斜版本是由计者从头创建的，而倾斜版本是由计算机动态创建的，仅仅是使字母倾算机动态创建的，仅仅是使字母倾斜了。斜了。如果将字体样式设置为斜体，却如果将字体样式设置为斜体，却没有斜体样式可用，浏览器会尝试没有斜体样式可用，浏览器会尝试将字体显示为倾斜的。将字体显示为倾斜的。(演示演示)倾斜显示倾斜显示obliqueoblique斜体显示斜体显示italicitalic正常显示，

6、初始值为正常显示，初始值为normalnormal。normalnormal说明说明参数值参数值your family siteyour site hereLOGOfont-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900normal:正常正常,等同于等同于 400 bold:粗体粗体,等同于等同于 700 bolder:更粗更粗 lighter:更细更细 100|200|300|400|500|600|700|800|900:字体粗细的值字体粗细的值 inherit:继承继承10.4 应用粗体格式用粗体

7、格式h1,h2 font-family:Arial Black,sans-serif;font-weight:bold提示：提示：因为在各种字体之间定义字体粗因为在各种字体之间定义字体粗细的方法不一样，所以预定义字体细的方法不一样，所以预定义字体粗细的方法不一致。预定义是给定粗细的方法不一致。预定义是给定字体系列内的相对值。字体系列内的相对值。如果一种字体的粗细少于如果一种字体的粗细少于9种，种，或者这些粗细集中于数值的范围的或者这些粗细集中于数值的范围的一端，那么某些数值可能相对于相一端，那么某些数值可能相对于相同的字体粗细。同的字体粗细。(演示演示)your family siteyour

8、 site hereLOGOfont-size:16px或者使用或者使用关键字指定大小：关键字指定大小：xx-small、x-small、small、medium、large、x-large或或xx-large.10.5 设置字体大小置字体大小直接指定特定字体大小直接指定特定字体大小直接指定特定字体大小直接指定特定字体大小提示：提示：不同浏览器对关键字的解释方式不同浏览器对关键字的解释方式不同。不同。IE5.x将将small作为基本大小，作为基本大小，而而IE6、Opera和和Netscape使用使用medium。your family siteyour site hereLOGOh1 fon

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

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

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

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

13、小，然后设置字体系列。置字体系列。（可选的）行高必需直接出现（可选的）行高必需直接出现在字体大小和斜杠后面。在字体大小和斜杠后面。注意，如果没有使用这些关键词，注意，如果没有使用这些关键词，至少要指定至少要指定字体大小和字体系列。字体大小和字体系列。h1,h2 font:1.37em Arial Black,sans-serifp font:87%/170%Palatino Linotype,Palatino,serif行高行高your family siteyour site hereLOGOcolor：colorname|#rrggbb|#rgb|rgb(r,g,b)10.8 设置置颜色色

14、提示：提示：可以使用可以使用color属性修改任何属性修改任何(X)HTML元素的颜色，而不只是元素的颜色，而不只是文本。文本。当十六进制值是由重复的数字当十六进制值是由重复的数字组成时。还可以使用组成时。还可以使用#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

15、:#909.a:link font-weight:bold;color:#74269Dyour family siteyour site hereLOGObackground：|10.9 修改文本背景修改文本背景。背景颜色（背景颜色（background-color）：）：transparent或或color背景图片（背景图片（background-image）：）：url(image.gif)背景重复（背景重复（background-repeat）：）：repeat、repeat-x、repeat-y、或、或no-repeat背景附件（背景附件（background-attachment）：

16、）：fixed或或scroll（决定背景是否应该随（决定背景是否应该随 画布一起滚动）画布一起滚动）背景位置（背景位置（background-position）：）：x y（标识为距离左上角的百分数或绝对（标识为距离左上角的百分数或绝对距离）。或者对距离）。或者对x使用使用left、center和和right，对，对y使用使用top、center和和bottomtransparent：是：是background-color的默认属性值的默认属性值意为背景色透明，也就是无背景色；意为背景色透明，也就是无背景色；your family siteyour site hereLOGO10.9 修改文本

17、背景修改文本背景不重复不重复no-no-repeatrepeat背景图片纵向重复背景图片纵向重复repeat-yrepeat-y背景图片横向重复背景图片横向重复repeat-xrepeat-x背景图片水平与垂直方向同时平铺背景图片水平与垂直方向同时平铺（默认值）（默认值）repeatrepeat说说 明明参数值参数值bodybackground:url(gradient_glow.jpg)repeat-y fixed left top;Bodybackground-image:url(Peace.jpg);background-repeat:no-repeat;background-posit

18、ion:50%20%;your family siteyour site hereLOGO10.9 修改文本背景修改文本背景。提示：提示：可以同时为背景指定颜色和图可以同时为背景指定颜色和图像的像的URL。在图像尚未装在或者由。在图像尚未装在或者由于某种原因无法装载的情况下，将于某种原因无法装载的情况下，将使用这个颜色，而且在图像的透明使用这个颜色，而且在图像的透明部分会露出这个颜色。部分会露出这个颜色。背景和前景之间背景和前景之间应该由足够的应该由足够的对比度对比度，从而让访问者可以轻松地，从而让访问者可以轻松地阅读文本。阅读文本。body background:#eef#toc font-

19、size:75%;background:#EBC6F9your family siteyour site hereLOGO指定单词间距：指定单词间距：word-spacing:length指定字母间距：指定字母间距：letter-spacing:length10.10 控制控制间距距。提示：提示：可以对单词和字母间距使用负可以对单词和字母间距使用负值，但是实际的显示效果取决于浏值，但是实际的显示效果取决于浏览器的功能。览器的功能。单词和字母间距值可能还会受单词和字母间距值可能还会受到所选对齐方式的影响。到所选对齐方式的影响。使用使用normal或或0将单词和字母设将单词和字母设置为默认值（即，

20、不加额外的间距）置为默认值（即，不加额外的间距）。（演示演示）h1,h2 font:1.37em Arial Black,sans-serif;color:navy;letter-spacing:0.4emyour family siteyour site hereLOGOtext-indent:length10.11 增加增加缩进提示：提示：正数值会产生典型的段落缩进，正数值会产生典型的段落缩进，可以在视觉上向访问者提示新段落可以在视觉上向访问者提示新段落开始的地方。开始的地方。负数值会产生悬挂缩进。对于负数值会产生悬挂缩进。对于悬挂缩进，可能需要增加文本框周悬挂缩进，可能需要增加文本框周围

21、的填充或外边距，从而容纳突出围的填充或外边距，从而容纳突出到外边的文本。到外边的文本。使用使用0值取消继承的缩进。值取消继承的缩进。（演示演示）p font:87%/170%Palatino Linotype,Palatino,serif;color:#909;text-indent:1.5emyour family siteyour site hereLOGOwhite-space:pre|nowarp|normal pre让浏览器显示文本中原有的空白让浏览器显示文本中原有的空白和回车；和回车；nowarp使所有空白成为非断使所有空白成为非断裂点裂点10.12 设置空白置空白属属性性提示：提

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

23、：提示：text-align属性只能应用于块级元属性只能应用于块级元素。素。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:justifyyour family siteyour site hereLOGOtext-transform:uppercase|lo

24、wercase|capitalize|none10.14 修改文本大小修改文本大小写写h1 text-transform:uppercase字母以正常形式显示。字母以正常形式显示。nonenone词首字母大写。词首字母大写。capitalizecapitalize使所有字母小写显示。使所有字母小写显示。lowercaselowercase使所有字母大写显示。使所有字母大写显示。uppercaseuppercase说明说明参数值参数值your family siteyour site hereLOGO使用小型大写字母使用小型大写字母font-variant:small-caps取消小型大写字母取

25、消小型大写字母font-variant:none10.15 使用小型大使用小型大写写字母字母提示：提示：与简单地缩小尺寸的大写字母与简单地缩小尺寸的大写字母相比，小型大写字母显得轻巧。相比，小型大写字母显得轻巧。并非所有字体都有对应的小并非所有字体都有对应的小型大写字母设计。如果浏览器型大写字母设计。如果浏览器没有找到这种设计，那么有几没有找到这种设计，那么有几种选择：种选择：1.它可以简单地缩小大写字母的大它可以简单地缩小大写字母的大小来模拟小型大写字母（这会小来模拟小型大写字母（这会使它们显得有点儿矮胖）。使它们显得有点儿矮胖）。2.也可以完全忽略小型大写字母设也可以完全忽略小型大写字母设

26、置置,将文本显示为全大写。将文本显示为全大写。3.在理论上还可以选择列表的下在理论上还可以选择列表的下一个字体，查看它是否有小型一个字体，查看它是否有小型大写字母（但是在现实中作者大写字母（但是在现实中作者没有见过这么处理）。没有见过这么处理）。（演示演示）许多字体有对应的小型大写字母许多字体有对应的小型大写字母变体，其中的字母是大写的，但变体，其中的字母是大写的，但是缩小到小写字母的大小。是缩小到小写字母的大小。your family siteyour site hereLOGO10.16 装装饰文本文本提示：提示：IE一直不支持一直不支持blink值，但是值，但是Firefox和和Oper

27、a支持它。支持它。（演示演示）text-decoration:underline|overline|line-throungh|blink|none使得上述效果那不会发生使得上述效果那不会发生nonenone文字在闪烁文字在闪烁blinkblink给文字加删除线给文字加删除线line-line-throunghthroungh给文字加上划线给文字加上划线overlineoverline给文字加下划线给文字加下划线underlineunderline说明说明参数值参数值your family siteyour site hereLOGOHTML&XML网页设计Thank You!Standing on Shoulders of GiantsE-mail:LOGO