css3的三种使用方法是什么

一、内联样式

　　内联样式通过style属性来设置，属性值可以任意的CSS样式。

  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="UTF-8">
      <title>内联样式</title>
  </head>
  <body>
     <p style="background: red"> I  love  China!</p>
  </body>
 </html>

　　显示效果：

二、内部样式

　　内部样式定义在文档的head部分，通过style标签来设置。需要使用元素选择器（p）来关联样式和要设置样式的标签（p标签）。

  <!DOCTYPE html>
  <html>
  <head>
     <meta charset="UTF-8">
      <title>内联样式</title>
     <style type="text/css">
         p{ 
              background: green;
          }
    </style>
 </head>
 <body>
    <p> I  love  China!</p>
 </body>
 </html>

　　效果：

三、外部样式

　　在文档外的*.css定义css样式，然后在文档的head部分通过link元素引入。　　

  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="UTF-8">
      <title>内联样式</title>
      <link rel="stylesheet" href="style.css">
  </head>
  <body>
      <p> I  love  China!</p>
</body>
 </html>

　　style.css文件内容：

p{ 
             background: yellow;
        }

　　显示效果：

　　a.在一个外部样式表中导入其他样式表的样式

　　combine.css文件中导入上面的style.css

@import "style.css";
 body{
     background: red;
}

　　HTML文件中引入combine.css文件

  <!DOCTYPE html>
  <html>
 <head>
      <meta charset="UTF-8">
      <title>document</title>
      <link rel="stylesheet" href="combine.css">
  </head>
  <body>
      <p> I  <span>love</span>  China!</p>
 </body>
 </html>

　　效果：

（学习视频分享：css视频教程）

以上就是css3的三种使用方法是什么的详细内容，更多请关注php中文网其它相关文章！

上一篇：centos6.8 yum怎么安装php

下一篇：为什么php获取当前时间不准确

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

来源：网友投稿关注：时间：2022-01-24 21:29

☉首先声明，只要是我们的vip会员所有源码均可以免费下载，不做任何限制(了解更多)
☉本站的源码不会像其它下载站一样植入大量的广告。为了更好的用户体验以后坚持不打水印
☉本站只提供精品织梦源码，源码在于可用，不在多！！希望在这里找到你合适的。
☉本站提供的整站织梦程序，均带数据及演示地址。可以在任一源码详情页查看演示地址
☉本站所有资源（包括源码、模板、素材、特效等）仅供学习与参考，请勿用于商业用途。
☉如有其他问题，请加网站客服QQ进行交流。