7天java_JAVA第7天

表单: form

收集用户输入的信息

单选框 多选框 才有分组到的概念 name属性值相同就是分组

单选框 -> 只能选择一个

多选框 -> 给后台人员看的为相同逻辑的值

name 属性值 的作用是给后台是用来区分前台表单元素的

地址? name = "" & pwd = ""

1.fieldSet隐私信息 身高体重

把信息分组展示

2.select 下拉框

option 下拉列表选项

3.提交 重置 按钮

input->type->

sumbit 提交

reset 重置 恢复默认值

button 按钮 通常结合js一起使用

button 标签

type属性

submit

reset

button

常用的表单元素的属性:

maxlength 接收字符的个数

placeholder 提示字

checked 单选框 多选框的默认选中

selected 默认选中

required 必填属性

readonly 只读 可以提交不能修改

disabled 禁用 完全不能使用

css 层叠样式表

选择器{

样式名: 样式值;

..

..

}

选择器: 选中一个|一些元素,然后为选中的元素添加{}中的样式

使用css语法的方式:

1.行内样式表 : 为某一个元素添加样式,样式定义在元素身上 ->只作用域当前元素

style属性,把css语法样式定义在style属性值中

2.内部样式表 : 定义在某个html页面中,选中谁就为谁添加样式

在head中添加一个style标签对,把样式 定义在style标签对中

3.外部样式表 : 定义在某个 html页面外部

在外部单独定义css文件,哪一个html页面页面要使用就 通过link标签引入样式表

优先级: 谁离元素更近就优先先是谁

选择器: 选中元素 一个 一些...

基础选择器 ***

关系选择器

属性选择器

伪类选择器

伪元素选择器

基础选择器:

#id选择器 : 根据id属性值选中不同的元素

id属性: 页面表示元素的唯一,每一个元素都可以定义id属性,可以不定义,但是一个html页面中元素的id属性值不能重复

.class类选择器

匹配元素的class属性值

class属性元素可以定义可以不定义, 可以重复 class属性值可以定义值列表

元素选择器|标签选择器

根据标签名字选中元素 选中页面中所有当前名字标签的元素,添加相同的样式

通配符

* 匹配页面所有的元素

* 清除浏览器的默认样式

*{

padding: 0;

margin: 0;

}

优先级: id>class>元素>*

群组选择器

可以根据不同的选择器同时选中不同的元素

选择器1,选择器2,选择器3..{

样式;

}

后代选择器

父元素选择器 子元素选择器{

样式;

}

选择这个父元素里面的这格子元素

关系选择器:

子选择器

直接子元素,间接子元素无法选择

父元素选择器 > 子元素选择器

相邻兄弟选择器

可选择紧接在另一元素后的元素，且二者有相同父元素。以加号分隔

普通兄弟选择器

选择紧接在另一个元素后的所有元素，而且二者有相同的父元素，以波浪线分隔

属性选择器: 根据元素的属性特点选中不同的元素

伪类选择器:

元素:hover 当鼠标悬停在元素上时候被选中

伪元素选择器:

css背景相关样式: background

背景颜色 background-color

背景图片 background-image

背景图片是否平铺 background-repeat

背景图片大小 background-size

背景位置 background-position 只设置一个方向值,另一个默认居中

复合背景 样式: background : 颜色 图片 重复 位置;

个数 位置可以任意改变

字体颜色:

color

颜色给值方式:

1.颜色的英文单词

2.十六进制 #6个字符

2.rgb(,,)

字体大小:

font-size: 18px;

字体样式:

微软雅黑,花纹行楷,...

font-family:"华文行楷","微软雅黑";

是否为斜体:

font-style

字体加粗:

font-weight

100~900之间的数值

bold bolder 粗体

normal lighter 正常

文本划线: text-decoration

居中:

水平 : 非行内元素有效 定义元素中的文本在元素中的对其方式

text-align: left center right

垂直 : 非行内元素中的文本在元素中垂直方向居中

line-height: 与块元素的高度相同,这一行内容就能在 这格块元素中垂直居中

首行缩进: text-indent px值 em单位->文字个数

块元素 : display: block;

行内元素 : display: inline;

海内元素不能设置宽高

行内块: 又有行内的特点,又有块元素的特点

display: inline-block;

又能设置宽高 又能 同行显示