CSS与HTML结合

1.内联样式

在标签内使用style属性指定css代码

作用域：当前标签

例如：
<div style="color: red">hello css</div>

不推荐使用，没有做到内容样式分离

2.内部样式

在head标签内，定义style标签，内容是css代码

<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
      div{
        color:blue;
        }  
</style>
</head>
<body>
　　<div>hello css</div>
　　<div>hello css</div>
</body>
</html>

作用域：页面内的所有div标签

3.外部样式

定义css资源文件。

在head标签内，定义link标签，引入外部的资源文件

作用域：在所有引入外部的资源的页面都可以生效

<!--
资源文件都放在css目录下面，新建可以选择，一般新建一个文件后缀名为 .css 就行了
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
     <link rel="stylesheet" href="css/a.css">
</head>
<body>
    <div>hello css</div>
</body>
</html>

a.css文件内容
div{
color: green;
}

第二种外部样式的引入

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
    @import "css/a.css";
</style>
</head>
<body>

<div>hello css</div>

</body>
</html>

4.注意

1，2，3种的方式css作用范围越来越大

方式1不常用，后期常用2，3

第三种方式有两种写法