三种样式

一、外部样式：

1、link标签：

<link rel="stylesheet" type="text/css" href="css/css01.css">

link标签的常用属性：

rel：stylesheet 表示使用外部样式表

type：表示类型是text或css

href：外部样式的文件路径

创建一个css目录下的css01.css文件：

div{
    color: red;
    background-color: blue;
}

p{
    color:bisque;
    background-color: green;
}

其中：div{...}表示div的样式为红色，蓝色背景

<!DOCTYPE html>
<html>
<head>
    <title>this is practice for css</title>
    <meta charset="utf-8">
    <!-- 外部样式 -->
    <link rel="stylesheet" type="text/css" href="css/css01.css">

</head>
<body>
    <div>
        this is a h1 in body
    </div>
    <p>this is a p tag_01</p>
</body>
</html>

执行效果：

 

 可以看到，link标签链接外部标签（div标签和p标签），在body中，div标签和p标签使用了css文件中的样式。

2，导入样式：

@import url("xxx")，其中xxx是样式文件的路径；

<!DOCTYPE html>
<html>
<head>
    <title>this is practice for css</title>
    <meta charset="utf-8">
    <!-- 外部样式 -->
    <!-- <link rel="stylesheet" type="text/css" href="css/css01.css"> -->
    <style>
        @import url("css/css01.css");
    </style>
</head>
<body>
    <div>
        this is a h1 in body
    </div>
    <p>this is a p tag_01</p>
</body>
</html>

修改一下样式文件：

div{
    color: green;
    background-color: black;
}

p{
    color:yellow;
    background-color: pink;
}

执行效果：

 

 拓展：使用link标签和使用@import url("xxx")的区别是什么呢？

 

二、内部样式：

<!DOCTYPE html>
<html>
<head>
    <title>this is practice for css</title>
    <meta charset="utf-8">
    <!-- 外部样式 -->
    <!-- <link rel="stylesheet" type="text/css" href="css/css01.css"> -->
    <!-- <style>
        @import url("css/css01.css");
    </style> -->
    <style>
        div{
            color:aqua;
            background-color: black;
        }
        p{
            color: brown;
            background: blue;
        }
    </style>
</head>
<body>
    <div>
        this is a h1 in body
    </div>
    <p>this is a p tag_01</p>
</body>
</html>

在html代码内部，使用<style>标签添加内部样式（直接将样式写在里面）

执行效果：

 

 

三、内嵌样式

我们可以在某个具体的标签内使用样式，通过style属性来实现；

<!DOCTYPE html>
<html>
<head>
    <title>this is practice for css</title>
    <meta charset="utf-8">
    <!-- 外部样式 -->
    <!-- <link rel="stylesheet" type="text/css" href="css/css01.css"> -->
    <!-- <style>
        @import url("css/css01.css");
    </style> -->
    <!-- <style>
        div{
            color:aqua;
            background-color: black;
        }
        p{
            color: brown;
            background: blue;
        }
    </style> -->
</head>
<body>
    <div style="color:blueviolet; background-color:red;">
        this is a h1 in body
    </div>
    <p style="color:yellowgreen; background-color: blanchedalmond;">this is a p tag_01</p>
</body>
</html>

执行结果：

 

posted @ 2022-04-04 17:53  Target_L  阅读(104)  评论(0)    收藏  举报