ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

前端基础知识-02 -CSS

2022-04-26 00:04:38  阅读:166  来源: 互联网

标签:02 color 标签 基础知识 查找 属性 选择器 CSS d1


概要

  • 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.icode9.com/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.icode9.com/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.icode9.com/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,color,标签,基础知识,查找,属性,选择器,CSS,d1
来源: https://www.cnblogs.com/wht488232/p/16192657.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有