下载掌阅APP，畅读海量书库
立即打开
3.1 CSS介绍 |
|
3-1 初识CSS3
CSS是Cascading Style Sheet的缩写，可以翻译为“层叠样式表”或“级联样式表”，即样式表。它可以定义在HTML文档的标签里，也可以在外部附加文档中作为附加文件。此时，一个样式表可以作用多个页面，乃至整个站点，因此具有更好的易用性和拓展性。
利用CSS不仅可以控制一篇文档中的文本格式，而且可以控制多篇文档的文本格式。因此使用CSS样式表定义页面文字，将会使工作量大大减小。建立一些好的CSS样式表可以更进一步地对页面进行美化，对文本格式进行精确定制。
CSS样式表的功能一般可以归纳为以下几点。
1）灵活控制页面中文字的字体、颜色、大小、间距、风格及位置。
2）随意设置一个文本块的行高、缩进，并为其加入三维效果的边框。
3）更方便定位网页中的任何元素，设置不同的背景颜色和背景图片。
4）精确控制网页中各元素的位置。
5）与DIV元素结合进行网页页面布局。
网站建设中掌握基于CSS的网页布局方式是实现Web标准的基础。网站建设在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制，只要对相应的代码做一些简单的修改，就可以改变网页的外观和格式。<div></div>标签对可以视为一个独立的对象，用于CSS的控制，声明时只需要对<div>进行相应的控制，其中的各标签样式都会因此而改变。CSS+DIV的布局方式在Web页面中很常用，有以下优势。
1.网页代码减少，简单明了
代码精简带来的好处有两点：一是提高爬虫爬行效率，能在最短的时间内爬行完整个页面，这样对收录质量有一定的好处；二是能高效爬行的页面，就会受到爬虫的喜欢，这样对收录数量有一定的好处。
2.避免表格的嵌套弊端
使用表格页面，为了达到一定的视觉效果，不得不套用多个表格。根据目前掌握的情况来看，遇到多层表格嵌套时，爬虫爬行表格布局的页面会跳过嵌套的内容或直接放弃整个页面。如果嵌套的表格中是核心内容，爬虫爬行时如果跳过了这一段，也就没有抓取到页面的核心，这个页面就成了相似页面。网站中相似页面过多会影响排名及域名信任度。CSS+DIV布局基本上不会存在这样的问题，从技术角度来说，在控制样式时也不需要过多的嵌套。少一些多层表格嵌套对网站SEO还是有好处的。
3.响应速度更快
CSS+DIV布局与表格布局相比减少了页面代码，加载速度得到了很大的提高，由于将大部分页面代码写在了CSS当中，这就使得网页中正文部分更为突出明显，便于被搜索引擎采集收录，也使得页面体积容量变得更小。相对于表格嵌套的方式，CSS+DIV将页面独立成更多的区域，在打开页面的时候逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。这对爬虫爬行是非常有利的，过多的页面代码可能造成爬行超时，爬虫就会认为这个页面无法访问，影响收录及权重。另一方面，真正的网站优化不只是为了追求收录、排名，因为快速的响应速度是用户体验的基础。
4.修改方便，时效性更优
CSS+DIV是Web设计标准，是一种网页的布局方法。与传统通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。
由于使用了CSS+DIV制作方法，在修改页面的时候可以更加方便省时。根据区域内容标记，到CSS里找到相应的ID进行修改，不会破坏页面其他部分的布局样式。
5.保持视觉的一致性
CSS+DIV布局最重要的优势之一是保持视觉的一致性。以往表格嵌套的制作方法使得页面与页面或者区域与区域之间的显示效果会有偏差，而使用CSS+DIV布局，将所有页面或所有区域统一用CSS文件控制，避免了不同区域或不同页面呈现的效果有偏差，可以方便后期的维护管理工作。
6.对网站优化更好
搜索引擎是从上到下、从左到右访问网站信息的，而且搜索引擎访问的是代码，和网页做得如何漂亮无关，所以，在网站建设的时候，关键内容在网页中的位置非常重要。标准的CSS+DIV布局，一般在设计完成后会尽可能完善到能通过W3C验证，与普通表格组成页面的网站相比，网站排名状况一般都要好些。研究那些比较大的网站就会发现，整个网页代码被很多注释所包围，这些注释有两个好处：一是便于技术开发者对代码进行调整；二是便于SEO人员了解关键内容的位置并进行调整。
CSS样式的注释方法以“/*”开始，到“*/”结束，如<style type="text/css">/*css注释*/</style>。单独的CSS样式表文件中也采用此方法注释，示例代码如下。
