1、使用较少的代码,来实现更多的功能;
2、使用属性继承方法,可以轻松地维护相同标记的不同样式;
3、代码比率更高的内容;
4、页面加载变得很快;
5、定义风格的灵活性。
知识补充:
CSS全称Cascading Style Sheet,表示层叠样式表。CSS用于改进HTML标记内容的呈现。使用CSS我们可以基于媒体定义不同的内容显示方式。
CSS的优点:
一、CSS的代码更少
在公共样式类中可以定义具有值的属性,并且能在不同位置使用相同的类,因此可以使用较少的代码,来实现更多的功能。更少的代码意味着更少的带宽消耗并且易于维护内容。
二、易于维护
当在全局或共同的地方定义样式时,任何变化都变得容易操作。例如,在网站中,使用特定的样式属性显示产品的所有名称。现在,可以通过在外部样式表中更改产品名称的样式类,可以在整个站点中更改样式。可以保留多个样式表并根据需要使用它们。使用属性继承方法,可以轻松地维护相同标记的不同样式。
三、代码(标签)比率更高的内容
可以通过使用CSS在页面中实现更高的代码比例内容,因为可以将样式声明转换为外部文件。这对搜索引擎的观点很重要。可以向蜘蛛提供较少的标签(样式标签)和更多内容以进行索引。
四、下载页面
当浏览器缓存样式表页面时,页面加载变得很快。每次使用相同CSS的同一站点的不同页面时,都不会从服务器加载样式类。
五、定义风格的灵活性
名称级联表示可以使用多种样式,并且优先考虑本地样式。可以覆盖声明的全局样式,并将样式本地分配给标记。
CSS具有以下优点:丰富的样式定义CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力;允许为任何元素创建边框,以及元素边框与其他元素间的距离,以及元素边框与元素内容间的距离;允许随意改变文本的大小写方式、修饰方式以及其他页面效果。易于使用和修改CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用。总之,CSS样式表可以将所有的样式声明统一存放,进行统一管理。另外,可以将相同样式的元素进行归类,使用同一个样式进行定义,也可以将某个样式应用到所有同名的HTML标签中,也可以将一个CSS样式指定到某个页面元素中。如果要修改样式,我们只需要在样式列表中找到相应的样式声明进行修改。多页面应用CSS样式表可以单独存放在一个CSS文件中,这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件,在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。层叠简单的说,层叠就是对一个元素多次设置同一个样式,这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表,而某些页面中的某些元素想使用其他样式,就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写,在浏览器中看到的将是最后面设置的样式效果。页面压缩在使用HTML定义页面效果的网站中,往往需要大量或重复的表格和font元素形成各种规格的文字样式,这样做的后果就是会产生大量的HTML标签,从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中,可以大大的减小页面的体积,这样在加载页面时使用的时间也会大大的减少。另外,CSS样式表的复用更大程度的缩减了页面的体积,减少下载的时间。DIV+CSS优点如下:
1、能够使代码精简,使用div+css布局使代码很是精简,css文件可以在网站的任意一个页面进行调用,避免了使用table表格修改部分页面。
2、提升了网页访问速度,div+css布局较传统的Table布局比较,减少了许多代码,其浏览访问速度自然得以提升,从而提升了网站的用户体验度。
3、有利于优化。采用div-css布局的网站对于搜索引擎很是友好,简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。
4、浏览器兼容性 。DIV+CSS更容易出现多种浏览器不兼容的问题,主要原因是不同的浏览器对web标准默认值不同。
5、需要注意的是,网页不喜欢一个页面有太多的css代码,否则同样会影响蜘蛛的爬行,影响搜索引擎的收录,所以采用外部调用的方式调用CSS是非常不错的方法。
6、若非必须太多花哨的网站,采用CSS布局,同样可以到达所想要的效果。如网站导航中的文字颜色变化、css下拉菜单等。
扩展资料:
DIV+CSS对SEO网站优化能起的作用
1、精简的代码,使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道。代码精简提高了百度蜘蛛的爬行效率以及高效性,能在最短的时间内爬完整个页面,同时这样对收录质量也有一定好处。
2、提高访问速度、增加用户体验性
使得加载速度得到很大的提高,那么用户点击页面的等待时间就越少,用户体验性的增加相应的带来就是网站受到搜索引擎的喜欢,进而提高网站排名。
3、div+css结构清晰,很容易被搜索引擎搜索到,本来就是适合优化seo,降低网页的大小,让网页体积变得更小。
4、要注意的是:div+css结构清晰、精简,不意味着可以全部用div+css结构,比如通篇HTML标签全DIV的,貌似除了<head>之上及<body>之上及之外,其它全是<div>,就如同整个HTML是一万个毫不相干的内容拼装起来,或者通篇是<div><ul><li>结构的,就如同这个页面所有元素全是列表。
参考资料来源:百度百科-div css