java 21_java21

一、css

css 层叠样式表

行内样式表:元素上提供一个style属性,属性值中给样式

内部样式表:html的内部,提供一个style标签对,标签对中给样式

外部样式表:定义一个样式表文件,定义样式,把这个文件引入到指定的html页面

样式:

名称:值;

选择器: 选择到某个元素

选择器{

样式1;

样式2;

...

}

样式表的优先级:有限显示

谁离元素更近就优先显示谁

二、选择器

基础选择器:

id,根据元素的id属性值选择到某个元素 唯一

类class:根据元素的class属性值选择到一个或者一组元素

.+class属性的名字

class属性值

元素|标签可以给多个,不唯一

根据标签名选择到一组或者一个元素

*

作用到所有元素

清除浏览器默认样式:

*{

padding:0;

margin:0;

}

优先级: id>class>元素>通配符

群组选择器:

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

后代选择器(派生选择器)

子元素选择器 第一代子元素

属性选择器

伪类选择器 :

hover 当鼠标悬停在元素上时显示的样式

三、常用样式

常用样式:

1.背景:

背景颜色

颜色:

颜色的英文单词

颜色十六进制 #

rgb()

rgba() a->透明度 0~1 0透明 1不透明

背景图片

背景图片是否重复

2.color: 字体颜色

3.text-align不能使用在行内元素, 元素内部内容的水平对齐方式

4.line-height: 行高,默认一行中的内容,在这一行中是垂直居中的

5.text-decoration 文本样式

underline 下划线

overline对文本添加上划线。

line-through对文本添加中划线，与HTML中的s和 strike 元素相同。

none 没有样式

6.text-indent 设置文本首行缩进 单位:px em文字个数

7.font-family文本字体

8.font-size 字体大小

9.font-style 字体风格

1)normal：文本正常显示；

2)italic：文本斜体显示；

10.font-weight 文字粗细

600以上粗体

600以下正常

11.list-style 列表样式

四、盒子模型

能看见的内容的大小: 内容+内边距+外边距

背景的设置会自动延伸到内边距上

设置内外边距的时候:

1,2,4个值

border边框三要素:

border:宽度 样式 颜色;

display:设置元素的属性

block

inline

inline-block 行内块

拥有行内和块元素的特点,能设置宽高和同行显示

div{

width:100px;

height:100px;

/*padding:50px;*/

border:5px solid red;

margin:100px;

background: blue;

/*一个值*/

padding-top:20px;

padding:100px200px; /*上下100 左右200*/

padding:50px100px150px200px; /*上右下左*/

border-style:dotted; /*点状先*/

border-style:dashed; /*虚线*/

border-style:double; /*双线 最小宽度3px*/

border-color: olivedrab;

margin:0;

}

五、form表单

表单使用form标签定义

表单是用来收集用户信息发送至服务器进行处理

form常用属性:

action 数据发送的服务器地址

name form标签的名字

enctype 如果存在文件上传需要指定二进制传输 multipart/form-data

method 提交方式

get

post

表单元素:

name属性 需要提交值得表单元素必须添加name属性,没有name属性没有提交的能力 区分后台的唯一

class : css用到

id : js用到 区分前台页面元素的唯一

value 值

input标签定义大多数表单元素

type属性的值来区分不同作用

text普通文本框 name value

password 密码 加密 name

radio 单选框 如果单选框中只能选择一个,需要设置为一组,name属性相同

checkbox 多选框

submit 提交

button 普通按钮

reset 重置

button 按钮 type属性值

按钮

重置

提交

标签为input 元素定义标注(标记)。

常用属性:

multiple多选

required 必填属性

autofocus 自动聚焦

readonly 只读 可以提交不能修改

disabled 禁用 不能提交 显示灰色

textarea文本域