第6章样式表VIP免费

第六章css层叠样式表教学目标：1.了解css的概念及选择器类型2.熟练掌握css的属性设置3.能熟练创建、编辑、应用、导入、导出css层叠样式表。教学重难点：1.css的概念及样式类型；2.css属性创建、设置和应用。教学内容：1.样式的概念2.样式的创建和基本应用3.外部表概念和应用4.样式的实例应用问题：html并没有严格地控制网页的格式和外观，仅定义了网页的结构和个别要素的功能，而是让浏览器自己决定应该让各个要素以何种形式显示，而各浏览器之间的不兼容，也会导致网页在文档结构与浏览器中显示不一致。有什么较好的办法控制网页的格式和外观呢？新课引入：如果用css控制网页的格式和外观，网页就能给人一种赏心悦目的感觉，同时字体的色彩变化也可以使网页变得更加生动活泼；而且css有良好的兼容性，语法易学易懂，有丰富的样式效果。dw提供的css样式面板可以快速地创建、修改和删除样式。本章将详细讲解css样式表的应用。6.1css基础1.css样式表的基本概念style样式：控制文档中某一文本区域外观的一组格式属性。cascading：表示向同一个元素应用多种样式的能力。css（cascadingstylesheets）：指一个包含样式和格式规范的文本文件，它们可以精确控制Web页面内容的外观，而且一次可控制若干个文档的所有样式。样式属性一旦改变，应用该样式的文本也随着改变。Css可以改变的性质有：字体、字号、文字间的空间、对齐属性、列表、颜色、背景、边距、定位、特效、鼠标经过等。为什么称样式表为层叠的呢？打一个不很准确的比喻：如我们评价一个人，需要听取大家的意见再汇总，有人说，这个人诚实，有的说干事踏实，有的说很有责任心.....，这样通过这些意见的“层叠”，就可大体地知道这个人的品质。即使是同样的标志，也可以通过层叠使它们显示出不同的特性来，随着学习的深入，大家会发现层叠的具体含义及一些妙用的。2.css的5个优点：A、通用兼容。防止文字大小因浏览器的设置而改变，影响页面布局。B、便于对网页整体风格进行控制。C、网页提速。格式和内容分开，提高网页内容和格式的设置速度。页面内容位于自身的文档中，而定义该内容表现形式的css规则可以位于自身文档的head标签之内（即内部的css规则），也可以位于另一个文件中（即外部的css规则）。D、方便美化页面。更好的控制页面外观，由精确的布局定位到特定的字体和文本样式。能为页面提供更多的效果，也许这些效果仅使用html根本无法控制。E、便于批量更新。当css的样式被更新或被修改后，所有应用了该样式的文档都会被自动更新。大型网站（163、263、sohu等）的内容和各种网页文本较繁多，通过使用css就可以快速准确地对整个站点或多数页面的字体和格式进行定义和更改。3.css面板打开css面板的3种方法：通过窗口－css样式shift+f11单击属性检查器中的“css”按钮两种模式介绍当前模式：显示当前文档中所选内容的css属性所有模式：显示当前文档中定义的规则和附加到当前文档的样式表中定义的所有规则的列表。下部的各个按钮简介。css面板的功能：在CSS样式面板中可以查看与当前文档相关联的样式定义以及样式的层次结构。可以使用CSS样式面板附加外部CSS样式表，创建、编辑和删除CSS样式。注意：由于css可以直观的管理css。adobe建议用css面板作为创建和编辑css的主要工具。用户可以自己创建层叠样式表，还可以dw附带的层叠样式表4.样式表类型（理解即可）选择器有三种（常见）类型，可以创建4种不同选择器类型的样式：（1）自定义css规则（类样式）：可以将定义的样式应用于任何文本块或文本区域。文本块应用后在标签上添加一个class属性；文本区域应用后，包含class属性的span标签就会被该文本围住。所有类样式（也叫自定义样式）名均以点（.）开头，可以是字母与数字的组合，但.之后必须是字母；如果没有输入该点，则DW会自动添加上。（2）html标签样式表：用来重新定义特定标签的格式。在一个已经链接的css样式表里重定义标签时可能会改变页面布局，应小心使用。（3）对于高级样式（也称ID、伪类选择器）当为ID选择器（也称标识选择符）时，是指为某个标签组合或所有包含特定ID属...