引入CSS文件的方式，以及link与@import的区别
一、引入css的方式
在HTML中引入css的方法主要有4种：行内式、内嵌式、链接式和导入式。
1.行内式
<div style="background:yellow;"></div>
行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。
2.内嵌式
<html>
<head>
<style>
..// 此处添加css代码
</style>
</head>
</html>
缺点是对于一个包含很多网页的网站，在每个网页中使用嵌入式，进行修改样式时非常麻烦。单一网页可以考虑使用嵌入式。
3.链接式
<link rel="stylesheet" href="css的路径" type="text/css" >
使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。
4.导入式
<style type="text/css" media="screen">
@import url("CSS文件");
</style>
导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。
二、link与@import的区别
1.：
link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
2.：
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
3.：
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
4.：
ink支持使用Javascript控制DOM去改变样式；而@import不支持。
引入CSS文件的方式，以及link与@import的区别的更多相关文章
- CSS有哪些引入方式，link和@import的区别
3种方式哦,行内样式.内部样式表.外部样式表 1. 行内样式又称为内联样式,直接在HTML标签的style属性中添加css. 会导致 HTML 代码变得冗长 2. 内部样式表又称为嵌入方式,是在HTM ...
- 引入CSS的方式、link和@import的区别
引入CSS的方式有四种:内联方式.嵌入方式.链接方式.导入方式. 内联方式 内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS. <div style="back ...
- CSS的导入方式：link与import方式的区别
在前端开发中,加载CSS样式文件有两种方式:link方式与import方式,它们之间的区别主要有以下几点: 1.兼容性不一样 link是一个HTML标签,所以它不存在兼容性问题,而import方式则具 ...
- 如何使用Jquery 引入css文件
如何使用Jquery 引入css文件: $("head").append("<link>");var toolbarCss = $("he ...
- 引入css文件时，css link和@import区别
这里link与@import介绍的是html引入css的语法单词.两者均是引入css到html的单词. 一.了解基本 1.link语法结构 <link href="CSSurl路径&q ...
- 页面引入css用link和import的区别
假设有一个css文件a.css,文件里的内容如下: p { font-size: 18px; } 现在分别使用两种方式引入a.css: 1.使用html的link标签 <link rel=&qu ...
- web前端（7）—— 了解CSS样式，引入css样式的方式
CSS 在前面大概的介绍了css,从本片博文开始,会详细的介绍它,在最开始介绍web前端时,打开百度首页,当时我提出了一个问题,为什么百度首页的输入框可以放在正中间,就是由于有css的控制,我们可以打 ...
- 添加css的方式：link与@import区别
如何在html中添加css? 在html中设置css共有三种方式,分别是: 行内式 内嵌式 导入式-link 导入式-@import 1.行内式.即在html标签中的style属性中设置css,值得注 ...
- jquery，js引入css文件，js引入头尾
jquery,js引入css文件,js引入头尾 今天在项目中,需要把20多个页面加上头和尾部,头和尾是我写的,所以小师傅把这个工作交给我了. 我开始往里面加,先引入common.css,在body开始 ...
随机推荐
- 如何设置自适应当前浏览器高度的div块
嗯 就是下面这样 <!DOCTYPE html> <head> <title>adaptive this page size</title> <s ...
- apache代理转发
打开apache安装目录的conf文件夹下的httpd.conf1.将以下两行前的注释字符 # 去掉:#LoadModule proxy_module modules/mod_proxy.so#Loa ...
- Win下安装MySQL 5.6
最近身边有人要win下安装mysql 去学习数据库,问我如何安装MySQL,其实win 下安装要比Linux简单的多,直接运行安装包下一步安装即可. 1.首先我们运行mysql-installer-c ...
- Python爬虫学习之获取网页源码
偶然的机会,在知乎上看到一个有关爬虫的话题<利用爬虫技术能做到哪些很酷很有趣很有用的事情?>,因为强烈的好奇心和觉得会写爬虫是一件高大上的事情,所以就对爬虫产生了兴趣. 关于网络爬虫的定义 ...
- 第一个远程javaweb项目测试全过程
2017-5-20,在这个奇特的日子,我不再满足于在本地测试javaweb,于是在上腾讯云买了第一个云服务器,由于是学生认证,所以一个月只要10块钱,还是要抢的,每天早上9点开抢 打开后,发现其实是一 ...
- 分布式版本控制git常见问题之gitignore冲突
所见即所得,建议大家用可视化的SourceTree专为git打造的,非常好用,废话不多说了. 原因是有人提交了.gitignore里面的内容,所以和本地的不一样,这样就有问题,那么pull都不可以,所 ...
- 偏最小二乘回归分析建模步骤的R实现(康复俱乐部20名成员测试数据)+补充pls回归系数矩阵的算法实现
kf=read.csv('d:/kf.csv') # 读取康复数据kfsl=as.matrix(kf[,1:3]) #生成生理指标矩阵xl=as.matrix(kf[,4:6]) #生成训练指标矩阵x ...
- JavaSE(一) IO类层次关系和各种IO流的用法总结
今天把IO流的这一知点进行一下总结,因为在之前使用io流的时候,就只知道几个重点常用的IO类,比如FileInputStream,BufferedInputStream(缓冲流)等等,但是不知道它处于 ...
- Warning: session_start() [function.session-start]: Cannot send session cache limiter
Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers alrea ...
- 一天搞定HTML----列表标签03
1.细说列表标签 2.代码演示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...