html-css-js
/
5CSS导入方式.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/style.css">
    <title>5 CSS 导入方式</title>
    <style>
        p {
            color: blue;
            font-size: 36px;
        }

        h2 {
            color: red;
        }
    </style>
</head>

<body>

    <h1>5 CSS 导入方式</h1>
    <h2>1.内联样式 &ltp style="color:red"></p></h2>
    <p style="color:red">p标签应用了内联样式</p>

    <h2>2.内部样式表，html页面内定义&ltstyle></h2>
    <p>p标签应用了内部样式表</p>

    <h1 style="color:brown">h1标签应用了内联样式</h1>
    <h2>h2标签应用了内部样式表</h2>
    <h2>3.外部样式表,&ltlink rel="stylesheet" href="./css/style.css"></h2>
    <h3>h3标签应用了外部样式表</h3>
    CSS的优先级：内联样式 > 内部样式表 > 外部样式表
</body>

</html>