写在html文件中，没有单独提取出来，没有做到结构和样式的分离;
每一个标签元素都有自己的css格式,每个标签元素中都有撰写自己的style属性，不利于复用；
例子：
<h1 style="color:red;">
文本内容
h1>
仍是写在html文件中，结构和样式没有做到完全分离，但就内联格式来说，相对较好；
将写在标签中的style属性提取出来，单独作为标签，标签书写的位置是不固定的，在head标签和body标签中均可；
例子：
<html>
<head>
<style>
.bod{
color:red;
}
style>
head>
<body>
body>
html>
单独编写css文件以存储样式，结构（html）与样式完全分离，利于样式的复用，不同的html文件可以指定同一个css文件来控制样式。
如果三种选择器混在一起使用，则很难分辨html文件中每个元素的样式，所以一般只使用类选择器。
例子：
style.css文件内容：
.box {
color:red;
}
html文件内容：
<html>
<head>
<link rel="stylesheet" href="style.css">
head>
<body>
body>
html>
通过link标签的书写内容就做到了html文件和css文件的关联，之后在html中就可以使用css的样式
使用外部格式书写css代码实例
标签名字+大括号{}，大括号内书写样式
h1{
color:red;
}
先写一个点’.'，然后写上类名+大括号{}，大括号内书写样式内容
前文内部格式和外部格式的代码例子中的css样式选择器就是类选择器
.box{
color:green;
}
先写一个’#'，然后写上id名字+大括号{}，大括号中书写样式内容
#id{
color:green;
}
样式会存在冲突的情况，所以存在样式选择器的优先级：id选择器>类选择器>类型选择器
<h1 class="box",id="id">
h1>
例如在这里，存在三种不同的样式选择器：类型选择器、类选择器、id选择器，样式就会优先选中id选择器，因为id选择器优先级最高；缺少id选择器，只使用了类选择器和类型选择器，则就会优先选中类选择器。
前文提到的三种样式表的组合
例子：
h1.container{
color:red;
}
标签必须同时满足两个选择器的选择，既是标签h1，其类名又要是container
例子：
h1 .container{
color:red;
}
（标签选择器和类选择器中有一个空格）
在h1标签中的有个标签的类名是类选择器指定的名字，则修改这个标签的样式
外层是类型选择器，内层是类选择器
至此，结束。