CSS的基本理论知识
1 > form 表单
form表单的作用就是可以获取前端用户数据并发送给后端服务器的操作,在form 表单中有几个需要我们了解的关键字参数和标签 —— action 属性、input标签、select标签、textarea标签、lable标签。
1.1 > action 属性
用于控制数据的提交地址,他有三种不同提交数据的方式。
方式一:写提交的地址的全路径
<form action="http://www.xxxxx.cn/user.php"></form>
方式二:写提交地址的后缀(他会自动识别当前网址,补全IP和PORT)
<form action="user.php"></form>
方式三:不写(它会自动朝网页所在的地址提交数据)
<form action=""></form>
1.2 > input标签
用于获取用户输入的各种类型的数据的这么一个标签。标签当中也有多个关键字参数,每个关键字都有不同的作用,用 type (属性)去选择使用什么标签,具体介绍如下:
关键字 | 效果作用 |
---|---|
text | 正常展示的普通文本 |
password | 密文展示 |
date | 日历展示 |
radio | 单选 |
checkbox | 多选 |
邮箱格式数据 | |
file | 文件数据 |
submit | 触发form表单提交数据的动作 |
input 标签中有两个非常重要的属性:
1. name 属性: 类似与字典中的key
2. value 属性:类似于字典中的value(如果标签是选择类型的,那么还需要前端程序员自己填写value)用于区分具体数据含义。
1.3 > select标签
它会显示一个下拉框的页面提供用户选择的这么一个功能标签,一个个的下拉选项是一个个的option标签,它默认是单选,也可以添加multiple来变成多选。代码如下:
<select name="province" id="">
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="SZ">深圳</option>
</select>
1.4 > textarea标签
它的作用是获取大段文本内容。
<textarea name="desc"></textarea>
1.5 > label标签
这个是专门给input标签配文字说明的,这个也可以不适用,他有两种使用方式 。
方式一:
<label for="d1"> 用户名 </lable>
<input type="text" id="d1">
方式二:
<label> 用户名:
<input type="text">
</label>
2 > 网络请求方式
最常见的网络请求有两种请求方式:
方式一:get请求
朝服务端索要数据
方式二:post请求
朝服务端提交数据
2.1 > 请求携带的数据格式
form表单中有一个method属性,用于控制提交的方式,有两个选项 默认是get请求。
get请求虽然可以携带数据 但是一般只用于不重要的数据携带,并且get请求携带数据的大小有限制 最多只能携带2KB左右get请求是在URL后面通过 ?组织数据。格式如下:
url?name=jason&pwd=123&email=123@qq.com
post请求是在请求体中组织数据。它是HTTP协议请求数据的格式。
3 > CSS简介
3.1 > 语法结构
选择器 {属性名1:属性值1;属性名2:属性值2}
3.2 > 语法注释
格式如下:
/*注释内容*/
一个正常的网页css样式是非常多的 就算专门开设css文件存储也很乱,这个时候就可以在css文件中通过注释来辅助辨别与查找。例如:
/*博客园样式表*/
/*导航条样式*/
/*左侧栏样式*/
/*右侧栏样式*/
3.3 > 多种引入css的方式
方式一:head内style标签内部直接编写css代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>学习之路本身就很痛苦</h1>
</body>
</html>
方式二:head内link标签引入外部css文件
<link rel="stylesheet" href="">
方式三:标签内部通过style属性直接编写,这也被称为“行内式” 是最不推荐使用的一种方式
<body>
<h1 style="color: black">学习之路本身就很痛苦</h1>
</body>
4 > CSS查找标签之基本选择器(重要)
4.1 > 标签选择器(范围查找)
直接通过标签名查找标签。
h1 {
color: deeppink; /*让所有h1标签内部所有的字体颜色变为深粉色*/
4.2 > 类选择器(范围查找)
通过标签的class属性查找标签(关键性符号是句点符)
.c1 {
color: greenyellow; /*将所有class属性中含有c1的标签内部字体颜色改为亮绿色*/
}
4.3 > id选择器(精确查找)
通过标签的id属性查找标签。
#d1 {
color: orange;
}
4.4 > 通用选择器(了解 几乎不用)
查找所有的标签。
* {
color: blue;
}
5 > CSS查找标签之组合选择器(重要)
5.1 > 儿子选择器(关键符号是大于号)
#d1 > span { 查找id是d1标签内部所有的儿子span
color: red;
}
5.2 > 后代选择器(关键符号是空格)
#d1 span { 查找id是d1标签内部所有的后代span
color: red;
}
5.3 > 毗邻选择器(关键符号是加号)
#d1 + a { 查找id是d1标签同级别下面紧挨着第一个a标签
color: red;
}
5.4 > 弟弟选择器(关键符号是小波浪号)
#d1 ~ a { 查找id是d1标签同级别下面所有a标签
color: red;
}
6 > 属性选择器
它的意思是根据标签内部的属性名和属性值查找标签(关键符号是中括号)。有三种查找方式。
方式一:直接通过属性名查找
[type] { # 查找带有type属性的标签
background-color: red;
}
方式二:属性名是type并且值是text的标签
[type='text'] { # 查找带有type属性的标签并且值是text
background-color: red;
}
方式三:属性名是type并且值是text的div标签
div[type='text'] {
background-color: red;
}
7 > 分组与嵌套
7.1 > 分组
div, p, span { 查找div或者p或者span
color: red;
}
7.2 > 嵌套
#d1, .c1, span { 查找id是d1或者class包含c1或者span
color: red;
}
7.3 > 综合玩法
玩法1
div#d1 查找id是d1的div标签
div.c1 查找class包含c1的div标签
玩法2
div #d1 查找div内部id是d1的后代标签
#d1>.c1 查找id是d1的内部class包含c1的儿子标签
8 > 伪类选择器
鼠标悬浮
p:hover { 鼠标移动到p标签上方 字体颜色动态修改为橙色
color: orange;
}
获取聚点
input:focus { 输入框被鼠标左键选中(聚焦)
background-color: black;
}