关注联楷|返回首页 | 网站案例 | 帮助中心

合作共赢、快速高效、优质的网站建设提供商

上海网站建设 

服务热线:021-61394118

上海联楷科技

用CSS建网站的使用各种样式优缺点!-做网站教程

作者:佚名   时间:2014-03-27   分享到:

对网站使用样式表

在对建的网站文档和文档集使用CSS样式之前、使用中和使用后,有几个问题是你必须考虑的。首先,最主要的问题是,是否必须使用它们。坦白地说,只有很少几种样式效果是独一无二的;大部分效果可以通过自然和基于内容的样式标签如<i>和<em>以及各种不同的标签属性,如颜色和背景等,尽管可能不是很容易,兼容性也较差。

网站是否用样式表才是最好的?

我们认为css标准是一个赢家,它不仅适用于基于JavaScript的标准,而且能提高所有标记文档,包括HTML, XHTML和大部分其他XML兼容文档的方便性和有效性。目前使用的大部分浏览器都支持CSS2样式。益处是显而易见的。那么,你为什么不用样式呢?

虽然我们强烈建议你学习并在文档中使用CSS2样式表,我们也认识到网站应用样式表最终要付出大量的时间和精力。为一页或两页文档设计一个样式表很可能会花费大量的时间,特别是不会在其他页上重新使用这些样式时。然而,总的说来,我们相信需要选择的不是是否使用CSS2样式表,而是什么时候使用它才是合适的。

使用何种样式表类型及何时使用?

一旦已经决定使用css(想受苦或是好玩),下一个问题是,应该使用哪一种样式表类型—内联、文档级或外部,以及什么时候使用?每一种各有优缺点;每一种都最适用于特定的环境。

外部样式的优缺点

由于样式表可以给文档的显示提供一致性,外部样式表是最好、最简单的管理整个文档集样式的方法。只要把需要的样式规则放在一个样式表中,然后把这些样式应用到需要的文档中即可。由于所有文档都只受一个样式表的影响,转换整个文档为一种新样式,只需要简单地在相应的外部样式表中改变一条规则。

即使在文档样式不同的情况下,也有可能收集一些基本样式规则到一个样式表中这样这个样式表可以被几个不同的文档共享,包括:

    背景颜色

    背景图像

    字体大小和外观

    边界

    文本对齐

外部样式表的另一个优点是,那些需要拷贝样式的其他网页制作者可以容易地访问那个样式表,并使得他们的页面看起来和你的一样。模仿是对你最真诚的赞扬,所以当有人选择模仿你的页面的外观时,你不必觉得厌烦。除此之外,你不能阻止他们链接到你的样式表,所以你最好是学会喜欢这种做法。像常规HTML文档一样,加密或隐藏你的样式表以便其他人不能看到和使用它们是不可能的。外部样式表最大的问题是,它们增加了访问页面的时间。浏览器不仅必须下载页面本身,还必须在页面显示给用户前下载样式表。虽然大部分样式表相对比较小,但在一个慢速连接上访问网络时,用户肯定能感觉到样式表的存在。

如果没有合适的规定,外部样式表可能变得很大、很笨重。创建样式表时,记住应只包括使用这个样式表的页面共有的样式。如果一组样式只适用于一两个页面,最好把它们放在另外一个样式表中,或者把它们加入到文档使用的文档级样式中。否则,你会发现自己必须花费大量的精力来应付外部样式对很多单独文档的影响。

文档级样式的优缺点

文档级样式在创建自定义文档时最有用。它们允许你改写外部定义的样式的一条或多条规则,创建一个略有不同的文档。你也可能需要在把新样式规则移到样式表之前使用文档级样式来试验新样式规则。通过用文档级样式来加入和修改规则,你就不用冒险加不合适的样式到样式表中,不会破坏使用那个样式表的文档的外观。文档样式的最大问题是,在创建一个格式化外部样式表来管理文档集时,不能使用文档级样式。文档级样式只是在给每个文档加规则时容易。不幸的是,用文档级样式管理一个文档集是很繁琐且容易出错的事情。哪怕是一个简单的改动也可能导致需要几小时的编辑,还可能引起潜在的错误。作为基本规则,任何影响到三个或三个以上的文档的样式规则应该移到样式表,并把它们应用到使用<link>标签或import规则的文档中。创建文档集时,如果坚持使用这条规则,那么当要改变样式时你就会发现它的优点。

内联样式的优缺点

在网站级联的最后,内联样式改写了更多的一般样式。从现在起养成习惯尽量少使用内联样式。内联样式不能重新使用,这使得样式管理很困难。更有甚者,这种改变可以传遍整个文档,使得查找和改变内联样式容易出错。(那就是为什么我们首先要避开使用基于标签和属性的样式的原因,不是吗?)

任何时候使用内联样式时,仔细想想同样的效果是否可以通过使用一个样式类定义来得到。例如,你最好定义以下代码:

<style type="text/css”>

<!--

  P.centered(text-align:center}

  em.blue (color:blue}

-->

</style>

 以后使用:

<p class=centered>

<em class=blue>

来代替:

<P style=”text-align:center">

style=”color:blue”>

你的网站样式就会更易于查找和制作管理,并且可以方便地在整个网站中重复使用。-联楷CSS网站制作教程



如没特殊注明,文章均为上海联楷网络原创,转载请注明来自:http://www.linksj.com/contact/20151229/n7314.html

上海联楷网络新闻