行内样式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS书写格式</title>
</head>
<body>
<div style="color: red">我是div</div>
</body>
</html>内嵌样式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS书写格式</title>
<style>
div {
color: blue;
}
</style>
</head>
<body>
<div>我是div</div>
</body>
</html>外链样式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS书写格式</title>
<link rel="stylesheet" href="117-abc.css">
</head>
<body>
<div>我是div</div>
</body>
</html>导入样式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS书写格式</title>
<style>
@import "117-abc.css";
</style>
</head>
<body>
<div>我是div</div>
</body>
</html>外链样式和导入样式的异同
- 相同点：都是把 CSS 代码写到了一个单独的文件中
- 不同点：外链样式, 在显示网页时, 会先加载 CSS 文件, 再显示页面, 导入样式, 在显示网页时, 会先显示界面, 再加载 CSS 文件
外链样式是通过一个 HTML 标签引入 CSS 的，而导入样式是通过 @import 引入 CSS 的, 而 @import 是 CSS2.1 推出, 所以导入样式存在兼容问题
企业开发用外链样式
优先级
行内样式的优先级最高，其它写法谁写在后面就听谁的
