- 浏览: 263260 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
niuqiang2008:
晕 ...
Session Management -
olived:
你这是javascrpit代码么
固定表头列头Javascript代码 -
xypcn:
你这个不是太全,按你这个我没配起来,自己总结如下:http:/ ...
Zend Optimizer 3.3.9 安装 -
godsmell:
感谢分享。
Sybase在Dbvisualizer中出现乱码解决 -
cdefg198:
具体怎么去实现呢,看到是好,但是不会这么做哦
纯css网页特效实力
最近在研究taobao的网站,发现其中页面引入css的方式多为使用@import的方式:
<style type="text/css" media="screen"> @import url("http://taoke.alimama.com/css/newmyalimama/instance/overlay.css?t=11240510"); @import url("http://taoke.alimama.com/css/newmyalimama/instance/module/myalimama.css?t=11240510"); @import url("http://taoke.alimama.com/css/newmyalimama/instance/module/myalimama/sale.css?t=11240510"); @import url("http://taoke.alimama.com/css/newmyalimama/instance/ie_hacks.css?t=11240510"); @import url("http://taoke.alimama.com/css/newmyalimama/instance/safari3_hacks.css?t=11240510"); @import url("http://taoke.alimama.com/css/newmyalimama/instance/cps/cps.css?t=11240510"); @import url("http://taoke.alimama.com/css/newmyalimama/instance/cps/fcps.css?t=11240510"); @import url("http://taoke.alimama.com/css/newmyalimama/instance/cps/cps_list.css?t=11240510"); @import url("http://taoke.alimama.com/css/std_notice.css?t=11240510"); @import url("http://taoke.alimama.com/css/newmyalimama/instance/buttons.css?t=11240510"); </style>
在google上搜到了不少答案,备忘如下:
------------------------------------------下面内容为google来的---------------------------------------
淘宝网页中大部分是这样写的
<style type="text/css" media="screen">
@import url("http://www.taobao.com/home/css/global/v2.0.css?t=20070518.css");
</style>
而很多网站使用的都是link
<link rel="stylesheet" rev="stylesheet" href="default.css" type="text/css" media="all" />
而像google 百度 163等网站他们都是直接写在网页中
当然使用链接link和导入import的好处就是易于维护,但当网速比较慢的时候,会出现加载中断的情况,导致页面排版错误
他俩的作用相同
唯一的不同是服务对象不一样
@import 为CSS服务
link是为当前的页服务
经典有网友说 @import会优先执行。
外部引用CSS中 link与@import的区别
这两天刚写完XHTML加载CSS的几种方式,其中外部引用CSS分为两种方式link和@import。
本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别。
差别1
:老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。
差别2:
加
载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS
会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显(梦之都加载CSS
的方式就是使用@import,我一边下载一边浏览梦之都网页时,就会出现上述问题)。
差别3:
兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
差别4:
使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
大致就这几种差别了(如果还有什么差别,大家告诉我,我再补充上去),其它的都一样,从上面的分析来看,还是使用link标签比较好。
原文链接: http://www.aono82.com/v11/news/31/20081229133408.htm
---------
The @import Hack
Early browsers are notorious for malfunctioning when presented with CSS rules they can't handle (Netscape Navigator 4 will crash at the sight of certain rules). The import hack allows you to hide entire stylesheets from version 4 and older browsers by linking them with a method they don't understand: the @import rule. [CSS2:@import]
The @import rule links to an external stylesheet from within a stylesheet (external or in a STYLE element), however, early browsers do not understand the syntax and simply ignore the statement (and the stylesheet it references).
For a table of all variations on the @import hack, take a look at: http://imfo.ru/csstest/css_hacks/import.php
Typical @import Setup
Begin with two stylesheets:
simple.css (only simple rules for early browsers)
modern.css (advanced CSS2, rules to override rules in simple.css)
Create a third stylesheet "import.css" containing only:
@import "modern.css";
Link the simple.css and import.css in the HEAD of the document:
<link rel="stylesheet" type="text/css" href="simple.css" /> <link rel="stylesheet" type="text/css" href="import.css" />
(The simple stylesheet /must/ be linked first.)
The Effect
All CSS1 browsers will load simple.css and import.css, however, only modern browsers will understand the @import rule and also load modern.css. Since modern.css is linked after simple.css, its rules will override those in simple.css more easily.
Alternate Syntax
Different versions of the import rule have varying levels of support from older browsers.
@import "style.css"; /* hidden from nearly all v4 browsers */ @import url('style.css'); /* IE4 can understand, but not NN4 */ ...
[Browser support for different syntaxes]
Example CSS files
/* simple.css */ body { background:white; color:#666666; }
/* modern.css */ body { font-size:87%; line-height:1.4em; text-align:justify; }
media="all" (Simpler Hiding From Nav4)
If you only have ONE stylesheet you need to hide from Nav4 (only one SS can be hidden this way), you can link to the stylesheet with a media rule:
<link rel="stylesheet" type="text/css" href="simple.css" /> <link rel="stylesheet" type="text/css" href="hiddenFromNav4.css" media="all" />
media not "all" (Hiding CSS from IE)
If you have a stylesheet that needs to be hidden from IE (all versions) give it a mediatype different from "all", i.e. "screen".
<style type="text/css">@import "modern.css" screen;</style>
Why use the import.css file?
Using link elements allows us to more easily adapt to a system with alternate stylesheets. (See StyleSwitching ). If alternate stylesheets are not a concern, the file import.css is not needed. The @import rule can be placed in a STYLE element as such:
<link rel="stylesheet" type="text/css" href="simple.css" /> <style type="text/css"> @import "modern.css"; </style>
Why not put @import at the bottom of simple.css?
According to the CSS specs, @import rules must precede any other CSS rules in a stylesheet, so this creates the need to place it in its own stylesheet for these purposes.
原文链接: http://css-discuss.incutio.com/?page=ImportHack
------------------------
Question: What's the Difference Between @import and link for CSS?
External style sheets are an important part of every Web designer's bag of tricks, but there are two ways to include them in your pages: @import and <link>. How do you decide which method is better? This FAQ discusses the differences between the two methods, why you might use one over another, and how to decide.
Answer:
The Difference Between @import and <link>
Before deciding which method to use to include your style sheets, you should understand what the two methods were intended to be used for.
<link> - Linking is the first method for including an external style sheet on your Web pages. It is intended to link together your Web page with your style sheet. It is added to the <head> of your HTML document like this:
<link href="styles.css" type="text/css" />
@import - Importing allows you to import one style sheet into another. This is slightly different than the link scenario, because you can import style sheets inside a linked style sheet. But if you include an @import in the head of your HTML document, it is written:
<style type="text/css">@import url("styles.css");</style>
From a standards viewpoint, there is no difference between linking to an external style sheet or importing it. Either way is correct, and either way will work equally well (in most cases). But there are a few reasons you might want to use one over the other.
Why Use @import?
The most common reason given for using @import instead (or along with) <link> is because older browsers didn't recognize @import, so you could hide styles from them. Specifically:
- hides the style sheet from Netscape 4, IE 3 and 4 (not 4.72)
@import url(../style.css);
- hides the style sheet from Netscape 4, IE 3 and 4 (not 4.72), Konqueror 2, and Amaya 5.1
@import url("../style.css");
- hides the style sheet from Netscape 4, IE 6 and below
@import url(../style.css) screen;
- hides the style sheet from Netscape 4, IE 4 and below, Konqueror 2
@import "../styles.css";
Another use for the @import method is to use multiple style sheets on a page, but only one link in your <head>. For example, a corporation might have a global style sheet for every page on the site, with sub-sections having additional styles that only apply to that sub-section. By linking to the sub-section style sheet and importing the global styles at the top of that style sheet, you don't have to maintain a gigantic style sheet with all the styles for the site and every sub-section. The only requirement is that any @import rules need to come before the rest of your style rules. And remember that inheritance can still be a problem.
Why Use <link>?
The number one reason for using linked style sheets is to provide alternate style sheets for your customers. Browsers like Firefox, Safari, and Opera support the rel="alternate stylesheet" attribute and when there is one available will allow viewers to switch between them. You can also use a JavaScript switcher to switch between style sheets in IE. This is most often used with Zoom Layouts for accessibility purposes.
One of the drawbacks to using @import is that if you have a very simple <head> with just the @import rule in it, your pages may display a flash of unstyled content (FOUC ) as they are loading. This can be jarring to your viewers. A simple fix to this is to make sure you have at least one additional <link> or <script> element in your <head>.
What About the Media Type?
Many writers make the statement that you can use the media type to hide style sheets from older browsers. Often, they mention this as a benefit to using either @import or <link>, but the truth is you can set the media type with either method, and browsers that don't support media types won't view them in either case. For example, Netscape 4 doesn't recognize media types, so you can use the link tag to hide a style sheet from that browser just as easily as the @import rule:
<link href="styles-nons4.css" media="all" type="text/css" />
And some versions of IE (6 and below) don't support the media type on the @import rule, so you can use that to hide the style sheet from them:
<style type="text/css">@import url(styles.css) all;</style>
So Which Method Should You Use?
Personally, I prefer to use <link> and then import style sheets into my external style sheets. That way I only have 1 or 2 lines of code to adjust in my HTML documents. But the bottom line is that it's up to you. If you're more comfortable with @import, then go for it! Both methods are standards compliant and unless you're planning on supporting really old browsers (like Netscape 4) there's no strong reason for using either.
原文链接: http://webdesign.about.com/od/beginningcss/f/css_import_link.htm
发表评论
-
Javascript Console用法
2012-03-20 21:31 1019javascript console cons ... -
jquery高效率提示
2012-03-16 14:47 788很久没有关注jQuery了, ... -
Apache2的rewrite规则不起作用
2010-08-04 21:32 2643注意 1. LoadModule rewrite_modu ... -
Lighttpd、Nginx 、Apache 隐藏响应头信息的Server信息和版本信息
2010-06-11 15:20 5086web server避免一些不必要的麻烦,可以把apache和 ... -
windows下安装配置Nginx+PHP
2010-06-11 14:13 2660我的安装测试环境是: Windows XP N ... -
Apache子目录指向主域名&Discuz静态化配置
2010-06-01 10:19 1492要注意的是,如果配置了主域名指向子目录; 下面的discuz ... -
十大国外虚拟主机对比 国外虚拟主机购买指南(第二版)
2009-03-15 16:09 2500在国外购买主机大概有 ... -
Wordpress安装全接触
2009-03-12 21:00 0最近有一点闲时间,对php的一些东西很感兴趣,既然研究到wor ... -
10+设计资源和灵感的必备网站
2009-03-12 09:40 696在这个互联网,并不是 ... -
10个非常棒的Ajax及Javascript实例资源网站
2009-03-11 17:31 916向大家推荐10个相当棒的Ajax和Javascript国外资 ... -
推荐3个网页设计在线配色网站
2009-03-11 17:29 2234Color Hunter Color ... -
JavaScript编写的胸罩罩杯尺寸计算器
2009-03-11 17:20 1234JavaScript出能能为网页添加更多互动元素、为网页的视觉 ... -
精选15个国外CSS框架
2009-03-11 17:19 1511什么是css框架 实际上还是让我们从框架说起吧。框架就是一个 ... -
《TIME》评选的08年50个最棒的网站
2009-03-11 15:30 777原文地址: http://www.time.com/time/ ... -
JavaScript,5种调用函数的方法
2009-03-11 11:36 833JavaScript,5种调用函数的方法 这篇文章详细的 ... -
CSS Reset 方法总结
2009-03-11 11:23 771在当今网页设计/开发 ... -
整理及优化CSS代码的7个原则
2009-03-11 11:20 941本文英文原文 作为网页设计师(前端工程师),你可能还记得曾 ... -
CSS代码的命名惯例
2009-03-11 11:17 835CSS代码的命名惯例一直 ... -
使用CSS完美实现垂直居中的方法
2009-03-11 11:15 1150使用XHTML+CSS来实现元 ... -
10个CSS简写技巧让你永远受用
2009-03-11 11:13 914CSS简写就是指将多行的CSS属性声明化成一行,又称为CSS代 ...
相关推荐
我们都知道link与@import都可以引入css样式表,那么这两种的区别是什么呢?先说说它们各自的链接方式,然后说说它们的区别~~~ link链入的方式: CSS Code复制内容到剪贴板 <link rel=stylesheet type=text/...
们知道在网页中引用外部CSS有两种方式,即:@import与link,我们也经常听到有人说要使用link来引入CSS更好,但是你知道为什么吗? link link就是把外部CSS与网页连接起来,具体形式: <link rel='stylesheet' href='...
我们知道,css文件引入方式有两种:1. HTML中使用link标签 XML/HTML Code复制内容到剪贴板 <link rel=stylesheet href=style.css /> 2.CSS中@import CSS Code复制内容到剪贴板 @import style.css; ...
link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载;ink支持使用Javascript控制DOM去改变样式;而@import不支持等等,感兴趣的朋友可以参考下哈
有一些页面比较简单,流量很大的网站,是直接将CSS写在html代码中的?他们有什么区别?CSS用import还是link好?本文搜集整理了一下,感兴趣的朋友可以看看哦,希望本人对你有所帮助
我们知道在网页中引用外部CSS有两种方式,即:@import与link,我们也经常听到有人说要使用link来引入CSS更好,但是你知道为什么吗?linklink就是把外部CSS与网页连接起来,具体形式 @import import文字上与link的区别就是...
link href=style.css rel=stylesheet /> src(source):引入资源,引入的src的内容是页面必不可少的一部分。引入的内容会嵌入当前资源到当前文档元素定义的位置,常用的有:img、script、iframe等。如: [removed]...
CSS的使用 1、 作用:美化与布局界面 2、 引用语法: A) 内部:在HTML页面内通过...或style标记添加@import指令引入,可以供多个页面使用) C) 行内:在HTML页面内,通过style属性进行设置,仅供当前标签使用。。。。
css引入的方式有哪些,link和@import的区别是什么有四种形式:1 链入外部样式表,就是把样式表保存为一个样式表文件,然后在页面中用链接这个样式表文件.
webpack拆分压缩css并以link导入的操作步骤 import $ from 'jquery' import './css/index.css' import './less/index.less' $(function () { $('#app li:nth-child(odd)').css('color', 'red') $('#app li:...
声明一个媒体属性可以用@import或@media引入: @import url(loudvoice.css) speech; @media print { /* style sheet for print goes here */ } 也可以在文档标记中引入媒体: <link rel="stylesheet" type=...
首先介绍一下HTML文档与CSS 的关联常见有4种方式:1、使用link标记 <linkrel stylesheettype=text/csshref> 2、使用style元素 <styletype>body{background:#fff;}h1{font-size:2em;}</style> 3、使用@import...
CSS四种引入方式:标签内的CSS 、网页内的CSS、link引用的CSS、import引用的CSS,下面用一个例子演示用法
import-remote 说明 一个远程加载JS模块的库。支持webpack4/5。 它的初衷是: 希望像html-webpack-plugin插件生成HTML入口文件那样生成一个JS入口文件;...JS/CSS资源异步获取,避免通过script、link加载资
使用css控制页面有4种方式,分别为行内样式(内联样式)、内嵌式、链接式、导入式。 ...内嵌样式即写在style标签中,例如<style type=”text/css”>div{width:100px;...导入式即为用import引入css文件,例
(4)使用头标签 link,引入外部css文件 - 第一步 ,创建一个css文件 - <link rel="stylesheet" type="text/css" href="css文件的路径" /> *** 第三种结合方式,缺点:在某些浏览器下不起作用,一般...
目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。 <!-- 引入样式 --> <link rel=stylesheet href=...
支持本地和远程样式文件,包括使用link标签、< ?xml-stylesheet?>处理指令、@import语句等方式引入的样式文件;(但是不支持页面中的style块和内联样式)支持IE条件注释中引入的样式文件;可以检查一个页面,也...