网页设计与制作及实训教程 教学课件 作者 杜永红 王冬霞 主编第5章　css样式表.ppt

《网页设计与制作及实训教程 教学课件 作者 杜永红 王冬霞 主编第5章　css样式表.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第五章CSS样式表5.1CSS样式的应用5.2使用CSS样式表5.3使用CSS样式表的网页实例CSS（CascadingStyleSheet），中文译为层叠样式表。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。【本章学习目的】本章通过多个CSS样式的应用实例，重点介绍了CSS样式表功能、定义CSS规则的方法，应用内嵌式样式表和链接外部样式表的方法等，通过本章的学习，读者应了解CSS样式表的用途，掌握创建和应用CSS样式表的方法，学会用CSS样式表进行网页的美化和网页布局。5.1利用CSS样式表的网页实例CSS样式表是由一系列样式选择器和CSS属性组成，它支持字体属性、颜色和

2、背景属性、文本属性、边框属性、列表属性以及精确定位网页元素属性等，增强了网页的格式化功能。使用CSS样式表的另一个优点是可以利用同一个样式表对整个站点的具有相同性质的网页元素进行格式修饰，当需要更改样式设置时，只要在这个样式表中修改，而不用对每个页面逐个进行修改，简化了格式化网页的工作。【例5.5】利用CSS样式还可以代替表格进行网页布局，这是目前较为流行页面排版方式，如图所示。该实例主要采用了div标签＋css样式，涉及到的知识点有以下几点：分析构架：画出构架图；模块拆分：分别定义Div的CSS样式；在网页中插入Div标签，在Div中填充网页内容；总体调整：色彩及内容调整，适当修改CSS样式

3、。5.2使用CSS样式表5.2.1CSS样式表概述1.样式表的使用CSS样式表的使用常用的方法有以下两种：页面内嵌法。将样式表代码直接写在HTML标签的head区。外部链接法。将样式表写在一个独立的后缀名为CSS文件中，在需要应用CSS样式的网页中链接该文件，在页面和之间用以下代码调用。2.CSS样式表语法选择符{属性1：值1；属性2：值2……}参数说明：属性和属性值之间用冒号(:)隔开，定义多个属性时，属性之间用分号(;)隔开。1.创建CSS样式选

4、择“窗口”菜单｜“CSS样式”命令，打开“CSS样式”面板，单击右下角的“新建CSS规则”按钮，或选择“文本”菜单｜“CSS样式”｜“新建”命令，弹出“新建CSS规则”对话框.5.2.2在Dreamweaver中定义CSS选择器类型有以下三种：（1）类自定义CSS规则，它的特点是灵活多变，可以重复将样式应用于网页元素。在应用时，它会在HTML标签内加入一个类（class）的定久来规定标签中的格式。比如将类的样式mystyle定义于某个标题，那么代码为：标题1应用自定义的样式（2）标签重新定义指定标签的外观，例如：创建或更改h1标签的CSS样式时，

5、所有用h1标签设置了格式的文本都会立即更新，实现了批量快速更改格式的特点。（3）高级在CSS选择器中，它的功能最为强大，可以定义超链接的特效，定义特定元素组合的格式设置（例如：body,table,td，用逗号隔开），定义嵌套的样式（tdimg空格隔开），定义包含特定id属性的标签的格式设置。定义的位置有以下三种情况：选择“仅为该文档”，此时CSS样式的代码会嵌套在网页和标签中。选择“新建样式表文件”，则弹出“保存样式表文件为”对话框，如图5.5所示，选择样式文件的存储路径和文件名，单击“保存”按钮，将CSS样式代码单独存放在一个CSS文件。选择“已有的某CSS文件”

6、，将新建的CSS规则写入已有的css文件中。比如：选择定义在“仅对该文档”，单击“确定”按钮后，弹出“H1的CSS规则定义”对话框，如图所示，在对话框中进行各项的格式设置，然后单击“确定”按钮。2.编辑和删除CSS样式创建CSS样式后，如果要修改CSS样式，在“CSS样式”面板中，单击“CSS样式”面板右下角的“编辑”按钮，进入“CSS规则定义”的对话框，可进行修改。某个CSS样式不再需要时，在“CSS样式”面板中，首先选中某个样式，单击CSS样式面板右下角的“删除”按钮。5.3CSS样式的应用【例5.6】应用CSS样式设计出图文混排效果，如图所示。此实例所涉及到的知识点是CSS样式的创建和应

7、用，主要包括以下几个方面：背景样式、文本及列表样式、方框与边框样式、动态链接样式；建立单独的CSS文件，应用于多个网页。5.3.1样式表的应用实例1：背景样式　　　的应用在【例5.6】中，上方桔黄色的横条其实是重定义了body标签的网页背景图像，背景图像横向重复，网页元素与页边距也进行了设置，其操作步骤如下：步骤１单击“窗口”菜单｜“CSS样式”命令，打开“CSS样式”面板，单击右下角的“新建C