01-选择器-后代
<!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{
/* div标签后面的所有p标签都会显示样式 */
color: red;
}
</style>
</head>
<body>
<div>
<p>这是选择器后代1</p>
<p>这是选择器后代2</p>
<div>
<p>这是选择器后代3</p>
<p>这是选择器后代4</p>
</div>
</div>
</body>
</html>
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>a {
color: red;
}
</style>
</head>
<body>
<div>
<a href="">选择器后代的a标签</a>
<p>
<a href="">选择器后代的p标签的a标签</a>
</p>
</div>
</body>
</html>
03-选择器-并集
<!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,span三个标签渲染 */
div,p,span{
color: red;
}
</style>
</head>
<body>
<div>div标签</div>
<p>p标签</p>
<span>span标签</span>
<br>
<a href="#">a标签</a>
<h1>h1标签</h1>
</body>
</html>
04-选择器-交集
<!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.box{
color: red;
}
</style>
</head>
<body>
<p>这是p标签</p>
<p class="box">这是p标签带box类</p>
<div class="box">这是div标签带box类</div>
</body>
</html>
05-选择器-伪类
<!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:hover{
color: red;
}
</style>
</head>
<body>
<p>这是悬停改变颜色的P标签</p>
</body>
</html>
1.原来的字体颜色
2. 鼠标放在字体后更变了字体颜色
06-emmeh语法
<!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>
.box{
/* w300+h300+bgc */
width: 300px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<!-- div.box -->
<div class="box"></div>
<!-- div#box -->
<div id="box"></div>
<!-- div+p -->
<div></div>
<p></p>
<!-- ul>li -->
<ul>
<li></li>
</ul>
<!-- ul>li*3 -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!-- ul>li{$}*3 -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
07-背景-背景颜色
<!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>
#box{
width: 300px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div id="box">哈哈哈哈</div>
</body>
</html>
08-背景-背景图
<!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>
#box{
width: 500px;
height: 500px;
/* 背景图片 */
background-image: url(/CSS进阶/images/che.jpg);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
09-背景-背景平铺
<!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>
#cox {
width: 500px;
height: 500px;
background-color: red;
background-image: url(/CSS进阶/images/che.jpg);
/* 水平方向平铺
background-repeat: repeat-x; */
/* 垂直方向平铺
background-repeat: repeat-y; */
/* 不平铺 */
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="cox"></div>
</body>
</html>
水平方向平铺
background-repeat: repeat-x;
垂直方向平铺
background-repeat: repeat-y;
不平铺
background-repeat: no-repeat;
10-背景-背景位置
<!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>
.box{
width: 500px;
height: 500px;
background-color: red;
background-image: url(/CSS进阶/images/che.jpg);
/* 不平铺 */
background-repeat: no-repeat;
/* background-position: 水平位置 垂直位置 */
background-position: center bottom;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
11-背景-background
<!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>
#box{
width: 500px;
height: 500px;
/* background:color image repeat position */
background: red url(/CSS进阶/images/che.jpg) no-repeat right bottom;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
12-背景图和img的区别
13-显示模式-块
<!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>
.box{
width: 300px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">1111</div>
<div class="box">2222</div>
</body>
</html>
14-显示模式-行内
<!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>
span{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<span>11111</span>
<span>22222</span>
</body>
</html>
注:设置了行宽和高也无法渲染,因为它不是块级。
15-显示模式-行内块
<!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>
input{
width: 100px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
注册:<input type="text">
</body>
</html>
16-显示模式-转换
<!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>
span{
width: 200px;
height: 200px;
background-color: red;
display: block;
}
</style>
</head>
<body>
<span>111</span>
<span>111</span>
</body>
</html>
注:可以转换行内和块级以及行内块标签。
17-拓展-标签嵌套
不能嵌套的注意事项
<!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>
<div>1111</div>
</p>
</body>
</html>
注:由于嵌套错误还能显示的原因,浏览器会进行自动分隔开标签进行渲染。
18-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>
<style>
div{
color: red;
}
</style>
</head>
<body>
<div>
我这里是div,,,
<span> 我这里是span</span>
</div>
</body>
</html>
注:span标签没有特写进行字体颜色渲染,但由于父级div有颜色渲染让它继承了。
<!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{
font-size: 16px;
font-weight: 400;
}
</style>
</head>
<body>
<div>
<h1>我是H1</h1>
</div>
</body>
</html>
注:由于h1标签有字体大小和字体粗细自身的设置,所有父级是无法更改其渲染。
19-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>
<style>
p{
color: red;
color: royalblue;
}
.font{
font-size: 25px;
}
</style>
</head>
<body>
<div>
<p class="font">你看我是层叠性的小伙子</p>
</div>
</body>
</html>
注意:标签类以及添加了字体颜色,但他有双重颜色以最下方为渲染。类标签进行字体大小补充。