前端基础知识-02 -CSS

2022/4/26 6:16:00

编程Tag： 选择器属性标签 css 查找基础知识 color 02 d1

本文主要是介绍前端基础知识-02 -CSS，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

概要

form表单
CSS简介
CSS选择器
CSS样式操作

内容

1.form表单

""" 获取前端用户数据并发送后端服务器"""
<form action = ""></form>  # 需要在form标签内部编写获取用户数据标签

# 1.属性action
	控制数据的提交地址
    方式1:写全路径
        action = "hettp://www.aa7a.cn"
    方式2:直接写后缀名(自动补全IP地址和端口PORT)
        action = 'user.php'
    方式3:直接不写(默认是朝目前网页所在的地址提交)
        action = ''
    "URL:统一资源定位符(大白话:网址)"
![](https://www.www.zyiz.net/i/l/?n=22&i=blog/2774169/202204/2774169-20220425234528085-1845158364.png)


2.input标签 
获取用户各种类型数据的标签(html里面的变形金刚)

1.# input基本用法:
在pycharm中直接创建一个后缀名.html的文件 然后直接点击浏览器即可打开
# 方式一:
首先进入是的一个小方框 为了提示小方框代表啥 直接在前面加上 文字描述 eg:  用户名:小方框
小瑕疵:
用户名:<input type="text" > 这里的input会飘黄
    这样直接写的话:input在pycharm中会飘黄 系统会提示你这样写不是最完整的语法 
     完整的写法:
        <label for="d1">用户名</label>
        <input type="text" id = d1>
     label与input结合使用的话可以直接点击用户名就可以点进框内书写 当然也可以不使用label 直接在上面写用户名的话 这样就必须点击框才能在框内书写
    
# 方式二
        <label>用户名:
        <input type="text">
        </label>
        
如果再往下写的话就是横向排列 那么在实际生活中都是竖向排列 所以我们可以使用P标签或者div标签进行嵌套
![](https://www.www.zyiz.net/i/l/?n=22&i=blog/2774169/202204/2774169-20220425234612699-856825573.png)


2.input牛逼用法 
# 在input中 可以通过修改type属性值来对应特定的功能
type属性  type = ""
text        正常展示的普通文本
password    密文展示
date        日期展示(日历)
radio       单选框 
如果想告诉别人如果想选一个的话还需要在后面 写一个 name ='gender'即可实现单选的功能

通过checked = 'checked' 设置默认值
ps:如果属性名和属性值相同 可以简写成checked
    
checkbox     多选框
通过checked = 'checked' 设置默认值
ps:如果属性名和属性值相同 可以简写成checked

email        邮箱格式数据

单个文件file         用来获取用户传的文件数据
多个文件file     只要在后面加个multip来控制是单个还是多个 可以通过添加multiple属性控制获取单个还是多个文件

submit      触发form表单提交数据的动作
"能够触发form标签提交数据动作的标签有两个
   1.input中的type=submit
   2.button标签"
reset       重置页面填写的数据
button      普通按钮默认没有任何的功能 后面主要是用来定制 意味着以后可以给它添加任意的功能(学完js事件) 用的最多
3.问题:
    就是我们已经实现在浏览器上输入数据 那么浏览器是如何知道我们写的那些数据进行特定匹配的呢？
    所以引出input的两个非常重要的属性
    """
    1.name属性
    类似于字典的key值(前端程序员写)
    2.values属性
    类似于字典的values值(一般是用户输入,其实value我们也可以自己写 那么系统会自己默认)
    如果标签是选择类型的 还需要前端程序员自己添加value值
    用于区分和匹配数据含义
    ps:我们在编写input标签的时候就应该添加name属性,而values值是用户输入什么就是什么 所以不用前端程序员添加"""
![](https://www.www.zyiz.net/i/l/?n=22&i=blog/2774169/202204/2774169-20220425234638843-2016532951.png)

    
4.input之外的其他标签
select标签  下拉框
    province省市
    <select name="province" id="">
            <option value="BJ">北京</option>
            <option value="SH">上海</option>
            <option value="SZ">深圳</option>
   </select>
    一个个的下拉选项是一个个option标签
    默认是单选 也可以添加multiple变成多选

textarea标签
获取大段文本内容
<text

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>用户注册</h1>
<form action=""></form>
用户名:
<input type="text" name="username" value="jason">
<p><label>密码:
    <input type="password" name="password">
</label></p>
<p>性别
    男<input type="radio" name="gender" value="male" checked="checked">
    女<input type="radio" name="gender" value="female" checked="checked">
    其他<input type="radio" name="gender" value="others" checked="checked">
</p>
<p>生日:
    <input type="date" name="birthday">
</p>
<p>爱好:
    篮球<input type="checkbox" name="hobby" value="basketball" checked>
    足球<input type="checkbox" name="hobby" value="football" checked>
    排球<input type="checkbox" name="hobby" value="volleyball" checked>
</p>
<p>邮箱:
    <input type="email" name="email">
</p>
<p>单个文件:
    <input type="file" name="single_file">
</p>
<p>多个文件:
    <input type="file" multiple name="files_list" >
</p>
<p>省市:
    <select name="province" id="">
        <option value="BJ">北京</option>
        <option value="SH">上海</option>
        <option value="SZ">深圳</option>
    </select>
</p>
<p>前女友:
    <select name="pre_friend" id="" multiple>
        <option value="XW">小温</option>
        <option value="LYW">李雅雯</option>
        <option value="WYM">吴依曼</option>
    </select>

</p>
<p>
    <input type="submit" value="注册">
    <button>注册点我</button>
    <input type="reset" name="重置">
      <input type="button" name="普通按钮">
</p>
</body>
</html>

2.网络请求方式(比较重要后面框架要用)

"""最常见的网络请求方式有两种"""
1、get请求
朝服务端索要数据
2.post请求
朝服务端提交数据

form表单中有一个method属性 用于控制提交的方式
有两个选项 默认是get请求

# 两种请求都可以携带数据
携带方式是不一样的
get请求是在URL后面通过?组织数据 get一般只可携带一些不敏感数据
url?name=jason&pwd=123&email=123@qq.com

post请求是在请求体中组织数据 敏感数据一般是post请求
"""
get请求虽然可以携带数据 但是一般只用于不重要的数据携带
并且get请求携带数据的大小有限制 最多只能携带2KB左右"""

3.CSS简介

# 1.语法结构(后面会详细讲解)
	选择器{属性名1:属性值1;属性名2:属性值2}
# 2.注释是代码之母 语法注释
	/*注释内容*/
 """
 一个正常的网页css样式是非常多的 就算专门开设css文件存储也很乱
 这个时候就可以在css文件中通过注释来辅助辨别与查找 类似于打标记
 eg:
 		/*博客园样式表*/
  		/*导航条样式*/
  		/*左侧栏样式*/
  		/*右侧栏样式*/"""
3.多种引入css的方式
  	1.head内style标签内部直接编写css代码
    建议在小白学习阶段可以使用 方便查看
    2.head内link标签引入外部css文件
    工作中一般使用的都是link形式 符合标准
    3.标签内部通过style属性直接编写
    第三种也称之为"行内式"是最不推荐使用的一种方式
    因为它会将HTML和CSS柔和到一起 增加了耦合度
    
# 问题:CSS是用调整HTML标签样式的
但是同一个页面上有很多相同的标签并且可能需要有不同的样式？
CSS的学习流程是:
    1.首先先学会如何查找标签
    2.之后才能学如何给标签修改样式

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>   # 这是第一种方式
<style>
    h1{
        color: pink;
    }
</style>
<body>
<h1 style="color: blue">学习之路本身就是痛苦的！！！</h1>  # 这是第三种方式
</body>
</html>

4.CSS查找标签之基本选择器(重要)

# 1.标签选择器(范围查找)
  直接通过标签名查找标签  根据标签的名字来查找标签并设置成所要的粉色
    h1 {
        color: deeppink; /*让body内所有h1标签内部所有的字体颜色变为深粉色*/
        }
# 2.类选择器(范围查找) 重点
	通过标签的class属性查找标签(关键性符号是句点符)
    .c1 {
         color: greenyellow;  /*将所有class属性中含有c1的标签内部字体颜色改为亮绿色*/
    }
# 3.id选择器(精确查找)
通过标签的id属性查找标签
#d1 {
         color: orange;
        }
# 4.通用选择器(了解 几乎不用) 
查找所有的标签
  	* {
      	color: blue;
    }

代码演示

1.标签选择器(范围查找)
<style>
    h1 {
        color: deeppink;   /*让body内的h1中的内容变成闷骚粉色
    }
</style>
<body>
<h1 class>学习之路本身就是痛苦的！！！</h1>
<h1 class>学习之路本身就是痛苦的！！！</h1>
<h2 class>学习之路本身就是痛苦的！！！</h2>
<h1 class>学习之路本身就是痛苦的！！！</h1>
<h3 class>学习之路本身就是痛苦的！！！</h3>
<h4 class>学习之路本身就是痛苦的！！！</h4>

</body>
</html>

2.类选择器(范围查找) 重点
<style>
    .c1 {
        color: greenyellow;
    }
</style>
<body>
<h1 class="c1">学习之路本身就是痛苦的！！！</h1>
<h1 class="c2">学习之路本身就是痛苦的！！！</h1>
<h2 class="c1">学习之路本身就是痛苦的！！！</h2>
<h1 class="c2">学习之路本身就是痛苦的！！！</h1>
<h3 class="c1">学习之路本身就是痛苦的！！！</h3>
<h4 class="c3">学习之路本身就是痛苦的！！！</h4>
<p class="c1">我是P标签</p>
<span class="c1">我是span标签</span>
</body>
</html>

3.id选择器(精确查找)
<style>
    #d1 {
        color: orange;
    }
</style>
<body>
<h1 class="c1">学习之路本身就是痛苦的！！！</h1>
<h1 class="c2">学习之路本身就是痛苦的！！！</h1>
<h2 class="c1">学习之路本身就是痛苦的！！！</h2>
<h1 class="c2">学习之路本身就是痛苦的！！！</h1>
<h3 id="d1">学习之路本身就是痛苦的！！！</h3>
<h4 class="c3">学习之路本身就是痛苦的！！！</h4>
<p class="c1">我是P标签</p>
<span class="c1">我是span标签</span>
</body>
</html>

5.CSS查找标签之组合选择器(重要)

"""
补充:标签关系
<div>div1
	<div>div2
		<p>p1</p>
	</div>
	<p>p2
		<span>span1</span>
	</p>
	<span>span2</span>
</div>
通过嵌套层级来表示亲属关系
1.对于div1来说div2、p2、span2都是儿子
2.对于div2、p2、span2来说div1就是父亲
3.对于p1来说div2是父亲 div1是爷爷(可以将div1和div2统称为祖先)
4.对于span2来说div2、p2是哥哥 span2是弟弟
5.div1内部所有的标签无论层级都可以称之为是div1的后代
ps:判断的时候一定要看层级关系
"""
1.儿子选择器(关键符号是大于号)
<style>
        /*儿子选择器*/
        #d1 > span {  查找id是d1标签内部所有的儿子span
            color: orange;
        }
    </style>
2.后代选择器(关键符号是空格)
   #d1 span {查找id是d1标签内部所有的后代span
            color: red:
                }
3.毗邻选择器(关键符号是加号) 紧挨着的标签的第一个
# d1 + a {  查找id是d1标签同级别下面紧挨着第一个a标签
              color: red;
          }
4.弟弟选择器(关键符号是小波浪号)
	#d1 ~ a {  查找id是d1标签同级别下面所有a标签
            color: red;
        }

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*儿子选择器*/
        #d1 > span {
            color: orange;
        }
        毗邻选择器
        #d1 + a {
            color: red;
        }
         弟弟选择器
        #d1 ~ a {
            color: red;
        }
    </style>
</head>
<body>
<div id="d1">div1
	<div>div2
		<p>p1</p>
	</div>
	<p>p2
		<span>span1</span>
	</p>
	<span>span2</span>
</div>
<a href="">111</a>
<a href="">222</a>
<a href="">333</a>
</body>
</html>

6.属性选择器

# 根据标签内部的属性名和属性值查找标签(关键符号是中括号)  所有的标签背景色都会变成红色
1.方式1:直接通过属性名查找
<style>
 [type]  {
      background:red;
  }
<!--    </style>-->
</head>
<body>
<input type="text" name="name">
<input type="password" name="pwd">
<input type="text" name="name">
<input type="file" name="file">
</body>
</html>

2.方式2:属性名是type并且值是text的标签 两个条件限制 更加精准查找
     [type='text'] {
            background-color: red;
        }
3.方式3:属性名是type并且值是text的div标签 三个条件限制 更加精确查找
    div[type='text'] {
            background-color: red;
        }

7.分组与嵌套(多个选择器之间互相嵌套)

1.分组  选择器的并列 关键字是逗号
要求是让div,p,span三者都是红色的目的 如果分开来写的话 会显得代码比较冗余 所以提供了一个新的方法
div,p,span {  # 三者是或的关系
    color: red;
}
</head>
<body>
<div>div</div>
<p>p</p>
<span>span</span>
<a href="">111</a>
<a href="">222</a>

2.嵌套 多个选择器之间是可以混合使用的
#d1, .c1, span { 查找id是d1或者class包含c1或者span 
              color: red;
        }
"""
综合玩法
玩法1
div#d1      查找id是d1中的div标签
div.c1      查找class包含c1的div标签

玩法2
div #d1      查找div内部id是d1的后代标签
#d1>.c1     查找id是d1的内部class包含c1的儿子标签"""

8.伪类选择器

# 1.鼠标悬浮
p:hover { 鼠标移动到p标签上方
         <style>
         p:hover {
    color: red;
}
<!--    </style>-->
</head>
<body>
<p>快要下课吃饭了</p>
    
}
# 2.获取聚点
p:hover {
    color: red;
}
input:focus {  输入框被鼠标左键选中(聚焦)
    background: black;
}
<!--    </style>-->
</head>
<body>
<p>快要下课吃饭了</p>
<input type="text">

这篇关于前端基础知识-02 -CSS的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

前端基础知识-02 -CSS

概要

form表单

CSS简介

CSS选择器

CSS样式操作

内容

1.form表单

2.网络请求方式(比较重要 后面框架要用)

3.CSS简介

4.CSS查找标签之基本选择器(重要)

5.CSS查找标签之组合选择器(重要)

6.属性选择器

7.分组与嵌套(多个选择器之间互相嵌套)

8.伪类选择器

相关编程文章

2.网络请求方式(比较重要后面框架要用)