- 浏览: 595637 次
- 性别:
- 来自: 厦门
文章分类
- 全部博客 (669)
- oracle (36)
- java (98)
- spring (48)
- UML (2)
- hibernate (10)
- tomcat (7)
- 高性能 (11)
- mysql (25)
- sql (19)
- web (42)
- 数据库设计 (4)
- Nio (6)
- Netty (8)
- Excel (3)
- File (4)
- AOP (1)
- Jetty (1)
- Log4J (4)
- 链表 (1)
- Spring Junit4 (3)
- Autowired Resource (0)
- Jackson (1)
- Javascript (58)
- Spring Cache (2)
- Spring - CXF (2)
- Spring Inject (2)
- 汉字拼音 (3)
- 代理模式 (3)
- Spring事务 (4)
- ActiveMQ (6)
- XML (3)
- Cglib (2)
- Activiti (15)
- 附件问题 (1)
- javaMail (1)
- Thread (19)
- 算法 (6)
- 正则表达式 (3)
- 国际化 (2)
- Json (3)
- EJB (3)
- Struts2 (1)
- Maven (7)
- Mybatis (7)
- Redis (8)
- DWR (1)
- Lucene (2)
- Linux (73)
- 杂谈 (2)
- CSS (13)
- Linux服务篇 (3)
- Kettle (9)
- android (81)
- protocol (2)
- EasyUI (6)
- nginx (2)
- zookeeper (6)
- Hadoop (41)
- cache (7)
- shiro (3)
- HBase (12)
- Hive (8)
- Spark (15)
- Scala (16)
- YARN (3)
- Kafka (5)
- Sqoop (2)
- Pig (3)
- Vue (6)
- sprint boot (19)
- dubbo (2)
- mongodb (2)
最新评论
页面中使用CSS的方式主要有3种:行内添加定义style属性值,页面头部内嵌调用和外面链接调用,其中外面引用有两种:link和@import。外部引用CSS两种方式link和@import的方式分别是:
XML/HTML代码
XML/HTML代码
两者都是外部引用CSS的方式,但是存在一定的区别:
区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
区别4:link支持使用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)最值得推荐。
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:link支持使用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)最值得推荐。
发表评论
文章已被作者锁定,不允许评论。
-
html pre标签使用(保留空格和回车等操作)
2018-05-15 08:37 2437pre 元素可定义预格式化的文本。被包围在 pre 元素中的文 ... -
js 鼠标移过去渐变的效果(页面固定 定位栏)
2017-10-31 11:29 6261.html代码 <div id="loc ... -
js 在页面中跳转到指定位置
2017-10-24 15:29 13411.页面中代码 <div style="lef ... -
CSS 块对象(独占一行)和内联对象
2016-11-03 10:13 843块对象也称为块级元素,内联元素也称为行内元素 ① 块级元素(d ... -
CSS 点击div的同时显示或隐藏的div
2016-08-16 17:18 617<div id="up"> ... -
CSS td里面两个input不换行设置(white-space: nowrap)
2016-07-14 16:54 1714定义和用法 white-space 属性设置如何处理元素内的 ... -
CSS NAV页面效果总结
2016-07-11 09:17 615<!DOCTYPE html PUBLIC &quo ... -
CSS 页面置灰等待效果
2016-06-01 11:18 1305<div id='tms-comm-load' st ... -
Css 表单
2014-12-17 10:50 348table页面 <table style= ... -
CSS 工作总结(nobr标签可以防止换行)
2014-11-22 11:49 608<style type="text/css ... -
CSS 可上下伸缩的PANEL
2014-10-30 19:35 908html代码 <!DOCTYPE html PUB ... -
CSS常用样式总结积累
2014-10-28 20:28 5081.把一个链接设置成一个按钮 .saveButton{ ...
相关推荐
link 和 @import 引用 CSS 文件方法的区别 在 HTML 中,-link 和 @import 是两种常用的引用 CSS 文件的方法,但它们之间存在着一些区别。在本文中,我们将详细介绍这两种方法的异同。 一、link 元素 link 元素是 ...
我们都知道link与@import都可以引入css样式表,那么这两种的区别是什么呢?先说说它们各自的链接方式,然后说说它们的区别~~~ link链入的方式: CSS Code复制内容到剪贴板 <link rel=stylesheet type=text/...
导入CSS文件主要有两种方式: 链接式(link) 代码如下 复制代码代码如下: <link rel=”stylesheet” href=”style.css” type=”text/css”/> 导入式(@impot) 复制代码代码如下: <style type=”text/...
在HTML和CSS的世界里,`href` 和 `src`、`link` 和 `@import` 是两个关键的概念,它们在创建动态和静态网页时扮演着重要角色。理解这些概念的区别对于优化网页性能和布局至关重要。 首先,让我们来看一下 `href` 和...
link和@import是Web开发中用于将CSS样式表链接到HTML文档的两种常用方法,它们虽然在功能上有相似之处,但是在使用上有明显的不同点。 首先,link是HTML/XHTML中定义的一个标签,它不仅可以用于引入CSS文件,还可以...
link rel=stylesheet href=style.css /> 2.CSS中@import CSS Code复制内容到剪贴板 @import style.css; 第一种方式最为常见最为主流,第二种方式则很少见到有人这么写,因而也常被开发工程师所忽略。这...
其中,通过link标签和@import语句导入CSS文件是最主要的两种方法。虽然两者的目的相同,但它们在使用方法、性能表现、兼容性以及JavaScript交互方面存在显著差异。 1. 标签与CSS规则的区别 link是XHTML中用于链接...
导入式-link 导入式-@import 1.行内式。即在html标签中的style属性中设置css,值得注意的是css代码的名值对儿用冒号:来连接,用分号分离不同的css样式。这种方式虽然便于观看与调试,但是它违背了结构与表现相分离...
css和@import都是调用外部样式表的方法。 一、用法 (1)link: <link rel="stylesheet" type="text/css" href="css文件路径"/> (2)@import: 方法一(html中添加): <style type="text/css"> @import ...
CSS有两种主要的引入方式,即`<link>`标签和`@import`规则。这两种方法虽然都能达到同样的效果,即引入外部样式表,但在实际应用中,它们之间存在一些差异。 首先,`<link>`标签是HTML文档的一部分,它被用来定义...
### CSS中的`@import`与`<link>`的区别及应用场景 #### 一、概述 在Web开发中,尤其是在处理样式表(CSS)时,我们常常会遇到两种引入外部CSS文件的方法:`@import`和`<link>`。这两种方法虽然都能达到引入样式的...
综上所述,虽然`<link>`和`@import`在功能上都能实现CSS文件的引入,但从性能和兼容性角度出发,更推荐在大多数情况下使用`<link>`标签进行外部样式表的引入。特别是在网站流量较大、对加载速度和兼容性有较高要求的...
然而,尽管使用@import能够帮助我们更好地组织和管理CSS文件,但在Web前端优化中,它的使用常常被建议避免。为什么呢? 其主要原因在于浏览器加载CSS的方式上。当@import语句被放置在一个外部样式表中时,浏览器...
在CSS中,引用外部样式表主要有两种方法:`@import`和`link`。这两种方法在功能和使用场景上存在一些差异。 首先,`link`元素是HTML的一部分,用于将外部CSS文件链接到HTML文档中。它的基本语法是: ```html <link ...