CSS笔记——选择器进阶，背景属性

1 选择器进阶

1.1 复合选择器

• 后代选择器

  根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素

  选择器1 选择器2 {
      css 
  }
  

• 子代选择器

  根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素

  选择器1 > 选择器2 {
      css 
  }
  

1.2 并集选择器

同时选择多组标签，设置相同的样式

选择器1，选择器2 { 
    css 
}

1. 并集选择器中的每组选择器可以是基础选择器或者复合选择器
2. 并集选择器中的每组选择器通常一行写一个，提高代码的可读性

1.3 交集选择器

选中页面中 同时满足 多个选择器的标签

选择器1选择器2 { 
    css 
}

1. 交集选择器中的选择器之间是紧挨着的，没有东西分隔
2. 交集选择器中如果有标签选择器，标签选择器必须写在最前面

1.4 Emmet语法

通过简写语法，快速生成代码，类似于刚刚学习的选择器的写法

• 标签名：div

  <div></div>
  

• 类选择器：.red

  <div class="red"></div>
  

• id选择器：div#one

  <div id="one"></div>
  

• 交集选择器：p.red#one

  <p class="red" id="one"></p>
  

• 子代选择器：ul>li

  <ul>        <li></li>    </ul>
  

• 内部文本：ul>li{文本}

  <ul>        <li>text</li>    </ul>
  

• 创建多个：ul>li*3

  <ul>        <li></li>        <li></li>        <li></li>    </ul>
  

• hover伪类选择器

  选中鼠标悬停在元素上的状态，设置样式

  选择器:hover {     css }
  

2 背景相关属性

• background-color

  颜色取值：关键字、rgb表示法、rgba表示法、十六进制……

  1. 背景颜色默认值是透明： rgba(0,0,0,0) 、transparent
  2. 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

• background-image

  属性值：url()

  背景图片默认是在水平和垂直方向平铺的

• background-repeat

  

• background-position

• 属性连写

  推荐：background: color image repeat position

在网页中展示一张图片的效果

• 方法一：直接写上img标签即可
  img标签是一个标签，不设置宽高默认会以原尺寸显示
• 方法二：div标签 + 背景图片
  需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签