div与css结合的四种方式

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

第二种方式：

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

                    div {

                      background-color : #00ff00 ;

                       font-s i ze: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" >

          第三＝步：同上

转载于:https://www.cnblogs.com/gangqing/p/4145247.html