1、选择器进阶
(1)复合选择器
后代选择器:空格
➢作用:根据 HTML 标签的嵌套关系,选择父元素 后代中 满足条件的元素
➢ 选择器语法:父选择器1 后代选择器2 { css }
➢结果:在选择器1所找到标签的后代(儿子、孙子、重孙子…)中,找到满足选择器2的标签,设置样式
➢注意点:
1.后代包括:儿子、孙子、重孙子……
2.后代选择器中,选择器与选择器之前通过 空格 隔开
<style>
div p{
color: brown;
}
</style>
<body>
<p>这是一个p标签</p>
<div>
<p>这是div的儿子p</p>
</div>
</body>
子代选择器:>
➢ 作用:根据 HTML 标签的嵌套关系,选择父元素 子代中 满足条件的元素
➢ 选择器语法:选择器1 > 选择器2 { css }
➢ 结果:
• 在选择器1所找到标签的子代(儿子)中,找到满足选择器2的标签,设置样式
➢ 注意点:
1.子代只包括:儿子
2.子代选择器中,选择器与选择器之前通过 > 隔开
<style>
div>a{
color: brown;
}
</style>
<body>
<div>
父级
<a href="#">这是div里面的a</a>
<p>
<a href="#">这是div里面的p里面的a</a>
</p>
</div>
</body>
(2)并集选择器: ,
➢ 作用:同时选择多组标签,设置相同的样式
➢ 选择器语法:选择器1 , 选择器2 { css }
➢ 结果:
• 找到 选择器1 和 选择器2 选中的标签,设置样式
➢ 注意点:
1.并集选择器中的每组选择器之间通过 , 分隔
2.并集选择器中的每组选择器可以是基础选择器或者复合选择器
3.并集选择器中的每组选择器通常一行写一个,提高代码的可读性
<style>
div,
p,
span{
color: aquamarine;
}
</style>
(3)交集选择器:紧挨着
➢ 作用:选中页面中同时满足 多个选择器的标签
➢ 选择器语法:选择器1选择器2 { css }
➢ 结果:
• (既又原则)找到页面中 既 能被选择器1选中,又 能被选择器2选中的标签,设置样式
➢ 注意点:
1.交集选择器中的选择器之间是紧挨着的,没有东西分隔
2.交集选择器中如果有标签选择器,标签选择器必须写在最前面, 如p.box
<style>
p.box{
color: aquamarine;
}
</style>
<body>
<div class="box">
div:box
</div>
<p class="box">
ppp:box
</p>
<p>
ppp
</p>
</body>
(4)hover伪类选择器
➢ 作用:选中鼠标悬停在元素上的状态,设置样式
➢ 选择器语法:选择器:hover { css }
➢ 注意点:
1.伪类选择器选中的元素的某种状态
2.任何标签都可以添加hover标签
<style>
a:hover{
/* 悬停的时候是蓝色 */
color: aquamarine;
}
</style>
<body>
<a href="#">jidasn</a>
</body>
(5)emmet语法
➢ 作用:通过简写语法,快速生成代码
➢ 语法:
• 类似于刚刚学习的选择器的写法
2、背景相关属性
(1)背景颜色
➢ 属性名:background-color(bgc)
➢ 属性值:
• 颜色取值:关键字、rgb表示法、rgba表示法、十六进制……
➢ 注意点:
• 背景颜色默认值是透明: rgba(0,0,0,0) 、transparent
• 背景颜色不会影响盒子大小,并且还能看清盒子的大小和位置,一般在布局中会习惯先给盒子设置背景颜色
(2)背景图片
➢ 属性名:background-image(bgi)
➢ 属性值:
➢ 注意点:
• 背景图片中url中可以省略引号
• 背景图片默认是在水平和垂直方向平铺的
• 背景图片仅仅是指给盒子起到装饰效果,类似于背景颜色,是不能撑开盒子
(3) 背景平铺
➢ 属性名:background-repeat(bgr)
➢ 属性值:
background-repeat:repeat-x;
(4)背景位置
➢ 属性名:background-position(bgp)
➢ 属性值:background-position:水平方向位置 垂直方向位置
正数向右向下,负数向左向上
➢ 注意点:
• 方位名词取值和坐标取值可以混使用,第一个取值表示水平,第二个取值表示垂直
(5)背景相关属性连写
➢ 属性名:background(bg)
➢ 属性值:
• 单个属性值的合写,取值之间以空格隔开
➢ 书写顺序:
• 推荐:background:color image repeat position(没有顺序要求)
<style>
div{
width: 400px;
height: 400px;
background:red url(../1.jpg) no-repeat center;
/*位置里面如果是英文可以颠倒顺序*/
}
</style>
➢ 省略问题:
• 特殊情况:在pc端,如果盒子大小和背景图片大小一样,此时可以直接写 background:url()
(拓展)img标签和背景图片的区别
➢ 需求:需要在网页中展示一张图片的效果?
➢ 方法一:直接写上img标签即可
• img标签是一个标签,不设置宽高默认会以原尺寸显示
➢ 方法二:div标签 + 背景图片
• 需要设置div的宽高,因为背景图片只是装饰的CSS样式,不能撑开div标签
重要的一般都用img,例如京东卖的电脑图片,不重要的都用background。
3、元素显示模式
<>
尖括号,例如<p>、<div>
都是标签,也叫元素
(1)块级元素block
➢ 显示特点:
1.独占一行(一行只能显示一个)
2.宽度默认是父元素的宽度,高度默认由内容撑开
3.可以设置宽高
➢ 代表标签:
• div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……
(2)行内元素inline
➢ 显示特点:
1.一行可以显示多个
2.宽度和高度默认由内容撑开
3.不可以设置宽高
➢ 代表标签:
• a、span、b、u、i、s、strong、ins、em、del……
(3)行内块元素inline-block
➢ 显示特点:
1.一行可以显示多个
2.可以设置宽高
➢ 代表标签:
• input、textarea、button、select……
• 特殊情况:img标签有行内块元素特点,但是Chrome调试工具中显示结果是inline
(4) 元素显示模式转换
➢ 目的:改变元素默认的显示特点,让元素符合布局要求
➢ 语法:
转换成块级元素:• display:block
转换成行内块元素:• display:inline-block
转换成行内元素:• display:inline
HTML嵌套规范注意
➢块级元素一般作为大容器,可以嵌套:文本、块级元素、行内元素、行内块元素等等……
但是:p标签中不要嵌套div、p、h等块级元素
➢a标签内部可以嵌套任意元素
但是:a标签不能嵌套a标签
例如在p标签中放入h,在浏览器查看会发现自动加上了
<p>
<h1>
uij
</h1>
</p>
居中方法总结
4、CSS 特性
(1)继承性
➢ 特性:子元素有默认继承父元素样式的特点(子承父业)
➢ 可以继承的常见属性(文字控制属性都可以继承,控制标签本身的不能继承)
1.color
2.font-style、font-weight、font-size、font-family
3.text-indent、text-align
4.line-height
5.……
➢ 注意点:
• 可以通过调试工具判断样式是否可以继承
<style>
div{
color: brown; /*可以继承的*/
background-color: aqua;/*不可以继承的*/
height: 100px;/*不可以继承的*/
}
</style>
<body>
<div>
这是div里面的文字
<span>
这是div里面的span
</span>
</div>
</body>
/*文字控制属性都可以继承,控制标签本身的不能继承
如图所示,文字属性颜色可以继承,而div属性--背景颜色和高度则不行。*/
应用
可以直接给ul设置 list-style:none 属性,从而去除列表默认的小圆点样式;
直接给body标签设置统一的font-size,从而统一不同浏览器默认文字大小
(拓展)继承失效的特殊情况
➢ 如果元素有浏览器默认样式,此时继承性依然存在,但是优先显示浏览器的默认样式(自己有格式就不听继承的)
1.a标签的color会继承失效
• 其实color属性继承下来了,但是被浏览器默认设置的样式给覆盖掉了
2.h系列标签的font-size会继承失效
•其实font-size属性继承下来了,但是被浏览器默认设置的样式给覆盖掉了
<style>
div{
color: brown;
font-size: 12px;
}
</style>
<body>
<div>
<a href="#">超链接</a>
<h1>标题</h1>
</div>
</body>
(2)层叠性
➢ 特性:
-给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上;同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
➢ 注意点:
当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果
(3)优先级
➢ 特性:不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式
➢ 优先级公式:
• 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
➢ 注意点:
1.!important写在属性值的后面,分号的前面!
2.!important不能提升继承的优先级,只要是继承优先级最低!
(下例中也就是不能给body,因为就算给了它,别人继承他,别人有自己的,也不会听他的)
3.实际开发中不建议使用 !important 。
<!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>
body{
color:red
}
div{
color:aqua !important /*标签*/
}
.box{
color: blue;/*类*/
}
#ipp{
color: orange;/*id*/
}
</style>
</head>
<body>
<!-- 行内样式 -->
<div class="box" id="ipp" style="color: purple;">
测试优先级
</div>
</body>
</html>
权重叠加计算
➢ 场景:如果是复合选择器(如div p),此时需要通过权重叠加计算方法,判断最终哪个选择器优先级最高会生效
➢权重叠加计算公式:(每一级之间不存在进位)
➢ 比较规则:逐位比较,都一样则谁写在下面就赢了
➢ 注意点:!important如果不是继承,则权重最高,天下第一!
5、综合案例–普通导航
<!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: 80px;
height: 50px;
background-color: #f00;
color:#fff;
display: inline-block; /*a是行标签,宽高设置不起作用,转成行内块*/
text-align: center; /*水平居中*/
line-height: 50px; /*垂直居中,line-height和height一样就是垂直居中了*/
}
a:hover{
background-color: #ffa50f; /*鼠标悬停*/
}
</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>
综合案例–五彩导航
<!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;
/*转行内块*/
display: inline-block;
/*水平居中*/
text-align: center;
/*垂直居中*/
line-height: 50px;
color: #fff;
}
.one{
background-image: url(../day04/04-作业/01-综合案例(必做)/02-(案例)综合案例2-五彩导航案例/images/bg1.png);
}
.one:hover{
background-image: url(../day04/04-作业/01-综合案例(必做)/02-(案例)综合案例2-五彩导航案例/images/bg5.png);
}
.two{
background-image: url(../day04/04-作业/01-综合案例(必做)/02-(案例)综合案例2-五彩导航案例/images/bg2.png);
}
.two:hover{
background-image: url(../day04/04-作业/01-综合案例(必做)/02-(案例)综合案例2-五彩导航案例/images/bg6.png);
}
.three{
background-image: url(../day04/04-作业/01-综合案例(必做)/02-(案例)综合案例2-五彩导航案例/images/bg3.png);
}
.three:hover{
background-image: url(../day04/04-作业/01-综合案例(必做)/02-(案例)综合案例2-五彩导航案例/images/bg7.png);
}
.four{
background-image: url(../day04/04-作业/01-综合案例(必做)/02-(案例)综合案例2-五彩导航案例/images/bg4.png);
}
.four:hover{
background-image: url(../day04/04-作业/01-综合案例(必做)/02-(案例)综合案例2-五彩导航案例/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>