从了解到深入——样式表几点分析

　2008-01-05 10:34:22　来源：WEB开发网　　　

核心提示：样式表简介样式表（或者称为层叠样式表，英文名Cascading Style Sheet，从了解到深入——样式表几点分析，即CSS）是Html的一部分，但作为对HTML元素（或者标识）展示效果的一种扩展，可以随意取名，注重在warning前面有个小圆点，其功能极为强大，可以说

样式表简介
　　
　　样式表（或者称为层叠样式表，英文名Cascading Style Sheet，即CSS）是Html的一部分，但作为对HTML元素（或者标识）展示效果的一种扩展，其功能极为强大，可以说，有了样式表，你可以完全放弃HTML元素的属性不用就能实现精美的网页排版于布局，因此本站将样式表和HTML分开来，作为专门的一块进行讲诉。对于有HTML基础的朋友来说，学习样式表是非常轻松安闲的事。
　　
　　样式表不算是什么新东西，它已经诞生了许多年了，但因为在实现方面的缺乏，它的强大性和重要性在很大程度上未被注重到。网页制作者渴望通过改善WEB的展示样式来为自己的网页加入创新的动力，于是开始使用NETSCAPE或者IE专有的扩展功能，而不是功能更加强大的样式表。这是很自然的，因为这些专有的扩展功能能被大多数的浏览者看见，而强大的样式表却很少人看见。
　　
　　而今越来越多的浏览齐支持样式表，样式表答应改善整个展示样式的同时保留平台独立性的独有特性开阔了网页制作者的视野。样式表的优点变得更加明显，实现一个满足的效果更加轻易。虽然不断的为展示效果不断地加入越来越多的HTML标记是一个缺点。
　　
　　Netscape的BODY属性现在被广泛的使用，成了HTML3.2及HTML4.0的标准。可是其bgcolor，text等属性和其他属性的灵活程度完全比不上样式表。大部分的背景图象会任由网页不能让那些只有16色显示的人所接受。而对于一些网页256色仍很难接受。使用传统的BODY属性，一个网页制作者必须权衡使用背景图象带来的好处是否比付出的代价还重。使用样式表的话，网页制作者可以用一些不同的样式表提交一批不同的图象，以便用户可以根据自己的系统可以显示的颜色而选择是24位样式表还是8位样式表。假如网页制作者提供的样式表都不适合用户，用户只要忽略网页制作者的样式表就是了。
　　
　　样式表可以令网页制作者的工作更加轻松，当每个水平线语句都需要使用<hr width="75%" size=5 align="center">的时候，网页制作者将觉得非常麻烦。使用样式表，只需要指定这样的参数一次，网页样式就可以被整个网站应用。而且假如网页制作者觉得width=50%更好需要更改的话，那么他只需要在一个地方改变这个参数，而不是找遍几百页来更改HTML。不仅仅如此，当一个文件包含了所有的样式信息时，样式表还可以减少下载的时间。
　　
　　样式表也为他们提供的展示效果的项目给予更多的灵活性。属性，如颜色，背景，边界，边框和许多其他的属性都能被所有的元素应用（包括在通常情况下无法使用背景和边框属性的<p>,<a>,<b>,<h1>~<h6>等元素）。仅仅使用HTML和它专有的扩展，必须依靠象bgcolor之类的属性，而这些属性只对于少数的一些元素有效（比如对前面提到的<p>,<a>等元素就无效）。样式表给予应用一个样式到所有段落，或所有的二级标题，或所有的强调文字很大的灵活性。
　　
　　在段落中，通常都会让首行文字前面会留些空白，这就叫缩进。使用样式表，网页制作者可以使用文本缩进属性来缩进文本，而不是非常麻烦的键入来用空格进行缩进。假如网页制作者决定改变网站中所有段落的缩进，他只需要改变样式表中的一行就行了。
　　
　　使用HTML的<font size=#>元素定义网页中的文字大小，不但只有size=1~7共七种效果供选择，浏览者还可以通过浏览器的一个菜单来进行调整，这经常会使原本排版精美的页面变得凌乱不堪，更不用说精确定位了。使用样式表，不但可以任意选择文字大小，而且还提供了常规的静态定位，相对定位甚至是绝对定位。
　　
　　样式表在WEB方面迈开了一个巨大的前进步伐。随着HTML和样式表的内容和展示效果的差距，WEB不需要放弃优秀的思想??平台独立性。今天，样式表已经成为HTML4.0的一个事实标准。谁都愿意看到逻辑清楚，简洁而美丽的HTML源代码。网页制作者最终可以改善文档的展示而不会使源代码太复杂以至于拥护根本不能阅读网页。
　　
　　样式表实例讲解
　　
　　有好几种方法将样式表应用到网页中，最简单的就是使用HTML的style组件并且放置在网页的头元素<head></head>中，比如下面的代码实现段落呈黑色背景，白色字体显示的代码：
　　
　　<html>
　　
　　<head>
　　
　　<title>样式表范例</title>
　　
　　<style type="text/css">
　　
　　p{background-color:#000000;color:#ffffff}
　　
　　</style>
　　
　　</head>
　　
　　<body>
　　
　　<p>样式表不算是什么新东西，它已经诞生了许多年了，但因为在实现方面的缺乏，它的强大性和重要性在很大程度上未被注重到。网页制作者渴望通过改善WEB的展示样式来为自己的网页加入创新的动力，于是开始使用NETSCAPE或者IE专有的扩展功能，而不是功能更加强大的样式表。这是很自然的，因为这些专有的扩展功能能被大多数的浏览者看见，而强大的样式表却很少人看见。
　　
　　</p>
　　
　　</body>
　　
　　</html>
　　
　　显示效果如下：
　　
　　样式表不算是什么新东西，它已经诞生了许多年了，但因为在实现方面的缺乏，它的强大性和重要性在很大程度上未被注重到。网页制作者渴望通过改善WEB的展示样式来为自己的网页加入创新的动力，于是开始使用NETSCAPE或者IE专有的扩展功能，而不是功能更加强大的样式表。这是很自然的，因为这些专有的扩展功能能被大多数的浏览者看见，而强大的样式表却很少人看见。
　　
　　下面就让我们来分析一下样式表的构成。style标识是HTML原有的，在这里其type=text/css属性是必须的。夹在style标识之间的就是样式表定义的内容了。考虑到用户的浏览器版本过低不支持样式表的情况下会错误的将style中的内容显示在页面上，这是网页设计者所不愿见到的，因此还需要在style内加上HTML的注释标识，这样高版本的浏览器可以正确读取样式信息，同时不会在低版本的浏览器中显示出来。即写成：
　　
　　<style type="text/css">
　　
　　
　　
　　</style>
　　
　　今后我们将只书写样式表中的内容，省略其他部分（包括style标识），请自己添加。
　　
　　你可能已经注重到style标识中仅有p{background:#000000;color:#ffffff;}这么短短的一点代码，对，就是它在起作用。花括号前面的p称为选择符，表示对该文件中的<p>标识起作用，同样的道理，你可以将其换为body{……}，就可以控制<body>标识了。
　　
　　花括号中的background-color当然是背景颜色了，color则是文字颜色，它们都可以称为样式表中的属性，至于#000000和#ffffff则是属性对应的值，他们代表什么就不用我多说了吧！属性和值之间用冒号':'分隔。多个属性之间用分号';'分隔。冒号和分号前后假如有空格不会对样式语法及效果表产生影响。假如是有多个选择符，没关系直接写下去就可以了，比如下面的样子：
　　
　　body{width:600px}p{color:#000000}
　　
　　当然为了美观建议在定义完body后，即在p之前换行，当然这样仅仅是为了美观，如下：
　　
　　body{width:600px}
　　
　　p{color:#000000}
　　
　　你甚至可以将包括style标识在内的所有代码都写在一行以内，前提是你不怕样式表修改时不易阅读的话。
　　
　　假如有如下的样式定义：
　　
　　body{font-size:12px}
　　
　　p{font-size:12px}
　　
　　即定义两个或者多个元素具有相同的属性，我们是否可以将其合并一次定义呢？答案是肯定的。只要用逗号分隔两个选择符即可：
　　
　　body,p{font-size:12px;}
　　
　　假如一个页面中有很多个链接元素<a>，而现在只需要定义所有位于段落中的<a>元素（即形如：<p>……<a href=#>……</a>……</p>的链接元素）带删除线而不影响位于table中的a元素怎么办呢？写成下面这样就可以了：
　　
　　p a{text-decoration:line-through}
　　
　　即用空格表示元素的包含关系。那么假如一个属性具有的两个或者多个值可以并存怎么办呢？也用空格分隔属性值即可，比如定义链接具有上划线和下划线：
　　
　　a{text-decoration:underline overline}
　　
　　样式表定义的几种方法
　　
　　上一讲中只能对同一类元素进行样式定义，假如我们只需要定义某一个元素，比如在一个HTML页面中有许多p元素，现在我只想定义其中一个p元素怎么办呢？这就是我们这一讲中将要阐明的。事实上样式表共有4中方法进行表示，上一讲只提到两种，剩下的两种都可以解决这个问题。让我们看看：
　　
　　1，以HTML元素作为选择符方式：
　　
　　这就是上一讲的主要内容，用法很简单，HTML元素后紧跟花括号进行定义即可。
　　
　　2，关联选择符方式：
　　
　　就是前面提到的只定义位于某一类元素中的HTML元素，比如只定义嵌套在表格table中的表格宽300个象素：
　　
　　table table{width:300px}
　　
　　其中px是象素单位，当然也可以用绝对单位如毫米mm，厘米cm，磅pt及百分比单位40%；
　　
　　3，类选择符方式：
　　
　　自定义一个类名进行定义，并在HTML元素中加上属性class=#，其中#表示自定义的类名。比如定义样式：
　　
　　.warning{color:#ff0000;}
　　
　　其中warning是自定义的类名，可以随意取名。注重在warning前面有个小圆点。然后在body中对需要应用该样式的地方加上属性class=类名，如：
　　
　　<p class="warning">类选择符进行定义</p>
　　
　　类选择符方式是样式表应用最多的