Dreamweaver-CC实例教程(第5版)-第7章-CSS.pdf

第7章　CSS 本章简介： CSS （层叠样式表）是万维网联盟 （W3C）设定为 标准的 个辅助HTML设计的新特性，能保持整个 HTML的统 外观。CSS功能强大、操作灵活，用CSS 改变 个文件就可以改变数百个文件的外观，而且其个 性化的页面表现力更能吸引访问者。Dreamweaver CC 2019提供了功能复杂、使用方便的CSS，方便网站设计 师制作个性化网页。 课堂学习目标 了解CSS的概念 掌握CSS设计器面板和样式类型的应用 掌握CSS样式的创建及应用 掌握编辑样式的方法 掌握CSS样式的属性 掌握CSS过 效果的应用 7.1　 CSS的概念 CSS是Cascading Style Sheet的缩写，一般译为 “层 样式 表”或 “级联样式表”。CSS对HTML 3.2之前版本的语法进行了 变革，将某些HTML标签属性简化。比如要将一段文字的大小变成 36像素，在HTML 3.2中要写成 “pfont size=36文字的大 小/font/p”，标签的层层嵌套使HTML程序臃肿不堪；而用 CSS写成 “p style=font-size:36px文字的大小/p”即可。 CSS使用HTML格式的代码，浏览器处理起来速度比较快。 可以说CSS是HTML的一部分，它将对象引入HTML中，可以通过 脚本程序调用和改变对象的属性，从而产生动态效果。比如，当 鼠标指针放到文字上时，文字的字号变大，用CSS可写成： p onmouseover=className=aa动态文字/p 。 7.2　 CSS样式 “CSS设计器”面板 CSS样式的类型 7.2.1 “CSS设计器”面板 使用 “CSS设计器”面板可以创建、编辑和删除CSS样式，并 且可以将 部样式表附加到文档中。 1．打开 “CSS设计器”面板 弹出 “CSS设计器”面板有以下2种方法。 （1）选择 “窗口 CSS设计器”命令。 （2）按Shift+F11组合键。 “CSS设计器”面板 2．CSS的功能 CSS的功能归纳如下。 （1）灵活地控制网页中文字的字体、颜色、大小、 置和间距 等。 （2）方便地为网页中的元素设置不同的背景颜色和背景图片。 （3）精确地控制网页各元素的 置。 （4）为文字或图片设置滤镜效果。 （5）与脚本语言结合制作动态效果。 7.2.2 “CSS设计器”面板 CSS样式可分为类选择器、标签选择器、ID选择器、内联样 式、复合选择器等几 形式。 1．类选择器 2．标签选择器 3． ID选择器 4．内联样式 5．复合选择器 7.3　样式的创建与应用 创建CSS样式 应用CSS样式 创建和附加外部样式 7.3.1 创建CSS样式 使用 “CSS设计器”面板可以创建类选择器、标签选择器、ID 选择器和复 选择器等CSS样式。 创建CSS样式的操作步骤如下。 （1）新建或打开一个文档。 （2）选择 “窗口 CSS设计器”命令，弹出“CSS 设计器”面板。 （3）在 “CSS设计器”面板中，单击 “源”选项组 中的“添加CSS源”按钮 ，在弹出的菜单中选择 “在页面中定义” 选项，以确认CSS样式的保存位置。选择该选项后在 “源”选项 组中将出现 “style”标签。 7.3.2 应用CSS样式 创建自定义样式后，还要为不同的网页元素应用不同类型的样 式，其具 操作步骤如下。 （1）在文档编辑窗口中选择网页元素。