一、选择器进阶
复合选择器
后代选择器:空格
作用:根据html标签的嵌套关系,选择父元素后代中满足条件的元素
选择器语法:选择器1 选择器2 { css }
结果:在选择器1所找到标签的后代中,找到满足选择器2的标签,设置样式
注意点:后代包括:儿子、孙子、重孙子...;后代选择器中,选择器与选择器之间通过空格隔开
/* 找到div的儿子p设置文字颜色是红色 */
div p{
color:red;
}
子代选择器:>
作用:根据html标签的嵌套关系,选择父元素子代中满足条件的元素
选择器语法:选择器1 > 选择器2{ css }
结果:在选择器1所找到标签子代中,找到满足选择器2的标签,设置样式
注意点:子代只包括:儿子;子代选择器中,选择器与选择器之间通过 > 隔开
div>a{
color:red;
}
并集选择器:,、
作用:同时选择多组标签,设置相同的样式
选择器语法:选择器1,选择器2{ css }
结果:找到选择器1和选择器2选中的标签,设置样式
注意点:并集选择器中的每组选择器之间通过,分隔;并集选择器中的每组选择器可以是基础选择器或者复合选择器;并集选择器中的每组选择器通常一行写一个,提高代码的可读性。
p,
div,
span,
h1{
color:red;
}
交集选择器:紧挨着
作用:选中页面中同时满足多个选择器的标签
选择器语法:选择器1选择器2{ css }
结果:找到页面中既能被选择器1选中,又能被选择器2选中的标签,设置样式
注意点:交集选择器中的选择器之间是紧挨着的,没有东西分隔;交集选择器中如果有标签选择器,标签选择器必须写在最前面
p{
color: red;
}
.box{
color: red;
}
p.box{
color: red;
}
hover伪类选择器
作用:选中鼠标悬停在元素上的状态,设置样式
选择器语法:选择器:hover{ css }
注意点:伪类选择器选中的元素的某种状态
a:hover{
color: red;
background-color: green;
}
div:hover{
color: green;
}
Emmet语法
作用:通过简写语法,快速生成代码
div{
/* fsz */
/* font-size: ; */
/* 提示css属性:单词的首字母 */
/* font-weight: ; */
font-weight: 700;
width: 12;
height: 12;
background-color: #fff;
/* line-height: ; */
line-height: 12;
/* 宽度300,高度是200,背景色是粉色 */
/* w300+h200+bgc */
width: 300px;
height: 200px;
background-color: pink;
}
二、背景相关属性
背景颜色
属性名:background-color(bgc)
属性值:颜色取值:关键字、rgb表示法、rgba表示法、十六进制...
注意点:背景颜色默认值是透明,rgba(0,0,0,0)、transparent;背景颜色不会影响盒子大小,并且还能看清盒子的大小和位置,一般在布局中会习惯先给盒子设置背景颜色。
div{
width: 400px;
height: 400px;
/* background-color: pink; */
/* background-color: #ccc; */
/* 红绿蓝三原色,a是透明度0-1 */
background-color: rgba(0,0,0,.5);
}
背景图片
属性名:background-image(bgi)
属性值:background-image:url(‘图片的路径’);
注意点:背景图片中url中可以省略引号;默认是在水平和垂直方向平铺的;背景图片仅仅是指给盒子起到装饰效果,类似于背景颜色
div{
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/knife.gif);
}
背景平铺
属性名:background-repeat(bgr)
属性值
- repeat:(默认值)水平和垂直方向都平铺
- no-repeat:不平铺
- repeat-x:沿水平方向平铺
- repeat-y:沿垂直方向平铺
div{
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/ganwumei.gif);
/* background-repeat: repeat; */
/* background-repeat: no-repeat; */
background-repeat: repeat-y;
}
背景位置
属性名:background-position(bgp)
属性值:background-position:水平方向位置,垂直方向位置;
注意点:方位名词取值和坐标取值可以混使用,第一个取值表示水平,第二个表示垂直。
div{
width: 800px;
height: 800px;
background-color: pink;
background-image: url(./images/ganwumei.gif);
/* background-repeat: repeat; */
background-repeat: no-repeat;
/* background-repeat: repeat-y; */
/* 右上角 */
/* background-position: right 0; */
/* 右下角 */
/* background-position: right bottom; */
/* 居中 */
/* background-position: center center; */
/* background-position: center; */
/* background-position: 50px 100px; */
background-position: -50px -100px;
/* 正数:向右向下移动;负数:向左向上移动 */
/* 注意:背景色和背景图只显示在盒子里 */
}
背景相关属性连写
属性名:background(bg)
属性值:单个属性的合写,取值之间以空格隔开
书写顺序:推荐:background:color image repeat position
省略问题:可以按照需求省略;特殊情况:在pc端,如果盒子大小和背景图片大小一样,此时可以直接写background:url()
注意点:如果需要设置单独的样式和连写,要么把单独的样式写在连写的下面,要么把单独的样式写在连写的里面。
div{
width: 800px;
height: 800px;
/* 不分先后顺序 */
/* 背景图位置如果是英文单词可以颠倒顺序 */
background:pink url(./images/OK.jpg) no-repeat center bottom;
/* 背景图位置如果是数值,不要颠倒顺序 */
/* 水平50px,垂直100px */
background:pink url(./images/OK.jpg) no-repeat 50px 100px;
}
img标签和背景图片的区别
需求:需要在网页中展示一张图片的效果
方法一;直接写上img标签即可
- img标签是一个标签,不设置宽高默认会以原尺寸显示
方法二:div标签+背景图片
- 需要设置div的宽高,因为背景图片只是装饰的CSS样式,不能撑开div标签
三、元素显示模式
块级元素
显示模式
- 独占一行(一行只能显示一个)
- 宽度默认是父元素的宽度,高度默认由内容展开
- 可以设置宽度
代表标签
- div、p、h系列、ul、dl、dt、dd、from、header、nav、footer......
div{
width: 300px;
height: 300px;
background-color: pink;
/* 行内块 */
display: inline-block;
/* 行内 */
display: inline;
}
行内元素
显示特点
- 一行可以显示多个
- 高度和宽度默认由内容撑开
- 不可以设置宽高
代表标签
- a、span、b、u、i、s、strong、ins、em、del......
span{
width: 300px;
height: 300px;
background-color: pink;
/* 行内块 */
display: inline-block;
/* 块 */
display: block;
}
行内块元素
显示特点
- 一行可以显示多个
- 可以设置宽高
代表标签
- input、textarea、button、select...
- 特殊情况:img标签有行内块元素特点,但是Chrome调试工具中显示结果是inline
元素显示模式转换
改变元素默认的显示特点,让元素符合布局要求
display:block 转换成块级元素
display:inline-block 转换成行内块元素
display:inline 转换成行内元素
四、CSS特性
继承性
特性:子元素有默认继承父元素样式的特点
可以继承的常见属性(文字控制属性都可以继承)
- color
- font-size、font-style、font-weight、font-family
- text-indent、text-align
- line-height
注意点:可以通过调试工具判断样式是否可以继承
/* 控制文字的属性都能继承,不是控制文字的都不能继承 */
div{
color: red;
font-size: 16px;
height: 300px;
}
/* 属性自己已有的属性,例如超链接默认的颜色,标题默认的字号等不可以被继承性改变 */
层叠性
给同一个标签设置不同的样式->此时样式会层叠叠加->会共同作用在标签上
给同一个标签设置相同的样式->此时样式会层叠覆盖->最终写在最后的样式会生效
注意点:当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果
综合案例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>导航</title>
<style>
/* a显示模式是行内,加宽高默认不生效,转换显示模式:行内块 */
a {
text-decoration: none;
width: 100px;
height: 50px;
background-color: red;
display: inline-block;
color: #fff;
text-align: center;
line-height: 50px;
}
a:hover {
background-color: orange;
}
</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
<!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>导航2</title>
<style>
a {
text-decoration: none;
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
text-align: center;
line-height: 300px;
color: #fff;
}
/* 每个a的背景图不同,单独找到每个a,设置不同的背景图片 */
.one {
background-image: url(./images/dog.jpg);
}
.two {
background-image: url(./images/aoteman.jpg);
}
.three {
background-image: url(./images/aoteman.jpg);
}
.four {
background-image: url(./images/aoteman.jpg);
}
.one:hover {
background-image: url(./images/img.jpg);
}
.two:hover {
background-image: url(./images/dog.jpg);
}
.three:hover {
background-image: url(./images/dog.jpg);
}
.four:hover {
background-image: url(./images/OK.jpg);
}
</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>
2022/8/11 Caroline finish