存放位置：
单独css文件
html头部
标签属性
优先级：标签属性> html头部> 单独css文件
CSS选择器：
分类：1、标签选择器
2，id选择器
3、class选择器
4、层级选择器
5、组合选择器
1、标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器*/
div{
color:green;
}
</style>
</head>
<body>
<div>baidubaidubaidu</div>
</body>
</html>
out:
2、id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--标签选择器-->
<!--<link rel="stylesheet" href="common.css /">-->
<style>
#i1{
font-size: 56px;
color: green;
}
</style>
</head>
<body>
<a id="i1">baidu</a>
</body>
</html>
out:
3、class选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*class选择器*/
.c1{
background-color: red;
}
</style>
</head>
<body>
<span class="c1">1</span>
<div class="c1">2</div>
<a class="c1">3</a>
</body>
</html>
out:
4、层级选择器：（两种方式）
方式一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*层级选择器*/
.c2 div p a{
background-color: red;
color: white;
}
</style>
</head>
<body>
<div class="c2">
<div></div>
<div>
<p>
<span>ooo</span>
<a class="c3">uu</a>
</p>
</div>
</div>
</body>
</html>
out:
方式二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c2 div p .c3{
background-color: red;
}
</style>
</head>
<body>
<div class="c2">
<div></div>
<div>
<p>
<span>ooo</span>
<a class="c3">uu</a>
</p>
</div>
</div>
<div class="c3">dddd</div>
</body>
</html>
out:
5、组合选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c4,.c5,.c6{
background-color: aqua;
}
</style>
</head>
<body>
<div class="c4">C4</div>
<div class="c5">C5</div>
<div class="c6">C6</div>
</body>
</html>
out:
display: none; #隐藏
inline; #行内标签,即内联标签
block; #块级标签
inline-block;
边距：
margin 外边距（本身不增加）
padding 内边距（本身增加）
浮漂
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 500px;height: 500px;border: 1px solid red;">
<div style="width: 20%;background-color: aqua;float: left">浮漂</div>
<div style="width: 80%;background-color: beige;float: left;">浮漂</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
out:
position:
relative
absolute #随窗口的滚动而滚动
fixed #固定，窗口
1.fixed #固定在窗口的固定位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height:1000px;background-color: #dddddd"></div>
<div style="position: fixed;right: 200px;bottom: 100px;">返回顶部</div>
</body>
</html>
效果：
2.absolute #随窗口的滚动而滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height:1000px;background-color: #dddddd"></div>
<div style="position: absolute;right: 200px;bottom: 100px;">返回顶部</div>
</body>
</html>
效果：
3.relative和 absolute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height:500px;width: 400px;border: 1px solid red;position: relative">
<div style="position: absolute;bottom: 0;right: 0;">返回顶部</div>
</div>
</body>
</html>
效果：
4.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 500px;width: 400px;border: 1px solid red;position: relative">
<div style="height: 200px;background-color: red">
<div style="position: absolute;bottom: 0;right: 0">返回顶部</div>
</div>
</div>
</body>
</html>
效果：
对话框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.modal{
width: 400px;
height: 300px;
background-color: #dddddd;
position: fixed;
top:50%;
left:50%;
margin-left: -200px;
margin-top: -150px;
z-index: 10; /*优先级*/
}
.shadow{
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color: black;
opacity: 0.6; /*透明度 ，范围0-1*/
z-index: 9; /*优先级*/
}
</style>
</head>
<body>
<input type="button" value="添加" />
<div class="shadow"></div>
<div class="modal">
<input type="text" />
</div>
</body>
</html>
怎么保证modal这一层在shadow这一层的外面？
使用z-index: 设置优先级，数字越大优先级越高
