CSS三种导入方式

1. 行内样式

<h1 style="color: red">荷塘月色</h1>

2. 内部样式

在头部通过style标签导入css样式

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--内部样式-->
    <style>
        h1 {
            color: yellow;
        }
    </style>
</head>

3. 外部样式

  • 在头部通过link标签导入css样式
  • index.html文件
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--外部样式：
        通过link标签引入层叠样式表
        原则：结构（HTML）与表现（CSS）分离-->
    <link rel="stylesheet" href="style.css">

</head>
  • style.css文件
/*语法
选择器 {声明1; 声明2; ...;}
选择器：要改变样式的HTML元素
声明：属性和值，定义为：属性:值
*/
h1 {
    color: blue;
}

导入优先级

  • 行内样式 > 内部样式和外部样式
  • 内部样式和外部样式，遵循覆盖原则，即先作用的样式会被后作用的样式覆盖
posted @ 2020-09-27 11:16  CrazyGod  阅读(304)  评论(0)    收藏  举报