在html中使用css样式的集中方式

最新推荐文章于 2022-06-08 17:32:57 发布

weixin_34026484

最新推荐文章于 2022-06-08 17:32:57 发布

阅读量261

点赞数

原文链接：https://yq.aliyun.com/articles/573376

版权

一个在线应用的网站如果没有使用css是很难想象的，在html使用css主要以下几种方式，下面就做一下简单介绍。

一.使用内联样式:

所谓的内联样式，就是将css代码写入标签之内，代码如下:

 
     
          < 
          div 
          style 
          = 
          "font-size:12px" 
          >蚂蚁部落</ 
          div 
          > 
         
 
   

上面的代码可以将字体大小设置为12px。

二.使用内部样式表:

内部样式表就是将css代码单独写在style标签之内，而不是直接写在要设置样式的元素标签之内。

通常style标签会发在head标签之内。

代码如下:

 
          <!DOCTYPE html>  
         
 
          < 
          html 
          >  
         
 
          < 
          head 
          >  
         
 
          < 
          meta 
          charset 
          = 
          " utf-8" 
          >  
         
 
          < 
          meta 
          name 
          = 
          "author" 
          content 
          = 
          "http://www.softwhy.com/" 
          />  
         
 
          < 
          title 
          >蚂蚁部落</ 
          title 
          >  
         
 
          < 
          style 
          type 
          = 
          "text/css" 
          >   
         
 
          div{ 
         
 
             
          font-size:12px; 
         
 
             
          color:red; 
         
 
          } 
         
 
          </ 
          style 
          >   
         
 
          </ 
          head 
          >   
         
 
          < 
          body 
          >   
         
 
          < 
          div 
          >蚂蚁部落</ 
          div 
          >  
         
 
          </ 
          body 
          >   
         
 
          </ 
          html 
          > 
         

以上代码可以div的字体大小设置为12px，字体颜色设置为红色。

三.引入外部样式表:

更多的时候，我们通常将css代码单独放入一个css文件中，然后通过link标签将其引入.

link标签通常放在head标签之内。

代码如下:

 
       <!DOCTYPE html>  
      
 
       < 
       html 
       >  
      
 
       < 
       head 
       >  
      
 
       < 
       meta 
       charset 
       = 
       " utf-8" 
       >  
      
 
       < 
       meta 
       name 
       = 
       "author" 
       content 
       = 
       "http://www.softwhy.com/" 
       />  
      
 
       < 
       title 
       >蚂蚁部落</ 
       title 
       >  
      
 
       < 
       link 
       rel 
       = 
       "stylesheet" 
       href 
       = 
       "style.css" 
       type 
       = 
       "text/css" 
       >    
      
 
       </ 
       head 
       >   
      
 
       < 
       body 
       >   
      
 
       < 
       div 
       >蚂蚁部落</ 
       div 
       >  
      
 
       </ 
       body 
       >   
      
 
       </ 
       html 
       > 
      