`
desert3
  • 浏览: 2160532 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

CSS link、@import、media type、media query

    博客分类:
  • Html
 
阅读更多
CSS link、@import共同点:都是为了加载CSS文件。

CSS link、@import不同点:
  • Link属于XHTML标签,而@import完全是CSS提供的一种方式。link除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。
  • @import要起作用,必须放在样式文件的最前面(包括注释的前面)
  • 并行加载、串行加载,加载性能的问题,参考下面的链接
  • 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
  • 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。 ?没有验证过!

建议:不适用@import,使用link
don’t use @import
Yahoo 网页性能最佳实践:使用link,不使用import

media type(媒体类型):是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面。
例子:
<link href="style.css" media="screen print" ...

@import url("style.css") screen;

<style media="screen">
@import url("style.css");
</style>

media query(媒体查询):是对media type的一种增强,是CSS 3的重要内容之一。
例子:
<link media="only screen and (max-device-width: 480px)" href="style.css">

参考:media type与media query
分享到:
评论

相关推荐

    gulp-coimport:处理css文件中 @ import。递归处理css文件中的@ import,自动合并为一个css文件

    处理css文件中 @import。递归处理css文件中的@import,自动合并为一个css文件。 Features 支持 css样式文件 支持 @import 递归处理 支持线上的import url 自动下载再合并 Usage var gulp = require('gulp'); var co...

    浅谈css和@import区别及用法

    css和@import都是调用外部样式表的方法。 一、用法 (1)link: &lt;link rel="stylesheet" type="text/css" href="css文件路径"/&gt; (2)@import: 方法一(html中添加): &lt;style type="text/css"&gt; @import ...

    CSS中link和@import的区别说明

    我们都知道link与@import都可以引入css样式表,那么这两种的区别是什么呢?先说说它们各自的链接方式,然后说说它们的区别~~~ link链入的方式: CSS Code复制内容到剪贴板 &lt;link rel=stylesheet type=text/...

    web前端优化时为什么不建议使用css @import

    在Web前端优化的讨论中,经常出现的一个建议是避免使用CSS中的@import指令。这一建议背后的理由和原理,是本文的重点内容。 首先,我们需要了解CSS @import是什么,以及它的作用。CSS @import是一个用来导入其他CSS...

    深入理解CSS中的@import

    不过需要注意的是,无论使用&lt;link&gt;标签还是@import规则,浏览器都会下载所有相关的CSS文件,但是只有当媒体查询匹配当前媒体条件时,才会应用对应的样式。在使用@import时,所有样式表会一次性下载,而不是根据媒体...

    CSS3 @media 媒体查询 实例源代码,调整浏览器窗口大小。当宽度小于300时,背景色变成淡蓝,否则淡绿色.zip

    在网页设计领域,CSS3(层叠样式表第三版)引入了媒体查询(@media queries)这一强大特性,使得我们能够根据设备的特定条件,如视口宽度、屏幕分辨率等,来应用不同的样式规则。这极大地提升了网页的响应式设计能力...

    外部引用CSS中 link与@import的区别

    其中,通过link标签和@import语句导入CSS文件是最主要的两种方法。虽然两者的目的相同,但它们在使用方法、性能表现、兼容性以及JavaScript交互方面存在显著差异。 1. 标签与CSS规则的区别 link是XHTML中用于链接...

    CSS3 Media Query CSS3媒介查询

    **CSS3 Media Queries详解** CSS3 Media Queries是Web开发中的一个重要工具,它允许开发者根据设备的物理特性,如视口宽度、设备像素比等,来应用不同的样式规则。这一功能使得响应式网页设计成为可能,使得网站能...

    CSS两种方式link和@import

    CSS有两种主要的引入方式,即`&lt;link&gt;`标签和`@import`规则。这两种方法虽然都能达到同样的效果,即引入外部样式表,但在实际应用中,它们之间存在一些差异。 首先,`&lt;link&gt;`标签是HTML文档的一部分,它被用来定义...

    link和@import的区别深入探讨

    在功能上,link标签使用更为广泛,比如还可以用来定义RSS、定义图标等,而@import专门用于CSS样式表的导入。 在加载时间和性能方面,link和@import存在显著差异。当HTML文档被加载时,link标签所引入的CSS样式表会...

    CSS @import与link的具体区别

    在网页中引用外部CSS样式表主要有两种方式,分别为使用@import和link标签。这两种方式在实际应用中都有各自的优势和适用场景,但一般建议在小型网站中使用link标签,而对于需要模块化管理CSS的情况,@import也有其...

    CSS什么时候用import什么时候用link 有何区别

    &lt;link rel="stylesheet" href="path/to/your/stylesheet.css" type="text/css" media="all"&gt; ``` **特点:** - **同步加载:**`&lt;link&gt;`会与HTML文档同时加载,可能会导致页面渲染前出现短暂的空白时间。 - **兼容性...

    关于css @import url()总结

    关于CSS中的`@import url()`,这是一个用于引入外部样式表的指令,它的使用与`&lt;link&gt;`标签在某些方面有所不同,且存在一定的兼容性和性能差异。以下是对`@import url()`进行的详细总结: 1. **加载机制**: `@...

    引入CSS的方式有哪些?link和@import的有何区别应如何选择

    在网页设计中,将CSS样式应用到HTML文档是一项基础且重要的工作,主要有三种引入CSS的方式:将样式直接内嵌于HTML元素中、使用`&lt;link&gt;`标签在HTML文档的头部引入外部样式表、以及使用`@import`语句在CSS文件内部引入...

    css中link和@import的区别分析详解

    在CSS中,引入外部样式表主要有两种方法:`&lt;link&gt;`标签和`@import`规则。两者虽然都能实现样式表的引入,但在使用场景、执行顺序、兼容性以及与JavaScript的交互等方面存在显著差异。 首先,`&lt;link&gt;`标签是HTML的一...

    css @import url加载样式应用深入分析

    一直以来写CSS的时候都没有过多的考虑使用@import的方式,最近又看到有朋友在讨论关于@import的一些好坏,以及要不要使用@import的方式加载样式。其实对于这个问题在很早以前网络上就有相关的资料做了介绍这篇《don...

    详解CSS3中@media的实际使用

    在CSS3中,`@media`规则是响应式网页设计的核心,它允许我们根据不同的设备特性和视口大小来定义和应用不同的样式。`@media`查询让我们能够创建适应各种屏幕尺寸、分辨率和颜色深度的多样的用户体验。 首先,我们来...

    CSS3 @media的基本用法总结

    link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css"&gt; 一、首先是&lt;meta&gt;标签 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, ...

Global site tag (gtag.js) - Google Analytics