首页 > 代码库 > div与css结合的四种方式

div与css结合的四种方式

第一种方式:
               <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">
          第三=步:同上

div与css结合的四种方式