【网页设计自习室#011】CSS02

一.选择器

1.1复合选择器

//全选父级里所有子级标签
父子选择器
父级选择器 子级选择器{
	属性1:属性值；
	属性2:属性值；
}

//只选择指定的子级标签
指定父子选择器
父级选择器>子级选择器{
	属性1:属性值；
	属性2:属性值；
}

1.2并集选择器

<div class="ol">
    OL标签
</div>
<p>
    P标签
</p>
<div class="op">
    OP标签
</div>

.ol,
.op,
p{
    color: blueviolet;
	font-size: 80px;
}

1.3交集选择器

选择器1选择器2{
	属性1:属性值；
	属性2:属性值；
}

<p class="xd">2022连夜通宵</p>
<p>2022连夜通宵</p>

p.xd{
    color: aqua;
}
//快速选择同时满足多个选择器的标签

1.4hover伪类选择器

//鼠标悬停时的选中状态
选择器：hover{
	属性1:属性值；
	属性2:属性值；
}

.oe:hover{
    background-color: rgb(0, 241, 40);
    color: blue;
    width: 30px;
}

<div class="oe"><button>选择</button></div>

二.背景属性

属性	解释	取值
background-color(bgc)	控制背景颜色	RGB/16位颜色
background-image(bgi)	背景图片	url路径
background-repeat(bgr)	平铺	repeat
background-position(bgp)	背景图位置	方位名词/数字+px坐标

bgr平铺属性	说明
repeat	水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	延x轴平铺
repeat-y	延y轴平铺

bgp位置属性	说明	属性值
方位名词	水平方向	left/center/right
	垂直方向	top/center/bottom
数字+px（坐标）	原点	（0，0）
	x轴	水平向右
	y轴	垂直向下

.pp {
    width: 600px;
    height: 600px;
    background-color: palevioletred;
    background-image: url(happy.png);
    background-repeat: no-repeat;
    background-position: center center;
}

 <div class="pp"></div>

background属性连写
background： color image repeat position

三.标签/元素

元素分类：
1.块级元素
2.行内元素
3.行内块元素

3.1块级元素

div{
    width: 400px;
    height: 400px;
    background-color: bisque;
}

 <div>熬夜</div>
 <div>通宵</div>

3.2行内元素

a,span,b,u,i,s,strong,ins,em,del...
//不可以设置宽高

<span>123</span>
<span>456</span>

3.3行内块元素

input,textarea,button,select，img...
//一行可显示多个
//可以设置宽高

<input type="text">

input{
    width: 400px;
    height: 400px;
    background-color: bisque;
}

3.4显示转换

属性	效果
display:block	转换为块级元素
display:inline:block	转换为行内块元素
display:inline	转换成行内元素

p{
    width: 400px;
    height: 400px;
    background-color: bisque;
    display: block;
}

<p>55</p>

四.元素特性

4.1嵌套

p中不能嵌套div，p，h块级元素
a不能嵌套a标签

4.2继承与层叠

①继承

<div>
        通宵
        <p>熬夜</p>
    </div>

div{
    background-color: bisque;
    color: saddlebrown;
}

②叠层

1.给同一个标签设置不同的样式→此时央视会层叠叠加→会共同作用在标签上
2.给同一个标签设置相同的样式→测试样是会层叠覆盖→最终写在最后的样式会生效
3.当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果