通过Dreamweaver_CS3学习HTML+DIV+CSS_第11章__网页样式表CSS.ppt

1、第11章 网页样式表CSS,在前面的章节中学习了基本的网页元素，及其对应的HTML标签的语法。但对于网页设计者来说，仅学会这些是不够的。在Web 2.0标准中，HTML语言只用于定义网页的结构。要制作出漂亮且符合规范的网页，还需要使用CSS样式表来表现网页的外观。本章将介绍CSS的基本概念，以及通过CSS控制网页元素，如文字外观、背景设置和元素定位等。,11.1 CSS基础,11.1.1 CSS基本概念 11.1.2 CSS功能介绍,11.1.1 CSS基本概念,CSS是Cascading Style Sheets的缩写，中文译为层叠样式表，用于控制或增强网页外观样式，并且可以与网页的内容相分

2、离。CSS 1.0是W3C工业合作组织首次发布于1997年，用于对HTML语言功能的补充。1998年又推出了CSS 2，进一步增强了HTML的语言功能。但由于浏览器之间的差异，对CSS的支持并不完全兼容。本书讲解的CSS主要针对IE用户。,11.1.2 CSS功能介绍,在Web早期，网页一般用于技术交流，HTML只用于描述结构和内容。但随着Web的流行与发展，漂亮的外观变得格外重要。随着网页越来越复杂，HTML代码变得越来越繁杂，大量的标签堆积起来变得难以阅读和理解。 此时CSS的出现为这种状况提供了解决之道。CSS还原了HTML语言原本的描述结构功能，不仅实现了美化页面，还使页面结构变得简洁

3、合理且清晰可读。简单了解CSS用于表现网页，控制或增强网页的外观。,11.1.2 CSS功能介绍,Adobe网站首页效果,11.2 引用CSS,既然CSS有如此强大的功能，那么在网页中如何进行引用？一般有下列4种方法： 将外部样式表链接到HTML文件上。 将外部样式表导入到HTML文件中。 将样式表内嵌HTML文件中。 将样式表内联到HTML文件行中。,11.2.1 外联样式表,外联样式表就是把外部的样式表文件链接到网页上，从而在网页中使用样式表。此方法通过标签实现，关于标签在前面的章节中有详细的介绍。将标签加入到标签之间，具体格式如下： ,11.2.2 内嵌样式表,内嵌样式表是把CSS样式定

4、义直接放在标签之间，然后插入到网页的头部。具体使用格式如下：,11.2.3 导入样式表,导入样式表与导入外联样式表的方式相似，也是将外部定义好的CSS文件引入到网页中，从而在网页中进行应用。但是导入的CSS使用import在内嵌样式表中导入，导入方式可以与其他方式进行结合。,导入样式表预览效果,11.2.4 内联样式表,前面介绍了样式表的使用是与表现的内容标签相分离的。内联样式表是把样式直接定义在内容标签内部，不需要把代码放在外部文件或网页头部。内联样式表通过style属性把CSS样式表应用在内容上。其使用格式如下： ,11.3 CSS基本语法,前面介绍了CSS如何在网页中引用，那么CSS到底

5、是如何来定义网页的外观的？其定义的网页外观由一系列规则组成，包括构成、选择符和继承。接下来将分别进行介绍。,11.3.1 构成,CSS的定义由三部分构成：选择符（selector）、属性（properties）和属性的取值（value）。基本格式如下： selector property: value （选择符 属性：值）,11.3.2 选择符,CSS的选择符可以分为4种基本类型：标签选择符、ID选择符、类选择符和特殊选择符。除了基本类型外，还可以把基本类型的选择符组合使用。这些类型选择符的使用规则如下。 1标签选择符 2ID选择符 3类选择符 4选择符组 5包含选择符,11.3.3 继承性,

6、继承性也称层叠性。样式表的继承规则是，外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值。有时，把很多层嵌套的样式叠加在一起。,11.3.4 特殊选择符 伪类,伪类可看做是一种特殊的类选择符，是能被支持CSS的浏览器自动识别的特殊选择符。其最大的用处是，可以对链接在不同状态下的内容定义不同的样式效果。 1语法 2锚的伪类动态连接 3锚的伪类类选择符动态链接,11.3.5 其他伪类,CSS 2定义了首字和首行（first-letter和first-line）的伪类，可以对元素的首字或首行设定不同的样式。下面的实例中在段落标记里定义文

7、本首字尺寸为默认大小的3倍，源码如下所示： p:first-letter font-size: 300% ,11.4 使用Dreamweaver编辑CSS,前面的内容介绍了CSS的语法规则，了解了如何定义CSS样式表。CSS有很多属性用于定义网页元素的外观，按照功能进行分类主要有：类型、背景、区块、方框、边框、列表、定位和扩展。虽然CSS样式表有如此强大的功能，但由于类别过多，用手动编写会比较麻烦。Dreamweaver CS3提供一个方便快捷的工具，本章将介绍如何使用Dreamweaver来编辑CSS样式。,11.4.1 认识CSS面板,在Dreamweaver中编辑CSS基本都通过CSS面

8、板来完成，面板功能如图所示。按Shift+F11组合键，在Dreamweaver CS3中打开【CSS】面板，,【CSS】面板功能示意图,11.4.2 使用外部样式表,前面介绍了外联样式表和导入样式表两种方法可以在网页中引入样式表。现在介绍在Dreamweaver CS3中使用外部样式表，具体步骤如下：,【链接外部样式表】对话框 使用外部样式效果,11.4.3 创建新样式表,上一小节介绍了如何使用外部样式表。本小节将介绍如何创建新样式表，以及在网页中进行使用。在Dreamweaver CS3中，创建新样式表的具体步骤如下：,【.newstyle的CSS规则定义】对话框 使用样式表效果,11.5

9、 设置CSS属性,CSS样式表强大的功能源自使用许多属性对网页元素的定义。在Dreamweaver CS3中为CSS的编辑提供了快捷的操作，使网页设计的工作变得轻而易举。本节将介绍如何设置CSS的属性及其表现的效果。,11.5.1 设置CSS样式类型,CSS样式类型主要用于设置基本的与文字外观相关属性，具体步骤如下：,【类型】选项 CSS样式类型效果,11.5.2 设置CSS样式背景,CSS样式背景用于设置网页元素的背景颜色或背景图像。设置背景图像的具体步骤如下：,【.mybackground的CSS规则定义】对话框 CSS样式背景效果,11.5.3 设置CSS样式区块,CSS样式区块主要用于

10、设置段落文本的格式，具体步骤如下：,CSS规则定义对话框 CSS样式区块效果,11.5.4 设置CSS样式方框格式,CSS样式方框格式主要用于设置块级元素的尺寸、填充大小、空白边尺寸及其浮动位置等。其设置的具体步骤如下：,【.mybox的CSS规则定义】对话框 CSS样式方框格式效果,11.5.5 设置CSS样式边框,CSS样式边框主要用于设置方框的边框粗细、颜色及线条样式。设置CSS样式边框具体步骤如下：,【.myborder的CSS规则定义】对话框 CSS样式边框效果,11.5.6 设置CSS样式列表,CSS样式列表用于设置列表项目符号类型以及缩进方式，设置的具体步骤如下：,【.mylist的CSS规则定义】对话框 CSS样式列表效果,11.5.7 设置CSS样式定位,CSS样式定位用于设置块元素定位方式和显示方式等，具体设置步骤如下：,无裁切效果 裁切效果 CSS样式定位效果,11.5.8 设置CSS样式扩展,CSS样式扩展设置打印页面时分页、鼠标样式和滤镜特殊效果，具体设置步骤如下：,未使用滤镜效果图 使用Gray滤镜效