CSS02-选择器进阶+背景相关属性+元素显示模式+三大特性
复合选择器 的规则
emmet语法 作用：通过简写语法，快速生成代码
<style>
div {
/* font-size: ; */
font-size: ;
/* 提示css属性: 单词的首字母 */
/* font-weight: ; */
font-weight: 700;
width: ;
height: ;
/* */
background-color: #fff;
/* line-height: ; */
line-height: ;
/* 宽度300,高度是200,背景色是粉色 */
/* w300+h200+bgc */
width: 300px;
height: 200px;
background-color: pink;
}
</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 有3个li *乘号 -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!-- ul里面有3个li, li里面有文字111 {文字} -->
<!-- ul>li{111}*3 -->
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
<!-- ul有3个li, li文字1, 2, 3 -->
<!-- ul>li{$}*3 -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
背景相关属性
➢ 背景颜色属性的属性名是？
• background-color
➢ 背景颜色属性的属性值默认是？
• 透明：rgba(0,0,0,0)、transparent
➢ 背景图片属性的属性名是？ •
background-image
➢ 背景图片属性的属性值格式是什么样的？
➢ 属性名：background-repeat（bgr）
➢ 属性值：
背景相关属性连写
推荐：background：color image repeat position
img标签和背景图片的区别
需要在网页中展示一张图片的效果？
➢ 方法一：直接写上img标签即可
• img标签是一个标签，不设置宽高默认会以原尺寸显示
➢ 方法二：div标签 + 背景图片
• 需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签
重要的图片用img
不重要的用background-img
➢ 块级元素的显示特点有哪些？
1. 独占一行（一行只能显示一个）
2. 宽度默认是父元素的宽度，高度默认由内容撑开
3. 可以设置宽高
➢ 块级元素的代表标签有哪些？
• div、p、h系列
行内元素
➢ 显示特点： 1. 一行可以显示多个
2. 宽度和高度默认由内容撑开
3. 不可以设置宽高
➢ 代表标签： • a、span 、b、u、i、s、strong、ins、em、del……
行内块元素
➢ 显示特点： 1. 一行可以显示多个
2. 可以设置宽高
➢ 代表标签： • input、textarea、button、select……
• 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
元素显示模式转换
目的：改变元素默认的显示特点，让元素符合布局要求
拓展1：HTML嵌套规范注意点
1. 块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等……
➢ 但是：p标签中不要嵌套div、p、h等块级元素
2. a标签内部可以嵌套任意元素
➢ 但是：a标签不能嵌套a标签
![]()
继承性的介绍（没有就继承父元素 自己有就用自己的）
➢ 特性：子元素有默认继承父元素样式的特点（子承父业）
➢ 可以继承的常见属性(文字控制属性都可以继承)
1. color
2. font-style、font-weight、font-size、font-family
3. text-indent、text-align
4. line-height
5. ……
➢ 注意点： • 可以通过调试工具判断样式是否可以继承
好处：可以在一定程度上减少代码
常见应用场景： 1. 可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
2. 直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小
层叠性
1. 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
2. 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
案例一：普通导航栏
<title>普通导航栏</title>
<style>
a {
width: 80px;
height: 50px;
background-color: red;
/* 转换成行内块元素 */
display: inline-block;
/* 文本水平居中 */
text-align: center;
/* 文本垂直居中 */
line-height: 50px;
text-decoration: none;
color: #fff;
}
a:hover {
background-color: orange;
}
</style>
</head>
<body>
<!-- a{导航$}*5 -->
<!--alt+shift 点每个#号处闪光标 一起写5个# -->
<a href="#">导航1</a>
<a href="#">导航2</a>
<a href="#">导航3</a>
<a href="#">导航4</a>
<a href="#">导航5</a>
</body>
案例二 彩色导航 背景图片 悬停换背景图片
<title>彩色导航</title>
<style>
a {
width: 120px;
height: 58px;
display: inline-block;
text-align: center;
/* 带尖的图片高度往上调一点 值变小 */
line-height: 50px;
text-decoration: none;
color: #fff;
}
.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>
浙公网安备 33010602011771号