第9章 css样式使用-ys

《第9章 css样式使用-ys》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页设计与制作第1章网页设计概述第2章HTML语言基础第3章Dreamweaver基础第4章网页中的基础元素第5章网页页面布局第6章网页中的层和时间轴第7章表单的应用第8章在网页中使用行为第9章CSS样式使用第10章网页中的多媒体应用第11章模板和库第12章站点测试和发布第13章Flash简介第14章Fireworks简介$[知识目标]了解CSS样式的概念掌握CSS样式表的创建方法掌握应用CSS样式表的方法8[能力目标]了解CSS样式的概念掌握CSS样式表的创建方法掌握应用CSS样式表的方法第9章CSS样式使用9.1CSS样式概述9.2使用CSS样式9.

2、3CSS样式设置9.4CSS样式经典实例本章小结第9章CSS样式使用9.1CSS样式概述9.1.1认识CSS样式9.1.2CSS样式的类型9.1.3CSS样式面板CSS样式表（CascadingStyleSheets，简称CSS），又称为层叠式样式表，由W3C（WorldWideWebConsortium）组织开发的。CSS样式是预先定义的一个格式的集合，包括字体、大小、颜色、对齐方式等。利用CSS样式可以使整个站点的风格保持一致，是网页设计中用途最广泛、功能最强大的元素之一。层叠样式表用于控制网页样式并允许将样式与网页内容分离的一种标记性语言。CSS将

3、网页的外观设计从网页内容中独立出来单独管理。要改变网页的外观时，只需更改CSS样式。9.1.1认识CSS样式9.1CSS样式概述定义CSS样式表CSS样式定义由三部分构成：选择符（selector）、属性（properties）、属性值（value）。定义CSS样式的格式为：选择符{属性:属性值;属性:属性值…}CSS样式需要在内部的中进行定义或引用外部CSS文件，在部分使用。CSS的样式规则由两部分组成：选择器和声明。选择器就是样式的名称，包括自定义的类，HTML标签和CSS选择器（高级样式）：自

4、定义CSS规则类：指根据用户的需要创建一个CSS样式属性，可应用到文字，图片等网页元素中。HTML标签规则：可以对HTML语言中的某一标签进行重新定义。CSS选择器样式（高级样式）：重新定义特定元素组合的格式设置，或重新定义CSS允许的其他选择器的格式设置，还可以重新定义包含特定id属性的标签的格式设置。9.1.2CSS样式的类型9.1CSS样式概述单击菜单栏中“窗口”

5、“CSS样式”命令或用组合键Shift+F11键打开CSS样式面板，如图所示。“全部”模式　　“正在”模式9.1.3CSS样式面板9.1CSS样式概述1．CSS样式面板有“全部”

6、和“正在”两种模式。“全部”模式：显示两个窗格：“所有规则”窗格（上部）和“属性”窗格（下部）。“正在”模式：显示三个窗格：显示文档中当前所选内容的CSS属性的“所选内容的摘要”窗格，显示所选属性的位置的“规则”窗格，以及CSS属性的“属性”窗格。2．面板中主要功能按钮如下：：表示附加或链接外部样式表。：新建样式表。：编辑选中的样式表。：删除选中的样式表9.1.3CSS样式面板9.1CSS样式概述9.1CSS样式概述CSS的应用方式有以下两种：外部CSS样式表：以扩展名为.css的文件而存在，文件中内容即是所有样式的选择和声明。该文件可做为共享文件，让多

7、个文档共同引用并应用，达到站点文件样式的一致性。同时，如果修改该样式表文件，所有引用的文档都将改变其样式，达到网站迅速改版的目的。导入：import或链接:link@importurl("CSS/colors1.css");内部CSS样式表：只存在于当前文档中，并只针对当前页进行样式应用的方法。一般存在于文档head部分的style标签内。9.2使用CSS样式9.2.1创建C

8、SS样式9.2.2附加外部CSS样式9.2.3应用CSS样式9.2.4编辑CSS样式9.2.5删除CSS样式（一）创建样式表文件1．单击菜单栏中“文件”

9、“新建”命令，打开新建文档对话框。2．在对话框左侧“类别”中选择“CSS样式表”类别，在中间“CSS样式表”栏选择需要的样式，右侧是样式表预览图。3．点击“创建”按钮，新建了一个CSS样式表文件，如图所示。４．编辑样式表后，单击菜单栏中“文件”

10、“保存”命令，则可以保存一个外部的样式表文件。9.2.1创建CSS样式9.2使用CSS样式（二）在CSS样式面板中创建CSS样式表文件1．在CSS样式

11、面板中，单击“新建”按钮，打开“新建CSS规则”对话框：2．设置选择器类型为“