引入CSS的方式、link和@import的区别
引入CSS的方式有四种：内联方式、嵌入方式、链接方式、导入方式。
内联方式
内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。
<div style="background: red"></div>
这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个 <div> 拥有相同的样式，你不得不重复地为每个 <div> 添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。
嵌入方式
嵌入方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码。
<head>
<style>
.content {
background: red;
}
</style>
</head>
嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。
链接方式
链接方式指的是使用 HTML 头部的 <head> 标签引入外部的 CSS 文件。
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。
导入方式
导入方式指的是使用 CSS 规则引入外部 CSS 文件，在<style>标签中使用@import。
<style>
@import url(style.css);
</style>
链接方式link和导入方式@import的区别
两者都是外部引用CSS的方式，但是存在一定的区别：
- 放置的位置不同
link一般放在head标签中
@import必须放在<style type="text/css">标签中
- 加载方式不同
link会和dom结构一同加载渲染
@import只能能dom结构加载完成以后才能渲染页面
- 兼容性不同
link是在xhtml的标签，兼容IE各个版本
@import是css2.1时提出来的，只能在IE6以上进行解析。
- 加载内容不同
link是XHTML标签，除了可以加载css文件外，还可以定义RSS等其他事务。
@import属于CSS范畴，只能加载css文件
- 当使用 Javascript 控制 DOM 去改变样式的时候，只能使用 link 方式，因为 @import 眼里只有 CSS ，不是 DOM 可以控制的，而link是html元素，可用javascript去控制dom元素最后达到改变样式的效果；
优先级
内联方式 > 嵌入方式 > 链接方式 > 导入方式
引入CSS的方式、link和@import的区别的更多相关文章
- css中：link和@import的区别
两者都是外部引用css的方式.但是有一定的区别: 1. 从属关系:link是一个xhtml标签,除了加载css外,还可以定义 RSS.rel 连接属性等: @import属于css范畴,只能加载css ...
- css加载方式link和@import的区别！
本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别. 1. 老祖宗的差别.link属于XHTML标签,而@import完全是CSS提供的一种方式. link标签除了可以加载CSS外,还可 ...
- 引入CSS文件的方式，以及link与@import的区别
一.引入css的方式 在HTML中引入css的方法主要有4种:行内式.内嵌式.链接式和导入式. 1.行内式 <div style="background:yellow;"&g ...
- 引入CSS的方式有哪些?link和@import的有何区别应如何选择【转载】
看到淘宝网页中这样写使用的是import,而很多网站都是使用link,当然还有一些页面比较简单,流量很大的网站,是直接将CSS写在html代码中的?他们有什么区别?CSS用import还是link好? ...
- 页面引入css用link和import的区别
假设有一个css文件a.css,文件里的内容如下: p { font-size: 18px; } 现在分别使用两种方式引入a.css: 1.使用html的link标签 <link rel=&qu ...
- css 样式引入的方法 link 与import的区别
<link> 元素所参考的样式用户可以自由的选择加以改变,而导入的样式表单就自动的与剩下的样式表融合在一起了 CSS与HTML文档结合的4中方法:1 使用<link>元素链接到 ...
- 由link和@import的区别引发的CSS渲染杂谈
我们都知道,外部引入 CSS 有2种方式,link标签和@import. 它们有何本质区别,有何使用建议,在考察外部引入 CSS 这部分内容时,经常被提起. 如今,很多学者本着知其然不欲知其所以然的学 ...
- 引入css的方式
---恢复内容开始--- 引入css的样式及link和@import的区别 有3种引入方式 1.内部样式(写在标签内) 2.内联样式 3.外部样式(link @import) 区别: 1.本质区别:l ...
- link 和@import 的区别
两者都为外部引入css的方式. 他们的区别: 1.link属于HTML标签,而@import是css提供的 2.页面被加载时候,link会同时加载,而@import引入的文件会等到页面加载完成之后再进 ...
随机推荐
- Python Django中一些少用却很实用的orm查询方法
一.使用Q对象进行限制条件之间 "或" 连接查询 from django.db.models import Q from django.contrib.auth.models im ...
- spring boot 配置logback日志之jdbcTemplate打印sql语句配置
配置jdbcTemplate打印sql 用mybaties打印语句很好配置,后来用了JdbcTemplate就不知道怎么打印了,其实JdbcTemplate执行sql语句的过程会做打印sql语句的操作 ...
- laravel框架学习笔记
一.laravel的安装 1.composer 作用:主要管理php中的依赖关系(类似于yum源) 可以安装的软件: curl //主要用到微信开发中 upload //文本操作 excel / ...
- js判断是横屏还是竖屏
1通过在html中分别引用横屏和竖屏的样式: <link rel="stylesheet" media="all and (orientation:portrait ...
- 远程服务器返回错误: 404错误、远程服务器返回错误:500错误、 HttpWebResponse远程服务器返回错误:(404、500) 错误。
现象 我们编码实现请求一个页面时,请求的代码类似如下代码: HttpWebRequest req = (HttpWebRequest)WebRequest.Create(strUrl);req.Use ...
- 命令行选项解析函数getopt()
1.定义: int getopt(int argc, char * const argv[], const char *optstring); 2.描述: getopt是用来解析命令行选项参数的,但是 ...
- Spring AOP 中 advice 的四种类型 before after throwing advice around
spring AOP(Aspect-oriented programming) 是用于切面编程,简单的来说:AOP相当于一个拦截器,去拦截一些处理,例如:当一个方法执行的时候,Spring 能够拦截 ...
- 蓝桥杯 K好数
如果一个自然数N的K进制表示中任意的相邻的两位都不是相邻的数字,那么我们就说这个数是K好数.求L位K进制数中K好数的数目.例如K = 4,L = 2的时候,所有K好数为11.13.20.22.30.3 ...
- 解决 Anaconda 3.7更新出现CondaHTTPError与SSLError
1.问题描述: An HTTP error occurred when trying to retrieve this URL. HTTP errors are often intermittent, ...
- echarts做飞线图
先上图,要不感觉没有说服力: 飞线图应该是大屏中很常见的一种了,通常你可以很轻易的用datav做一个飞线图,而且datav做的大屏逼格真的很高,本身也是开源免费的项目,开箱即用,上手简单……行了回归正 ...