层叠样式表css.pptVIP

学习要点： 1．了解CSS的特点。 2．掌握CSS中各种选择符的定义及使用方法。 3．掌握CSS样式常用的属性例如字体属性、颜色和背景属性、文本属性、边框属性等。 4．掌握在HTML中使用CSS的几种方式。 5．了解CSS中各种滤镜的定义及显示效果。 第3章 HTML基础与层叠样式单CSS 3.2 层叠样式单CSS 3.2 层叠样式单CSS 3.2.1 CSS的特点 3.2.2 CSS的定义 3.2.3 CSS中的选择符 3.2.4 CSS的使用方式 3.2.5 用CSS控制Web页元素的显示外观 3.2.6 CSS应用实例 3.2 层叠样式单CSS 初步了解CSS CSS（Cascading Style Sheets，层叠样式单）是W3C协会为弥补 HTML在显示属性设定上的不足而制定的一套扩展样式标准。早在1996年W3C便提出了一个定义CSS的草案，很快这个草案就成为一个被广泛采纳的标准。到1998年，W3C在原有草案的基础上进行了扩展，建立了CSS2规范，它不仅包括了原有的表现形式标准，还有许多增强功能。 CSS重新定义了HTML中原来的文字显示样式，并增加了一些新概 念，如：类、层等，还可以处理文字重叠、定位等，它提供了更丰富的 样式。同时CSS可集中进行样式管理。允许将样式定义单独存储于样式 文件中，把显示的内容和样式定义分离，便于多个HTML文件共享。一 个HTML文件也可以应用多个CSS样式文件。 CSS是一种制作网页的新技术，现在已经成为网页设计必不可少的工具之一。 可惜的是，到目前为止，还没有任何一个浏览器能完全遵从CSS2标准，也就是 CSS2定义的某些标记在某些浏览器上可能不起任何作用。 3.2.1 CSS的特点 使用CSS可以很方便地管理显示格式方面的工作，首先它能够为网页上的元素精确地定位，让网页设计者自由控制文字、图片在网页上按要求显示。其次它能够实现把网页上的内容结构和格式控制相分离。浏览者想要看的是网页上的内容结构，而为了让浏览者更好地看到这些信息，就要通过格式控制来帮忙了。以前两者在使用传统HTML语言设计的网页上的分布是交错结合的，查看修改很不方便，而现在把两者分开就会大大方便网页的设计者。内容结构和格式控制相分离，使得网页可以仅由内容构成，而将所有网页的格式控制指向某个CSS样式表文件。 使用CSS带来两个方面的好处： （1）简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。 （2）只要修改保存着网站格式的CSS样式表文件就可以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。避免了一个一个网页的修改，大大减少了重复劳动的工作量。 3.2.2 CSS的定义 CSS是一种格式化网页的标准方法，它就颜色、字体、间隔、定位以及边距等格式提供了几十种属性，这些属性可通过style应用于在HTML标记中。 一个样式表是由许多样式规则组成的，用来控制网页元素的显示方式，其规则的形式为： 选择符{属性1：值1；属性2：值2；……}? 规则由选择符以及紧跟其后的一系列“属性：值”对组成，所有“属性：值”对用 “｛｝”包括，各“属性：值”对之间用分号“;”分隔。选择符是指要引用样式的对象，可以是一个或多个HTML标记（各标记之间用逗号分开），也可以是类选择符（如.text）、id选择符或上下文选择符。样式定义中还可以加入注释来说明代码的意思，注释有利于自己或别人以后编辑和更改代码时理解代码的含义。 CSS定义范例 3.2.3 CSS中的选择符 CSS中有六种选择符，分别是HTML标记、具有上下文关系的HTML标记、用户自定义类选择符、用户定义的ID选择符、虚类、虚元素。分别说明如下： 3.2.3.1 HTML标记类选择符 直接用HTML标记或HTML元素名称作为CSS选择符，例如： 3.2.3.2 具有上下文关系的HTML标记类选择符 如果我们定义了这样的样式规则 body {color: blue}，则网页中所有的文字都以蓝色显示，除非另外指定样式或格式来更改这一设定，这是因为body标记包含了所有其他的标记符和内容。如果我们要为位于某个元素内的元素设置特定的样式规则，则应将选择符指定为具有上下文关系的HTML标记，例如，如果只想使位于H1标记