HTML5+CSS3学习笔记第四天

四、CSS 第二天（复合选择器、CSS特性、背景属性、显示模式）

1.复合选择器

定义：由两个或多个基础选择器，通过不同方式组合
后代选择器：选中某元素中的后代元素

写法——父选择器子选择器 {CSS属性}

 <style>  <!--div下面的所有span标签都生效-->
       div span{
        color:red
       }
    </style>
</head>
<body>
    <span>span标签</span>
    <div>
        <span>这是div的儿子span</span>
        <p>
            <span>孙子span</span>
        </p>
    </div>
</body>

子代选择器：选中某元素的最近的子代元素

写法——父选择器 > 子选择器 {CSS属性}

<style>  <!--div下面的第一个span标签生效-->
       div>span{
        color:red
       }
    </style>
</head>
<body>
    <span>span标签</span>
    <div>
        <span>这是div的儿子span</span>
        <p>
            <span>孙子span</span>
        </p>
    </div>
</body>

并集选择器：选中多组标签设置相同的样式

写法——选择器1,选择器2,…,选择器N{CSS属性}

 <style> <!--都是红色-->
       div,p,span{
         color: red;
       }
    </style>
</head>
<body>
    <span>span标签</span>
    <div>
        <span>这是div的儿子span</span>
        <p>
            <span>孙子span</span>
        </p>
    </div>
</body>

交集选择器：同时满足多个条件的元素

写法——选择器1 选择器2 {CSS属性}
伪类选择器：伪类表示元素状态，选中状态设置样式

鼠标悬停状态——选择器：hover { CSS属性 }
```
 <style> 
      span:hover{
        color:red
      }
    </style>
<body>
    <span>span标签</span>
<body>
```
选择器作用
:link 访问前
:visited 访问后
:hover 鼠标悬停
:active 点击时（激活）

选择器	作用
:link	访问前
:visited	访问后
:hover	鼠标悬停
:active	点击时（激活）

（要同时设置上述状态，要按LVHA的顺序写）

2.CSS三大特性

继承性：子级默认继承父级的文字属性
层叠性：

相同的属性会覆盖：后面的覆盖前面的

不同的属性会叠加：不同的就都生效
优先级：选择器优先级高的生效

通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important(加在CSS属性分号的前面，将优先级提到最高)
- 优先级——叠加计算规则
  
  行内样式——id选择器个数——类选择器——标签选择器
  
  规则：
  - 从左向右一次比较选个数，同一级个数高的优先级高，个数相同则向后比较
  - ！important 权重最高
  - 继承权重最低

3.Emmet写法：代码的简写方式——输入缩写vs自动生成

html:

说明	标签结构	Emmet
类选择器	< div class=“box”>< /div >	标签名.类名
id选择器	< div id=“box”>< /div >	标签名#id名
同级选择器	< div >< /div >< p>< /p>	div+p
父子级标签	< div >< p>< /p>< /div >	div>p
多个相同标签	< span >1</ span>< span >1</ span>< span >1</ span>	span*3
有内容的标签	< div >内容< /div >	div{内容}

eg:想生成一个p标签带类名就输入：p.类名（div带类名直接.类名就行）

CSS:大多数为属性单词首字母+值

eg:要宽度500：w500

4.背景图：实现装饰性的图片效果

背景颜色：background-color
背景图： background-image(bgi) : url(图片URL)

(默认是平铺效果，即通过复制填满盒子)
背景图平铺方式：background-repeat：属性值

属性值效果
no-repeat 不平铺
repeat-x 水平方向平铺
repeat 平铺（默认效果）
repeat-y 垂直方向平铺
背景图位置：background-position: 水平方向垂直方向

（属性值可以是center|bottom|right|top，也可以是距离最左边和最上边的距离）
背景图缩放：background-size
- 关键字
  
  cover：等比例缩放背景图以完全覆盖背景区，可能背景图片部分看不清
  
  contain：等比例缩放背景图以完全装入背景区，可能背景区部分空白
- 百分比：根据盒子尺寸计算图片大小
- 数字+单位（例如：px）
背景图固定：背景不随着元素的内容滚动

background-attachment：fixed
背景复合属性：background：前面所有提到的背景属性，不区分顺序，用空格隔开

属性值	效果
no-repeat	不平铺
repeat-x	水平方向平铺
repeat	平铺（默认效果）
repeat-y	垂直方向平铺

5.显示模式

块级元素——eg：div
- 独占一行
- 宽度默认是父级的100%
- 添加宽高属性生效
行内元素——eg：span
- 一行共存多个
- 尺寸有内容决定
- 加宽高不生效
行内块元素——eg：img
- 一行共存多个
- 尺寸由内容决定
- 加宽高生效
转换显示模式：display

属性值效果
block 块级
inline-block 行内块
inline 行内

属性值	效果
block	块级
inline-block	行内块
inline	行内