css定位form标签,form css选择器

form表单

能够获取用户输入，选择，上传的文件，并且将用户输入的内容全部发送给后端

参数

action：

控制数据提交的地址

三种书写方式不写，默认就是朝当前这个页面所在的地址提交数据

只写路径后缀(/index/)

method：

控制数据提交的地址

get：

form表达默认为get，获取数据

post：

提交数据

通常情况下input需要结合label一起使用第一种：

用户名:

第二种：

用户名:

绑定id值 之后点击label标签内任何的位置都可以自动选中input框

form表单中的input就类似于前端的变形金刚

根据type参数的不同展示不同的功能text 普通文本

password 输入的内容 会变成密文

date 日期

radis 单选圆圈

checkbox 多选 打钩

hidden 隐藏

file 传文件

button 普通按钮 没有任何意义 然后却是用的最多的 你可以给它绑定js事件

reset 重置按钮

submit 提交按钮 能够自动触发form表单提交数据的动作

select标签：下拉框

一个个的option标签就是一个个选项

默认是单选，可以给select标签加一个multiple参数，就可以变成多选

textarea标签：获取大段文本

input标签可以加disable属性，禁止该input框

input标签可以加value属性 设置默认值

能够触发form表单提交数据的动作有两个标签

input标签type=submit

button标签

所有获取用户输入的标签 都应该有name属性

name属性就类似于字典的key

input框获取到的用户输入都会放到input框的value属性中

针对选择框 传到后端的数据 有value属性决定

form表单如果要提交文件数据 必须修改以下参数

enctype="multipart/form-data"

css

层叠样式表

用来控制html标签样式的

注释/*单注释*/

/*

多行注释

多行注释

*/

css的语法结构

选择器 {属性1：属性值}

css的三种引入方法通过link标签引入外部的css文件(最正规)

直接在html页面上的head内通过style标签直接书写css代码

h1 {

color: green;

}

行内式(直接在标签內部通过style属性直接书写)不推荐

我是Oscar

基本选择器

元素选择器-->标签

id选择器-->#id

类选择器-->.c1

通用选择器--*

组合选择器

后代选择器-->div span(div内所有的span改变样式)

儿子选择器--div>span(div内第一层中的span改变样式)

弟弟选择器 div~span(div 同级别下的span标签全改变样式)

毗邻选择器 div+span(div同级别下面紧挨着的span改变样式一个)

属性选择器

精确查找

1：只找含有某个属性名的标签 如属性为[password]

2：含某个属性名并且属性值是...的标签，如 [password=‘123’]

3：找标签标签含有属性名和属性值是..的标签 ，如span[username='123']

分组与镶嵌

分组：多个标签改变样式 如div，span，p (逗号为同级别)

嵌套：标签于属性杂合改变样式 如 #d1，.c1，p

伪类选择器

a标签有4种状态：没有被点击

鼠标悬浮状态

点击之后不松手

点击后在回来

a:link{

}

link：没被点击时的状态

hover:悬浮状态

active：鼠标按下去不放的状态

visited:点击后回来的状态

input框聚焦

被鼠标点击后为聚焦focus

input:focus{

}

点其他地方时input框将失焦点

伪元素选择器

可以通过css添加文本内容

p:first_letter{

font_size:48px

color:red

p:before{

content:'*'

color:red

}

first_letter:调整文本第一个字

before：在文本前加上特殊符号

after:在文本结尾添加内容

选择器优先级

1.选择器相同的情况下，引入方式不同，遵循就近原则，谁离标签近就用谁的

2.当选择器不同的情况下，行内 > id选择器 > 类元素选择器 > 元素选择器(最多用类与id)