CSS-2-CSS的3种导入方式

最新推荐文章于 2024-10-01 21:51:05 发布

西西ANO

最新推荐文章于 2024-10-01 21:51:05 发布

阅读量104

点赞数

分类专栏： # CSS 文章标签： css3

本文链接：https://blog.csdn.net/baidu_38126306/article/details/110729443

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS -> CSS的3种导入方式

1. 行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--行内样式：在标签元素种，编写一个style属性，编写样式即可-->
<h1 style="color:red">行内样式</h1>
</body>
</html>

2. 内部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        /*注释*/
        h1 {
            color: green;
        }

    </style>
</head>
<body>

<!--行内样式：在标签元素种，编写一个style属性，编写样式即可-->
<h1>行内样式</h1>
</body>
</html>

3. 外部样式

优先级：就近原则！！！

最近的肯定是行内样式！

内部样式和外部样式，谁离元素近就谁优先

拓展：外部样式的两种写法：
- 链接式（推荐！）
```

    <link rel="stylesheet" href="css/style.css">
```
- 导入式
```

    <style>
        @import url("css/style.css");
    </style>
```
区别：

link标签属于html标签，只能放入html源代码中使用

@import属于css样式，在html中使用时必须放在style标签中。是CSS2.1特有的