• 手机版

    扫码体验手机版

  • 微信公众号

    扫码关注公众号

游客您好
第三方账号登陆
  • 点击联系客服

    在线时间:8:00-16:00

    客服电话

    400-123-4567

    电子邮件

    1691000615@qq.com
  • 星点互联APP

    随时掌握企业动态

  • 扫描二维码

    关注星点微信公众号

CSS(层叠样式表)的三种引入方式

刘宗泽-本文作者
141 0 2019-1-11 17:15
摘要

1.行内样式(直接在标签内部通过使用style属性添加CSS样式)p style="color:red;font-size:12px;"这是一个段落/p12.内部样式(在head标签里面通过使用style标签引进CSS样式)headstylep{corlor:red;font-size:12px; ...

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

<p style="color:red;font-size:12px;">这是一个段落</p>
1
2.内部样式(在head标签里面通过使用style标签引进CSS样式)

<head>

<style>

p{
corlor:red;

font-size:12px;
   }

</head>
1
2
3
4
5
6
7
8
9
10
11
3.外部样式(先在外部建一个css格式的外部样式表,然后在标签里面用标签引入外部样式表)

<head>

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

 </head>
1
2
3
4
5
或者用@import引入

<style type="text/css" >   
@import url("CSS文件");   
</style>  
1
2
3
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进行模块化管理.
--------------------- 
作者:寸草心2130 
来源:CSDN 
原文:https://blog.csdn.net/qq_35531549/article/details/86030804 
版权声明:本文为博主原创文章,转载请附上博文链接!

鲜花

握手

雷人

路过

鸡蛋
本文暂无评论,快来抢沙发!

微信关注“星点教育培训”每天分享有用的课程资源
阅读排行
Powered by Discuz!X3.5 ©2001-2013 Comsenz Inc.星点互联设计( 鲁ICP(125234543) )