引入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引入的文件会等到页面加载完成之后再进 ...
随机推荐
- Plastic Bottle Manufacturer Tips: Use Caution For Plastic Bottles
Plastic bottles use polyester (PET), polyethylene (PE), polypropylene (PP) as raw materials, after a ...
- Spring Boot Json 之 Jackjson Fastjson
Json 是目前互联网应用使用最为广泛的信息交换格式之一.Spring Boot 内置了 Jackson .Json 在应用中主要体现在以下功能: 序列化 反序列化 字段格式化 验证自动化 目前长用的 ...
- 吴裕雄 python 机器学习——模型选择参数优化暴力搜索寻优GridSearchCV模型
import scipy from sklearn.datasets import load_digits from sklearn.metrics import classification_rep ...
- BFS和DFS详解以及java实现(转载)
作者:Leo-Yang 原文都先发布在作者个人博客:http://www.leoyang.net/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连 ...
- 【转】直播流程，视频推流，视频拉流，简介，SMTP、RTMP、HLS、 PLPlayerKit
原:https://www.cnblogs.com/baitongtong/p/11248966.html 1 .音视频处理的一般流程: 数据采集→数据编码→数据传输(流媒体服务器) →解码数据→播放 ...
- java.lang.ClassNotFoundException: javax.xml.bind.DatatypeConverter 可能是我们运行的java版本过高导致
最近给自己写了个 SpringBoot 应用程序 顺便练练手,准备把程序过到 树莓派 上,结果登陆报错
- 模仿.NET框架ArrayList写一个自己的动态数组类MyArrayList，揭示foreach实现原理
通过.NET反编译工具可以查看到ArrayList内部的代码,发现ArrayList并非由链表实现,而是由一个不断扩容的数组对象组成. 下面模仿ArrayList写一个自己的MyArrayList. ...
- 服务器(1)——IIS(1)——Windows7中IIS简单安装与配置(详细图解)
最近工作需要IIS,自己的电脑又是Windows7系统,找了下安装的方法,已经安装成功. 一.首先是安装IIS.打开控制面板,找到“程序与功能”,点进去 二.点击左侧“打开或关闭Windows功能” ...
- PTA的Python练习题（十二）-第4章-6 输出前 n 个Fibonacci数
接下来应该做到 第4章-6 输出前 n 个Fibonacci数 了 def fib(n): a,b = 0,1 for i in range(n+1): a,b = b,a+b return a n= ...
- Snuke's Coloring 2-1
There is a rectangle in the xy-plane, with its lower left corner at (0,0) and its upper right corner ...