dreamweaver网页制作第6章CSS.docVIP

第6章 CSS 通过CSS可以使用更丰富、更灵活的样式，更简单地设计出更美观的网页。同时，也让网页的设计与维护更有效率。CSS在网页设计中的作用尤为重要，是网页设计师必备的知识。本章首先介绍什么是CSS、CSS的基本语法等基础知识，接着学习利用“CSS”面板管理规则，如何在Dreamweaver中创建与应用CSS样式表，还将结合实例讲解综合运用CSS的属性进行网页布局 6.1 了解CSS 对于初学网页设计的人来说，CSS看起来有些陌生。下面就来学习什么是CSS，CSS有哪些优势，基本语法以及如何应用。 6.1.1 什么是CSS CSS是“Cascading Styles Sheets”的缩写，中文名称是层叠样式表。用于控制网页样式并允许将样式与网页内容分离的一种标记性语言。CSS可将网页的内容与表现形式分开，使网页的外观设计从网页内容中独立出来单独管理。要改变网页的外观时，只需更改CSS样式。 6.1.2 CSS的优势 CSS作为当前网页设计中的热门技术，具有以下优势： CSS符合Web标准。W3C组织创建的CSS技术将替代HTML的表格、font标签、frames以及其它用于表现的HTML元素。 提高页面浏览速度。使用CSS，比传统的web设计方法至少节约50%以上的文件大小。 缩短网页改版时间。只要修改相应的CSS文件就可以重新设计一个有成百上千页面的站点。 强大的字体控制和排版能力。CSS控制字体的能力比font标签好多了。有了CSS，我们不再需要用font标签来控制标题，改变字体颜色，字体样式等。 CSS非常容易编写。Dreamweaver也提供了相应的辅助工具 CSS有很好的兼容性，只要是可以识别CSS样式的浏览器都可以应用它。 表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，让多个网页文件共同使用它，省去在每一个网页文件中都要重复设定样式的麻烦。 6.1.3 CSS的基本语法 CSS的样式规则由两部分组成：选择器和声明。选择器就是样式的名称，包括自定义的类，HTML标签和CSS选择器（高级样式）。 自定义的类（也称为“类样式”）：可以将样式属性应用到任何文本范围或文本块。所有类样式均以句点（.）开头。例如，可以创建名称为.red的类样式，设置其color属性为红色，然后将该样式应用到一部分已定义样式的段落文本中 HTML标签：可以重定义特定标签（如p或h1）的格式。创建或更改h1标签的CSS规则时，所有用h1标签设置了格式的文本都会立即更新。 CSS 选择器（高级样式）：可以重定义特定元素组合的格式，或其他CSS允许的选择器形式的格式。例如，“a:link”就是定义未点击过的超链接的高级样式。高级样式还可以重定义包含特定id属性的标签的格式。例如，由#myStyle定义的样式可以应用到所有包含值id=myStyle 的标签。 6.1.4 CSS的应用方式 CSS的应用方式有以下两种： 外部CSS样式表：以扩展名为.css的文件而存在，文件中内容即是所有样式的选择和声明。该文件可做为共享文件，让多个文档共同引用并应用，达到站点文件样式的一致性。同时，如果修改该样式表文件，所有引用的文档都将改变其样式，达到网站迅速改版的目的。 内部CSS样式表：只存在于当前文档中，并只针对当前页进行样式应用的方法。一般存在于文档head部分的style标签内。 6.2 使用CSS面板 利用“CSS”面板，可以轻松创建和管理CSS规则。本小节主要介绍 “CSS”面板的基本操作，包括所有模式与当前模式的切换、移动CSS规则、删除CSS规则、重命名类等。在Dreamweaver CS4中，单击 “窗口”|“CSS样式”命令菜单，打开“CSS”面板，如图13.2所示。 注意：使用快捷键“Shift”+“F11”，也可以展开“CSS”面板，若再按下快捷键“Shift”+“F11”，则将“CSS”面板隐藏。 6.2.1 “所有”模式与“当前”模式 （1）“CSS”面板默认情况下，是以“所有”模式展开。在“所有”模式下，“CSS”面板显示应用到当前文档的所有CSS规则。单击其中一个规则，该规则的属性出现在下方的列表框中，如图13.3所示，默认情况下属性以“类别视图”排列。 （2）在“CSS”面板中，单击“显示列表视图”按钮，属性以“列表视图”排列，如图13.4所示 （3）在“CSS”面板中，单击“只显示设置属性”按钮，属性只显示已设置的属性，如图13.5所示 （4）切换到“当前模式”。在“CSS”面板中，单击“切换到当前选择模式”按钮。此时，在“当前”模式中，“CSS”面板显示当前所选内容的属性的摘要，如图13.6所示。 6.2.2 基本操作 (1)．重命名类 (2)．移动CSS规则 (3)．删除CSS规则 6.3 在Dreamweav