一、CSS复合选择器
1.后代选择器
可以选择元素1所有的后代元素
语法:
元素1 元素2 {
样式声明;
}
注:
- 元素之间用空格隔开;
后代选择器中的元素可以是任意一种基础选择器。
2.子元素选择器
选择元素1最近一级的子元素
语法:
元素1>元素2 {
样式声明;
}
注:元素之间用>
隔开。
例:
将代码中的 香蕉 字体设置黄色
<div class="nav">
<a href="#">香蕉</a>
<p>
<a href="#">菠萝</a>
</p>
</div>
<style>
.nav>a { color: yellow;}
<style>
3.并集选择器
集体声明,选择多组标签,同时设置相同样式。
语法:
元素1,
元素2 {
样式声明;
}
注:
- 元素之间用逗号隔开,最后一个元素不加逗号;
- 并集选择器可以使用后代选择器和子代选择器。
4.链接伪类选择器
链接伪类选择器 | 说明 |
---|---|
a:link | 所有未被访问的链接 |
a:visited | 所有被访问过的链接 |
☆ a:hover | 鼠标悬停的链接 |
a:active | 鼠标按下时的链接 |
注:链接伪类选择器的书写是有顺序的:link visited hover active,不能乱。
5.focus伪类选择器
在表单中突出显示当前获得焦点的表单元素。
input:focus {
样式声明;
}
6.交集选择器(扩展)
语法:
标签1.class(#Id) {
样式声明;
}
- 选择类名为Class(或id值为Id)的标签1
二、元素显示模式
元素显示模式分为两种:块元素和行内元素
1.块级元素 block
特点:
独占一行;
可以设置宽度、高度、外边距、边框和内边距;
宽度是默认父元素的宽度;
可以包含其他块元素和行内元素。
注:文本类元素中不要包含其他元素,主要存放文本(h1~h6标签和p标签);
- 常见的块元素有:div 、ul、li、ol、h1~h6、p
2.行内元素 inline
特点:
一行可以显示多个;
不能设置宽度、高度;
宽度是内容的宽度
只能容纳文本或者其他行内元素
注:链接不能再包含链接。特殊情况下可以包含块元素。
- 常见的行内元素:a、span、strong、em、ins、del等。
3.行内块元素 inline-block
特点:
一行可以显示多个;
默认宽度是本身内容的宽度;
可以设置宽度、高度、外边距、边框和内边距;
- 常见行内块元素有:img 、input、td。
4.显示模式转换
- display: inline 转换为行内元素;
- display: block 转换为块元素;☆
- display: inline-block 转换为行内块元素。☆
5.单行文字垂直居中对齐
- line-height: 盒子的高度;
三、背景图片
1.背景颜色
- 元素的背景颜色默认transparent透明的
background-color: blue;
或background-color: rgba(red,green,blue,alpha);设置半透明背景
2.背景图片
background-image: none|url(图片地址)
用背景图片的优势是容易控制位置。
2.背景平铺
background-repeat: repeat; 默认平铺
参数 | 说明 |
---|---|
repeat | 水平垂直平铺 |
no-repeat | 不平铺 |
repeat-x | 水平平铺 |
repeat-y | 垂直平铺 |
4.背景位置
background-position: 方位名词 或 精确单位(像素值) 或 方位名词和像素 值混合使用;
4.1 方位名词:
- 水平方向 left、center、right
- 垂直方向 top、center、bottom
background-position: left top;
注:
- left 与 top的位置可以互换,都能实现相同的效果。
- 如果只写一个方位名词,另一个则默认居中对齐center
让图片水平垂直居中:background-position: center;
4.2 精确单位
background-position: x y;
注:
- 单位是px像素;
- x与y的位置是不能互换的;
- 如果只写一个值,则一定是x轴方向,y轴默认垂直方向居中。
4.3 混合单位
background-position: 20px top;
注:
- 第一个值一定是x ,第二个值一定是y
5.背景固定
background-attachment: scroll(默认,背景图像跟随滚动)、fixed(背景图像固定);
6.背景混合写法(开发中用的最多)
background: color image repeat attachment position;
注:没有顺序,想写哪个写哪个。
补充:
背景色半透明:background-color: rgba(); 不影响盒子里的内容;
盒子半透明:opacity: 取值0~1; 盒子里的内容也会变透明。
好了,今天就到这里了,感谢观看!
今天你努力写代码了吗?