行内样式

写在标签的style属性中。行内样式又称内联样式

1
<h1 style="color: red;font-size: 90px">你好呀，小云</h1>

注意点：

  1. 行内样式只能作用于当前标签，其他标签不生效
  2. style属性的值不能随便写，要遵循CSS的语法规范，是键：值对的格式

存在的问题

  1. 编写繁琐，不易维护，CSS代码难以复用
  2. 没有体现样式与结构分离的思想。仅在给元素添加简单样式的时候使用

内部样式

写在style标签中，style标签可以放在html文件中的任何位置，但是一般放在head标签中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>位置2_内部样式</title>
    <style>
        h1 {
            color: green;
            font-size: 100px;
        }
    </style>
</head>
<body>
    <h1>你好呀，小云</h1>
</body>
</html>

通过将页面上的CSS代码都提炼出来，实现了CSS代码在单页面的复用。

注意点

  1. 此种方式没有完全实现样式和结构的分离
  2. 当前页面的内部样式，无法在别的HTML页面中使用

外部样式

单独将样式写在CSS文件中，通过HTML页面引入的方式，让CSS作用于页面的标签

  1. 新建一个后缀为**.css**的文件，在文件中追加CSS代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    h1 {
        color: aqua;
        font-size: 100px;
    }

    h2 {
        color: blue;
        font-size: 20px;
    }

  2. 在HTML文件中引入该CSS文件，在head标签内添加代码

    1
    <link rel="stylesheet" href="./style.css">

使用外部样式的好处

实际开发中，都是使用外部样式，推介使用！！！

  1. 完全实现了样式与结构的分离，让结构和样式都专注于做对应的工作
  2. 实现了CSS代码在多个HTML文件之间的复用
  3. 浏览器有缓存机制，如果重复加载相同的文件，可以走缓存，让加载更快

样式表的优先级

行内样式 > 内部样式 = 外部样式

如果优先级一样，并且有重复定义的CSS属性名，则最后定义的CSS属性生效(后面的会覆盖前面的)。