码迷,mamicode.com
首页 > Web开发 > 详细

css样式的三种引用方式

时间:2017-10-14 23:37:38      阅读:416      评论:0      收藏:0      [点我收藏+]

标签:淘宝   方便   css   rip   支持   12px   下载   一个   font   

CSS的三种引用方式:

1.内联样式(行间样式):直接在标签内部通过使用style属性添加CSS样式 

<p style="color:red;font-size:12px;">这是一个段落</p>

2.内部样式:在<head>标签里面通过使用<style>标签来引进CSS样式

<head>

<style>

p{

corlor:red;

font-size:12px;

 

   }

</head>

3.外部样式:先在外部新建一个外部样式表,然后在<head>标签里面通过<link>标签进行关联

 <head>

 <link rel="stylesheet" type="text/css" href="base.css"/>

 </head>

或者用@import引入

<style type="text/css" >   
@import url("CSS文件");   
</style>  

link和@import的区别:

1.老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。link 标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。

2.加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载,网速慢时会影响视觉效果.

link确保并行下载css文件,@import是一个一个下载。在IE中,link会阻断@import延长加载时间,多个@import的使用还会打乱资源文件的下载顺序引发js问题。

3.兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。

4.使用DOM控制样式的区别.当使用javascript控制dom去改变样式的时候,只能使用 link标签,因为@import不是dom可以控制的。

使用link: link可以选定要加载的媒体media。由于上述加载、兼容与IE的原因,普通站点应当尽量使用link 

使用@impo:大型门户网站(如淘宝)多个页面link同一个css文件会造成速度下降,@import可以在css中调入样式表,方便对css进行模块化管理。

css样式的三种引用方式

标签:淘宝   方便   css   rip   支持   12px   下载   一个   font   

原文地址:http://www.cnblogs.com/lujie123/p/7668844.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!