CSS层叠样式.doc

第七章 CSS层叠样式知识目标 1. 了解CSS样式的概念；2. 掌握CSS样式表的创建方法；3. 掌握应用CSS样式表的方法。 能力目标1. 了解CSS样式的概念；2. 掌握CSS样式表的创建方法；3. 掌握应用CSS样式表的方法。7.1 CSS样式概述7.2 CSS 结构和规则7.3 CSS样选择符7.4 BOX模型属性7.5 布局属性7.6 文本属性7.7 颜色及背景属性7.8 字体属性7.9 CSS样式经典实例7.1 CSS 概述一个简单的例子：建立一个简单的样式表，效果如图10.1所示。文件ex10-01.html的源代码 简单的样式表样式表这是一个简单的样式表现在，给这个HTML文件加一些样式表。只需在标签之前插入以下代码： 这样就已经制作出了使用样式表的网页。从浏览器中打开网页（当然首先要保证浏览器支持样式表），网页显示效果如下图所示。7.1.1 认识CSS样式 CSS样式表（Cascading Style Sheets，简称CSS），又称为层叠式样式表，由W3C（World Wide Web Consortium）组织开发的。CSS样式是预先定义的一个格式的集合，包括字体、大小、颜色、对齐方式等。利用CSS样式可以使整个站点的风格保持一致，是网页设计中用途最广泛、功能最强大的元素之一。样式表(StyleSheets)技术诞生于1996年，全称是层叠样式表(Cascading StyleSheets，简称CSS)。那什么是样式呢？样式其实就是格式，对网页来说，像文字的大小、颜色以及图片位置等，都是网页显示信息的样式。那层叠又是什么意思？意思是当我们在HTML文件中引用数个定义样式文件（CSS文件）时，若数个样式文件间所定义的样式发生冲突，将依据层次处理。 样式表是HTML的表兄弟。样式表的产生是由于最初的HTML标准还不尽人意，用HTML制作网页就像是用画笔绘制一幅图画，只有那些对网页制作痴迷而执着的人才可能精确地实现预定的结果。正是在这种情况下，样式表技术诞生了，样式表的目的是为了“对布局、字体、背景和其他图文效果实现更加精确的控制”。HTML 4.0版本已经包括了样式表的内容。样式表正在逐渐改变设计、制作网页的方法，为网页创新奠定了基础。 样式表的宗旨就是将结构和格式分离。样式表将定义结构和定义格式的两部分相互分离，从而使网页设计人员能够对网页的布局施加更多的控制。HTML仍可以保持简单明了的初衷，而样式表代码独立出来后则从另一角度控制网页外观。 利用样式表，可以将站点上所有的网页都指向某个CSS文件，用户只需要修改CSS文件中的某一行，那么整个站点都会随之发生改变。这样，通过样式表就可以将许多网页的风格格式同时更新，不用再一页一页地更新了。样式表的规则如下： 选择符属性1:值1;属性2:值2 如，h1color:green 这个规则就是告诉浏览器所有标签和之间的文字以绿色显示。 其中h1就是选择符，它是一个附带样式功能的HTML标签。花括号中所包含的就是属性，它用于定义实际的样式，每个属性包括两部分：属性名（如color）和属性值（如green）。我们可以使用四种方法将样式表加入到网页中，每种方法都有其不同的优点： 1将样式表加入到HTML文件行中 2将样式表嵌入到HTML文件的文档头中 3将一个外部样式表链接到HTML文件上 以上三种方法，可分成内部样式表（前两者）及外部样式表两类。可以直接在HTML代码行中加入样式规则，这种方法适用于指定网页内的某一小段文字的显示风格。不过，利用这种方法定义样式时，效果只可以控制该标签，其语法如下： 在标签中，用设置style属性的方法，一次只能控制一个标签的样式，实在让人看不出CSS对网页设计有什么特别的效果。在这一节，我们将讲述在文档头嵌入样式表规则的方法，浏览器在整个HTML网页中都执行该规则。如果想对网页一次性加入样式表，就可采用该方法。 这种方法就是将所有的样式表信息都列于HTML文档的头部，基本语法如下：.说明： 标签是用来说明所要定义的样式。type属性是指定标签以CSS的语法定义。 样式表基本格式中的type=text/css用于说明这是一段CSS规则代码。 为了防止不支持CSS的浏览器将标签间的CSS规则当成普通字符串，而显示在网页上，应将CSS的规则代码插入标签之间。 选择符1.选择符n：选择符就是样式的名称，在这里选择符可以使用HTML标签的名称，所有HTML标签都可以作为CSS选择符。 样式属性：定义样式的属性名称链接到样式表前面，我们介绍了在文档头嵌入样式表规则的方法。这种方式定义出的样式，将只限于在该HTML文件中，效益并不大。如果想要达到集中管理网站网页样式的目标时，就必须将样式定义在独立的CSS文件中，并将该文件链接或输入到要运用样式的HTML文件。 这种方法就是将多个HTML文件都链接到一个样式表文件。这个外部的样式表将设定所有网页的规则。如果改变样式表文件中的某一个细节，所有网页都会随之改变。如果维护的站点很大，则这种方式绝对会有其用武之地。它的使用方法是：创建一个普通的网页，但不使用规则，而是在HTML文档头部使用标签。基本语法如下：.说明： *.css为预先编写好的样式表文件。 外部样式表文件中不能含有任何像或这样的HTML标签。样式表仅仅由样式表规则或声明组成。 在href属性中可以使用绝对URL或者相对URL。 外部样式表文件中，无须使用注释标签。 如同发布HTML文件那样，将这个CSS文件发布到服务器中。在网页被打开时，浏览器将依照链接标签将含有链接外部样式表文件的HTML网页按照样式表规则显示。 单一的样式可以通过多个样式表给出，例如： 在这个例子中，3个样式表组合成一个contemporary样式，要将多个样式表组合成一个单一样式，必须在每个样式表中使用相同的title。 当样式被应用到很多的网页时，采用链接到外部样式表的方式是理想的。网页制作者使用外部样式表可以仅仅通过改变一个文件而改变整个网站的外观；同样，大多数浏览器会保存外部样式表文件到缓冲区，从而提高了显示网页时的速度。输入样式表的方法同链接到外部样式表文件类似。其语法如下： 说明： import语句后的“；”号是必须的。 要输入的样式表文件的扩展名为.css。我们介绍了四种样式表的使用方法，这四种方法在使用上各有其特色，但当这四种方法同时出现时，浏览器会以哪种方法为优先使用呢？答案是在行内直接加入样式顺序为最高。至于其他三种的顺序则是一样的，如果其他三种方法同时出现，且各方法定义的样式又都不同时，浏览会选择较后定义的样式来显示。class与id类选择符class、id类选择符能给网页制作者带来极大的便利。class类选择符：class类选择符用于指定标签属于何种样式类。class类选择符的使用语法如下:或者下面是语法各部分的说明： *.a1.*.an：为定义的类选择符名称，通常在定义样式时指定给样式的名称。其适用范围是整个HTML文件中所有由class类选择符所引用的设置。*符号也可以用HTML内的标签替代（即标签1.标签n），此外*符号，在设置可以省略。 标签1.a1.标签n.an：为HTML的标签名称，即前面提过的*符号，也可以用HTML内的标签替代。不同点在于，若在定义class类选择符前加上HTML的标签时，其适用范围将只限于该标签所包含的内容。例如，在样式表中可以定义这样的类，代码如下：.ppcolor:lime; font-family:黑体p.ptcolor:blue; font-family:仿宋 这些类可以使用class属性在HTML中引用： 这是我们定义的PP类 这是我们定义的PT类 在这个例子中，pp类可以用于任何HTML标签，因为它在样式表中没有与特定的HTML标签关联。而这个例子中pt类只能用于标签。 对于HTML文档中在结构上相同的部分，类是应用样式的有效办法。id类选择符id类选择符与class两者最大的差别在于定义样式名称前的符号,用class定义时为“*.样式名称”；若用id定义时为“#样式名称”。 id与class虽然在标签内的定义写法不太一样，但基本上其显示在网页上的效果是一样的。id类选择符的使用语法如下:或者下面是语法各部分的说明：(1) #a1.#an：为定义的类选择符名称，通常在定义样式时指定给样式的名称。其适用范围是整个HTML文件中所有由class类选择符所引用的设置。(2) 标签1.a1.标签n.an：为HTML的标签名称，不同点在于，若在id选择符前加上HTML的标签时，其适用范围将只限于该标签所包含的内容。伪类一组专门的预定义的类称为伪类，主要用来处理超链接的状态。超链接文字的状态可以通过伪类选择符样式规则来控制。伪类选择符包括： a:link：未访问链接 a:visited：已访问链接 a:active：激活时（链接获得焦点时）链接的颜色 a:hover：鼠标移到链接上时一般a:hover和a:visited链接的状态（颜色、下划线等）应该是相同的。前三者分别对应body元素的link、vlink、alink这三个属性。四个“状态”的先后过程是：a:link -a:hover -a:active -a:visited。另外，a:active不能设置有无下划线（总是有的）。举例：伪类的常见状态值两个伪元素：:first-letter和:first-letter。它们常常和像这样的元素引导的一段文字一起使用，用来影响其中首字母或者首行的显示，如p:first-letter和p:first-line。情景选择（contextual selection） 情景选择允许对位于某嵌套层次内的某元素进行样式控制，该规则通过按照嵌套的顺序列出元素的名称，然后给出样式规则来创建。 举例：使所有出现在元素内的元素都有黄色的背景颜色。p strong background-color : yellow;样式规则的继承与嵌套 该性质允许对元素的多种规则进行组合，既可以从父元素那里继承一些属性，也可以重写某些属性。层叠（CSS中的C）的一般思想有效地创建了一个系统以确定在有多个样式表的文档中哪些规则将被应用。例如，使用id属性为一个特定的元素指定规则，这相对于通过class规则指定的规则具有优先权，而class规则相对于为元素自身指定的规则有优先权。相对于应用于整个文档的样式或链接进来的外