2.2 网页设计中的CSS
CSS主要是为了与HTML一起使用而设计的，所以CSS非常适合在网页设计中使用。CSS可以为网页设计带来全新的构思空间，提供平面HTML所不具备的功能和灵活性。使用CSS，可以实现网页中所有常见的显示效果，在使用CSS之前首先要了解如何使用CSS，以及CSS能做什么、不能做什么。
2.2.1 如何使用CSS
CSS是由许多CSS规则组成的文件。规则是最小的CSS单位，可以定义一种或多种样式效果。每个规则可以标识它选择网页中的哪些部分，以及它对页面的该部分应用什么属性。网页文档链接到某个CSS，就意味着浏览器需要下载该CSS，并且当显示该页面时会应用相应的CSS规则。CSS文件可以与任何数量的网页文档链接，因此，CSS可以控制整个站点或其一部分的外观。
CSS可以与几种不同的标记语言一起使用，这些标记语言包括HTML和XML（Extensible Markup Language，可扩展标记语言）。
1．CSS和HTML
HTML由标记文档内特定元素的一系列标签组成。这些元素都具有默认的表示样式，默认的表示样式由浏览器提供，基于HTML的正式规范。用户通过链接到样式表或在HTML文档中添加样式表，可以对HTML页面应用样式表，这样可以重新定义每个元素的表示样式。
HTML页面可以包含设置表达样式的标签和属性，但是与CSS比较，其功能和效果有限。CSS可以与HTML表达样式的标签和属性一起使用，如<font>标签、color="red"属性，或者可以完全替换其表达样式的标签和属性。
如图2-10所示，该网页没有应用CSS，因此外观十分普通，字体都是浏览器的默认字体，颜色也是非常基本的颜色，虽然外观看起来十分简陋，但所有信息都清楚可见，页面也易于使用，只是缺乏样式表使它看起来并不美观。
图2-10 没有使用CSS的页面效果
图2-11所示为使用CSS后的页面效果。使用CSS不但可以为页面定义引人注目的文字，而且可以使页面的排版更加整齐、漂亮。使用CSS的综合效果就是显著地改进网页的外观，使网站页面更友好、可识别和便于使用。
图2-11 使用CSS后的页面效果
图2-12所示为应用到该页面中的部分CSS代码，从中可以看出CSS代码的写法与HTML代码有很大的不同。
图2-12 部分CSS代码
2．CSS和XML
CSS也可以与XML一起使用。XML通常不具有内在的表达定义，而CSS可以直接应用于XML文件，达到添加表达样式的目的。
2.2.2 CSS能做什么
CSS可以用来改变从文本样式到页面布局的各种内容，并且能够与JavaScript结合产生动态显示效果。
1．文本格式和颜色
使用CSS可以控制很多的文本效果，例如：
· 选择字体与字体大小。
· 设置粗体、斜体、下画线和文本阴影。
· 改变文本颜色与背景颜色。
· 改变链接的颜色，删除下画线。
· 缩进文本或使文本居中。
· 拉伸、调整文本大小和行间距。
· 将文本部分转换成大写、小写，或者转换成大小写混合形式（仅限针对英文）。
· 添加首写大写字母下沉和其他特效。
2．图形外观和页面布局
CSS也可以用来改变图形的外观和页面的布局。在CSS中有一个定位属性，运用该属性，用户不使用表格就能够格式化网页。用户运用CSS改变图形外观和页面布局的一些操作包括：
· 设置背景图像，控制其位置、排列方式和滚动方式。
· 绘制页面各部分的边框。
· 设置全部元素的垂直和水平边距，以及垂直和水平填充方式。
· 设置图像周围及其他文本周围的文本绕排。
· 将页面元素定位到准确位置。
· 重新定义HTML表、表单和列表的显示方式。
· 以指定的顺序将各个元素分层放置。
3．动态操作
网页设计的动态效果是交互性的，为了适应运用而改变。通过CSS能创建响应用户的交互式设计，例如：
· 鼠标经过链接时的效果。
· 在HTML标签之前或之后插入动态内容。
· 自动对页面元素进行编号。
· 在动态HTML（Dynamic HTML，DHTML）和异步JavaScript与XML（Asynchronous JavaScript and XML，AJAX）中的完全交互式设计。
2.2.3 CSS不能做什么
CSS的功能虽然很强大，但是也有某些局限性。CSS的局限性在于，它主要对标记文件中的显示内容起作用。显示顺序在某种程度上可以改变，可以插入少量文本内容，但是如果要在源HTML（或XML）中做较大改变，用户需要使用另外的方法，如使用XSLT（可扩展样式语言转换）。
同样，CSS的出现比HTML晚，这就意味着，一些较老的浏览器不能识别用CSS写的样式。并且CSS在简单文本浏览器中的用途也有限，如为手机或移动设备编写的简单浏览器代码等。
CSS是可以实现向后兼容的，如较老的浏览器虽然不能够显示出样式，却能够正常地显示网页。相反，应该使用默认的HTML表达样式，并且如果设计者合理地设计了CSS和HTML，即使样式不能显示，页面的内容也还是可用的。