CSS的基本理论知识

最新推荐文章于 2023-11-11 11:41:08 发布

乔治我的M4呢？

最新推荐文章于 2023-11-11 11:41:08 发布

阅读量276

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_64178950/article/details/124409496

版权

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	多选
email	邮箱格式数据
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;
        }

乔治我的M4呢？

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS的基本理论知识

CSS的基本理论知识1 > form 表单1.1 > action 属性1.2 > input标签1.3 > select标签1.4 > textarea标签1.5 > label标签2 > 网络请求方式2.1 > 请求携带的数据格式3 > CSS简介3.1 > 语法结构3.2 > 语法注释3.3 > 多种引入css的方式4 > CSS查找标签之基本选择器(重要)4.1 > 标签选择器(范围查找)4.2 > 类选择器
复制链接

扫一扫