Web前端HTML5+CSS3知识点（12)css入门--背景及表单

1. 背景

1.background-color
-设置背景颜色
2.background-image
-设置背景图片
3.background-repeat
-设置背景的重复方式
-可选值:repeat（默认值，背景会沿着x轴、y轴重复平铺）、repeat-x（沿着x轴重复)、repeat-y（沿着y轴重复）、no-repeat（不重复)
4.background-position
-设置背景的位置
-方位词可选值：top、right、center、bottom、left
-使用方位词时，必须使用两个值，如果只写一个，那么第二个值默认是center。
-也可以通过偏移量来设置图片位置，比如position:100px , 100px ，则代表图片水平上偏移100个像素，垂直上偏移100个像素。
5.background-clip
-设置背景的范围
-可选值:border-box（默认值，背景会出现在边框下面）、padding-box（背景不会出现在边框，只出现在内边距和内容区）、content-box(背景只会出现在内容区）
6.background-origin
-背景图片的偏移量所计算的原点
-可选值：padding-box（默认值，可以使background-position从内边距处开始计算）、content-box（背景图片的偏移量从内容区处开始计算)、border-box（背景图片的偏移量从边框处开始计算)
7.background-size
-背景图片的尺寸
-background-size：100px ，100px (第一个值表示图片的宽度、第二个图片的值为图片的高度），两个值如果只写一个，那么第二值则默认为auto。
-可选值:cover(图片比例不变，将元素铺满) 、contain（将图片在元素中完整显示，
8.background-attachment
-可以设置背景图片是否跟随元素移动
-可选值:scroll（默认值，背景图片会跟随元素移动）、fixed（表示背景图片会固定在页面中，不会随元素移动）
9.注意
-backgound 背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置, 并且该样式没有顺序要求，也没有哪个属性是必须写的。
-background-size必须写在background-position的后边，并且使用/隔开
background-position/background-size
-background-origin background-clip 两个样式 ，orgin要在clip的前边。

2. 雪碧图

1.图片的闪烁问题
图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载，浏览器加载外部资源时是按需加载的，用则加载，不用则不加载。
2.解决图片闪烁的问题
-可以将多个小图片统一保存到大图片中，然后通过background-position来显示相应的图片。这样我们的图片会同时加载到网页中，这样可以有效的避免出现闪烁的问题。
-这个技术在网页中应用十分广泛，被称为CSS-Sprite，这种图我们称为雪碧图。
3.雪碧图的使用步骤
-先确定要使用的图标
-测量图标的大小
-根据测量结果创建一个元素
-将图片设置为元素的背景
-使用position（偏移量)来设置正确的图片
4.雪碧图的特点
-一次性将多个图片加载进页面，降低请求次数，加快访问速度，提升用户体验。

3 线性渐变

1.通过渐变可以设置复杂的背景颜色，可以实现从一个颜色向其他颜色进行过渡的效果。
-渐变是图片，需要通过background-image来设置。

线性渐变 linear-gradient（）
-线性渐变指颜色沿着一条直线发生变化。
例：linear-gradient（red，yellow），表示红色在开头，黄色在结尾，中间表示红色向黄色过渡的颜色。
线性渐变的开头可以指定渐变的方向，比如：to left (向左) 、 to right(向右） 、to bottom 、to top(向上）。
还可以用xxxdeg来表示渐变的度数，0°＝向上，90度＝向右，规律是顺时针旋转。
turn，用来表示圈数，.5turn表示0.5圈
渐变可以同时指定多个颜色，多个颜色默认情况下平均分布。也可以手动指定渐变的情况。
3.重复的线性渐变 repeating-linear-gradient()
可以平铺的线性渐变

4. 径向渐变

radial-gradient（）
径向渐变具有放射性的效果
默认情况下径向渐变的形状根据元素的形状来计算的
正方形 --> 圆形
长方形 --> 椭圆形
我们也可以手动指定径向渐变的大小：circle（圆形） 、 ellipse（椭圆)
我们也可以手动指定径向渐变的位置： 比如第一个值设置为100px 100px at 0 0，即将位置设置在原点。
语法： radial-gradient(大小 at 位置, 颜色 位置 ,颜色 位置 ,颜色 位置)
大小可选值:circle（圆形） 、 ellipse（椭圆)、closest-side 近边、 closest-corner 近角、 farthest-side 远边、farthest-corner 远角
位置可选值：top right left center bottom
例:background-image: radial-gradient(farthest-corner at 100px 100px, red , #bfa)

5. 表格

1.table
-在现实生活中，经常需要使用表格来表示一些格式化的数据，比如：课程表、成绩表等。
-table属于块元素，会独占一行，但是他的宽度是被内容撑开的，并不会占满一行。
-在网页中，我们同样也需要用到表格，在网页中用table标签创建表格。在table中，使用tr表示一行，有几个tr就有几行。在tr中，我们使用td表示单元格，有几个td就表示有几个单元格。
-rowspan（纵向合并单元格）、colspan(横向合并单元格）
2.长表格
-我们可以将一个表格分成三个部分，分别是：头部（thead）、主体（tbody）、底部（tfoot）。th表示头部的单元格。改变代码顺序的话，依然不会改变结构。
3.表格的样式
-border-spacing：指定边框之间的距离。
-border-collapse：设置边框的合并、让两个边框合并。
-如果表格中没有使用tbody，而是直接使用tr，那么浏览器会自动创建一个tbody，并且将所有的tr放到tbody中，所以tr不是table的选择器，无法通过table > tr（子元素选择器）来选中tr。
-默认情况下，元素在td中是垂直居中的，我们可以通过vertical-align、text-align这个属性来修改，
-display：table-cell；这是将元素设置为一个单元格，此时可以在元素中使用vertical-align。

6. 表单

1.form
-表单在现实生活中，主要用于提交数据。
-在我们的网页中，也能使用表单，网页中的表单用于将本地的数据提交给远程的服务器。
-使用form来创建一个表单。
2.form的属性
-action：表单要提交的服务器地址
-：文本框，注意:数据要提交到服务器中，必须要为元素指定name属性值。
-：提交按钮,value的值默认为提交，设置value的值可以指定按钮上面的文字。
-：密码框。
-：单选框。像这种选择框，必须要指定一个value属性，这个value属性最终会作为用户填写的一个值传递给服务器。checked属性，可以将单选按钮设置为默认选中。
-：多选框
-select option：下拉选项框，可以给option添加selected，把某个选项设置为默认选中。
-：重置按钮，可以把表单重置。
-：普通的按钮，偏于与js配合使用。
-button type="submit"提交、button type="reset"重置、button type="button"普通的按钮。
-autocomplete=“off” 关闭自动补全、readonly 将表单项设置为只读，数据会提交、disabled 将表单项设置为禁用，数据不会提交、autofocus 设置表单项自动获取焦点。