和CSS样式表广东水利电力职业技术学院网页图像动画与-Indexof.ppt

第七章层叠样式表的应用 项目展示与项目目标 第七章层叠样式表的应用 广东水利电力职业技术学院 网页图像动画与脚本编程 地址:北京百万庄大街22号 邮编:100037 编辑热线: (010)网页图像动画与脚本编程 主讲：熊丽华 情境1：计算机科学与工程系迎评网CSS设计 基于工作过程的 网页设计与制作教程 1. 项目展示与项目目标 2. 项目资讯 3. 项目计划与决策 4. 项目实施 5. 项目检查与评估 6. 强化拓展实训:庄辉个人网站样式表设计 1项目展示与项目目标 掌握CSS的基本理论 掌握CSS的相关属性的设置方法 掌握CSS的应用方法 2. 项目资讯 问题: （1）背景色单调，网页顶端有空隙。 （2）表格中的文字大小不合适，文字之间行间距太小。 （3）超级链接的样式太单调。 使用CSS的优点: （1）首先就是能保持风格的一致性。 （2）CSS样式表可以共享，便于调整修改。。 2. 项目资讯 关键知识点一：认识CSS样式表 CSS就是Cascading style Sheets，中文翻译为“层叠样式表”，简称样式表，它是一种制作网页的技术，网页设计最初使用HTML标记来定义页面文档及格式，例如标题h1、段落p、表格table、链接a等，但这些标记不能满足更多的文档样式需求，为了解决这个问题，在1997年W3C(The World Wide Web Consortium)颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1, 自CSS1版本之后，又在1998年5月发布了CSS2版本，样式表得到了更多的充实。W3C把DHTML(Dynamic HTML)分为三个部分来实现：脚本语言(包括javascript、Vbscript等)、支持动态效果的浏览器(包括Internet Explorer、Netscape Navigator等)和CSS样式表。 2. 项目资讯 关键知识点二：创建新样式表与应用样式表 执行“窗口”→“CSS样式”命令 新建CSS规则 附加样式表 编辑CSS规则 删除CSS规则 2. 项目资讯 关键知识点三：CSS的规则定义 “字体”：为样式设置字体。 “大小”：设置文本大小。可以通过选择数字和度量单位选择特定的大小，也可以选择相对大小。 “样式”：将“正常”、“斜体”或“偏斜体”指定为字体样式。默认设置为“正常”。 “行高”：用于控制行与行之间的垂直距离。 “修饰”：用于控制链接文本的显示状态。 “粗细”；为字体设置粗细效果。 “变体”：设置文本的小型大写字母的变体。Dreamweaver不在“文档”窗口中显示该属性。 “大小写”：将选定内容中的每个单词的首字母大写或将文本设置为全部大写或者小写。 “颜色”：用于设置文本的颜色。 CSS类型属性：主要是在网页中设置字体的样式。 2. 项目资讯 关键知识点三：CSS的规则定义 “背景颜色”：用于为网页设置背景颜色。 “背景图像”：用于为网页设置背景图像。 “重复”：用于控制背景图像的平铺方式，主要选项含义是：“不重复”表示在元素开始处显示一次图像，“重复”在元素的后面水平或垂直方向重复，“横向重复”表示设置沿水平方向重复，“纵向重复”表示设置沿垂直方向重复。 “附件”：控制背景图像是否会随页面的滚动而一起滚动。 “水平位置”和“垂直位置”：用来确定背景图像的水平或垂直位置。 CSS背景属性：给网页元素添加固定的背景颜色或图像。 2. 项目资讯 关键知识点三：CSS的规则定义 “单词间距”：用于控制文字间隔的距离。 “字母间距”：其作用与单词间距类似。 “垂直对齐”：用于控制文字或图像相对与其母体元素的位置。 “文本对齐”：用于设置块的水平对齐方式。 “文字缩进”：用于控制块的缩进程度。 “空格”：确定如何处理元素中的空白。“正常”表示收缩空白，“保留”表示处理方式与文本被括在pre标签中一样（即保留所有空白，包括空格、制表符和回车）。“不换行”表示指定仅当遇到br标签时文本才换行。 “显示”：指定是否以及如何显示元素。 CSS区块属性：用于定义标签和属性的间距及对齐设置。 2. 项目资讯 关键知识点三：CSS的规则定义 “宽”和“高”：设置元素的宽度和高度。 “浮动”：用于设置块元素的浮动效果（left、right、none）。 “清除”：用于清除设置的浮动效果（left、right、both、none）。 “填充”：用于控制围绕边框的边距大小。 “边界”：用于确定围绕块元素的空格填充数量。 CSS方框属性：用于设置控制元素在页面上的放置方式的标签和属性定义。 2. 项目资讯 关键知识点三：CSS的规则定义