link和@import的区别

 

页面中使用CSS的方式主要有3种:行内添加定义style属性值,页面头部内嵌调用和外面链接调用,其中外面引用有两种:link和@import。外部引用CSS两种方式link和@import的方式分别是:

XML/HTML代码
<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />   
XML/HTML代码
<style type="text/css" media="screen">   
@import url("CSS文件");   
</style>

两者都是外部引用CSS的方式,但是存在一定的区别:

  区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。

  区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。

  区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。

  区别4:ink支持使用Javascript控制DOM去改变样式;而@import不支持。

补充:@import最优写法
@import的写法一般有下列几种:

@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别
@import url(style.css) //Windows NS4, Macintosh NS4不识别
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import url("style.css") //Windows NS4, Macintosh NS4不识别
由上分析知道,@import url(style.css) 和@import url("style.css")是最优的选择,兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。

css link import的更多相关文章

  1. css中import与link用法区别

    方式:引入CSS的方法有两种,一种是@import,一种是link @import url('地址');//注意,这种方式可以放在页面也可以放在css文件中<link href="地址 ...

  2. css学习之LInk & import

    一.用link加载外部样式表 1.放置位置:放在head元素中 2.样式表中只能包含样式规则,不能包含其他标记语言.如出现了标记,会导致其中一部分或全部被忽略. 3.type = 'text/css' ...

  3. css和@import区别用法

    css和@import都是调用外部样式表的方法. 一.用法 (1)link: <link rel="stylesheet" type="text/css" ...

  4. link@import

    1.两者区别 1)link属于XHTML标签,而@import是CSS提供的;2)页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载; 3)import只在IE ...

  5. link @import区别 src href的区别

    先说页面引入css的四种方式吧 1 在头部写在style里面 2 行内样式 tyle= 3 外部引入 link和@import的区别 link属于XHTML的标签,而@import只是css提供的一种 ...

  6. CSS Link(链接)

    CSS Link(链接) 不同的链接可以有不同的样式. 一.链接样式 链接的样式,可以用任何CSS属性(如颜色,字体,背景等). 特别的链接,可以有不同的样式,这取决于他们是什么状态. 这四个链接状态 ...

  7. css link和@import区别

    1.link语法结构 <link href="CSSurl路径" rel="stylesheet" type="text/css" / ...

  8. css link和@import区别用法

    这里link与@import介绍的是html引入css的语法单词.两者均是引入css到html的单词. 1.link语法结构<link rel="stylesheet" ty ...

  9. CSS中@import与link的具体区别

    我们知道在网页中引用外部CSS有两种方式:@import和link 我们也经常听到有人说要使用link来引入CSS更好,但是你知道为什么吗? 继续往下看 link:link就是把外部CSS与网页连接起 ...

随机推荐

  1. php 分页类(1)

    inter.php <head> <meta http-equiv="Content-Type" content="text/html; charset ...

  2. RecyclerView onTouch & onClick 触摸事件与点击事件

    遇到一种情况需要处理,RecyclerView所在Activity需要处理滑动事件用于返回(onBackPressed). 手势检测: @Override public boolean onFling ...

  3. iostextField文本框基本使用

    (1)可以根据需要设置文本框的样式(包括形状.边框颜色.背景等). (2)可以根据需要设置文字显示样式(包括输入密码时的密文显示.文字横向居中.纵向居中上下.输入的文字是否首席木大写.文字超过后是否缩 ...

  4. cpanel 定时运行sh/php

    php -q /home/用户/public_html/cron.php                   -------------------php格式 /home/用户/public_html ...

  5. opewrt上传文件

    设备上运行的openwrt,当tftp和ftp都无法使用时,可以使用命令scp在两台linux设备上copy文件. 当设备启动起来后,输入命令: scp hbg@192.168.2.32:/home/ ...

  6. kubernetes 条件需求

    1. 你必须拥有一台安装有Docker的机器. 2. 你的内核必须支持 memory and swap accounting .确认你的linux内核开启了如下配置: CONFIG_RESOURCE_ ...

  7. Windows中安装jdk,出现javac不是内部或外部命令 也不是可运行的程序

    在经过多次实验,终于解决了在dos窗口验证jdk是否安装成功的错误提示-----javac不是内部或外部命令 也不是可运行的程序 首先要明确的是 在新建 JAVA_HOME , CLASSPATH文件 ...

  8. 二分 Intel Code Challenge Elimination Round (Div.1 + Div.2, combined) D

    http://codeforces.com/contest/722/problem/D 题目大意:给你一个没有重复元素的Y集合,再给你一个没有重复元素X集合,X集合有如下操作 ①挑选某个元素*2 ②某 ...

  9. Linux下配置Nginx按天切割日志

    Nginx由于轻巧和高效的设计风格,去掉了一些额外的功能,所以它不像apache那样有自动切割日志. 建立一个脚本文件,并保证这个文件有可执行的权限:1.建立一个文件/root/log.nginx.s ...

  10. 报表Reporting S而vice是 错误的解决

    Reporting Services 错误 报表服务器无法打开与报表服务器数据库的连接.所有请求和处理都要求与数据库建立连接. (rsReportServerDatabaseUnavailable)获 ...