05HTML+CSS

今日学习了CSS样式中的其他东西。

复合选择器 定义：由两个或多个基础选择器，通过不同的方式组合而成。 作用：更准确、更高效的选择目标元素（标签）。

后代选择器 后代选择器：选中某元素的后代元素。 选择器写法：父选择器 子选择器 { CSS 属性}，父子选择器之间用空格隔开。

<style>
 div span {
 color: red;
 }
</style>
<span> span 标签</span>
<div>
 <span>这是 div 的儿子 span</span >
</div>

子代选择器子代选择器：选中某元素的子代元素（最近的子级）。 选择器写法：父选择器 > 子选择器 { CSS 属性}，父子选择器之间用 > 隔开。

<style>
 div > span {
 color: red;
 }
</style>

并集选择器 并集选择器：选中多组标签设置相同的样式。 选择器写法：选择器1, 选择器2, …, 选择器N { CSS 属性}，选择器之间用 , 隔开。

<style>
 div,
 p,
span {
 color: red;
 }
</style>
<div> div 标签</div>
<p>p 标签</p>
<span>span 标签</span>

伪类选择器 伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式。 鼠标悬停状态：选择器:hover { CSS 属性 }

<style>
 a:hover {
 color: red;
 }
 .box:hover {
 color: green;
 }
</style>
<a href="#">a 标签</a>
<div class="box">div 标签</div>

 继承性：子级默认继承父级的文字控制属性。 注意：如果标签有默认文字样式会继承失败。 例如：a 标签的颜色、标题的字体大小。

层叠性 特点： • 相同的属性会覆盖：后面的 CSS 属性覆盖前面的 CSS 属性 • 不同的属性会叠加：不同的 CSS 属性都生效。

优先级 优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。 规则：选择器优先级高的样式生效。 公式：通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important。

背景图 网页中，使用背景图实现装饰性的图片效果。 属性名：background-image（bgi） 属性值：url(背景图 URL)，提示：背景图默认有平铺（复制）效果。

背景图平铺方式 属性名：background-repeat（bgr） 属性值。

背景图位置 属性名：background-position（bgp） 属性值：水平方向位置 垂直方向位置 • 关键字 • 坐标（数字 + px，正负都可以） 水平：正数向右；负数向左 垂直：正数向下；负数向上 提示： • 关键字取值方式写法，可以颠倒取值顺序 • 可以只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向，垂直方向为居中。

背景图缩放 作用：设置背景图大小 属性名：background-size（bgz） 常用属性值： • 关键字 cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见 contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白 • 百分比：根据盒子尺寸计算图片大小 • 数字 + 单位（例如：px） 提示：工作中，图片比例与盒子比例相同，使用 cover 或 contain 缩放背景图效果相同。

背景图固定 作用：背景不会随着元素的内容滚动。 属性名：background-attachment（bga） 属性值：fixed。

背景复合属性 属性名：background（bg） 属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（空格隔开各个属性值，不区分顺序）。

块级元素 l 独占一行 l 宽度默认是父级的100% l 添加宽高属性生效 l 行内元素 l 一行可以显示多个 l 设置宽高属性不生效 l 宽高尺寸由内容撑开 l 行内块元素 l 一行可以显示多个 l 设置宽高属性生效 l 宽高尺寸也可以由内容撑开 。