行内样式

写在标签的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属性生效(后面的会覆盖前面的)。