css复合选择器
后代选择器:
语法格式:
选择器1 选择器2 {样式声明;}
后代选择器中用空格分开
子代选择器:
语法格式:
选择器1 > 选择器2 {样式声明;}
后代选择器用户大于号分开
并集选择器:
语法格式:
选择器1,选择器2 {样式声明;}
并集选择器用逗号分开,最后一个选择器不需要逗号
交集选择器:
语法格式:
选择器1选择器2
既…又…的关系应用场景不多
链接伪类选择器:
针对链接的不同状态设置不同的样式
链接伪类选择器 说明
a:link 选择所有未被访问的链接
a:visited 选择所有已经被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择激活链接(鼠标按下未抬起的链接)
focus伪类选择器:
在表单中突出显示当前获得焦点的表单元素,提升用户体验
语法格式:
<style>
input {
width: 300px;
height: 30px;
}
input:focus {
width: 500px;
background-color: gray;
}
</style>
input和冒号中间不能有空格
元素的显示模式
块元素:
特点:1.独占一行;2.可以设置宽高等属性;3.宽度默认是父级容器的宽度;4.可以存放其他行内元素和块元素
行内元素:
特点 :1.一行可以存在多个;2.设置宽高等属性无效;3.默认宽度是内容的宽度;4.只能容纳文本和其他行内元素
行内块元素:
特点:1.一行显示,显示多个;2.默认宽度是本身内容的宽度;3.可以设置宽、高等属性
模式转换:
display:block:转换为块结构;
display:inline:转换为行内结构;
display:inline-block:转换为行内块结构;
背景
背景图片:
语法:
background-image: none | url(url);
优点:非常容易控制位置
背景平铺:
参数 说明
repeat 默认,水平垂直平铺
no-repeat 不平铺
repeat-x 水平平铺
repeat-y 垂直平铺
背景位置:
方位名词:
background-position可以改变图片在背景中的位置
水平方向:left、center、right
垂直方向:top、center、right
精确单位:
background-position :x y;
如果只指定了一个值,系统默认是方向的值,另一个方向垂直居中显示
背景固定:
background-attachment控制背景固定
scroll:背景图像跟随滚动(默认)
fixed:背景图像固定