第二种增加css样式的方法，可以在head中增加style标签，style中通过选择器定位标签增加css样式
CSS选择器分为六种：
1、id选择器
2、class选择器
3、标签选择器
4、层级选择器（空格）
5、组合选择器（逗号）
6、属性选择器（中括号）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> /*id选择器*/
#i1{
background-color: #0000CC;
width: 100px;
height: 50px;
} </style>
</head>
<body> <div id="i1">id选择器</div> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> /*class选择器*/
.c1{
background-color: red;
width: 100px;
height: 50px;
} /*为什么有id和class两种选择器？*/
/*id在html页面中，只允许出现1个同名id；但是class是可以重复的；*/
/*实际前端开发中，主要用class进行定位的，因为多个标签可以同时引用一个css样式*/ </style>
</head>
<body> <div class="c1">class选择器</div> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> /*标签选择器*/
/*表示 这个页面下所有的div标签，都增加这个样式*/
div{
background-color: pink;
width: 100px;
height: 100px;
} </style>
</head>
<body> <div></div> /*标签选择器*/ </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> /*层级选择器*/
/*表示div标签下的span标签使用这个样式*/
div span{
background-color: pink;
width: 100px;
height: 100px;
} </style>
</head>
<body> <div>
<span>层级选择器</span>
</div> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> /*id组合选择器 id i1 i2 i3 共用一套css样式*/
#i1, #i2, #i3 {
background-color: #0000CC;
width: 100px;
height: 100px;
} /* 组合选择器 class s1 s2 s3 共用一套css样式*/
.s1,.s2,.s3{ background-color: darkmagenta; height:48px; } /*最常用：class层级选择器*/
.c2 span{
background-color:blue;
width: 100px;
height: 100px;
} </style>
</head>
<body> <!--id组合选择器-->
<div id="i1"></div><br>
<div id="i2"></div><br>
<div id="i3"></div> <!-- class组合选择器 -->
<div class="s1"></div>
<div class="s2"></div>
<div class="s3"></div> <!--class选择器-->
<div class="c2">
<span>123</span>
</div><br>
<div class="c2">
<span>456</span>
</div><br>
<div class="c2">
<span>789</span>
</div> </body>
</html>