4.25~5.5第二周css笔记

更多的选择器

更多的伪类选择器

1. first-child

选中第一个子元素

first-of-type

选中第一个指定类型子元素

2. last-child

last-of-type

3. nth-child（数字）

选中指定的第几个子元素

even: 关键字，表示偶数
odd: 关键字，表示奇数

4.nth-of-type

选中第几个指定元素子元素

更多伪元素选择器

1. firsr-letter

选中元素中的第一个字母

2. first-line

选中第一行文字

3. selection

选中被用户框选的文字

更多的样式

透明度

1. opacity，他设置整个元素的透明度，它的取值是0 ~ 1
2. 在颜色位置设置alpha通道（rgba）

鼠标

使用cursor样式设置

盒子的隐藏

1. display：none，不会生成盒子
2. visibility：hidden，生成盒子，只是从视觉上移除盒子

背景图

###和img元素的区别

1. 当图片属于网页内容时，必须使用img元素
2. 当图片仅用于网页的美化时，必须使用背景图

涉及的css属性

1. background-image

2. background-repeat

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

3. background-size

预设值：contain，cover，类似于object-fit
数值或百分比

4. background-position

背景图的位置。

预设值： left right bottom top center

数值或百分比：

雪碧图（精灵图）spirit

5. background-attachment

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

fixed：固定视口

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

iframe元素

框架页

通常用于在网页中嵌入另一个页面

iframe 可替换元素

1. 通常为行盒
2. 通常显示的内容取决于元素的属性
3. css不能完全控制其中的样式
4. 具有行块盒的特点

表单元素

一系列元素，主要用于手机用户数据

input元素

输入框

• type属性:输入框类型

text: 普通文本输入框
password：密码框
date:日期选择框，旧版本浏览器有兼容问题
search:搜索框，兼容问题
range:滑动选择框
color:颜色选择框
number:数字选择框
checkbox：多选框
radio:单选框
file:文件上传

• value属性：输入框的值
• placeholder：显示提示的文本，文本框没有内容时显示

input元素是可以制作按钮

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

select元素

下拉列表选择框

通常和option元素配合使用

textarea元素

文本域，多行文本框

按钮元素

button

type属性：reset，submit，button，默认值是submit

表单状态

readonly属性：布尔属性，是否只读

disabled属性：布尔属性，是否禁用，会改变表单显示样式

配合表单元素的其他元素

label

普通元素，通常配合多选单选框来使用

• 显式关联

可以通过for属性，让label元素关联某一个表单元素，for属性书写表单元素id的值

• 隐式关联

datalist

数据列表

该元素本身不会显示到页面，用常用于和普通文本框配合

form元素

通常，会将整个表单元素，放置form元素内部，作用是当提交表单时，会将form元素内部的表单内容已合适的方式提交到服务器

form元素对静态页面开发没有时候什么意义

fieldset元素

表单分组

美化表单元素

新的伪类

1. focus

元素聚焦时的样式

2. checked

单选或多选框被选中时的样式

常见用法

1. 重置表单元素样式

2. 设置多行文本框是否允许调整尺寸

css属性：resize：

• both：两个方向都能调整尺寸
• none：不能调整尺寸
• horizontal：水平方向可以调整尺寸
• vertical：垂直方向可以调整尺寸

3. 文本框边缘到内容的距离

4. 控制单选和多选的样式

表格元素

在css出现之前，网页通常使用表格布局

后台管理系统中可能会使用表格

前台：面向用户

后台：面向管理员。对界面要求不高，对功能要求高

表格不再适用于页面布局？表格的渲染速度过慢