欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css引入方式  

程序员文章站 2023-12-21 11:43:58
...

css*有四种模式:

第一:在head部分加入<link  rel="stylesheet" type="text/css" href="index.css"/>,引入外部的CSS文件。

这种方法是当前最常用的方式,能够体现DIV+CSS中的内容和显示分离的思想,便于维护和阅读,代码看起来也相当美观。

第二:在head部分加入
<style type="text/css">
.logo{margin: 0;padding: 0;border:1px red solid;}
</style>

 

优点:速度 快,所有的CSS控制都是针对本页面标签的,没有多余的CSS命令;再者不用外链CSS文件。直接在HTML文档中读取样式。缺点就是改版麻烦些,单个页 面显得臃肿,CSS不能被其他HTML引用造成代码量相对较多,维护也麻烦些。

 

第三:直接在页面的标签里加 <div style="border:1px red solid;">测试信息</div>

这种方法现在用的很少,通用性差,效果特殊,使用CSS命令较少,并且不常改动的地方,使用这种方法反而是很好的选择。

第四:在style使用@import

<style type="text/css">
@import url(index.css);
</style>

其中link和@inport的区别

差别1:老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。

link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。

差别2:加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的 CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就 是闪烁),网速慢的时候还挺明显

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

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

 

上一篇:

下一篇: