第三周周报：CSS补充

# 更多的选择器

## 更多伪类选择器

1. first-child

选中第一个子元素

first-of-type，选中子元素中第一个指定类型的元素

2. last-child

选中最后一个子元素

last-of-type，选中子元素中最后一个指定类型的元素

3. nth-child

选中指定的第几个子元素

even：关键字，等同于2n

odd：关键字，等同于2n+1

4. nth-of-type

选中指定的子元素中第几个某类型的元素

## 更多的伪元素选择器

1. first-letter

选中元素中第一个字母

2. first-line

选中元素中第一行的文字

3. selection

选中被用户框选的文字

# 更多的样式

## 透明度

1. opacity，他设置的是整个元素的透明度，他的取值是0~1

2. 在颜色位置设置alpha通道（rgba）

## 鼠标

使用cursor设置（cursor默认取值为auto）

设置图片为鼠标样式时注意图片的后缀名应为.ico或.cur

设置图片为鼠标样式时格式：cursor: url("imgs/target.ico巴拉巴拉巴拉..."), auto;

## 盒子隐藏

1. display：none，不生成盒子

2. visibility:hidden,生成盒子，只是从视觉上移除盒子，盒子仍然占据空间

## 背景图

### 和img元素的区别

img元素是属于html的概念

背景图是属于css的概念

1. 当图片属于网页内容时，必须使用img元素

2. 当图片仅用于美化页面时，必须使用背景图

### 涉及的css属性

1. bacground-image

2. background-repeat

默认情况下，背景图会在横坐标和纵坐标中进行重复

3. background-size

预设值：contain，cover，类似于object-fit

contain:保证完整显示且比例不变

cover：图片撑满整个区域且比例不变

数值或百分比：前宽后高，百分比相对于的是盒子的大小

4. background-position

设置背景图的位置

预设值：前横向后纵向（center，bottom，top，left，right）

数值或百分比：数值含义-相对位置-相对整个盒子

雪碧图（精灵图）（spirit）:一张图片可取多张图片

5. background-attachment

通常用他控制背景图是否固定

取值fixed背景图相对于视口

6. 背景图和背景颜色混用

先用背景图，没有背景图的部分用背景颜色来填充

7. 速写（简写）属性background

```css

background: url(" ") no-repeat 50% 50%/100% fixed #000;

```

1）50% 50%/100% 上面这部分内容先写位置后写尺寸，这是要求

2）其中每个部分都可以不写，其值为默认值

# iframe元素

框架页

通常用于在网页中嵌入另一个页面(也可用于分享视频)

iframe 可替换元素

1. 通常行盒

2. 通常显示的内容取决于元素的属性

3. CSS不能完全控制图片的样式

4. 具有行块盒的特点（它的内部尺寸是上下左右均可设置的）

# 在页面中使用flash

object

embed

它们都是可替换元素

MIME：多用途互联网邮件类型：

比如，资源是一个jpg图片，MIME：img/jpeg

object与embed存在浏览器兼容问题，兼容写法如下：

```html

<object data="./" type="">

        <param name="quality" value="high">

        <embed quality="high" src="./" type="">

    </object>

```

# 表单元素

一系列元素，主要用于收集用户数据

## input元素

输入框

-type属性：输入框类型

type：text，普通文本输入框

type：password，密码框

type：date，日期选择框，兼容性问题

type：search，搜索框，兼容性问题

type：number，数字输入框

type:checkbox,多选框

type:radio,单选框

-value属性：输入框的值

-placeholder属性：显示提示的文本，文本框没有内容时显示

 

input元素可以制作按钮

当type值为reset,button,submit时,input表示按钮

## select元素

下拉列表选择框

通常和option元素配合使用