引入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引入的文件会等到页面加载完成之后再进 ...
随机推荐
- Docker - 解决docker-machine create下载boot2docker.iso时慢的问题
解决步骤 从https://github.com/boot2docker/boot2docker/releases下载iso到~/.docker/machine/cache/里 docker-mach ...
- 6_10 下落的树叶（UVa699）<二叉树的DFS>
每年到了秋天树叶渐渐染上鲜艳的颜色,接着就会落到树下来.假如落叶发生在二叉树,那会形成多大的树叶堆呢?我们假设二叉树中的每个节点所落下的叶子的数目等于该节点所储存的值.我们也假设叶子都是垂直落到地面上 ...
- Pandas 记录
过滤不为空的数据 df[df['PLANR']==''] 获取某列某行数据(某个单元格数据) df['MNG02'][0] 根据判断条件筛选数据 df[df['DAT00'] < temp_ti ...
- Python学习（五）—— 集合和字符格式化
数据类型和变量的总结 字符串 数字 列表 元组 字典 分类 1.可变不可变: 可变(即修改变量值以后id不改变):列表.字典 不可变(即修改变量值以后id改变):字符串.数字.元组 2.访问顺序: 直 ...
- 巨头环伺下，青云QingCloud的云计算之路危机重重
编辑 | 于斌 出品 | 于见(mpyujian) 随着互联网.科技行业的深入发展,国内云计算市场正越来越爆发出惊人的潜力,大量大.中.小型玩家开始不断发力,涌现出了一大批增速明显的行业玩家. 以BA ...
- python manage.py shell
启动python有两种方式:python manage.py shell和python. 这两个命令 都会启动交互解释器,但是manage.py shell命令有一个重要的不同: 在启动解释器之前,它 ...
- 2020qbxt D1T3 停车
嗯... 题目: [问题描述] 市中心有一个环形的停车场,编号1到n,现在有m个车要停,停在每个位置会有不同的费用.为了方便,不允许两辆车停在相邻的位置,请问停好所有车的最小花费是多少? [输入格式] ...
- 我来给你讲清楚Pythony广播
初学python广播搞的人头大,今天老师上课讲了一下,茅塞顿开,zt老师nb 首先说一下后向纬度(这个后向纬度书里边称作低维),举例:(3,4,5)后向纬度是:3*4*5或4*5或5 向量广播的条件有 ...
- 实验四《Android程序设计》
实验四<Android程序设计> 一.实验内容 1.Android Stuidio的安装测试 2.Activity测试 3.UI测试 4.布局测试 5.事件处理测试 二.实验步骤 第一部分 ...
- Newtonsoft.Json小记
/*json相关*/ //http://www.cnblogs.com/hongfei/p/3593936.html string jsonObject = "{\"phone\& ...