3.2　CSS基础

CSS（Cascading Style Sheet，层叠样式表）是由万维网联盟（W3C）组织进行维护和制定标准，是一种用于为结构化语言（包括XML和HTML）增加相应样式的计算机语言。CSS常用于网页编排中，在HTML中使用CSS可以制作出非常绚丽的网页效果。

CSS是在HTML被发明之初，就开始以样式表的形式出现，而且是不同的浏览器针对自身不同的特点进行定义，当时的样式表仅仅是给网页的浏览者使用的，因为早期的HTML定义的功能和属性很少，浏览者只能通过浏览器定义的样式表进行调节，从而改善阅读效果。让用户对样式进行调节，一方面无法满足网页设计师对网页进行的调控，另外一方面，用户对网页要进行调控，这势必会增加用户使用的难度。因此，随着HTML的迅速发展，其自身功能和属性也逐渐完善，浏览器定义的样式表也就失去了作用。

为了让网页设计者能够更好的对网页元素进行调控，1994年哈坤·利与Bert Bos决定共同合作设计CSS。虽然之前也有样式表，但是CSS是第一个层叠样式表。所谓层叠，即允许用户的样式可以继承其他样式表中的样式，这样用户可以非常灵活的对网页进行设计，用户可以在某些需要自己设计的地方使用自己的样式表，同时也可以在其他地方继承其他样式表。这种设计方式得到了万维网联盟（W3C）组织的认同，同时于1996年12月，万维网联盟（W3C）组织推出了第一个CSS，即CSS1，随后在1998年推出了CSS2。目前最新的CSS版本为CSS3，它结合当前的HTML 5进行Web开发成为网页开发必不可少的一部分。

CSS在使用上，是将HTML中的显示与内容分开，这么做有很多好处：

①可以使文件结构化。这种结构化设计，可以对网页设计中进行模块化设计（用div控制），并且在设计过程中，能够遵循自上而下，逐步细化的思想，使得编程人员能够更好地利用CSS对网页元素进行控制。

②增强文档的可读性。由于CSS和HTML分开了，所以在对HTML源码进行查看时更加容易理解，而且在CSS源码中全部是关于样式的定义，也能够很好地对源码进行查看。另外，可读性作为程序设计中最重要的原则，能够有利于程序员对程序进行修改，在多人协作开发系统中，也能方便他人理解自己书写程序源码，从而提高系统开发的效率。同时，可读性也更方便开发者对设计的程序或系统进行升级和维护。

③能够更加方便用户决定网页元素的显示效果。由于CSS能够和用户进行简单的交互、对网页元素进行像素级别的控制，这能够让网页设计者对网页的显示效果进行更精确的控制，也能够决定网页元素的显示位置。

④文档的结构定义更加灵活。由于显示和内容分开了，因此文档的结构定义也就更加灵活，可以在一个HTML文件中引入多个CSS文件进行调控，而不必在一个页面中冗余过多的CSS定义。

⑤维护和升级更加容易。由于CSS是将显示和内容分开的，因此在维护和升级上也相对更加容易。用户在维护时，只用修改相应的CSS文件即可，不用对整个系统进行更改，更改完成后，上传到服务器，即刻生效。同时，用户在对Web系统进行升级时，也只是修改CSS文件，增加新的CSS定义，不必对整个系统文档修改。

由于目前Web设计中，往往采用div进行控制，即采用一个div嵌套控制另外一个div，如边界（margin）、边框（border）、填充（padding）、内容（content）。为了对div进行有效控制，一般采用CSS进行控制。这种嵌套方式与我们日常生活中的盒子包装有些类似，如边界相当于最外面的一层盒子的包装膜、边框相当于里面的一层盒子、填充相当于盒子里为了防止里面物品受损的填充物、内容相当于盒子里的物品。在这里，我们可以把每一个HTML的标记看作是一个盒子，对盒子里面还可以放一些小盒子，每个盒子同时拥有以上4个属性，每个属性可以分为上、下、左、右4个边界。因此对其控制的盒子模型如图3.9所示。

图3.9　CSS的盒子模型

从图3.9中可以很清楚地看到利用CSS盒子模型能对HTML进行有效的控制，并把HTML中的元素有效地划分成不同的盒子，以及盒子中嵌套使用，这样可以有效地对网页各个元素进行最精确的控制，从而使得网页显示达到非常绚丽的效果。

基于以上CSS的特点和优势，CSS能够非常容易的对页面布局进行控制，并能够改善页面的显示效果，因此它是目前Web开发中不可缺少的技术之一。在本文中，仅对CSS的一些基本用法进行介绍。