网页制作案例教程-清华大学出版社.PPT

8.2.3 设置CSS样式属性 （1）CSS 类型属性 Font-family为样式设置字体系列（或多组字体系列）。 Font-size定义文本大小。 Font-style指定“正常”、“斜体”或“偏斜体”作为字体样式。 Line-height设置文本所在行的高度。 Text-decoration向文本中添加下划线、上划线或删除线，或使文本闪烁。 Font-weight对字体应用特定或相对的粗体量。 Font-variant设置文本的小型大写字母变体。 Text-transform将所选内容中的每个单词的首字母大写或将文本设置为全部大写或小写。 color 设置文本颜色。 （2）CSS 样式背景属性 背景颜色设置元素的背景颜色。两种浏览器都支持背景颜色属性。 背景图像设置元素的背景图像。两种浏览器都支持背景图像属性。 Background Repeat确定是否以及如何重复背景图像。两种浏览器都支持重复属性。 Background Attachment确定背景图像是固定在其原始位置还是随内容一起滚动。 Background Position (X) 和 Background Position (Y)指定背景图像相对于元素的初始位置。 （3）CSS 样式区块属性 字母间距增加或减小字母或字符的间距。 垂直对齐指定应用此属性的元素的垂直对齐方式。 文本对齐设置文本在元素内的对齐方式。 文字缩进指定第一行文本缩进的程度。 空格确定如何处理元素中的空格。 显示指定是否以及如何显示元素。 （4）CSS 样式方框属性 宽和高设置元素的宽度和高度。 浮动设置其它元素（如文本、AP Div、表格等）在围绕元素的哪个边浮动。 清除定义不允许 AP 元素的边。 填充指定元素内容与元素边框之间的间距 全部相同为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的填充属性。 边距指定一个元素的边框与另一个元素之间的间距 全部相同为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的边距属性。 （5）CSS 样式边框属性 类型 设置边框的样式外观。样式的显示方式取决于浏览器。取消选择“全部相同”可设置元素各个边的边框样式。 全部相同 为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的边框样式属性。 宽度 设置元素边框的粗细。两种浏览器都支持“宽度”属性。取消选择“全部相同”可设置元素各个边的边框宽度。 全部相同 为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的边框宽度。 颜色 设置边框的颜色。可以分别设置每条边的颜色，但显示方式取决于浏览器。取消选择“全部相同”可设置元素各个边的边框颜色。 全部相同 为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的边框颜色。 设置完这些选项后，在面板左侧选择另一个 CSS 类别以设置其它的样式属性，或单击“确定”。 （6）CSS 样式列表属性 “CSS 规则定义”对话框的“列表”类别为列表标签定义列表设置（如项目符号大小和类型）。 List style type 设置项目符号或编号的外观。两种浏览器都支持“类型”。 List style image 使您可以为项目符号指定自定义图像。单击“浏览”(Windows) 或“选择”(Macintosh) 通过浏览选择图像，或键入图像的路径。 List style position 设置列表项文本是否换行并缩进（外部）或者文本是否换行到左边距（内部）。 （7）CSS 样式定位属性 “定位”样式属性确定与选定的 CSS 样式相关的内容在页面上的定位方式。 可见性 确定内容的初始显示条件。如果不指定可见性属性 Z 轴 确定内容的堆叠顺序。 溢出确定当容器（如 DIV 或 P）的内容超出容器的显示范围时的处理方式。 位置指定内容块的位置和大小。 剪辑定义内容的可见部分。如果指定了剪辑区域 （8）CSS 样式扩展属性 “扩展”样式属性包括滤镜、分页和指针选项。 8.3项目案例 学习目标 案例描述 学习和使用CSS样式及其属性的设置。 使用CSS样式表，在Dreamweaver CS5中制作医药商务管理页面 案例要点 CSS样式的基本写法以及相关属性的设定。 案例实施 （1）选择“开始”｜“所有程序”｜“Adobe Dreamweaver CS5”，启动Adobe Dreamweaver CS5，新建一站点，将images素材文件夹复制到本站点文件夹中。 （2）选择“文件”｜“新建”菜单项，打开“新建文档”对话框，选择“空白页”｜“HTML”｜“无”，单击“创建”按钮，新建一个网页。 （3）在打开的空白文档中，选择“文件”｜“保存”菜单项，将文件保存在根目录下，文件名为8.3.html。 （4）在页面8.