1.复合选择器
（1）后代选择器
（2）子代选择器
（3）并集选择器
（4）交集选择器
2.伪类选择器
即鼠标所悬停的内容变色
扩展：伪类选择器关于超链接
3.CSS三大特性
（1）继承性
子级默认继承父级的文字控制属性（除非子级本身自己有样式，比如<h1></h1>等标签有自己的样式，不受父级影响。）
一般继承性属性写在<body></body>里面
（2）层叠性
（3）优先级
回顾知识点：
<div class=".thing" id="text"></div>
通配符选择器 *{}
标签选择器 div{}
类标签选择器 .thing{}
id选择器 #text{}
行内样式 <div class=".thing" id="text" style="color:red"></div>
!important *{color: blue !important;}----------------此选择器提高优先级，直接生效此样式
(3).1优先级--叠加计算规则
知识点：
例子1
从左往右比较：
1.行内皆为0，无法定夺
2.div #box3与#box1 .c3 皆为1，排除.c1 .c2 div
3.div #box3为0，#box1 .c3 为1，排除div #box3
最终文字为橙色orange
例子2
继承权最低
.father属性值要影响“文字”是继承性
div p属于后代选择器
例子3
！important权重最高
3.结构伪类选择器
4.伪元素选择器
5.Emmet写法
6.背景属性
（1）背景图
（2）背景图平铺方式
一般如果背景图宽高设置过大，因为默认平铺则会导致出现多幅相同图片以保证填满盒子。
此为垂直方向平铺的例子
（3）背景图位置
三种表示方法。
提示：（1）可以只写一个关键字，另一个默认居中。数字只写一个表示水平方向。默认垂直居中。
（2）关键字取值方式可以颠倒。
（4）背景图缩放
提示：百分比使得照片和盒子宽度一样，照片高度按照等比例缩放。
（5）背景图固定
文字可以滚动，但是背景不动！
（6）背景复合属性
同font复合属性相同
！！！注意：背景图缩放要用“ / ”隔开。不是空格。
7.显示模式
（1）块级元素
1.独占一行
2.宽高属性生效
若不使用
<style>
div{
width: 100;
height: 200;
}
</style>
设置宽高，则默认宽度是父级的100%，div的父级为body
div标签继承父级body的宽度，而.box被修改宽度。
（2）行内元素
1.一行可以多个元素
2.宽度属性不生效
3.宽度由内容撑开，即内容定
（3）行内块元素
1.一般是照片，一行可以多个照片
2.宽高属性生效
3.宽高默认由内容撑开
8.转换显示模式
9.案例一（热词）
（1）效果
（2）代码
<title>热词</title>
<style>
a{
/* 将a转换为块元素模式，方便修改宽高 */
display: block;
/* 修改宽高 */
width: 200px;
height: 80px;
background-color: #3064bb;
/* 文本颜色，取消下划线 ,字体水平居中 */
color: #fff;
text-decoration: none;
text-align: center;
/* 行高使得垂直居中，改变文本大小 */
line-height: 80px;
font-size: 18px;
}
/* 鼠标悬停效果 */
a:hover{
background-color: #608dd9;
}
</style>
</head>
<body>
<!-- a标签属于行内元素 -->
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
<a href="#">Vue</a>
<a href="#">React</a>
</body>
10.案例二（Banner效果）
（1）效果
（2）代码
<title>banner图</title>
<style>
.banner{
height: 500px;
background-color: #f3f3f4;
background-image: url(./banner.png);
/* 不平铺 */
background-repeat: no-repeat;
background-position: left bottom;
/* 修改文本效果 */
text-align: right;
color: #333;
font-size: 20px;
}
.banner h2{
font-size: 36px;
font-weight: 400;
line-height: 100px;
}
.banner p{
font-size: 20px;
}
.banner a{
display: inline-block;
width: 125px;
height: 40px;
background-color: #f06b1f;-
text-align: center;
line-height: 40px;
color: #f3f3f4;
text-decoration: none;
font-size: 20px;
}
</style>
</head>
<body>
<!-- 布局大区域 -->
<div class="banner">
<h2>让创造产生价值</h2>
<p>我们希望小游戏平台可以提供无限可能性，让每一个创作者都可以将他们的才华和创意传递给用户。</p>
<a href="#">我要报名</a>
</div>
</body>
扫一扫
1758
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
