• 技术文章 >web前端 >前端问答

    css3的三种使用方法是什么

    长期闲置长期闲置2022-01-24 11:15:38原创390

    css3的三种使用方法:1、内联样式,语法为“<元素 style="css样式代码;">”;2、内部样式,语法为“<style>元素{css样式代码;}</style>”;3、外部样式,语法为“<link href="css样式路径">”。

    本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。

    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>

      显示效果:

    06.png

    二、内部样式

      内部样式定义在文档的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>

      效果:

    07.png

    三、外部样式

      在文档外的*.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;
            }

      显示效果:

    08.png

      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> 

      效果:

    09.png

    (学习视频分享:css视频教程

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

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css
    上一篇:css3怎样让动画不回弹 下一篇:css3动画属性名是什么

    相关文章推荐

    • css3如何让盒子水平居中• css怎么设置按钮中的字大小• 一个实例用css来实现胖橘的喜乐(实例分享)• html5中hr标签能用css吗• css3怎样实现添加阴影

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网