css+div网页样式与布局从入门到精通

《css+div网页样式与布局从入门到精通》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、Note第1章CSS样式设计基础第章CSS样式设计基础（视频讲解：2小时38分钟）CSS（CascadingStyleSheet，层叠样式表）是用来进行网页样式设计的标识语言，与HTML一样属于解释性语言。如设计链接文本初始显示为蓝色，当光标移过时字体变成红色且显示下划线，这就是一种样式。通过设计样式表，可以统一控制HTML中各个标签的显示属性。CSS样式表可以使用户更有效地控制网页外观，精确指定网页元素位置，创建以及观察特殊效果。使用CSS，可以将网页结构和内容与表现形式分离开来，网页结构和内容被存放在HTML文档中，而用于定义表

2、现形式的CSS规则则被存放在另一个CSS样式表文件中。本章将重点讲解CSS的基本语法和规则。当然，学习CSS的最好方式之一是直接使用它。但是，这样可能会误解重要的概念，或者在日后设计中出现问题，因此本章介绍的一些基本但常常被误解的概念还需要读者认真学习，特别是零基础的读者。同时，本章还将讲解如何让HTML和CSS保持清晰且结构良好。学习重点：:设计良好的HTML结构。:恰当选用HTML标签。:了解CSS的基本语法和用法。:熟练使用CSS选择器。:理解CSS的基本特性。·47·Note第1章CSS样式设计基础:了解CSS的属性和属性值

3、。·47·Note第1章CSS样式设计基础1.1设计良好的网页结构学习CSS之前，需要学会搭建结构良好的网页结构，如果没有结构良好且有效的HTML文档，那么很多事情都是不可能实现的，或者说实现起来是非常困难的。结构良好且有效的HTML文档在CSS设计中非常重要，在文档中增加更多的有语义的标签，会让后期工作更加轻松。1.1.1选用符合语义的标签早期的Web仅仅是一系列相互链接的研究文档，并使用HTML添加基本的格式和结构。但是，随着互联网的流行，HTML开始用来表现页面。设计师用字体和粗体标签来创建所需的视觉效果，而不只是用标题元素突

4、出显示页面的标题。表格成了一种布局工具而不是显示数据的方式。甚至设计师使用块引用标签（

）来添加空白而不是表示引用。网页很快就失去了语义，成了字体和表格标签的大杂烩。HTML原本是一种简单且容易理解的标签语言。但是，随着网页变得越来越复杂，代码变得越来越不容易理解了。因此，需要使用各种可视化网页编辑工具来处理大量的无语义标签。不幸的是，这些工具并没有简化工作，反而添加了更多复杂的标签。最后，即使普通的网页也变得非常复杂，以致于几乎不能进行手工编辑，后期编辑简直就是一场噩梦，简单的修改就会破坏代码之间的结构性，使

5、网页无法正常显示。如图1.1所示是搜狐网站（http://www.sohu.com/）2002年1月18日的首页效果（http://www.infomall.cn/cgi-bin/arcv-nohead/20020118/http://sohu.com/），它使用表格进行布局，对标题使用大的粗体字。代码缺乏结构性，很难理解，网页结构和表现混淆在一起，很难读懂标签的语义，网页结构代码如图1.2所示。·47·Note第1章CSS样式设计基础图1.12002年1月18日搜狐网站首页图1.22002年1月18日搜狐网站首页结构代码在这种情况

6、下，CSS出现了。CSS可以控制页面的外观，并且将文档的表现部分与内容分隔开。表现标签（如字体标签）可以去掉，而且可以使用CSS而不是表格来控制布局。标签重新变得简单，人们又开始对底层代码感兴趣了。如图1.3所示是搜狐网站（http://www.sohu.com/）2011年12月26日的首页效果，首页设计更趋成熟、大气，信息容量和用户体验得到明显改善和强化，它具有良好的结构，容易理解。如图1.4所示即为2011年12月26日搜狐网站的首页结构代码。虽然它仍然包含一些表现标签，但是与图1.2中的代码相比有了显著的改进。图1.3201

7、1年12月26日搜狐网站首页·47·Note第1章CSS样式设计基础图1.42011年12月26日搜狐网站首页结构代码标签语义重新得到了重视，浏览器的默认样式可以被覆盖，所以可以将某些内容设置为标题，而不需要为它指定大的、加粗的字体。可以创建列表，而这些列表不一定显示为一系列带黑点的列表项，可以使用没有相关联样式的块引用。设计师开始按照HTML元素的原义使用它们，无需考虑它们的外观。有语义的标签为设计师提供了很多方便。与表现性的页面相比，有语义的页面更容易处理。例如，假设需要修改页面中的一个引用。如果这个引用加上了正确的标签，那么就

8、很容易搜索代码，找到第一个块引用元素。但是如果这个引用只是另一个段落元素标签，就很难寻找了。除了使人容易理解之外，程序和其他设备也可以理解有语义的标签。例如，搜索引擎可以识别出标题行，并给它分配更高的重要度，因为它被包围在h1等标题标