div与css结合的四种方式

时间：2014-12-05 00:26:36 阅读：253 评论：0 收藏：0 [点我收藏+]

第一种方式：
<div style=" background-color:#00ff00;font-size: 20px"> 第一种方式</div >
缺点：这种方式暴露的缺点是代码严重重复。

第二种方式：

格式：标签名｛
                    属性一：属性值；
                    属性二：属性值；
                    ...
               ｝
例子：第一步：<style type= "text/css">

div{

background-color:#00ff00;

font-size:20px;

}

</style>

第二步：<div> 第二种方式</div >

缺点：这种方式中修饰的时候只适用于单独的某个页面。那么如果出现多个页面有相同的标签，并且实现同样的显示样式的时候，那么这种方式书写的 css代码又会出现严重的重复。

第三种方式：
将 css的代码专门抽取到一个单独 css文件中去，然后在 html页面中去引入显示样式文件就可以了，这样可以实现代码的复用
例子：第一步：Text03.css

#div03{

background-color:#00ff00;

font-size:20px;

}

第二步：<style type= "text/css">

@import url(css/Text03.css);

</style>

第三步：<div id= "div03"> 第三种方式</div >

第四种方式:
上面第三种方式通常看上去不美观, 所以就出现第四中方式, 使用一个 link标签引入进来. 使用link引入标签引入css代码是开发中最常用的.
例子：第一步：同上

第二步：<link href= "css/Text03.css" rel= "stylesheet" type= "text/css">

第三＝步：同上

原文地址：http://www.cnblogs.com/gangqing/p/4145247.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行