目录
复合选择器,CSS特性,背景属性,显示模式知识点:
练习一:
练习二:
复合选择器,CSS特性,背景属性,显示模式知识点:
复合选择器:后代选择器 :父选择器 子选择器(中间用空格隔开) eg:对div中的span进行设置,会对后代中的所有span都进行设置 选中所有后代(后代选择器.html)
子代选择器: 父选择器>子选择器 只有儿子的同类选择器会产生变化(子代选择器.html)
并集选择器: (相同的样式) 用逗号,隔开 最后一个没有(并集选择器.html)
交集选择器:标签选择器写在前面 中间没有空格(交集选择器.html)
伪类选择器:选中某个状态
鼠标悬停状态:选择器:hover(鼠标悬停状态.html),任何标签都可以设置鼠标悬停
访问前: :link
访问后 :visited
点击时 :active
CSS属性:子级可以继承父级的文字控制属性 如果标签有自己的样式,不继承父级的样式
层叠性: 相同的选择器:相同的属性会覆盖:后者覆盖前者,不同的属性会叠加
优先级: 选中标签的范围越大,优先级越低 通配符<标签<类选择器<id选择器<<行内样式<!important(提高优先权)
(行内样式<div style="color:purple"></div>) *{color:red !important}
优先级叠加计算原则:(行内样式,id选择器个数,类选择器个数,标签选择器个数)从左向右依次比较个数,同一级个数多的优先级高,如果相同,则向后比较
继承权重最低
Emmet写法:
/*w500+h200+bgc*/
<!--类选择器: p.box .box(div)-->
<!--id选择器: p#box-->
<!--同级别用+ div+p-->>
<!--父子级 div>p -->
<!--多个相同的标签- span*3-->
<!--有内容的标签 div{11}-->
背景属性: 背景色:background-color
背景图:background-image
背景平铺方式:background-repeat
背景图位置:background-position
背景图缩放:background-size
背景图固定:background-attachment
背景图复合属性:background
显示模式: 块级元素 div独占一行,宽度默认父级的100%,可以添加宽高
行内元素:span 一行可以共存多个,尺寸由内容撑开,添加宽高不生效
行内块元素:image:一行可以共存多个,尺寸由内容撑开,宽高生效
转换模式: display 块级:block 行内块:inline-block 行内:inline
练习一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>热词</title>
<style>
a{
width: 200px;
height: 80px;
background-color: #3064bb;
display: block;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 80px;
font-size: 18px;
}
a:hover{
background-color: #608dd9;
}
</style>
</head>
<body>
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
<a href="#">Vue</a>
<a href="#">React</a>
</body>
</html>练习二:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>banner效果</title>
<style>
.banner{
height: 500px;
background-image: url(./bk.png);
background-repeat: no-repeat;
background-color: #f3f3f4;
/* background-size: contain; */
background-position: lef bottom;
/*文字控制属性*/
text-align: right;
color: #333;
}
.banner .ht{
height: 100px;
font-size: 36px;
line-height: 100px;
}
.banner .txt{
font-size: 20px;
}
.banner a{
width: 125px;
height: 40px;
background-color: #f06b1f;
display: inline-block;/*转块无法右对齐*/
text-decoration: none;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div class="banner">
<p class="ht">
让创造产生价值
</p>
<p class="txt">我们希望小游戏平台可以提供无限的可能性，让每一个创作者都可以将他们的才华和创意传递给用户。</p>
<a href="#">我要报名</a><!--行内标签-->
</div>
</body>
</html>
