第3章CSS层样式表.pptVIP

第3章 CSS层叠样式表 CSS是Cascading Style Sheets英文单词的缩写，中文意思就是层叠样式表。CSS是由W3C组织指定的一种非常实用的网页元素定义规则。CSS能让网页制作者有效的指定和改善网页的显示效果。CSS是对HTML的补充。利用CSS可以节省许多重复性的格式设定。CSS除了可以轻松的获知网页元素的显示位置和格式外，甚至还能产生滤镜、图像淡化、网页淡入淡出的渐变效果。 3.1 CSS简介 在样式表出现之前，Web页面设计者只能使用各个HTML标签提供的标准格式，对于文本、段落以及其他一些元素的展示没有多少变化和灵活性。样式表改变了这种状况，使Web作者能够控制颜色、字体、边界以及各个HTML对象的多个方面。 这种强大的功能使得Web页面的创建更丰富、更亲切。样式表可以看做是一个显示样本，用来配合标记语言达到在浏览器中显示文件的效果。当浏览器读取到标记语言内指定的样式表后，浏览器将按照样式表中的规则来显示该标记语言文件。 3.1.1 CSS的简介 在HTML文档中，尽管可以通过一些文本格式标签来达到控制文本显示效果的作用，但它们的功能有限。例如，在一个HTML文档中有几十张图片，设计者需要修改所有图片的边距为10像素，那么通常的做法只能是逐个手工修改img标签的属性，耗费了大量的重复劳动。 这些弊端都可以用CSS样式表定义来解决，通过将显示和结构分开的方法，在修改样式的时候甚至可以不用打开文档本身。当浏览器读取到HTML文档内所指定的样式表后，浏览器将按照样式表中定义的规则来显示该文档。 3.1.1 CSS的特点 在HTML文档中使用CSS样式表具有如下几方面的优点： 简化HTML文件的建立：将HTML文档与样式表分别建立。在建立HTML文档时就不需要考虑文件的显示方式，而专心于其内容的组织，多注意文档的结构而不是显示效果。这样在建立HTML文档时自然简单得多。 独立性与灵活性：将HTML文档与样式表分开建立，这样两者之间具有独立性。要改变内容时，只需要修改HTML文档，而要改变显示效果时，也只需要改变样式表就可以了。 样式表的重复利用：由于HTML文档与样式表分开建立，这样一个HTML文档可以使用不同的样式表使得外观很方便的变化。同样，多份HTML文档也可以使用同一份样式表，使得这些文档都能呈现相似效果与风格。 3.2 CSS样式的定义及使用 无论用何种方式定义CSS样式，必须首先设置样式表默认语言。设计者需要使用meta标签定义文档的默认样式表语言，meta标签放置在head标签中，语法如下： meta http-equiv=”Content-Style-Type” content=”text/css” meta标签通常应用于文档的开头部分，其中的http-equiv属性是用来在HTML文档中模拟HTTP协议的响应消息头，当浏览器读取到网页文件具有http-equiv属性的meta标签时，它会用处理WWW服务器发送的响应消息头一样的方式来对待。content属性值是对http-equiv的设置进行补充说明的信息。 3.2.1 内联样式表方式 内联样式表方式很简单，只需要在每个相关的HTML标签后书写CSS属性即可，这种方式很直接，例如，规定一个表格中的字为红色，字体大小为10像素，则可以直接在table标签后书写CSS属性： table style=”color:red; font-size:10pt” 其中，style表示CSS样式的规则，引号内部的是相应的属性设置。使用内联样式表的方式，可以直接将定义的规则应用到包含它的HTML标签上。就是利用内联式样式表来控制文本的显示效果。 但使用内联样式表，仍有一些明显的不足，如果要将同样的样式风格设置到网页中所有的表格中，就需要对每个table标签都进行重复的设置，所以这种方式主要用于对具体某个标签进行具体调整。 3.2.2 嵌入样式表方式 嵌入样式表方式是在网页文档的头部（head和/head标签对之间），定义一个style和/style标签对，在其中间进行CSS样式规则的定义。如下代码所示： head style type=”text/css” media=”screen，projection” !-- p(font-size:20pt; color:blue; font-family:宋体; list-style-type:circle; text-decoration:underline) -- /style /head 3.2.3 外部样式表方式 熟悉JavaScript样式表后，在很多时候，对于以前多次使用的CSS样式表，不需要再从新输入样式表的定义就可以重复使用。这种情况可以使用外部样式表的方式来解决。这样