一、初识Css
1、概念
- 用于修饰标签。
- 使用css选择器需要关注两点：1、选择哪个选择器 2、如何选择需要使用css样式的标签。
- 在head中添加style标签，在style标签中添加css选择器，就可以将css样式附着到body中的标签上了。
二、选择器
1、选择器种类
（1）id选择器
- head中使用#号定位，在body中的div标签添加id属性，head中写入对应id属性的值，即可将css样式定位到标签上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--样式标签-->
<style>
/*id选择器*/
#div1{
background-color: red;
}
</style>
</head>
<body>
<div id="div1">我是个人</div>
</body>
</html>
（2）class选择器
- head中使用英文.号定位，在body中的div标签添加class属性，head中写入对应class属性的值，即可将css样式定位到标签上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: green;
}
</style>
</head>
<body>
<div class="c1">我是绿色</div>
</body>
</html>
（3）标签选择器
- head中使用标签名div定位，在body中写入标签内容，head中写入对应div标签的值，即可将css样式定位到标签上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: yellow;
}
</style>
</head>
<body>
<div>lrx</div>
</body>
</html>
（4）标签层级选择器
- head中使用标签名div里面的span标签定位，在body中写入标签内容，head中写入对应span标签的值，即可将css样式定位到标签上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div span{
background-color: yellow;
}
</style>
</head>
<body>
<div>
<span>123</span>
</div>
</body>
</html>
（5）属性选择器
- 在body里面的div标签中加入自定义属性，然后head中通过使用标签名div加中括号，中括号中写全自定义属性名和值的方式，将css样式与标签进行关联。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div[abc="哈哈哈"]{
background-color: burlywood;
}
</style>
</head>
<body>
<div abc="哈哈哈">哦哦哦</div>
</body>
</html>
