用CSS设置文本和图像样式.ppt

《用CSS设置文本和图像样式.ppt》由会员分享，可在线阅读，更多相关《用CSS设置文本和图像样式.ppt（53页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第 6 章用章用CSS设置文本和图像样式设置文本和图像样式聊城大学传媒技术学院聊城大学传媒技术学院 王丽萍王丽萍 本章内容对文字应用样式对文字应用样式 6.1对段落应用样式对段落应用样式 6.2对列表应用样式对列表应用样式 6.3对链接应用样式对链接应用样式 6.4对图像应用样式对图像应用样式 6.5对文字应用样式对文字应用样式6.16.1.1 文字的属性属性属性描述描述可用值可用值font-family字体字体值值font-size字号字号值值font-weight加粗加粗normal,bold（粗体）（粗体）,bolder（特粗）（特粗）,lighter（细体）（细体）font-styl

2、e样式样式normal,italic（斜体）（斜体）,oblique（倾斜）（倾斜）font-variant变形变形normal,small-caps（小型的大写字母）（小型的大写字母）line-height行高行高值值text-transform转换转换none,capitalize（首字母大写）（首字母大写）,uppercase（大写）（大写）,lowercase（小写）（小写）color颜色颜色值值text-decoration装饰装饰none,blink（闪烁）（闪烁）,underline（下划线）（下划线）,line-through（穿越线）（穿越线）,overline（上划线）（上

3、划线）6.1.2 设置文字属性6.1.2 设置文字属性body font-family:Arial,Helvetica,sans-serif;font-size:0.75em;font-weight:bold;font-style:italic;font-variant:small-caps;line-height:1.5;text-transform:uppercase;color:#FF0000;text-decoration:underline;6.1.3 文字属性缩写 font:font-style|font-variant|font-weight|font-size|line-hei

4、ght|font-family例如：例如：body font:italic small-caps bold 0.75em/1.5 Arial,Helvetica,sans-serif;6.1.3 文字属性缩写 font:font-style|font-variant|font-weight|font-size|line-height|font-familybody font:0.75em;注意注意，可以省略，可以省略 font 属性中的一个或多个属性值，如果省略，该属属性中的一个或多个属性值，如果省略，该属性值将使用浏览器的默认值。但至少要定义性值将使用浏览器的默认值。但至少要定义 font-

5、size 和和 font-family两个值。两个值。请判断下面的写法是否正确。请判断下面的写法是否正确。body font-size:0.75em;6.1.3 文字属性缩写 font:font-style|font-variant|font-weight|font-size|line-height|font-familybody font:“宋体宋体”;请判断下面的写法是否正确。请判断下面的写法是否正确。body font-family:“宋体宋体”;注意注意，可以省略，可以省略 font 属性中的一个或多个属性值，如果省略，该属属性中的一个或多个属性值，如果省略，该属性值将使用浏览器的默认

6、值。但至少要定义性值将使用浏览器的默认值。但至少要定义 font-size 和和 font-family两个值。两个值。6.1.3 文字属性缩写 font:font-style|font-variant|font-weight|font-size|line-height|font-familybody font:0.75em Arial,Helvetica,sans-serif;请判断下面的写法是否正确。请判断下面的写法是否正确。注意注意，可以省略，可以省略 font 属性中的一个或多个属性值，如果省略，该属属性中的一个或多个属性值，如果省略，该属性值将使用浏览器的默认值。但至少要定义性值将使

7、用浏览器的默认值。但至少要定义 font-size 和和 font-family两个值。两个值。6.1.4 字体设置技巧v中文网页使用中文网页使用“宋体宋体”。v当字体名称中有空格，或由汉字组成时，要使用引号包围当字体名称中有空格，或由汉字组成时，要使用引号包围该名称。例如：该名称。例如：font-family:“宋体宋体”;font-family:“Times New Roman”,Times,serif;v提供首选字体、备用字体和普通字体。例如：提供首选字体、备用字体和普通字体。例如：font-family:Verdana,Arial,Helvetica,sans-serif;常用的英文普

8、通字体包括：常用的英文普通字体包括：serif、sans-serif、monospace。6.1.4 字体设置技巧（续）v常用的英文普通字体常用的英文普通字体serif 成比例、有衬线的字体，例如：成比例、有衬线的字体，例如：GeorgiaTimes New RomanTimessans-serif 成比例、无衬线的字体，例如：成比例、无衬线的字体，例如：VerdanaArialHelveticamonospace 等宽的字体，例如：等宽的字体，例如：Courier NewCourierv不应以像素为单位设置字号。因为如果以像素为单位设置不应以像素为单位设置字号。因为如果以像素为单位设置字号，

9、那么使用字号，那么使用 IE 浏览器的用户就无法通过菜单命令改浏览器的用户就无法通过菜单命令改变文字的大小。变文字的大小。v以一个实际站点为例：以一个实际站点为例：。6.1.5 字号设置技巧body font-size:12px;6.1.5 字号设置技巧（续）v为了保证网页文字的大小可调节，应该使用为了保证网页文字的大小可调节，应该使用 em 为单位设为单位设置字号。置字号。v默认情况下默认情况下 1em=16px，则，则 0.75em=12px。body font-size:0.75em;6.1.5 字号设置技巧（续）vfont-size 属性具有继承性，当多层嵌套定义时应谨慎。属性具有继承

10、性，当多层嵌套定义时应谨慎。v例如，在下面的例如，在下面的 CSS 定义中，定义中，h2 元素和元素和 p 元素到底有多元素到底有多大呢？大呢？body font-size:0.75em;h2 font-size:1em;p font-size:0.75em;12px12px9px6.1.5 字号设置技巧（续）v制作网页时，应利用好制作网页时，应利用好 font-size 属性的继承性，避免字号属性的继承性，避免字号的重复定义。的重复定义。v如果需要对如果需要对 h1、h2 等元素的大小进行定义，最好使用百等元素的大小进行定义，最好使用百分比为单位。例如：分比为单位。例如：body font-

11、size:0.75em;h1 font-size:150%;h2 font-size:130%;对段落应用样式对段落应用样式 6.26.2.1 段落的属性属性属性描述描述可用值可用值word-spacing单词间距单词间距normal,值值 *对中文无效对中文无效letter-spacing字母间距字母间距normal,值值 *对中文有效对中文有效vertical-align垂直对齐垂直对齐baseline（基线）（基线）,sub（下标）（下标）,super（上标）（上标）,top（顶部）（顶部）,text-top（文本顶部）（文本顶部）,middle（中线）（中线）,bottom（底部）（底

12、部）,text-bottom（文本底部）（文本底部）text-align水平对齐水平对齐left,right,center,justify（两端对齐）（两端对齐）text-indent首行缩进首行缩进值值white-space空格空格normal,pre（保留空格）（保留空格）,nowrap（不换行）（不换行）display显示方式显示方式none（不显示），（不显示），inline（显示为行内元素），（显示为行内元素），block（显示为块元素）（显示为块元素）6.2.2 设置段落属性6.2.2 设置段落属性p word-spacing:1em;letter-spacing:0.5em;te

13、xt-align:left;text-indent:2em;white-space:nowrap;6.2.3 vertical-align 属性vvertical-align 属性只对行内元素有效。行内元素包括文字、属性只对行内元素有效。行内元素包括文字、图片、表单元素等。图片、表单元素等。v语法：语法：vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom6.2.3 vertical-align 属性v（1）设置行内）设置行内 与文字的垂直对齐方式。例：与文字的垂直对齐方式。例：.middle vert

14、ical-align:middle;紫楠花园位于河东区紫楠花园位于河东区6.2.3 vertical-align 属性v（1）设置行内）设置行内 与文字的垂直对齐方式。例：与文字的垂直对齐方式。例：.top vertical-align:top;紫楠花园位于河东区紫楠花园位于河东区6.2.3 vertical-align 属性v（2）设置）设置、中文字的垂直对齐方式。中文字的垂直对齐方式。斯凯瑞故事集斯凯瑞故事集 26.80 故事集的内容十分丰富，故事集的内容十分丰富，.top vertical-align:top;6.2.3 vertical-align 属性v（2）设置）设置、中文字的垂直

15、对齐方式。中文字的垂直对齐方式。斯凯瑞故事集斯凯瑞故事集 26.80 故事集的内容十分丰富，故事集的内容十分丰富，.top vertical-align:top;6.2.3 vertical-align 属性v（3）设置文字的上标、下标。）设置文字的上标、下标。H2O110-13.sub vertical-align:sub;font-size:50%;.super vertical-align:super;font-size:50%;对列表应用样式对列表应用样式6.36.3.1 列表的类型v项目列表项目列表 北京北京 上海上海 v 编号列表编号列表 北京北京 上海上海 6.3.2 列表的属性

16、属性属性描述描述可用值可用值list-style-type项目符号的样式项目符号的样式nonedisc（圆点，默认值）（圆点，默认值）circle（圆圈）（圆圈）square（方块）（方块）decimal（数字）（数字）lower-roman（小写罗马数字）（小写罗马数字）upper-roman（大写罗马数字）（大写罗马数字）lower-alpha（小写字母）（小写字母）upper-alpha（大写字母）（大写字母）list-style-image项目符号的图像项目符号的图像none,值值list-style-position项目符号的位置项目符号的位置outside（外，默认值）（外，默认值

17、）,inside（内）（内）6.3.3 设置列表属性6.3.3 设置列表属性ul width:200px;list-style-type:disc;list-style-position:outside;6.3.3 设置列表属性（续）ul width:200px;list-style-type:circle;list-style-position:inside;6.3.3 设置列表属性（续）ul width:200px;list-style-image:url(images/bullet.gif);6.3.4 列表属性缩写 list-style:list-style-type|list-sty

18、le-position|list-style-image例如：例如：ol list-style:lower-alpha inside;ul list-style:none;6.3.5 列表在不同浏览器中的差异vIE 默认设置默认设置 具有具有 margin-left 值。值。vFF 默认设置默认设置 具有具有 padding-left 值。值。v项目符号的大小与位置也不同。项目符号的大小与位置也不同。ul background-color:#66CCFF;6.3.6 让列表在不同的浏览器中 表现一致ul margin:0px;padding:0px;list-style:none;6.3.7

19、用背景图像替代项目符号v设置了设置了 list-style:none 后，可以利用背景图像替代项目符号。后，可以利用背景图像替代项目符号。ul margin:0px;padding:0px;list-style:none;li background:url(images/bullet.gif)no-repeat left top;padding-left:20px;对链接应用样式对链接应用样式6.46.4.1 简单的链接样式a color:#000000;v 上面的样式设置网页上超链接的全部状态都为黑色。上面的样式设置网页上超链接的全部状态都为黑色。6.4.2 使用伪类选择器找到 链接的不同状

20、态a:link,a:visited color:#000000;text-decoration:none;a:hover,a:active color:#FF0000;text-decoration:underline;v注意：要按照注意：要按照 a:link,a:visited,a:hover,a:active 的顺序为的顺序为链接应用样式。链接应用样式。6.4.3 使用后代选择器找到 特定区域中的链接a color:#002B5E;text-decoration:none;a:hover color:#FF0000;#navigation a color:#FFFFFF;#navigati

21、on a:hover color:#FF0000;a.button color:#000000;text-decoration:none;background-color:#94b8e9;border:1px solid#000000;width:90px;height:30px;display:block;text-align:center;line-height:30px;a:hover.button color:#FFFFFF;background-color:#336699;6.4.4 让链接看起来像按钮之一：使用背景颜色a.button color:#000000;text-deco

22、ration:none;width:200px;height:40px;background:#94b8e9 url(images/button.gif)no-repeat left top;display:block;line-height:40px;padding-left:50px;a:hover.button color:#FFFFFF;background:#336699 url(images/button-hover.gif)no-repeat left top;150px;6.4.5 让链接看起来像按钮之二：使用背景图像a.button color:#000000;text-de

23、coration:none;display:block;width:150px;height:40px;line-height:40px;background:#94b8e9 url(images/pixy-rollover.gif)no-repeat left top;padding-left:50px;a:hover.button color:#FFFFFF;background:#336699 right top;background-color:#336699;background-position:right top;6.4.6 让链接看起来像按钮之三：Pixy 方法，消除闪烁对图像

24、应用样式对图像应用样式 6.56.5.1 网页中的图像格式vGIF无损压缩；无损压缩；8 位色深（位色深（256色）；支持透明；支持动画。色）；支持透明；支持动画。vJPG有损压缩；有损压缩；24 位色深（位色深（1680万色）。万色）。vPNG无损压缩；具有无损压缩；具有 8 位、位、24 位和位和 32 位（位（1680万色万色+Alpha通道）三通道）三种色深；支持透明和半透明。种色深；支持透明和半透明。6.5.2 网页中的图像分类v有意义的图像有意义的图像网站网站LOGO新闻图片新闻图片商品图片商品图片广告图片广告图片v装饰性图像装饰性图像图案图案花边花边艺术字艺术字6.5.3 网页中应用的图像的 两种方法v将将“有意义的图像有意义的图像”插入插入 HTML 文件中文件中 v将将“装饰性图像装饰性图像”写入写入 CSS 文件中文件中body background:url(images/bg.jpg)no-repeat right bottom;6.5.4 对HTML中的图像应用CSSv加边框加边框v图文混排图文混排