DIV教程之CSS计划制造网页不要利用@import

另外如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。
破洛洛文章简介：高功能网站计划：不要利用@import.
TranslateFrom：stevesouders
原文：高功能网站计划：不要利用@import
在高功能网站计划的第五章，我扼要的提到@import关于网站的功能有某些负面的影响，然后我在Web2.0Expo的演讲上深切切磋了这个成绩，并创立了一些测试页面和HTTP瀑布状图表，这些鄙人面将会用到。关于这个成绩的底线是：假如你想款式表并行载进，以使页面更快，请利用LINK替换@import。
LINKvs.@import
人人都晓得，有两种办法能够在你的页面中导进款式文件。你可使用LINK标签:
<linkrel=stylesheethref=a.CSS/>
大概利用@import办法：
<style>
@importurl(a.css);
</style>
我更喜好利用LINK，由于它对照复杂——而假如利用@import的话，你必需时候记得要将@import放到款式代码的最后面，不然它将会不起感化。并且现实证实，制止利用@import一样对网站功能无益。
@import@import
我将探求LINK和@import两种体例的分歧。在这些例子中，有两个款式表:a.css和b.css。每一个款式表都设置为必要消费两秒钟来下载，如许就对照简单的看出来它们对网站功能的影响。第一个例子利用@import导进两个款式文件。这个例子，我们称之为@import@import，HTML代码能够写成这个模样：
<style>
@importurl(a.css);
@importurl(b.css);
</style>
假如你一向这类体例利用@import，那末就没有甚么功能成绩，只管这大概会由于竞态前提而大概引发JavaScript毛病。两个款式文件将同时并行下载，就像在图一中显现的那样(第一个小的哀求是HTML该文件)。成绩呈现在当@import嵌套进别的款式中大概和LINK团结利用的时分。

登录/注册后可看大图

图一：一向利用@import是能够的

LINK@import
这个LINK@import的例子利用LINK加载a.css，利用@import导进b.css:
<linkrel=stylesheettype=text/csshref=a.css/>
<style>
@importurl(b.css);
</style>
在IE中(在6,7,和8中测试过)，这会招致款式表文件逐一加载，正如图二所示。并行下载资本是减速页面的一个关头。就像图示的那样，这类办法在IE中会招致页面必要更多的工夫才干加载完成。

登录/注册后可看大图

图二.在IE中link夹杂@import会损坏并行下载

破洛洛文章简介：高功能网站计划：不要利用@import.


LINK嵌套@import
在这个LINK嵌套@import例子中，a.css经由过程LINK拔出到页面中，然后a.css经由过程@import划定规矩来引进b.css:
HTML代码:
<linkrel=stylesheettype=text/csshref=a.css/>
在a.css中:
@importurl(b.css);
这类体例一样制止并行加载代码，可是此次是关于一切的扫瞄器。实在这个应当不会让我们感应奇异吧，复杂的想一下就可以了解了。扫瞄器必需下载a.css先，并剖析它，这个时分，扫瞄器发明了@import划定规矩，然后才会入手下手加载b.css.

登录/注册后可看大图

图三.在在一个经由过程LINK加载的的款式文件中利用@import将会在一切的扫瞄器内里冲破并行下载。

LINK阻断@import
下面的例子做一个渺小的变更，IE中会引发惊人的了局：利用LINK导进a.css和一个新的款式文件proxy.css。proxy.css没有增加分外的款式，它只是用来经由过程@import划定规矩导进b.css.
HTML代码以下：
<linkrel=stylesheettype=text/csshref=a.css/>
<linkrel=stylesheettype=text/csshref=proxy.css>
proxy.css的代码:
@importurl(b.css);
这个例子在IE中运转的了局，LINK阻断@import，在图四中显现。第一个哀求是HTML文档。第二个哀求是a.css(花了两秒钟)，第三个(很小)的哀求是proxy.css。第四个哀求是b.css(也消费了两秒钟)。使人震动的是，鄙人载a.css完成之前，IE不会入手下手下载b.css。可是在别的一切的扫瞄器中，这类情形不会产生，了局页面显现的也对照快。以下图五所示。

登录/注册后可看大图

图四.IE中，LINK阻断利用@import嵌进的别的款式文件。

登录/注册后可看大图

图五.在非IE扫瞄器中，LINK不会阻断@import嵌进款式表。

多个@imports
这个利用多个@imports的例子展现在IE中利用@import会引发资本被依照一个分歧于预期的按次下载。这个例子有6个款式表(每一个将花两秒钟的下载工夫)和前面随着一个js剧本文件(必要四苗种下载)。
<style>
@importurl(a.css);
@importurl(b.css);
@importurl(c.css);
@importurl(d.css);
@importurl(e.css);
@importurl(f.css);
</style>
<scripttype="text/javascript"src="one.js"></script>
看一下图六，最长的条条是耗时四秒钟的剧本。只管它在代码内里被列在最初，可是在IE中，它被起首下载。假如剧本中包括的代码以来从款式表文件中使用的款式(好比getElementsByClassName)，那末就将大概会产生不测的了局，由于剧本先于款式被加载，只管开辟职员将其置于代码的最初面。

登录/注册后可看大图

图六@import在IE中激发资本文件的下载按次被打乱

破洛洛文章简介：高功能网站计划：不要利用@import.

LINKLINK
利用LINK来引进款式更复杂和平安：
<linkrel=stylesheettype=text/csshref=a.css/>
<linkrel=stylesheettype=text/csshref=b.css>
利用LINK可确保款式在一切扫瞄器内里都能被并行下载。这个LINKLINK的例子演示了这一点，就像在图七中显现的那样。利用LINK一样能包管资本依照开辟职员制订的按次下载。

图七：利用LINK确保在一切的扫瞄器内里都能并行下载

这些成绩都必要思索到IE。它十分欠好的中央是，资本文件大概会在一般中央停止下载，一切扫瞄器鄙人载款式文件的时分应当实行一些前瞻以导进一切的@import划定规矩并当即下载它们（经由过程@import导进的款式）。晓得一切的扫瞄器都酿成这类体例，我城市保举制止利用@import并一向利用LINK来拔出款式。
更多测试
依据读者的反应，原作者增添了两项测试：利用@imports的LINK和多个LINKs，每一个例子都拔出4个款式文件到HTML文件中。利用@imports的LINK利用LINK加载proxy.css，然后proxy.css利用@import加载4个款式文件。多个LINKs的例子，在HTML文件中有4个LINK标签来引进4个款式文件(这恰是我保举的办法)。这两个HTTP瀑布图如图八和图九所示：

登录/注册后可看大图

图八：利用@imports的LINK

登录/注册后可看大图

图九：多个LINK

看一下利用@imports的LINK的演示，第一个成绩是在proxy.css加载完成之前这四个款式文件不会入手下手下载，这在一切的扫瞄器内里一样。另外一方面，多个LINK的色彩当即同时下载这些款式文件。
第二个成绩是IE改动下载按次。我在页面的代码的最底部增加了一个10秒的剧本（图中最长的条条）。在一切的非IE扫瞄器中，@import款式文件(proxy.css文件中引进)起首下载，然后才是剧本文件，严厉的依照指定的按次。但是，在IE中，剧本却先于@import款式被拔出，正如例子利用@imports的LINK在图八中显现的那样。这会招致款式文件消费更多的工夫来下载，由于，在IE6和IE7中，它们还要比及长剧本用光唯一的两个可用毗连中的一个。但是在款式文件没有下载完之前，IE不会在页面中衬着任何内容，以这类体例来利用@import会引发页面坚持空缺长达12秒钟。利用LINK替换@import能够坚持加载按次，正如图九中显现的多个LINK那样。如许的话，页面衬着只必要四秒钟。
页面资本的加载工夫被夸大的用来复杂的检察产生了甚么事变。可是关于那些利用窄带或网速对照慢的用户来讲，出格是那些新兴的市场，这些呼应工夫大概有些阔别实践。

• 在一个款式文件中利用@import会为页面整体加载工夫增添更多一个返程（也就是增添页面的整体加载工夫）
  
• 在IE中利用@import将会引发文件的下载按次被改动。这更会引发款式文件消费更长的工夫来下载，这会拦阻页面的衬着，让人感应页面对照慢。
  

本文作者SteveSouders为《高功能网站计划》一书的作者，他是Yahoo网站功能团队的前向导人，今朝效率于Google公司。他同时仍是Firebug事情组的团结创建者，和出名的网站功能剖析工具的YSlow的创作者——前端察看

大大缩减页面代码，提高页面浏览速度,缩减带宽成本;

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

仓酷云

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。