WebCSS控制页面(link与import方式区别)_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:55:41
Original
978 Leute haben es durchsucht

    先了解:

【1】         “Table”和“DIV”这两个网页元素诞生的目的不同,首先Table诞生的目的是为了存储数据,而DIV诞生的目的就是为了架设页面结构

                  W3C,是World Wide Web Consortium的缩写,中文是W3C组织或者万维网联盟。W3C标准不是一个标准,而是一系列标准的集合,

                  包含三部分的标准:结构(Structure)、表现(Presentation)行为(Behavior)。

 结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAscript等

                一般不能说是“DIV+CSS",要说就说成”XHTML+CSS",两种叫法倾向于后者。


【2】    CSS控制页面有四种方式:行内样式、内嵌样式、链接样式、导入样式

           1. 行内样式如:

               会导致HTML页面不够纯净,文件体积过大,不利于搜索蜘蛛爬行,从而导致后期维护成本高。

           2: 内嵌样式如:

......

            如果一个网站有很多页面,内嵌方式每个文件都会变大,后期维护难度也大,如果文件很少,CSS代码也不多,这种方式也顶号好~

           3: 链接样式如:

... ...

          这种样式将HTML文件和CSS文件彻底分成两个或者多个文件,实现了页面框架HTML代码与表现CSS代码的完全分离,使得前期制作和后期维护都十分方便,推荐使用这种方式。

           4: 导入样式如: @import "style.css" ;

           在HTML初始化时,会被导入到HTML文件中,成为文件的一部分,类似内嵌样式


================================================================================================================

【3】链接样式与导入样式的区别:


link
link就是把外部CSS与网页连接起来。

@import

import文字上与link的区别就是它可以把在一个CSS文件中引入其它几个CSS文件。

为什么使用@import
大部分使用@import方式的人是因为旧的浏览器是不支持@import方式的,这意味着我们可以使用@import来引入只让现代浏览器解析的CSS样式.
另一个主要的原因就是当你的网页需要引入几个外部CSS文件时.你可以使用link引入一个CSS,然后在这个CSS文件中用@import方式引入其它几个CSS文件.这样看起来更容易管理.

为什么使用link
使用link方式一个最主要的原因就是你可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持rel="alternate stylesheet"属性(即可在浏览器上选择不同的风格),当然你还可以使用Javascript使得IE也支持用户更换样式.

@import的小毛病
如果你网页head标签里面十分简单,只有@import属性的话,当用户浏览的网速较慢时,他会看到一个没有风格样式的页面,然后随着CSS文件被下载完成才可以看到应有的风格.要避免这样的问题,你需要确保head里至少有一个script或是link标签.
04-11更新:  @import会使得CSS整体载入时间变长.并且在IE中会导致文件下载次序被更改,例如放置在@import后面的script文件会在CSS之前被下载.

到底要用那种方式
就目前看来小型的网站还是使用link比较合适(或者说比较流行),当然如果将来我们需要把CSS进行模块化管理也肯定要用到@import.



举个例子
可以用此做法:建立三个CSS文件(base.css/common.css/page.css),把他们@import到另一个CSS文件(style.css,其它名字也可以,随便你),然后在页面上只连接style.css,这样可以更好实现代码的维护








??

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage