轻松学习三种层叠样式表！

最新推荐文章于 2022-10-11 16:41:24 发布

小猫爱摸鱼

最新推荐文章于 2022-10-11 16:41:24 发布

阅读量634

点赞数 1

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/Wsh20210301/article/details/115030824

版权

html 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

层叠样式表

三种引入方式归纳：

引入方式：

**第一种：**  行内式 CSS引入
        使用：  在标签内 加上style属性在引号内
                样式名：样式值;(每个样式之间用分号相隔)
    
 **第二种：**  内部式CSS引入
        使用：  在head标签里面  加上一个style标签
                标签名{样式;}
   
 **第三种：**  外部式CSS引入
   		使用：创建一个CSS文件 在html页面中的head标签里面使用 link标签进行引入。

行内式 CSS引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 第二种 内部式 -->
    <!-- <style>
        div{
          color: red;  
        }
    </style> -->
    <!-- <link rel="stylesheet" href="css/index.css"> -->
</head>
<body>
    <!-- 第一种  内部式 -->
    <div style="color: green;">
        看这个人头上是绿的
             头顶大草原
        <h3>绿油油</h3>
    </div>

    <div>
        左青龙右白虎
    </div>
</body>
</html>

效果图：
在这里插入图片描述
内部式CSS引入：

代码和上述一样的，这里就不重复了，将行内式标签注释掉，打开内部式样式运行得下面的图示：
在这里插入图片描述
外部式CSS引入：

将行内和内部式样式注释掉，新建一个css文件，在css文件里面写标签的样式，然后再html里面用link引入就可以达到效果：
如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 第二种 内部式 -->
    <!-- <style>
        div{
          color: red;  
        }
    </style> -->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- 第一种  内部式 -->
    <!-- <div style="color: green;">
        看这个人头上是绿的
             头顶大草原
        <h3>绿油油</h3>
    </div> -->

    <div>
        左青龙右白虎
    </div>
</body>
</html>