《网页设计与制作教学课件》6aCSS样式表基础.pptVIP

溢出 确定当容器（如 DIV 或 P）的内容超出容器的显示范围时的处理方式。这些属性按以下方式控制扩展： 可见 将增加容器的大小，以使其所有内容都可见。容器将向右下方扩展。 隐藏 保持容器的大小并剪辑任何超出的内容。不提供任何滚动条。 滚动 将在容器中添加滚动条，而不论内容是否超出容器的大小。明确提供滚动条可避免滚动条在动态环境中出现和消失所引起的混乱。该选项不显示在“文档”窗口中。 自动 将使滚动条仅在容器的内容超出容器的边界时才出现。该选项不显示在“文档”窗口中。 位置 指定内容块的位置和大小。浏览器如何解释位置取决于“类型”设置。如果内容块的内容超出指定的大小，则将改写大小值。 位置和大小的默认单位是像素。还可以指定以下单位：pc（皮卡）、pt（点）、in（英寸）、mm（毫米）、cm（厘米）、em（全方）、(ex) 或 %（父级值的百分比）。缩写必须紧跟在值之后，中间不留空格。例如，3mm。 剪辑 定义内容的可见部分。如果指定了剪辑区域，可以通过脚本语言（如 JavaScript）访问它，并操作属性以创建像擦除这样的特殊效果。使用“改变属性”行为可以设置擦除效果。 扩展：主要用于制作鼠标样式、图片特殊效果 课堂实验 完成Test10,上传至FTP作业中相应教学班的test10文件夹（必须当堂提交） 完成实验work10，上传至FTP作业中相应教学班的work10文件夹 修饰网页元素样式 * 熟悉CSS样式面板 掌握创建CSS样式的方法 掌握通过CSS样式管理和修饰页面的方法 本章学习要点： 1.CSS样式表 CSS（Cascading Style Sheet，层叠样式表） 技术是一种格式化网页的标准方式，它通过设置CSS属性使网页元素获得各种不同效果。CSS不是一种程序设计语言，而只是一种用于网页排版的标识性语言，是对现有HTML语言功能的补充和扩展。 层叠样式表 (CSS) 是一组格式设置规则，用于控制 Web 页内容的外观。 通过使用 CSS 样式设置页面的格式，可将页面的内容与表示形式分离开。 页面内容（即 HTML 代码）存放在 HTML 文件中，而用于定义代码表示形式的 CSS 规则存放在另一个文件（外部样式表）或 HTML 文档的另一部分（通常为文件头部分）中。 将内容与表示形式分离可使得从一个位置集中维护站点的外观变得更加容易，因为进行更改时无需对每个页面上的每个属性都进行更新。 1）将结构和格式分离. ??? HTML语言定义网页结构和各要素功能,而CSS将定义结构和格式的部分分离,使我们对页面的布局施加更多的控制。HTML仍然可以保持简明;CSS独立出来从另一个角度控制页面外观。 2）以前所未有的能力控制页面布局. ??? HTML 语言对页面总体上的控制有限,如精确定位,行间距或者字间距等,这些都可以通过CSS来实现. 3）制作体积更小,下载更快的网页. ??? 样式表是简单的文本,像HTML那样,它不需要图像,不需要执行程序,不需要插件。体积的代码,减少图像用量,从而减小文件尺寸。 CSS的特点 CSS的特点 4）将许多网页同时更新,比以前更快更容易. ? 没有CSS时,要想更新整个站点中所有主体文本的字体,必须要一页一页地修改.利用CSS就可以将站点上所有的网页都指向单一的一个CSS文件,只要修改CSS文件中某一行,那么整个站点都会随之发生变动. 5）浏览器将成为更友好的界面. ?? CSS的代码有很好的兼容性, 如果用户丢失了某个插件时不会发生中断,或者使用旧版本的浏览器时代码不会出现杂乱无章的情况,只要是可以识别串接样式表的浏览器就可以应用它. 2.CSS样式创建 将插入点放在文档中，然后执行以下操作之一打开“新建 CSS 规则”对话框： 选择“格式”“CSS 样式”“新建”。 在“CSS 样式”面板（“窗口”“CSS 样式”）中，单击面板右下侧的“新建 CSS 规则”(+) 按钮。 在“文档”窗口中选择文本，从 CSS 属性检查器（“窗口”“属性”）的“目标规则”弹出菜单中选择“新建 CSS 规则”，然后单击“编辑规则”按钮，或者从属性检查器中选择一个选项（例如单击“粗体”按钮）以启动一个新规则。 2.1CSS样式面板 使用“CSS 样式”面板可以跟踪影响当前所选页面元素的 CSS 规则和属性（“正在”模式），也可以跟踪文档可用的所有规则和属性（“全部”模式）。使用面板顶部的切换按钮可以在两种模式之间切换。使用“CSS 样式”面板还可以在“全部”和“正在”模式下修改 CSS 属性。 在“全部”和“正在”模式下，“CSS 样式”面板还包含下列按钮： A. 附加样式表 B. 新建 CSS 规则 C. 编辑样式 D. 删除 CSS 规则 附加