(001)—第一种方式：内联定义方式
语法： style=”样式名 1:样式值 1; 样式名 2:样式值 2;”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML中引入CSS样式的第一种方式：内联定义方式</title>
</head>
<body>
<!---
width 宽度样式
height 高度样式
background-color 背景色样式
disply 布局样式(none表示隐藏，block表示显示)
-->
<div style="width: 300px;height: 300px;background-color: aqua;display: block;
border-color: red;border-width: 2px;border-style: solid;"></div>
<br><br>
<!--
样式还能这样写(参考css2.0 API)：
border：1px solid black;
-->
<div style="width: 300px;height: 300px;background-color: aqua;display: block;
border:1px solid black;"></div>
</body>
</html>
结果：
(002)—第二种方式 ：样式块:id选择器，标签选择器，类选择器
语法：在 head 标签中添加： style type=”text/css”>/style>在 style 内部编写.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML引入CSS样式的第二种方式：样式块:id选择器，标签选择器，类选择器</title>
<style type="text/css">
/*
这是CSS的注释。*/
/*
1.id选择器语法格式：
#id{
样式名：样式值;
样式名：样式值;
样式名：样式值;
....
}
*/
#usernameErrorMsg{
color: red;
font-size: 12px;
}
/*
2.标签选择器语法格式：
标签名{
样式名：样式值;
样式名：样式值;
样式名：样式值;
....
}
标签选择器的作用范围比id选择器广，因为id名不能重复。
*/
div{
background-color: yellow;
border: 2px solid darkred;
width: 100px;
height: 100px;
}
/*
3.类选择器语法格式：
.类名{
样式名：样式值;
样式名：样式值;
样式名：样式值;
....
}
*/
.myclass{
border: 1px solid indianred;
width: 400px;
height: 20px;
}
</style>
</head>
<body>
<!--
id选择器：设置样式字体大小12px，颜色为红色！
--->
<span id="usernameErrorMsg">对不起，用户名不能为空</span>
<!--标签选择器：-->
<div></div>
<div></div>
<div></div>
<br><br>
<!--类选择器：class相同的标签可以认为是同一类标签。-->
<input type="text" class="myclass"/>
<br>
<select class="myclass">
<option>专科</option>
<option>大学</option>
<option>硕士</option>
</select>
</body>
</html>
结果：
(003)—第三种方式：引入外部独立的css文件
语法格式：在 head 标签中： link rel=stylesheet href=”1.css” type=”text/css”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在HTML中使用CSS样式的第三种方式：引入外部独立的css文件</title>
<!--引入css文件-->
<link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<div id="baiduSpan">点击我链接到百度</div>
</body>
</html>
结果：
