在html中使用css样式的集中方式-阿里云开发者社区

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

2018-03-01 1266

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

一个在线应用的网站如果没有使用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
      > 
     

原文发布时间为：2017-2-13

本文作者：admin

本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落

原文链接：在html中使用css样式的集中方式

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

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

热门文章

最新文章

相关课程

相关电子书

相关实验场景