`
desert3
  • 浏览: 2158886 次
  • 性别: 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
分享到:
评论

相关推荐

    link和@import引用css文件方法的区别

    link 和 @import 引用 CSS 文件方法的区别 在 HTML 中,-link 和 @import 是两种常用的引用 CSS 文件的方法,但它们之间存在着一些区别。在本文中,我们将详细介绍这两种方法的异同。 一、link 元素 link 元素是 ...

    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的区别分析详解

    @import url(“style.css”); &lt;/style&gt; 以上是这两种方式的语法区别。同时,浏览器处理这两种方式也有所区别: 使用link方式,浏览器会先装载完CSS文件再装载HTML的主体部分,所以显示出来的页面从开始就是...

    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...

    grunt-css-injector:解析 CSS 文件并从 @import 指令注入另一个 css 文件

    grunt-css-injector 这个插件解析 css/scss/sass 文件,找到所有 @import 指令并注入这些文件。入门这个插件需要 Grunt。 如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建以及安装和使用 Grunt 插件。...

    postcss-import:PostCSS插件以内联@import规则内容

    postcss导入 插件通过内联内容来转换@import规则。 该插件可以使用本地文件,节点模块或web_modules。 要解析@import规则的路径,它可以查看根目录(默认为process.cwd() ), web_modules , node_modules或本地...

    CSS @import与link的具体区别

    在CSS中,引用外部样式表主要有两种方法:`@import`和`link`。这两种方法在功能和使用场景上存在一些差异。 首先,`link`元素是HTML的一部分,用于将外部CSS文件链接到HTML文档中。它的基本语法是: ```html &lt;link ...

    深入理解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开发中的一个重要工具,它允许开发者根据设备的物理特性,如视口宽度、设备像素比等,来应用不同的样式规则。这一功能使得响应式网页设计成为可能,使得网站能...

    link和@import的区别深入探讨

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

    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 @import url加载样式应用深入分析

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

    打造节日氛围:使用CSS `@media` 查询优化圣诞树显示

    通过使用CSS的@media查询,我们可以轻松地为不同屏幕尺寸的设备优化圣诞树的显示效果。这不仅能够提升用户体验,还能确保我们的网站或应用程序在各种设备上都能呈现出最佳效果。随着技术的不断发展,响应式设计已经...

Global site tag (gtag.js) - Google Analytics