第9章样式表ppt课件.ppt

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

1、问题：html并没有严格地控制网页的格式和外观，仅定义了网页的结构和个别要素的功能，而是让浏览器自己决定应该让各个要素以何种形式显示，而各浏览器之间的不兼容，也会导致网页在文档结构与浏览器中显示不一致。有什么较好的办法控制网页的格式和外观呢？新课引入：如果用css控制网页的格式和外观，网页就能给人一种赏心悦目的感觉，同时字体的色彩变化也可以使网页变得更加生动活泼；而且css有良好的兼容性，语法易学易懂，有丰富的样式效果。dw提供的css样式面板可以快速地创建、修改和删除样式。本章将详细讲解css样式表的应用。9.1css基础1.css样

2、式表的基本概念style样式：控制文档中某一文本区域外观的一组格式属性。cascading：表示向同一个元素应用多种样式的能力。css（cascadingstylesheets）：指一个包含样式和格式规范的文本文件，它们可以精确控制Web页面内容的外观，而且一次可控制若干个文档的所有样式。样式属性一旦改变，应用该样式的文本也随着改变。Css可以改变的性质有：字体、字号、文字间的空间、对齐属性、列表、颜色、背景、边距、定位、特效、鼠标经过等。为什么称样式表为层叠的呢？打一个不很准确的比喻：如我们评价一个人，需要听取大家的意见再汇总，有人说

3、，这个人诚实，有的说干事踏实，有的说很有责任心.....，这样通过这些意见的“层叠”，就可大体地知道这个人的品质。即使是同样的标志，也可以通过层叠使它们显示出不同的特性来，随着学习的深入，大家会发现层叠的具体含义及一些妙用的。2.css的5个优点：A、通用兼容。防止文字大小因浏览器的设置而改变，影响页面布局。B、便于对网页整体风格进行控制。C、网页提速。格式和内容分开，提高网页内容和格式的设置速度。页面内容位于自身的文档中，而定义该内容表现形式的css规则可以位于自身文档的head标签之内（即内部的css规则），也可以位于另一个文件中（

4、即外部的css规则）。D、方便美化页面。更好的控制页面外观，由精确的布局定位到特定的字体和文本样式。能为页面提供更多的效果，也许这些效果仅使用html根本无法控制。E、便于批量更新。当css的样式被更新或被修改后，所有应用了该样式的文档都会被自动更新。大型网站（163、263、sohu等）的内容和各种网页文本较繁多，通过使用css就可以快速准确地对整个站点或多数页面的字体和格式进行定义和更改。3.css面板打开css面板的3种方法：通过窗口－css样式shift+f11单击属性检查器中的“css”按钮两种模式介绍当前模式：显示当前文档中

5、所选内容的css属性所有模式：显示当前文档中定义的规则和附加到当前文档的样式表中定义的所有规则的列表。下部的各个按钮简介。css面板的功能：在CSS样式面板中可以查看与当前文档相关联的样式定义以及样式的层次结构。可以使用CSS样式面板附加外部CSS样式表，创建、编辑和删除CSS样式。注意：由于css可以直观的管理css。adobe建议用css面板作为创建和编辑css的主要工具。用户可以自己创建层叠样式表，还可以dw附带的层叠样式表4.样式表类型（理解即可）选择器有三种（常见）类型，可以创建4种不同选择器类型的样式：（1）自定义css规则

6、（类样式）：可以将定义的样式应用于任何文本块或文本区域。文本块应用后在标签上添加一个class属性；文本区域应用后，包含class属性的span标签就会被该文本围住。所有类样式（也叫自定义样式）名均以点（.）开头，可以是字母与数字的组合，但.之后必须是字母；如果没有输入该点，则DW会自动添加上。（2）html标签样式表：用来重新定义特定标签的格式。在一个已经链接的css样式表里重定义标签时可能会改变页面布局，应小心使用。（3）对于高级样式（也称ID、伪类选择器）当为ID选择器（也称标识选择符）时，是指为某个标签组合或所有包含特定ID属性

7、的标签定义格式。给这类选择器取名字时必须以#号开头，标识它是一个ID选择器类型，每个该类的样式只能在同一个网页中应用一次；当选中伪类选择器时，可以在“选择器”下拉列表中选择需要的伪类选择器。dw系统提供的伪类选择器包括a:active、a:hover、a:link和a:visited四种；a:link设定正常（默认）状态下链接文字的样式。a:active设定鼠标单击时链接文字(选中超链接)的外观。a:visited设定访问过的链接的外观。a:hover设定鼠标移至链接文字之上时文字的外观。例如下面的超级链接效果：5.样式表的代码书写格式

8、和特性：书写格式：选择器{声明块1；声明块2；......声明块n；}Body{font-family：arial；font-style：italic}P{font-family：courier；fo