《【教学课件】第6章用CSS设置文本和图像样式.ppt》由会员分享，可在线阅读，更多相关《【教学课件】第6章用CSS设置文本和图像样式.ppt（53页珍藏版）》请在三一办公上搜索。
1、第 6 章用CSS设置文本和图像样式,聊城大学传媒技术学院 王丽萍,本章内容,6.1.1 文字的属性,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:fon
2、t-style|font-variant|font-weight|font-size|line-height|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-family,body font:0.75em;,注意，可以省略 font 属性中的一个或多个属性值，如果省略，该属性值将使用浏览器的默认值。但至少要定义
3、 font-size 和 font-family两个值。,请判断下面的写法是否正确。,body font-size:0.75em;,6.1.3 文字属性缩写,font:font-style|font-variant|font-weight|font-size|line-height|font-family,body font:“宋体”;,请判断下面的写法是否正确。,body font-family:“宋体”;,注意，可以省略 font 属性中的一个或多个属性值，如果省略，该属性值将使用浏览器的默认值。但至少要定义 font-size 和 font-family两个值。,6.1.3 文字属性缩写
4、,font:font-style|font-variant|font-weight|font-size|line-height|font-family,body font:0.75em Arial,Helvetica,sans-serif;,请判断下面的写法是否正确。,注意，可以省略 font 属性中的一个或多个属性值，如果省略，该属性值将使用浏览器的默认值。但至少要定义 font-size 和 font-family两个值。,6.1.4 字体设置技巧,中文网页使用“宋体”。当字体名称中有空格，或由汉字组成时，要使用引号包围该名称。例如：font-family:“宋体”;font-family
5、:“Times New Roman”,Times,serif;提供首选字体、备用字体和普通字体。例如：font-family:Verdana,Arial,Helvetica,sans-serif;常用的英文普通字体包括：serif、sans-serif、monospace。,6.1.4 字体设置技巧（续）,常用的英文普通字体serif 成比例、有衬线的字体，例如：GeorgiaTimes New RomanTimessans-serif 成比例、无衬线的字体，例如：VerdanaArialHelveticamonospace 等宽的字体，例如：Courier NewCourier,不应以像素为
6、单位设置字号。因为如果以像素为单位设置字号，那么使用 IE 浏览器的用户就无法通过菜单命令改变文字的大小。以一个实际站点为例：。,6.1.5 字号设置技巧,6.1.5 字号设置技巧（续）,为了保证网页文字的大小可调节，应该使用 em 为单位设置字号。默认情况下 1em=16px，则 0.75em=12px。,6.1.5 字号设置技巧（续）,font-size 属性具有继承性，当多层嵌套定义时应谨慎。例如，在下面的 CSS 定义中，h2 元素和 p 元素到底有多大呢？,6.1.5 字号设置技巧（续）,制作网页时，应利用好 font-size 属性的继承性，避免字号的重复定义。如果需要对 h1、h
7、2 等元素的大小进行定义，最好使用百分比为单位。例如：,6.2.1 段落的属性,6.2.2 设置段落属性,6.2.2 设置段落属性,p word-spacing:1em;letter-spacing:0.5em;text-align:left;text-indent:2em;white-space:nowrap;,6.2.3 vertical-align 属性,vertical-align 属性只对行内元素有效。行内元素包括文字、图片、表单元素等。语法：vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-botto
8、m,6.2.3 vertical-align 属性,（1）设置行内 与文字的垂直对齐方式。例：,.middle vertical-align:middle;,紫楠花园位于河东区,6.2.3 vertical-align 属性,（1）设置行内 与文字的垂直对齐方式。例：,.top vertical-align:top;,紫楠花园位于河东区,6.2.3 vertical-align 属性,（2）设置、中文字的垂直对齐方式。,斯凯瑞故事集 26.80 故事集的内容十分丰富，,.top vertical-align:top;,6.2.3 vertical-align 属性,（2）设置、中文字的垂直对齐
9、方式。,斯凯瑞故事集 26.80 故事集的内容十分丰富，,.top vertical-align:top;,6.2.3 vertical-align 属性,（3）设置文字的上标、下标。,H2O110-13,.sub vertical-align:sub;font-size:50%;.super vertical-align:super;font-size:50%;,6.3.1 列表的类型,项目列表 北京 上海 编号列表 北京 上海,6.3.2 列表的属性,6.3.3 设置列表属性,6.3.3 设置列表属性,ul width:200px;list-style-type:disc;list-sty
10、le-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-style-position|list-style-image,例如：ol list-style:lower-alpha inside;ul list-styl
11、e:none;,6.3.5 列表在不同浏览器中的差异,IE 默认设置 具有 margin-left 值。FF 默认设置 具有 padding-left 值。项目符号的大小与位置也不同。,ul background-color:#66CCFF;,6.3.6 让列表在不同的浏览器中 表现一致,ul margin:0px;padding:0px;list-style:none;,6.3.7 用背景图像替代项目符号,设置了 list-style:none 后，可以利用背景图像替代项目符号。,ul margin:0px;padding:0px;list-style:none;li background:
12、url(images/bullet.gif)no-repeat left top;padding-left:20px;,6.4.1 简单的链接样式,a color:#000000;上面的样式设置网页上超链接的全部状态都为黑色。,6.4.2 使用伪类选择器找到 链接的不同状态,a:link,a:visited color:#000000;text-decoration:none;a:hover,a:active color:#FF0000;text-decoration:underline;注意：要按照 a:link,a:visited,a:hover,a:active 的顺序为链接应用样式。,
13、6.4.3 使用后代选择器找到 特定区域中的链接,a color:#002B5E;text-decoration:none;a:hover color:#FF0000;#navigation a color:#FFFFFF;#navigation 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-
14、height:30px;a:hover.button color:#FFFFFF;background-color:#336699;,6.4.4 让链接看起来像按钮之一：使用背景颜色,a.button color:#000000;text-decoration: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;ba
15、ckground:#336699 url(images/button-hover.gif)no-repeat left top;,150px;,6.4.5 让链接看起来像按钮之二：使用背景图像,a.button color:#000000;text-decoration: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 colo
16、r:#FFFFFF;background:#336699 right top;,background-color:#336699;background-position:right top;,6.4.6 让链接看起来像按钮之三：Pixy 方法，消除闪烁,6.5.1 网页中的图像格式,GIF无损压缩；8 位色深（256色）；支持透明；支持动画。JPG有损压缩；24 位色深（1680万色）。PNG无损压缩；具有 8 位、24 位和 32 位（1680万色+Alpha通道）三种色深；支持透明和半透明。,6.5.2 网页中的图像分类,有意义的图像网站LOGO新闻图片商品图片广告图片装饰性图像图案花边艺术字,6.5.3 网页中应用的图像的 两种方法,将“有意义的图像”插入 HTML 文件中 将“装饰性图像”写入 CSS 文件中body background:url(images/bg.jpg)no-repeat right bottom;,6.5.4 对HTML中的图像应用CSS,加边框图文混排,Thank You!,
