CSS-CSS的书写格式

行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS书写格式</title>
</head>
<body>
<div style="color: red">我是div</div>
</body>
</html>

内嵌样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS书写格式</title>
    <style>
        div {
            color: blue;
        }
    </style>
</head>
<body>
<div>我是div</div>
</body>
</html>

外链样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS书写格式</title>
    <link rel="stylesheet" href="117-abc.css">
</head>
<body>
<div>我是div</div>
</body>
</html>

导入样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS书写格式</title>
    <style>
        @import "117-abc.css";
    </style>
</head>
<body>
<div>我是div</div>
</body>
</html>

外链样式和导入样式的异同

  • 相同点：都是把 CSS 代码写到了一个单独的文件中
  • 不同点：外链样式, 在显示网页时, 会先加载 CSS 文件, 再显示页面, 导入样式, 在显示网页时, 会先显示界面, 再加载 CSS 文件

外链样式是通过一个 HTML 标签引入 CSS 的，而导入样式是通过 @import 引入 CSS 的, 而 @import 是 CSS2.1 推出, 所以导入样式存在兼容问题

企业开发用外链样式

优先级

行内样式的优先级最高，其它写法谁写在后面就听谁的

posted @ 2021-03-22 09:36  BNTang  阅读(2)  评论(0)    收藏  举报