1.选择器02
<!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 p {
color: #3016c5;
}
/* 子代选择器 */
div>a {
color: blueviolet;
}
/* 并集选择器 */
h1,
span {
color: coral;
}
/* 交集选择器 */
p.box{
color: hotpink;
}
/* 伪类选择器 :link,:visited,:hover,:active*/
/* input:focus , input:checked */
a:link{
color: #000;
}
a:visited{
color: #0fb258;
}
a:hover{
color: red;
background-color: burlywood;
}
a:active{
color: #d837b8;
}
</style>
</head>
<body>
<div>
<a href="#">0987654321</a>
<p>
123456789
<a href="#">12345678</a>
</p>
<p class="box">hhhhhhhhh</p>
</div>
<span>dsfgfgthgj</span>
<h1>sfhgjli</h1>
</body>
</html>
2.emmet语法
<!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>emmet语法</title>
<style>
.box{
/* w300+h200+bgc */
width: 300px;
height: 200px;
background-color: #b04471;
}
</style>
</head>
<body>
<!-- 同级 div+p-->
<div></div>
<p></p>
<!-- p.box -->
<p class="box"></p>
<!-- #box -->
<div id="box"></div>
<!-- ul>li -->
<ui>
<li></li>
</ui>
<!-- ul>li{2334566} -->
<ui>
<li>2334566</li>
</ui>
<!-- ui>li*4 -->
<ui>
<li></li>
<li></li>
<li></li>
<li></li>
</ui>
<!-- ui>li{$}*3 -->
<ui>
<li>1</li>
<li>2</li>
<li>3</li>
</ui>
</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>背景</title>
<style>
div{
width: 400px;
height: 400px;
background-color: rgba(200, 255,160, 0.5);
background-image: url(../day01/素材/专辑.jpg);
/* 背景平铺background-repeat:repeat/no-repeat/repeat-x/repeat-y */
/* 背景位置 background-position: center center*/
background-repeat: no-repeat;
background-position: -100px 0;
/* 复合属性 */
background: pink url(../day01/素材/专辑.jpg) no-repeat -50px bottom;
}
</style>
</head>
<body>
<div>1</div>
</body>
</html>
4.显示模式和CSS三大特性
<!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>
<!-- 显示模式
块-独占一行,可以设置宽高
行内-不换行,设置宽高不生效,尺寸和内容大小相同
行内块-不换行,宽高生效
相互转换--块display:block,行内块display:inline-block,行内display:inline -->
<!-- p标签不能嵌套div,p,h等块级元素
a标签不能嵌套a标签 -->
<!-- CSS三大特性 -->
<!-- 继承性
子元素继承父元素样式--文字控制属性都可以继承 -->
<!-- 层叠性 -->
<!-- 优先级 -->
</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>导航</title>
<style>
a{
text-decoration:none;
width: 120px;
height: 58px;
background-color: brown;
display: inline-block;
color: #fff;
text-align: center;
line-height: 50px;
}
.bgi1{
background-image: url(../01选择器/素材/bg1.png);
}
.bgi2{
background-image: url(../01选择器/素材/bg2.png);
}
.bgi3{
background-image: url(../01选择器/素材/bg3.png);
}
.bgi4{
background-image: url(../01选择器/素材/bg4.png);
}
.bgi1:hover{
background-image: url(../01选择器/素材/bg5.png);
}
.bgi2:hover{
background-image: url(../01选择器/素材/bg6.png);
}
.bgi3:hover{
background-image: url(../01选择器/素材/bg7.png);
}
.bgi4:hover{
background-image: url(../01选择器/素材/bg8.png);
}
</style>
</head>
<body>
<!-- 选多行alt+shift+单击 -->
<a href="#" class="bgi1">导航1</a>
<a href="#" class="bgi2">导航2</a>
<a href="#" class="bgi3">导航3</a>
<a href="#" class="bgi4">导航4</a>
</body>
</html>