一选择器进阶
1.复合选择器
2.并集选择器
3.交集选择器
4.hover伪类选择器
5.Emmet语法
1.1后代选择器：空格
-
作用：根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素
-
选择器语法：选择器1 选择器2 {css}
-
结果：在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器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>
/* 找到div的儿子p设置文字是红色 */
/* 父选择器 后代选择器{} */
div p{
color: red;
}
</style>
</head>
<body>
<!-- 后代：儿子，孙子，重孙子 -->
<p>这是一个p标签</p>
<div>
<p >这是div的儿子</p>
</div>
</body>
</html>1.2子代选择器：
-
作用：根据 HTML 标签的嵌套关系，选择父元素 代中 满足条件的元素
-
选择器语法：选择器1 > 选择器2 {css}
-
结果：在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式
2.1并集选择器：,
-
作用：同时选择多组标签，设置相同的样式
-
选择器语法：选择器1 , 选择器2 {css}
-
结果: 找到选择器1和选择器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>
/* p div span h1文字颜色是红色 */
p ,
div,
span,
h1{
color: red;
}
</style>
</head>
<body>
<p>ppp</p>
<div>div </div>
<span>xcxc</span>
<h1>123</h1>
</body>
</html>3.1交集选择器：紧挨着
-
作用：选中页面中，同时满足多个选择器的标签
-
选择器语法：选择器1 选择器2 {css}
-
结果: （既又原则）找到页面中 既 能被选择器1选中，又 能被选择器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>
/* p{
color: red;
} */
/* .box{
color: red;
} */
/* 必须是p标签，而且添加了box类 */
p.box{
color: red;
}
</style>
</head>
<body>
<!-- 想找到第一个p，带box类的，设置文字颜色是红色 -->
<p class="box">这是p标签:box</p>
<p>ppppp</p>
<div class="box">这是div标签:box</div>
</body>
</html>4.1hover伪类选择器：
-
作用：选中鼠标悬停在元素上的状态，设置样式
-
选择器语法：选择器hover{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= , initial-scale=1.0">
<title>Document</title>
<style>
/* 鼠标悬停 文字颜色是红色 */
a:hover{
color: red;
background-color: green;
}
div:hover{
color: blue;
background-color: black;
}
</style>
</head>
<body>
<a href="#">这是超链接</a>
<!-- 任何标签都可以添加伪类，任何标签都可以鼠标悬停 -->
<div>这是div</div>
</body>
</html>5.1Emmet语法：
-
作用：通过简写语法，快速生成代码
-
语法：类似于前面的选择器写法
<!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: ; */
font-size: 20px;
/* 提示css属性：单词的首字母 */
/* font-weight: ; */
font-weight: 700;
width: 300;
height: 200;
/* background-color:;*/
background-color: #fff;
/* line-height: ; */
line-height: 1;
/* 宽度300，高度200，背景色是粉色 */
width: 300px;
height: 200px;
background-color: #fff;
</style>
</head>
<body>
<div></div>
<h1></h1>
/* <!-- 生成div 带类名 --> */
<div class="box"></div>
<p class="box"></p>
<div id="box"></div>
<p id="box"></p>
<p class="red" id="one"></p>
/* <!-- div 同级p --> */
<div></div>
<p></p>
/* <!-- 父子 --> */
<div>
<p></p>
</div>
<ul>
<li></li>
</ul>
/* <!-- ul里面有三个li --> */
<ul>
<li></li>
<li></li>
<li></li>
</ul>
/* <!-- ul里面有3个li,li里面有 文字1111222 {文字}--> */
<ul>
<li>1111222</li>
<li>1111222</li>
<li>1111222</li>
</ul>
/* <!-- ul里面有3个li,li文字1,2，3 } --> */
/* <!-- ul>li{$}*3 --> */
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>二 背景相关属性
1.背景颜色
2.背景图片
3.背景平铺
4.背景位置
5.背景相关连写
6.（拓展）img和背景图片的区别
1.1背景颜色：
-
属性名：background—color (bgc)
-
属性值：颜色取值：关键字：rgb表示法；十六进制.....
-
注意：背景颜色默认是透明：rgba（0,0,0,0）;transparent；背景颜色不会影响盒子大小，还能看清盒子大小和位置，一般在布局中会习惯先给盒子设置背景颜色
<!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{
background-color: pink;
height: 400px;
width: 400px;
/* background-color: rgba(0, 0, 0, 0.5); */
background-color: rgba(0, 0, 0, .5);
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>2.1背景图片：
-
属性名：background—image (bgi)
-
属性值：background—image:url('图片路径')
-
注意：背景图片中URL可以省略；默认水平和垂直方向平铺；仅仅是给盒子起到装饰作用，类似于背景颜色，是不能撑开盒子的
<!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{ width: 400px; height: 400px; background-color: pink; background-image: url(./images/1.jpg); } </style> </head> <body> <div>1234</div> </body> </html>
3.1 背景平铺：
-
属性值：background—repeat(bgr)
-
属性值：repeat (默认) 水平和垂直平铺；no-repeat 不平铺；repeat-x 沿着水平方向(x轴)平铺；repeat—y 沿着垂直方向(y轴)平铺
<!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{
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/1.jpg);
/* background-repeat: repeat; */
/* background-repeat: no-repeat; */
/* background-repeat: repeat-x; */
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div>1234</div>
</body>
</html>4.1背景位置：
-
属性值：background—position(bgp)
-
属性值：background—position:水平方向 垂直方向
-
表达方式：方位名字（水平：left center right ； 垂直：top center bottom）；数字+px（坐标系：(0.0)盒子的左上角 x轴 (水平向右） y轴(垂直向下)）操作：将图片左上角与坐标点重合即可
-
注意：方位名词取值和坐标取值可以混使用，第一个取值便是水平，第二个取值便是垂直
<!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{
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/1.jpg);
background-repeat: no-repeat;
/* background-position:center center;
background-position:center ; */
/* background-position: 50px 0; */
/* background-position: 50px 100px; */
background-position: -50px -100px;
/* 正数：向右向下移动 负数：向左向上移动*/
/* 注意：背景色和背景图只显示在盒子里面*/
}
</style>
</head>
<body>
<div>1234</div>
</body>
</html5.1背景相关连写：*
-
属性名：background（bg）
-
属性值： 单个属性值的合写，取值之间以空格隔开
-
书写顺序：推荐：background color image repeat position
-
省略问题：可以按照需求省略 ； 特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写 background：url()
-
注意：如果需要设置单独的样式和连写 ：要么把单独的样式写在连写的下面； 要么把单独的样式写在连写的里面
<!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{
width: 400px;
height: 400px;
/* 不分先后顺序 ：背景色 背景图 背景图平铺 背景图位置*/
/* background: pink url(./images/1.jpg) no-repeat center bottom; */
/* 背景图位置如果是英文单词 可以颠倒顺序 */
background: pink url(./images/1.jpg) no-repeat bottom center ;
/*测试背景图位置如果是具体数值 不要颠倒顺序 */
/* 水平50px 垂直100px */
background: pink url(./images/1.jpg) no-repeat 100px 50px ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>6.1img和背景图的区别(拓展)：
-
需求：需要在网页中展示一张图片的效果？
-
方法一：直接写上img标签即可 img标签是一个标签，不设置宽高默认会以原尺寸显示
-
方法二：div标签 + 背景图片 ；需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签
三.元素显示模式
1.块级元素
2.行内元素
3.行内块元素
4.元素显示模式转换
5.HTML嵌套规范注意点
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>
/* 块：独占一行；宽度默认是父级100%；添加宽度都生效 */
div{
width: 300px;
height: 300px;
background-color: pink;
/* 行内块 */
display: inline-block;
/* 行内 */
display: inline;
}
</style>
</head>
<body>
<div>111111</div>
<div>222222</div>
</body>
</html>2.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>
/* 行内：不换行；设置宽高不生效；尺寸和内容大小一样 */
span{
width: 300px;
height: 300px;
background-color: pink;
/* 行内块*/
display: inline-block;
/* 块 */
display: block;
}
</style>
</head>
<body>
<span>span </span>
<span>span </span>
</body>
</html>3.1 行内块元素：
-
显示特点： 一行可以显示多个 ；可以设置宽高
-
特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
<!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: 300px;
height: 300px;
background-color: pink;
/* 行内块*/
display: inline-block;
/* 块 */
display: block;
}
</style>
</head>
<body>
<span>span </span>
<span>span </span>
</body>
</html>
4.1元素显示模式转换：
-
目的：改变元素默认的显示特点，让元素符合布局要求
-
语法：属性：display-block（ 转换为块级元素 使用较多）；display—inline（转换为行内元素 使用较少）；diaplay—inline block （转换为行内块元素 使用较多）
5.1HTML嵌套规范注意点：
-
块级元素作为大容器，可以嵌套的有文本、块级元素、行内元素、行内块元素等等……p标签不要套 div、p 、h系列等块级元素
-
a标签内部可嵌套任意元素：a标签不可以嵌套a标签
<!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>
<!-- p和h标题不能相互嵌套-->
<p>
<h1>一级标题</h1>
</p>
<!-- p里面不能嵌套div -->
<p>
<div>divdivdiv</div>
</p>
</body>
</html>四.CSS三大特征：
1.继承性
2层叠性
3 优先级（老师还没讲)
1.1继承性：
-
特性：子元素有默认继承父元素样式的特点（子承父业）
-
可以继承的常见属性： color 、 font-style、font-weight、font-size、font-family text-indent、text-align
line-height
-
注意：可以通过调试工具判断样式是否可以继承
<!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;
font-size: 30px;
height: 300px;
}
</style>
</head>
<body>
<div>
这是div标签里面的文字
<span>这是div里面的span</span>
</div>
</body>
</html>2.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>
div{
color: red;
color: green;
}
.box{
font-size: 30px;
}
</style>
</head>
<body>
<div class="box">文字</div>
</body>
</html>五 .综合案例
1.综合案例1—普通导航
2.综合案例2—五彩导航
1.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 显示模式行内，加宽高默认不生效，转显示模式：行内块 */ a{ text-decoration: none; width: 100px; height: 50px; background-color: red; display: inline-block; color: white; text-align: center; line-height: 50px; } a:hover{ background-color: orangered; } </style> </head> <body> <!-- a*5 --> <!-- 选多行加内容删除 alt+shift+鼠标左键单击 --> <a href="#">导航1</a> <a href="#">导航2</a> <a href="#">导航3</a> <a href="#">导航4</a> <a href="#">导航5</a> </body> </html -
效果图：
2.1综合案例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{ text-decoration: none; width: 120px; height: 58px; background-color: pink; display: inline-block; text-align: center; line-height: 50px; color: white; } /* 每个a的背景图不一样，单独找到每个a，设置不同的背景图片 */ .one{ background-image: url(./images/bg1.png); } .two{ background-image: url(./images/bg2.png); } .three{ background-image: url(./images/bg3.png); } .four{ background-image: url(./images/bg4.png); } .one:hover{ background-image: url(./images/bg5.png); } .two:hover{ background-image: url(./images/bg6.png); } .three:hover{ background-image: url(./images/bg7.png); } .four:hover{ background-image: url(./images/bg8.png); } </style> </head> <body> <a href="#" class="one">五彩导航</a> <a href="#"class="two">五彩导航</a> <a href="#"class="three">五彩导航</a> <a href="#"class="four">五彩导航</a> </body> </html> -
效果图：
411
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
