<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- style样式为内部样式表 -->
<style type="text/css">
/* 以下代码会按CSS去解析 */
h1{
color: blue;
font-size: 30px;
font-weight: 900;
}
.red{
width: 100px;
height: 100px;
background-color: #FF0000;
}
.green{
width: 100px;
height: 100px;
background-color: #008000;
}
</style>
<!-- 引入外部样式 放style外面 -->
<link href="css/demo01.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!-- 行内样式 -->
<p style="color: #FF0000; font-size: 24px; font-weight: 900;">段落一</p>
<h1 style="color: pink;">标题一</h1>
<div style="height: 500px; background-color: red;"></div>
<div class="green"></div>
<div class="red"></div>
<aqua>加粗文字</aqua>
</body>
</html>
三种样式分别用不同颜色标出
行内样式顾名思义即在标签行内写的样式,优先级是三种样式里最高的
内部样式即是写在本身的html文件的内部里面的,写在head标签里面,实现了结构与表现相分离,但又没有完全分离
外部样式即是在html文件之外创建一个css文件(可以和html文件创建在同一目录下),然后用link标签指令引入进来,彻底实现结构与表现相分离,然后直接在你创的css文件里直接修改html页面样式,例如我的css文件如下图:我在里面修改了h1标签颜色和aqua标签的字体粗细和颜色