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

第 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: font-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 属性中的一个或多个属性值，如果省略，该属性值将使用浏览器的默认值。但至少要定义 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 文字属性缩写,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: “Times New Roman”, Times, serif; 提供首选字体、备用字体和普通字体。例如： font-family: Verdana, Arial, Helvetica, sans-serif; 常用的英文普通字体包括：serif、sans-serif、 monospace。,6.1.4 字体设置技巧（续）,常用的英文普通字体 serif 成比例、有衬线的字体，例如： Georgia Times New Roman Times sans-serif 成比例、无衬线的字体，例如： Verdana Arial Helvetica monospace 等宽的字体，例如： Courier New Courier,不应以像素为单位设置字号。因为如果以像素为单位设置字号，那么使用 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、h2 等元素的大小进行定义，最好使用百分比为单位。例如：,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-bottom,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）设置 、 中文字的垂直对齐方式。, 斯凯瑞故事集 26.80 故事集的内容十分丰富， ,.top vertical-align: top; ,6.2.3 vertical-align 属性,（3）设置文字的上标、下标。,H2O 110-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-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-style-position | list-style-image,例如： ol list-style: lower-alpha inside; ul list-style: 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: 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 的顺序为链接应用样式。,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-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; background: #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 color:#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 位、