一、CSS学习部分—选择器
1.复合选择器
（1）后代选择器
作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素
选择器语法：选择器1 选择器2{CSS}
结果：在选择器1所找到标签的后代（儿子、孙子、重孙子...）中，找到满足选择器2的标签，设置样式。
后代包括：儿子、孙子、重孙子...
（2）子代选择器
作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素
选择器语法：选择器1>选择器2 {CSS}
结果：在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式。
子代只包括儿子。
2.并集选择器
作用：同时选择多组标签，设置相同的样式
选择器语法：选择器1，选择器2 {CSS}
结果：找到选择器1和选择器2选中的标签，设置样式。
并集选择器中的每组选择器可以是基础选择器或者复合选择器。
3.交集选择器
作用：选中页面中同时满足多个选择器的标签
选择器语法：选择器1.选择器2 {CSS}
结果：找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式
4.hover伪类选择器
作用：选中鼠标悬停在元素上的状态，设置样式
选择器语法：选择器1：hover {CSS}
5.Emmet语法
通过简写语法，快速生成代码
二、CSS学习部分—背景相关属性
1.背景颜色
属性名：background-color(bgc)
属性值：
颜色取值：关键字、rgb表示法、rgba表示法、十六进制...
默认透明颜色：rgba(0,0,0,0)、transparent
2.背景图
属性名：background-image(bgi)
属性值：background-image：url('图片的路径');
注：背景图片中url中可以省略引号
背景图片默认是在水平和垂直方向平铺的
背景图片仅仅是指给盒子起到装饰作用、类似于背景颜色、是不能撑开盒子的。
3.背景平铺
属性名:background-repeat(bgr)
属性值：repeat—水平和垂直方向都平铺
no-repeat——不平铺
repeat-x——沿着水平方向平铺
repeat-y——沿着垂直方向平铺
4.背景位置
属性名：background-position(bgp)
属性值：background-position：水平方向位置 垂直方向位置
注意点：
方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直
给正数：向右或向下移动
给负数：向左或向上移动
背景色和背景图只显示在盒子的里边。
5.背景相关属性连写
属性名：background(bg)
书写顺序：background：color image repeat position
6.img标签和背景图片的区别
如何在网页中展示一张图片的效果？
方法一：直接写上img标签即可
img标签是一个标签，不设置宽高默认会以原尺寸显示
方法二：div标签+背景图片
需要设置div的宽高，因为背景图片只是装饰的css样式，不能撑开div标签
三、元素显示模式
1.块级元素
显示特点：独占一行，宽度默认是父元素的宽度，高度默认由内容撑开，可以设置宽高
代表标签：div、p、h系列、ul、il、dl、dt、dd、form、header、nav、footer...
2.行内元素
显示特点：一行可以显示多个，宽度和高度默认由内容撑开，不可以设置宽高
代表标签：a、span、b、u、i、s、strong、ins、em、del...
3.行内块元素
显示特点：一行可以显示多个、可以设置宽高
代表标签：input、textarea、button、select...
特殊情况：img标签内有行内块元素特点，但是chrome调试工具中显示结果是inline
4.元素显示模式转换
目的：改变元素默认的显示特点，让元素复合布局要求
语法：
display-block 转换成块级元素 较多
display：inline-block 转换成行内块元素 较多
display：inline 转换成行内元素 较少
5.标签嵌套
块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内元素等等
p标签中不要嵌套div、p、h等块级元素
Chorme检查结果：
结果:高版本的浏览器会纠错，将两个标签认定为平级
a标签内部可以嵌套任意元素
a标签不能嵌套a标签
Chorme检查结果：
结果:高版本的浏览器会纠错，将两个a标签认定为平级。
四、CSS三大特性
1.继承性
特性：子元素有默认继承父元素样式的特点（子承父业）
可以继承的常见属性（文字控制属性都可以继承）
(1)color
(2)font-style、font-weight、font-size、font-family
(3)text-indent、text-align
(4)line-height
a标签的color会继承失效
h系列标签的font-size会继承失效
2.层叠性
（1）给同一个标签设置不同的样式——样式会层叠叠加——会共同作用在标签上
（2）给同一个标签设置相同的样式——样式会层叠覆盖——写在最后的样式会生效
3.优先级
特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式。
优先级公式：
继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<！important
权重叠加计算：
场景：复合选择器需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
复合选择器： 第一级 第二级
行内样式的个数 id选择器的个数
第三级 第四级
类选择器的个数 标签选择器的个数
五、综合案例
1.导航1
<!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>
a{
width: 50px;
height: 50px;
background-color: red;
display: inline-block;
text-decoration: none;
color: white;
text-align: center;
line-height: 50px;
}
a:hover{
background-color: yellow;
}
</style>
</head>
<body>
<a href="#">导航1</a>
<a href="#">导航2</a>
<a href="#">导航3</a>
<a href="#">导航4</a>
<a href="#">导航5</a>
</body>
</html>2.导航2
<!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>
a{
color: white;
background-color: pink;
width: 100px;
height: 50px;
text-decoration: none;
display:inline-block;
text-align: center;
line-height: 50px;
}
.background1{
background-image: url(./images/bg1.png);
}
.background2{
background-image: url(./images/bg2.png);
}
.background3{
background-image: url(./images/bg3.png);
}
.background4{
background-image: url(./images/bg4.png);
}
.background1:hover{
background-image: url(./images/bg5.png);
}
.background2:hover{
background-image: url(./images/bg6.png);
}
.background3:hover{
background-image: url(./images/bg7.png);
}
.background4:hover{
background-image: url(./images/bg8.png);
}
</style>
</head>
<body>
<a href="#" class="background1">五彩导航</a>
<a href="#" class="background2">五彩导航</a>
<a href="#" class="background3">五彩导航</a>
<a href="#" class="background4">五彩导航</a>
</body>
</html>
113
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
