第1页，共34页，星期日，2025年，2月5日6.1层叠样式表的创建、编辑与应用6.1.1关于层叠样式表通常情况下我们希望将页面显示内容与显示方式分开，使得内容编辑人员的工作重心放在网站内容的撰写上，而站点的美工和界面设计人员的工作重心放在页面显示的风格和样式上。样式是预先定义好的、格式化文档的工具。CSS全称CascadingStylesSheet，译为层叠样式表，是由W3C（WorldWideWebConsortium）组织所拟定的。DREAMWEAVER第2页，共34页，星期日，2025年，2月5日6.1层叠样式表的创建、编辑与应用6.1.1关于层叠样式表CSS（CascadingStyleSheets）是开放性样式设定语句，它扩充了HTML标记的属性设定，这些属性设定可以通过脚本语言进行控制，使网页的视觉效果更加丰富多彩。CSS将页面的样式与显示内容的文档分开，可以高效、统一地组织页面元素。对于具有相同风格多个页面的站点来说，只需要建立定义样式的CSS文件，并使需要使用这些样式的文档调用相应的样式文件即可。当网站的风格需要更新时，只要更改CSS样式文件即可。CSS技术的应用使得网站的开发、管理和维护大为简化，提高了开发效率。DREAMWEAVER第3页，共34页，星期日，2025年，2月5日6.1层叠样式表的创建、编辑与应用6.1.1关于层叠样式表1、样式表的版本：1996年，W3C推出CSS1。1998年中期，W3C公布CSS2。目前，W3C正在开发CSS3。IE6与NS7已经实现了CSS1中的绝大部分特性，但并没有实现全部特性；IE8的最新版本支持CSS2。本章介绍的属性可以被至少其中一种浏览器所支持DREAMWEAVER第4页，共34页，星期日，2025年，2月5日6.1层叠样式表的创建、编辑与应用6.1.1关于层叠样式表2、样式表的层次：样式表称为层叠样式表是因为它们可以以三层的形式定义，以此指定文档的样式；较低层的样式表能够覆盖较高层的样式表。CSS的三个层次，按照从底层到高层的顺序，分别为行内样式表、文档层样式表和外部样式表，其中行内样式表只能作用于单个标签的内容；文档层样式表则能够对文档的整个主体起作用，而外部样式表可以应用到任意数目文档的主体中。如果浏览器无法满足样式表指定的属性，则浏览器或者采用另一个值代替此值或者忽略这个给定值。DREAMWEAVER第5页，共34页，星期日，2025年，2月5日6.1层叠样式表的创建、编辑与应用6.1.1关于层叠样式表3、CSS的基本格式：选择符{规则}例如：h1{color:blue}选择符（selector）：是样式要套用的对象，一般是HTML标记，如上例的h1。在HTML文件中h1…/h1标记之间的内容将全部继承h1的全部规则，例如字体显示为蓝色。规则：是样式设定的内容，用{}括起来的部分，如上例中的{color:blue}。DREAMWEAVER第6页，共34页，星期日，2025年，2月5日6.1.2创建和编辑CSS样式表要创建一个CSS样式表，操作步骤如下：选择“窗口”“CSS样式”命令，打开CSS面板。在“CSS样式”面板中，单击面板底部的“新建CSS样式”按钮(+)。在“类型”选项组中，选择要定制的类型单选项。该选项组中3个选项的意义如下：HTML标签样式重定义特定标签（如h1）的格式。创建或更改h1标签的CSS样式时，所有用h1标签设置了格式的文本都立即更新。DREAMWEAVER第7页，共34页，星期日，2025年，2月5日6.1.2创建和编辑CSS样式表自定义CSS样式（也称为类样式）使您可以将样式属性设置为任何文本范围或文本块。.top{color:red;font-size:12px;}?pclass=top这里是类选择器控制的样式/p?注意：类选择器的前面有一个“点”，class名称在HTML文档中类用class来定义。DREAMWEAVER第8页，共34页，星期日，2025年，2月5日CSS选择器样式重定义具体某个标签组合的格式（如每当h2标题出现在表格单元格内时都应用tdh2），或重定义包含特定id属性的所有标签的格式。例如：#topp{color:red;}divid=top?????p这里是内容，以上的样式定位到了这个p标签/p?/div在定义选项组中，选择要定义的样式表位置，可以是定义新的样