一、选择器进阶
1、复合选择器
1.1后代选择器:空格
作用:根据HTML标签嵌套关系,选择父元素后代中满足条件的元素
选择器语法:选择器1 选择器2{css}(两者通过空格隔开)
结果:在选择器1中多找到标签的后代(儿子、孙子、重孙子等)中,找到满足就选择器2的标签,设置样式
<head>
<style>
div p{
color: red;
}
</style>
</head>
<body>
<p>这是一个单独的p标签</p>
<div>
<p>这是div的儿子p标签</p>
</div>
</body>
浏览器显示效果:
1.2子代选择器:>
作用:根据HTML标签嵌套关系,选择父元素子代中满足条件的元素
选择器语法:选择器1>选择器2{css}
结果:在选择器1所找到标签的子代(儿子)中,找到满足选择器2的标签,设置样式
<head>
<style>
div>a{
color: red;
}
</style>
</head>
<body>
<div>
<a href="#">这是div的儿子a标签</a>
<p>
<a href="#">这是div的儿子p标签的儿子a标签</a>
</p>
</div>
</body>
浏览器显示效果:
2、并集选择器:,
作用:同时选择多组标签,设置相同的样式
选择器语法:选择器1,选择器2{css}
结果:找到选择器1和选择器2选中的标签,设置样式
<head>
<style>
p,
div,
span,
h1{
color: red;
}
</style>
</head>
<body>
<p>p标签</p>
<div>div标签</div>
<span>span标签</span>
<h1>h1标签</h1>
<h2>h2标签</h2>
</body>
浏览器显示效果:
3、交集选择器:紧挨着
作用:选中页面中同时满足多个选择器的标签
选择器语法:选择器1选择器2{css}
结果:找到页面中既能被选择器1选中,又能被选择器2选中的标签,设置样式
注意点:交集选择器中如果有标签选择器,一定要把标签选择器放在最前面
<head>
<style>
p.box{
color: red;
}
</style>
</head>
<body>
<p class="box">这是p标签:box</p>
<p>pppppp</p>
<div class="box">这是div标签:box</div>
</body>
浏览器显示效果:
4、伪类选择器
作用:选中鼠标悬停在元素上的状态,设置样式
选择器语法:选择器:hover{css}
注意点:伪类选择器选中元素的某种状态
<head>
<style>
a:hover{
color: red;
}
</style>
</head>
<body>
<a href="#">这是超链接</a>
</body>
浏览器显示效果:
鼠标悬停时
二、背景相关属性
1、背景色
属性名:background-color
属性值(颜色取值):关键字、rgb表示法、rgba表示法、十六进制等
注意点:
- 背景颜色默认值是透明的:rgba(0,0,0,0)、transparent
- 背景颜色不会影响盒子大小,并且还能看清盒子的大小和位置,一般在布局中会习惯先给盒子设置背景颜色
<head>
<style>
div{
width: 400px;
height: 300px;
/* background-color: pink;
background-color: #ccc; */
/* 红绿蓝三原色 a为透明度0-1 */
background-color: rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div>div</div>
</body>
浏览器显示效果:
2、背景图
属性名:background-image
属性值:url('图片的路径')
注意点:
- 背景图片中url中可以省略引号
- 背景图片默认是在水平和垂直方向平铺的
- 背景图片仅仅是指给盒子起到装饰作用的,类似于背景颜色,不能改变盒子的大小
<head>
<style>
div{
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./image.jpg);
}
</style>
</head>
<body>
<div>div</div>
</body>
浏览器显示效果:
背景图片为200px*200px,浏览器渲染时会默认背景平铺,因此水平和垂直方向均有两张图片。
3、背景平铺
属性名:background-repeat
属性值:
取值 | 效果 |
repeat | (默认值)水平和垂直方向都平铺 |
no-repeat | 不平铺 |
repeat-x | 水平方向(x轴方向)平铺 |
repeat-y | 垂直方向(y轴方向)平铺 |
<head>
<style>
div{
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./image.jpg);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>div</div>
</body>
浏览器显示效果:
若属性值:repeat-x,则水平方向平铺两张背景图;若属性值:repeat-y,则垂直方向平铺两张背景图。
4、背景位置
属性名:background-position
属性值:background-position: 水平方向位置,垂直方向位置;
注意点:方位名词和坐标数可以混用,第一个表示水平位置,第二个表示垂直位置
<head>
<style>
div{
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./image.jpg);
background-repeat: no-repeat;
background-position: right bottom;
}
</style>
</head>
<body>
<div>文字</div>
</body>
浏览器显示效果:
5、背景相关属性连写
属性名:background
属性值:单个属性值的合写,取值之间以空格隔开
顺序推荐:background: color image repeat position
三、元素的显示模式
1、块级元素
显示特点:
- 独占一行(一行只能显示一个)
- 宽度默认时是父元素的宽度,高度默认由内容撑开
- 可以设置宽高
代表标签:
div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer等
示例:div标签独行显示且可设置宽高,由以下浏览器显示结果可知:div标签与其父标签body标签同宽
2、行内元素
显示特点:
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高(设置了也没用)
代表标签:
a、span、b、u、i、s、strong、ins、em、del等
3、行内块标签
显示特点:
- 一行可以显示多个
- 可以设置宽高
代表标签:
- input、textarea、button、select等
- 特殊情况:img标签由行内块元素特带你,但是谷歌浏览器调试工具中显示结果是inline
4、元素显示模式转换
目的:改变元素默认的显示特点,让元素符合布局要求
语法:
属性 | 效果 | 使用频率 |
display:block | 转换成块级元素 | 较多 |
dispaly:inline-block | 转换成行内块元素 | 较多 |
display:inline | 转换成行内元素 | 较少 |
<head>
<style>
div{
width: 400px;
height: 400px;
background-color: pink;
display: inline-block;
}
</style>
</head>
<body>
<div>div</div>
<div>div</div>
</body>
浏览器显示效果:
四、标签嵌套
1、块级元素一般作为大容器,可以嵌套:文本、块级元素、行内元素、行内块元素等
- 但是:p标签中不要嵌套div、p、h等块级元素
2、a标签内部可以嵌套任意元素
- 但是:a标签不能嵌套a标签
五、CSS特性
1、继承性
特性:子元素有默认继承父元素样式的特点
文字控制属性都可以继承,非文字控制属性均不可继承
继承失效的特殊情况:
如果元素有浏览器默认眼视光hi,此时继承性依然存在,但会失效
- a标签的color会继承失效
- h系列标签的font-size会继承失效
2、层叠性
特性:
- 给同一个标签设置不同的样式——此时样式会层叠叠加——会共同作用在标签上
- 给同一个标签设置相同的样式——此时样式会层叠覆盖——最终写在最后的样式会生效
注意点:
- 当样式冲突时,只有当选择器的优先级相同时,才能通过层叠性判断结果