/*
时间：2021/12/07
功能：CSS
目录:
一: 引入
二: 选择器
1 标签
2 类
3 层级
4 id
5 组
6 伪类
*/
一: 引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 内嵌式 -->
<style>
a{
color: green;
}
div{
width: 100px;
width: 100px;
background: orange;
}
</style>
<!-- 外链式 -->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- 行内式 -->
<p style="color: red;"> 段落标签</p>
<div>
123
</div>
<!-- 内嵌式 -->
<a href="http://www.bing.com">bing</a>
<h1> 一级标题 </h1>
<!-- 外链式 -->
<h2> 二级标题 </h2>
</body>
</html>
h2{
color: skyblue;
}
1 : 说明 文件 main.css
二: 选择器
1 标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 标签选择器 */
p {
color: red;
}
</style>
</head>
<body>
<p> hi </p>
<p> hello </p>
</body>
</html>
2 类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 类选择器 */
.myp{
color: red;
}
.myby{
background: blue;
}
</style>
</head>
<body>
<p> xxx </p>
<p class="myp"> 段落标签 1</p>
<p class="myp myby"> 段落标签 2</p>
</body>
</html>
3 层级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 层级选择器 -->
<style>
div div {
color: green;
}
div .box{
color: blue;
}
/* div div p{
color: red;
} */
div p{
color: aqua;
}
</style>
</head>
<body>
<div>
哈哈
</div>
<div>
<div> 嘻嘻</div>
<div class="box"> 哈哈</div>
<div>
<p> hi</p>
</div>
</div>
</body>
</html>
4 id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#myid1{
color:blue;
}
</style>
</head>
<body>
<p id="myid1"> 哈哈 </p>
<p id="myid1"> 嘻嘻 </p>
</body>
</html>
5 组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 组选择器 */
.box1, .box2, .box3{
width: 100px;
height: 100px;
}
/* 追加样式 */
.box1{
background: red;
}
.box2{
background: gray;
}
.box3{
background: blue;
}
</style>
</head>
<body>
<div class="box1"> </div>
<div class="box2"> </div>
<div class="box3"> </div>
</body>
</html>
6 伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
div{
width: 100px;
height: 100px;
background: green;
}
/* 伪类选择器: 给其他选择器添加效果 */
div:hover{
width: 200px;
height: 200px;
background: red;
}
</style>
</body>
<div> 哈哈 </div>
</html>