CSS复合选择器+元素显示模式+背景设置

一.CSS的复合选择器

1.后代选择器(重要)

        可以选择父元素中的子元素

• 格式:   元素1 元素2 {  样式声明  }
• 元素1是父级,元素2是子级,最终选择的是元素2
• 元素2只要是元素1的后代就行,儿子孙子都可
• 元素1和元素2可以是任意的基础选择器

---

2.子选择器(重要)

        选择父元素的最近一级的子元素

• 格式: 元素1>元素2 {样式声明}
• 元素2必须是亲儿子

---

3.并集选择器(重要)

        选择多组标签,同时为他们定义相同的样式

• 格式: 元素1 , 元素2 {样式声明}
• 可以选择任何形式的选择器作为并集选择器的一部分
• 并集选择器一般竖着写

---

4.伪类选择器

用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或者选择第1个,第n个元素

用冒号:表示,例如     :hover    :first-child

---

链接伪类选择器

        为确保生效,请按照  lvha 的顺序声明

---

:focus伪类选择器

用于选取获得焦点的表单元素,谁获得鼠标光标谁就会被选中而改变

一般用于<input>,如下:

input:focous{
    background-color:yellow;
}

---

二.CSS的元素显示模式

元素(标签)以什么方式进行显示

1.块元素

• 自己独占一行
• 高度,宽度,内外边距都可以控制
• 宽度默认是父级宽度
• 是一个容器及盒子,可以放行内或者块级元素
• 文字类的元素内不能使用块级元素

2.行内元素

• 相邻的行内元素在一行上,一行可以显示多个
• 高和宽直接设置是无效的
• 默认宽度就是它本身内容的宽度
• 行内元素只能容纳文本和其他行内元素
• 链接里面不能再放链接
• 特殊情况链接<a>里面可以放块级元素

3.行内块元素

<img />         <input />        <td>        

同时具有块元素和行内元素的特点,有些资料称它们为行内块元素

• 一行可以显示多个
• 默认宽度就是本身内容的宽度
• 高度 行高 内外边距都可以控制

---

元素显示模式转换

• 转换为块元素 display: block;
• 转换为行内元素 display: inline;
• 转换为行内块元素 display: inline-block;

---

单行文字垂直居中:

        让文字的行高等于盒子的高度

---

三.CSS的背景

1.背景颜色

background-color: transparent;

默认值:transparent(透明)

2.背景图片

background-image : none | url(url地址)

非常便于控制位置

3.背景平铺

对背景图像进行平铺

background-repeat: repeat | no-repeat | repeat-x | repeat-y

---

注:背景图片会覆盖在背景颜色上面

---

4.背景图片位置

background-position: x y ;

参数表示:x坐标和y坐标,可以使用方位名词或者精确单位

方位名词:

• 如果两个值都是方位名词,顺序无影响
• 如果只指定了一个方位名词,那另一个方位名词是默认的,居中对齐

精确单位:

• 如果两个值都是精确坐标,那么第一个值必须是x坐标,第二个值必须是y坐标
• 如果只指定一个数值,那么该数值一定是x坐标,另一个默认垂直居中

混合单位:

• 混合使用时,第一个值是x坐标,第二个值是y坐标

---

5.背景图像固定(背景附着)

background-attachment: scroll  | fixed

scroll(滚动)        fixe(固定)

---

6.背景属性复合写法

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

---

7.背景颜色半透明

background: rgba(0 , 0 , 0 , 0.3);

• 最后一个参数是alpha透明度,取值范围在0~1之间
• 习惯把0.3的0省略掉,写成background: rgba(0 , 0 , 0 , .3);

---