网页设计与制作电子课件 第5章 css样式表.pptVIP

CSS（Cascading Style Sheet），中文译为层叠样式表。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 【本章学习目的】 本章通过多个CSS样式的应用实例，重点介绍了CSS样式表功能、定义CSS规则的方法，应用内嵌式样式表和链接外部样式表的方法等，通过本章的学习，读者应了解CSS样式表的用途，掌握创建和应用CSS样式表的方法，学会用CSS样式表进行网页的美化和网页布局。 5.1 利用CSS 样式表的网页实例 5.2 使用CSS样式表 5.2.1 CSS样式表概述 1. 样式表的使用 CSS样式表的使用常用的方法有以下两种： 页面内嵌法。将样式表代码直接写在HTML标签的head区。 外部链接法。将样式表写在一个独立的后缀名为CSS文件中，在需要应用CSS样式的网页中链接该文件，在页面head和/head之间用以下代码调用。link href=css/master.css rel=stylesheet type=text/css / 2. CSS样式表语法选择符 { 属性1：值1；属性2：值2…… } 参数说明： 属性和属性值之间用冒号(:)隔开，定义多个属性时，属性之间用分号(;)隔开。 5.2.2 在Dreamweaver中定义CSS 1. 创建CSS样式 选择“窗口”菜单｜“CSS样式”命令，打开“CSS样式”面板，单击右下角的“新建CSS规则”按钮，或选择“文本”菜单｜“CSS样式”｜“新建”命令，弹出“新建CSS规则”对话框. 2.编辑和删除CSS样式 创建CSS样式后，如果要修改CSS样式，在“CSS样式”面板中，单击“CSS样式”面板右下角的“编辑”按钮，进入“CSS规则定义”的对话框，可进行修改。 某个CSS样式不再需要时，在“CSS样式”面板中，首先选中某个样式，单击CSS样式面板右下角的“删除”按钮。 5.3 CSS 样式的应用 5.3.3 样式表的实例应用3：方框和边框　样式的应用 在【例5.6】中，插入一幅图像，通过CSS样式的应用，实现了图文混排的效果。该实例中主要设置了方框的浮动和边界及填充的距离，实现了图像与文本之间的环绕，还设置了边框，添加了一个虚线边框修饰图像。这里首先定义了一个类的CSS规则，然后将此类应用于某个图像上。 图像边距的设置 图像的边框的设置 5.3.4 样式表的实例应用4：动态链接样式 简单的CSS链接样式可以在页面属性中的“链接”选项卡中设置，5.1节中已经讲过。 在【例5.6】中，建立较为复杂的CSS链接样式，当鼠标经过链接文字时，文字颜色会变色、字体样式变粗、出现背景颜色、文字修饰有下划线等。这里还讲解两个重要的知识点：如何建立CSS链接样式和如何调用外部CSS样式表。 1.建立链接CSS样式 单击“CSS样式”面板中的“新建CSS规则”按钮，选择器类型：高级，单击“选择器”下拉列表，分别选择a:llink（链接后效果）、a:visited（访问后效果）、a:hover（鼠标经过效果），分别定义其样式。 2. 调用CSS样式文件 其它网页要应用刚才建立的CSS样式文件，如何调用呢？单击“CSS样式”面板中的“附加样式表”按钮，弹出“链接外部样式表”的对话框，在“文件/URL”文本框中输入外部CSS文件路径和文件名，添加为选择“链接”选项，将新建的样式文件链接到此文件，如图所示。 5.3.5 样式的实例5：滤镜效果的应用 　　CSS滤镜并不是浏览器的插件，也不符合CSS标准，而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的一类功能集合。由于浏览器IE有着广泛的使用范围，因此CSS滤镜也被广大设计者所喜爱。 　　CSS滤镜可以为样式控制的对象指定特殊效果。 　　?注意：CSS滤镜只能作用于有区域限制的对象，如表格、单元格、图片等，而不能直接作用于文字，所以把所需要增加特效的文本事先放在单元格或层中，然后对单元格或层应用CSS样式。 利用CSS样式还可以代替表格进行网页布局，本小节讲解【例5.5】如何利用DIV标签和CSS样式的定义进行网页的排版。制作过程如下：1. 分析架构，如图所示。2.模块拆分一个总的DIV标签，它包含了4个DIV标签。Container　最大的容器，将所有内容包含在内。Width：778px。Header　网站头部图标，包含了一幅广告横幅，Width：778px，Height：110px。Leftnav　左侧导航条，Width：200，浮动为左对齐。Content　网站的主要内容。 Width: 480px。Footer　网站底栏，包含版权信息等。3.定义页面属性和定义特定 Id 属性的DIV标签的CSS样式4.插入网页元素和调整页面结构最