第一种：内联，直接在标签里面加style属性，优先级别最高，但是不利于维护
第二种：页面嵌入，在head标签里面写一个style标签，以类选择器的形式写入，优先级别第二
第三种：外联，样式表链接，单独写一个css文件，在html的head里面用link标签引用
css
/* 定义body的背景色为紫色 */
body{ background: blueviolet;}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<!-- 在head里面用link标签引用css文件 -->
<link rel="stylesheet" href="../css/css01.css">
<!-- class属性为class_01的颜色属为红色 -->
<style>
.class_01{ color:red; }
</style>
</head>
<body>
<h1>原始文字</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores aspernatur autem cum eligendi esse
libero magnam nemo nesciunt, omnis porro quae quos repellendus sint soluta voluptatem? Ex, sed!</p>
<!-- 内联，直接在标签里面加style属性，优先级别最高，不利于维护 -->
<h1 style="color: blue;border: solid 1px #000;">内联，直接写在标签里面，优先级别最高，不利于维护</h1>
<p style="color: red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores aspernatur autem cum
eligendi esse
libero magnam nemo nesciunt, omnis porro quae quos repellendus sint soluta voluptatem? Ex, sed!</p>
<!-- 页面嵌入，在head标签里面写一个style标签，以类选择器的形式写入，优先级别第二 -->
<h1 class="class_01">页面嵌入，在head标签里面写一个style标签，以类选择器的形式写入，优先级别第二</h1>
<p class="class_01">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores aspernatur autem cum
eligendi esse
libero magnam nemo nesciunt, omnis porro quae quos repellendus sint soluta voluptatem? Ex, sed!</p>
<!-- 外联，样式表链接，单独写一个css文件，在html的head里面用link标签引用，优先级第三-->
<p>外联，样式表链接，单独写一个css文件，在html的head里面用link标签引用</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores aspernatur autem cum eligendi esse
libero magnam nemo nesciunt, omnis porro quae quos repellendus sint soluta voluptatem? Ex, sed!</p>
</body>
</html>