CSS属性和属性值.DOC

第 章 CSS样式设计基础（CSS（Cascading Style Sheet，层叠样式表）是用来进行网页样式设计的标识语言，与HTML一样属于解释性语言。如设计链接文本初始显示为蓝色，当光标移过时字体变成红色且显示下划线，这就是一种样式。通过设计样式表，可以统一控制HTML中各个标签的显示属性。CSS样式表可以使用户更有效地控制网页外观，精确指定网页元素位置，创建以及观察特殊效果。使用CSS，可以将网页结构和内容与表现形式分离开来，网页结构和内容被存放在HTML文档中，而用于定义表现形式的CSS规则则被存放在另一个CSS样式表文件中。 本章将重点讲解CSS的基本语法和规则。当然，学习CSS的最好方式之一是直接使用它。但是，这样可能会误解重要的概念，或者在日后设计中出现问题，因此本章介绍的一些基本但常常被误解的概念还需要读者认真学习，特别是零基础的读者。同时，本章还将讲解如何让HTML和CSS保持清晰且结构良好。 学习重点： ( 设计良好的HTML结构。 ( 恰当选用HTML标签。 ( 了解CSS的基本语法和用法。 ( 熟练使用CSS选择器。 ( 理解CSS的基本特性。 ( 了解CSS的属性和属性值。 1.1 设计良好的网页结构 学习CSS之前，需要学会搭建结构良好的网页结构，如果没有结构良好且有效的HTML文档，那么很多事情都是不可能实现的，或者说实现起来是非常困难的。结构良好且有的HTML 文档在CSS设计中非常重要，在文档中增加更多的有语义的标签，会让后期工作更加轻松。 1.1.1 选用符合语义的标签 早期的Web仅仅是一系列相互链接的研究文档，并使用HTML添加基本的格式和结构。但是，随着互联网的流行，HTML开始用来表现页面。设计师用字体和粗体标签来创建所需的视觉效果，而不只是用标题元素突出显示页面的标题。表格成了一种布局工具而不是显示数据的方式。甚至设计师使用块引用标签（blockquote）来添加空白而不是表示引用。网页很快就失去了语义，成了字体和表格标签的大杂烩。 HTML原本是一种简单且容易理解的标签语言。但是，随着网页变得越来越复杂，代码变得理解了。因此，需要使用各种可视化网页编辑工具来处理大量的无语义标签。不幸的是，这些工具并没有简化工作，反而添加了更多复杂的标签。最后，即使普通的网页也变得非常复杂，以致于几乎不能进行手工编辑，后期编辑简直就是一场噩梦，简单的修改就会破坏代码之间的结构性，使网页无法正常显示。 如图1.1所示是搜狐网站（/）2002年1月18日的首页效果（mall.cn/cgi-bin/arcv-nohead/），它使用表格进行布局，对标题使用大的粗体字。代码缺乏结构，很难理解，网页结构和表现混淆在一起，很难读懂标签的语义，如图1.2所示。 图1.1 2002年1月8日搜狐网站首页 图1.2 2002年1月8日搜狐网站首页结构代码 在这种情况下，CSS 出现了。CSS可以控制页面的外观，并且将文档的表现部分与内容分隔开。表现标签（如字体标签）可以去掉，而且可以使用CSS而不是表格来控制布局。标签重新变得简单，人们又开始对底层代码感兴趣了。 如图1.3所示是搜狐网站（/）2011年12月26日的首页效果，首页设计更趋成熟、大气，信息容量和用户体验得到明显改善和强化，它具有良好的结构，容易理解。虽然它仍然包含一些表现标签，但是与图1.2中的代码相比有了显著的改进。 图1.3 2011年12月26日搜狐网站首页 图1.4 2011年12月26日搜狐网站首页结构代码 标签语义重新得到了重视，浏览器的默认样式可以被覆盖，所以可以将某些内容设置为标题，而不需要为它指定大的、加粗的字体。可以创建列表，而这些列表不一定显示为一系列带黑点的列表项，可以使用没有相关联样式的块引用。设计师开始按照HTML 元素的原义使用它们，无需它们的外观。 有语义的标签为设计师提供了很多方便。与表现性的页面相比，有语义的页面更容易处理。例如，假设需要修改页面中的一个引用。如果这个引用加上了正确的标签，那么很容易搜索代码，找到第一个块引用元素。但是如果这个引用只是另一个段落元素标签，就很难寻找了。 除了人容易理解之外，程序和其他设备也可以理解有语义的标签。例如，搜索引擎可以识别出标题行，并给它分配更高的重要度，因为它被包围在h1 等标题标签中。屏幕阅读器的用户可以依靠标题作为辅助的页面导航措施。 有语义的标签提供了将元素设计为所需样式的简单方法。它在文档中添加了结构，并且创建一个底层框架。可以直接设置元素的样式，而不需要添加其他标识符，因此避免了冗余代码。HTML包含丰富的语义元素，如： h1、h2 、h3等标题标签。 ul、ol 和dl列表结构标签。 strong