day39（form,css）

今日内容详细

昨日内容回顾

你好，前端愉快的一天

前端简介

前端就是跟用户直接交互
后端就是幕后真正制定规则的
HTTP协议

```python
1.四大特性
	基于请求响应
  基于TCP、IP作用于应用层之上
  无状态
  短连接
  
2.数据格式
	请求格式
  	请求首行
    请求头
    
    请求体
  响应格式
  	响应首行
    响应头
    
    响应体
    
3.响应状态码
	1XX:服务端已经接受到请求正在处理,客户端等待或继续发送数据
  2XX:200 OK,请求成功 服务端给出了相应的响应
  3XX:301、302重定向
  4XX:403请求不符合条件 404请求资源不存在
  5XX:服务端内部错误
  # 日常工作中还需要自定义状态码 一般情况下都是从10000开始
  	聚合数据(接口)
    	什么是接口:提供一个网址 朝该网址发送请求携带不同的参数就可以获取到不同的对应结果
```
HTML简介

```python
超文本标记语言 没有逻辑!!!
# 1.语法结构
	<html>
  	<head></head>
    <body></body>
  </html>
# 2.语法注释
	<!--注释内容-->
# 3.存储HTML代码文件
	后缀名一般都叫.html 并且由浏览器打开展示
# 4.标签的分类
	1.单标签
  	<img/>
  2.双标签
  	<h1></h1>
```
head内常见标签

```python
title		定义网页标题
style		内部编写css代码
link		引入外部css文件
script	内部直接编写js代码或者引入外部js文件
meta		定义网页源信息(keywords\desc)
```
body内基本标签

```python
1.标题系列
	h1~h6
2.段落系列
	p
3.修饰系列
	u、s、i、b
4.其他系列
	hr、br
```
body内特殊符号

```python
&nbsp;
&amp;
&lt;
&gt;
&yen;
&copy;
&reg;
```
body内常见标签

```python
# 1.布局标签
	div		块儿级标签
  span	行内标签
# 2.图片标签
	img
  	src
    alt
    title
    height
    weight
# 3.链接标签
	a
  	href
    target
"""
标签两大重要属性
	id属性
		类似于身份证号 同一个html文件内id值不能重复
	class属性
		类似于面向对象中类的概念 可以一次性查找一类标签
上述两个属性都是为了便于我们查找并操作相应标签
"""
```
列表标签

```python
<ul>
	<li></li>
  <li></li>
</ul>
# 页面上有规则排列的横向或者竖向布局 一般使用的都是无序列表
```
表格标签

```python
<table>
	<thead>
  	<tr>
    	<th></th>
    </tr>
  </thead>
  <tboby>
  	<tr>
    	<td></td>
    </tr>
  </tbody>
</table>
# html只需要学习每个标签的标记功能即可 无需考虑样式
```

今日内容详细

form表单CSS简介

form表单

简介：
表单在Web网页中用以让访问者输入数据，当提交表单时，表单中输入的数据被打包传递给Web服务器端的程序以处理，从而使得Web服务器与用户之间具有交互功能。
表单实现前后台交互：用户将表单提交到后台再右后台提交到数据库的过程，实现前后端交互。
表单在网页中主要负责数据采集功能，它用< form >标签定义。用户输入的信息都要包含在form标签中，点击提交后，< form >和</ form >里面包含的数据将被提交到服务器或者电子邮件里。
所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。

表单是由窗体和控件组成的,一个表单一般应该包含用户填 写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。

简单来讲就是前端获取用户数据然后再发送给服务端、、、

<!DOCTYPE html>
<!--# 简而言之，<!DOCTYPE>规定了浏览器文档使用哪种html或者xhtml规范-->
<html lang="en">
<!--<html lang="en">-->
<!--向搜索引擎表示该页面是html语言，并且语言为英文网站，其"lang"的意思就是“language”，语言的意思，而“en”即表示english-->
<head>
    <meta charset="UTF-8">
<!--    首先来说明一下“utf-8”是一种字符编码。charset=”utf-8”是告知浏览器此页面属于什么字符编码格式，下一步浏览器做好“翻译”工作。常见的字符编码有：gb2312、gbk、unicode、utf-8。

各个字符编码含义：
gb2312：代表国家标准第2312条，其中是不包含繁体的（虽然咱们不怎么使用繁体了，但是台湾还在使用繁体啊。那怎么办呢？）。
gbk：国家标准扩展版（增加了繁体，包含所有亚洲字符集）。
unicode：万国码（字面意思你也懂的）。
**utf-8：**unicode的升级版。
-->
    <title>Title</title>
<!--    *title标签由开始标签和结束标签组成，代表网页标题，会显示在浏览器的标题栏；title		定义网页标题


*title是head标签中唯一要求包含的东西（没包含默认以html文件名作为标题）-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
<!--    meta		定义网页源信息(keywords\desc)-->
</head>
<body>
<h1>用户注册</h1>
<!--<h1>标题标签</h1>-->
<form action="" method="post">
<!--    <form action=""></form>  # 需要在form标签内部编写获取用户数据标签
-->
<!--    表示表单中的数据以"post"方法传递。
Form提供了两种数据传输的方式——get和post。虽然它们都是数据的提交方式，但是在实际传输时确有很大的不同，并且可能会对数据产生严重的影响。虽然为了方便的得到变量值，Web容器已经屏蔽了二者的一些差异，但是了解二者的差异在以后的编程也会很有帮助的。
Form中的get和post方法，在数据传输过程中分别对应了HTTP协议中的GET和POST方法。二者主要区别如下：
1、Get是用来从服务器上获得数据，而Post是用来向服务器上传递数据。
2、Get将表单中数据的按照variable=value的形式，添加到action所指向的URL后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；Post是将表单中的数据放在form的数据体中，按照变量和值相对应的方式，传递到action所指向URL。
3、Get是不安全的，因为在传输过程，数据被放在请求的URL中，而如今现有的很多服务器、代理服务器或者用户代理都会将请求URL记录到日志文件中，然后放在某个地方，这样就可能会有一些隐私的信息被第三方看到。另外，用户也可以在浏览器上直接看到提交的数据，一些系统内部消息将会一同显示在用户面前。Post的所有操作对用户来说都是不可见的。
4、Get传输的数据量小，这主要是因为受URL长度限制；而Post可以传输大量的数据，所以在上传文件只能使用Post（当然还有一个原因，将在后面的提到）。
5、Get限制Form表单的数据集的值必须为ASCII字符；而Post支持整个ISO10646字符集。
6、Get是Form的默认方法。
使用Post传输的数据，可以通过设置编码的方式正确转化中文；而Get传输的数据却没有变化。-->
    <p>用户名:
        <input type="text" name="name">
<!--        总结Input的标签：
Input表示Form表单中的一种输入对象，其又随Type类型的不同而分文本输入框，密码输入框，单选/复选框，提交/重置按钮等，下面一一介绍。
1，type=text
输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等。当然这也是Input的默认类型。
参数name：同样是表示的该文本输入框名称。
参数size：输入框的长度大小。
参数maxlength：输入框中允许输入字符的最大数。
参数value：输入框中的默认值
特殊参数readonly：表示该框中只能显示，不能添加修改。
<form>
　　your name:
　　<input type="text" name="yourname" size="30" maxlength="20" value="输入框的长度为30，允许最大字符数为20"><br>
　　<input type="text" name="yourname" size="30" maxlength="20" readonly value="你只能读不能修改">
</form>
8-->
    </p>
    <p>密码:
        <input type="password" name="pwd">
<!--          password			密文展示-->
    </p>
    <p>性别:
        男<input type="radio" name="gender" value="male">
        女<input type="radio" name="gender" checked value="female">
        其他<input type="radio" name="gender" value="others">
    </p>
    <p>爱好:
        黑丝<input type="checkbox" name="hobby" value="basketball" checked>
        白丝<input type="checkbox" name="hobby" value="football">
        渔网<input type="checkbox" name="hobby" value="volleyball" checked>
<!-- checkbox			多选       -->
    </p>
    <p>生日:
        <input type="date" name="birthday">
<!--              date					日历展示-->
    </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=""></select>	一个个的下拉选项是一个个option标签-->
        <select name="province" id="">
            <option value="BJ">北京</option>
            <option value="SH">上海</option>
            <option value="SZ">深圳</option>
            <option value="HN">河南</option>
            <option value="SD">山东</option>
            <option value="ZJ">浙江</option>
        </select>
    </p>
    <p>LSC前女友:
        <select name="pre_friend" id="" multiple>
            <option value="WML">王某兰</option>
            <option value="WYX">王某新</option>
            <option value="LSY">李某玉</option>
        </select>

    </p>
    <p>好基友:
        <select name="pre_friend" id="" multiple>
            <option value="XHZ">薛片王</option>
            <option value="CTX">陈抗管</option>
            <option value="LSC">长颈鹿</option>
            <option value="ZW">威没多</option>
        </select>

    </p>
    <p>个人介绍:
        <textarea name="desc" id="" cols="30" rows="10"></textarea>
    </p>
    <p>
        <input type="submit" value="注册">
        <button>点我也可以注册</button>
        <input type="reset" value="重置">
        <input type="button" value="普通按钮">
        <input type="submit" value="点我牛逼">
        <button>点我底裤看穿</button>
        >

    </p>
</form>
</body>
</html>

input type属性与代码详解

  1. type=“text”：创建单行文本输入框
<input type="text" size="20" maxlength="20" value="文本输入框" style="height: 30px; color:cyan">
上述代码的意思为：
input元素类型为文本输入框，元素长度为20，最多允许输入20个字符，输入框默认显示“文本输入框”几个字，设置输入CSS样式高度为30像素，文字为浅蓝色。

2.type=“password”：密码输入框

 <input type="password" size="30" maxlength="20" value="">
上述代码的意思为：
input元素类型为密码输入框，元素长度为30，最多允许输入20个字符，输入框中默认显示为空。
3.type=“radio”：单选按钮
  篮球<input type="radio" value="bb" name="bool">
  足球<input type="radio" value="fb" name="bool" checked>
  All<input type="radio" value="all" name="bool">
上述代码的意思为：
input元素类型为单选按钮，其中value属性中的值用来设置用户选中改项后提交到数据库中的值，拥有相同name属性的单选框为同一组，一个组里只能同时选中一个选项，checked属性表示的是出事选项，初始默认选项，初始值会选择"足球"。

4.type=“checkbox”：复选框或者说是多选框

  北京<input type="checkbox" value="北京" name="city">
  上海<input type="checkbox" value="上海" name="city">
  深圳<input type="checkbox" value="深圳" name="city">
  香港<input type="checkbox" value="香港" name="city">
  澳门<input type="checkbox" value="澳门" name="city">
上述代码的意思为：
input元素类型为复选框，用户可以进行多个选项，其中value属性中的值用来设置用户选中改项目后提交到数据库中的值，name为复选框的名称。
5.type=“button”：普通按钮
  <input type="button" value="确认" name="bt" onClick="">
上述代码的意思为：
input元素的类型为普通按钮，在value属性中输入的值为按钮上显示的文本，name代表该按钮的名称，onclick表示处理程序，按钮的消失效果也可以通过CSS样式来设置。
6.type=“submit”：提交按钮
  <input type="submit" value="提交" name="sm" />
上述代码的意思为：
提交按钮不需要设置onclick参数，在单击提交按钮时可以向服务器发送表单数据，数据会发送到表单的action属性中指定的页面，value属性中的值为按钮上显示的文字。

type=“reset”：重置按钮

  <input type="reset" value="重置" name="reset"/>
重置按钮的作用是点击之后表单会刷新回到默认状态，在value属性中输入的值为按钮上显示的文本；
  • type=“image”：图像按钮
  <input type="image" src="图片URL" name="Yes" width="80" height="25" />
  <input type="image" src="图片URL" name="No" width="80" height="25" />
这个功能是将图片转为图片形式按钮，其中src是链接图片的路径，name为图片名称，width为图片宽度，height为图片高度，当按下图片按钮会以name中的值向服务器发送信息

type=“hidden”：隐藏域

type=“file”：文件域

type=“hidden”：隐藏域
  <input type="hidden" name="hidden" value="提交的值">
1
隐藏域在页面上不显示，用来存储与传递表单的值，当用户提交表单时，隐藏域的内容会一起提交给处理程序。

type=“file”：文件域
  <input type="file" name="file" value="选择文件" />
  文件域用于从本地硬盘中上传文件并提交。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <meta name="author" content="金华两头乌的博客">
</head>
<body>
<div align="center">
    <form action="action.html" method="post" name="myForm" onsubmit="return SubmitLogin()">
        <table>
            <caption>请输入登录信息</caption>
            <tr>
                <td>博客信息：</td>
                <td>
                    <label>您好，欢迎访问 金华两头乌的博客</label>
                </td>
            </tr>
            <tr>
                <td>金华两头乌养殖地址：</td>
                <td>
                    <label>https://www.cnblogs.com/ister/</label>
                </td>
            </tr>
            <tr>
                <td>登录账户：</td>
                <td>
                    <input type="text" name="loginName" />
                </td>
            </tr>
            <tr>
                <td>登录密码：</td>
                <td>
                    <input type="password" name="loginPwd" />
                </td>
            </tr>
            <!-- 以下是提交、取消按钮 -->
            <tr>
                <td>
                    <input type="submit" value="登录"/>
                </td>
                <td>
                    <input type="reset" value="取消"/>
                </td>
            </tr>
        </table>
        <span id="tips" style="color: red; font-weight: bold"></span>
    </form>
</div>
</body>
<script>
    //提交登录
    function SubmitLogin() {
        let tips = document.getElementById("tips");

        //判断用户名是否为空
        if (!myForm.loginName.value) {
            tips.innerText = "请输入登录账户！"
            myForm.loginName.focus();
            return false;
        }
        //判断密码是否为空
        if (!myForm.loginPwd.value) {
            tips.innerText = "请输入登录密码！"
            myForm.loginPwd.focus();
            return false;
        }
        //校验成功
        return true;
    }
</script>
</html>

form表单

### 网络请求方式

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

# 两种请求都可以携带数据
	get请求是在url后面通过?组织数据
  	url?name=jason&pwd=123&email=123@qq.com
    
  post请求是在请求体中组织数据
  	HTTP协议请求数据格式
  '''
  get请求虽然可以携带数据 但是一般只用于不重要的数据携带
  并且get请求携带数据的大小有限制 最多只能携带2KB左右
  '''

form表单中有一个method属性 用于控制提交的方式
	有两个选项 默认是get请求
```"""获取前端用户数据并发送给后端服务器"""
<form action=""></form>  # 需要在form标签内部编写获取用户数据标签

# 1.属性action
	控制数据的提交地址
  	方式1:写全路径
    	action="http://www.aa7a.cn/user.php"
    方式2:写后缀(自动补全IP和PORT)
      action="user.php"
    方式3:不写(朝网页所在的地址提交)
      action=""
 '''URL:统一资源定位符(网址)'''
# 2.input标签
	获取用户各中类型数据的标签(html里面的变形金刚)
  	type属性
    	text					正常展示的普通文本
      password			密文展示
      date					日历展示
      radio					单选
      		可以通过添加checked="checked"设置默认值
        	ps:如果属性名和属性值相同 可以简写checked
      checkbox			多选
      		可以通过添加checked="checked"设置默认值
        	ps:如果属性名和属性值相同 可以简写checked
      email					邮箱格式数据
      file					文件数据
      		可以通过添加multiple属性控制获取单个还是多个文件
      submit				触发form表单提交数据的动作
      		能够触发form表单提交数据动作的标签有两个
        		1.input的type=submit
          	2.button标签
      reset					重置页面填写的数据
      button				普通按钮默认没有任何的功能
      		意味着以后可以给它添加任意的功能(JS事件)
# 3.select标签
	下拉框
  	<select name="province" id="">
            <option value="BJ">北京</option>
            <option value="SH">上海</option>
            <option value="SZ">深圳</option>
   </select>
  	一个个的下拉选项是一个个option标签
		默认是单选 也可以添加multiple变成多选
# 4.textarea标签
	获取大段文本内容
  	<textarea name="desc"></textarea>
  """
  input标签中有两个非常重要的属性
  	1.name属性
  		类似于字典的key(前端程序员写)
  	2.value属性
  		类似于字典的value(用户自己传)
  		如果标签是选择类型的 那么还需要前端程序员自己填写value
  	用于区分具体数据含义
  ps:我们在编写input标签的时候应该添加name属性
  """
# 3.lable标签
	专门给input标签配文字说明 也可以不使用
  	方式1
    	<label for="d1">用户名:</label>
    	<input type="text" id="d1">
   	方式2
    	<label>用户名:
        <input type="text">
      </label>

CSS简介

1.什么是CSS：

       css称为层叠样式单

       它是一种专门描述结构文档的表现方式的文档，主要用于网页风格设计，包括字体大小、颜色、以及元素的精确定位等。

       在传统的web网页设计里，使用CSS能让单调的HTML网页更富有表现力。

2.CSS与传统HTML描述数据方式比较有那些优势

       表达效果丰富

       文档体积比较小

       便于信息检索

       可读性好
# 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的学习流程是
  	先学会如何查找标签
    之后才能学如何给标签修改样式

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

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

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.儿子选择器(关键符号是大于号)
	#d1 > span {  查找id是d1标签内部所有的儿子span
            color: red;
        }
# 2.后代选择器(关键符号是空格)
	#d1 span {  查找id是d1标签内部所有的后代span
            color: red;
        }
# 3.毗邻选择器(关键符号是加号)
  #d1 + a {  查找id是d1标签同级别下面紧挨着第一个a标签
              color: red;
          }
# 4.弟弟选择器(关键符号是小波浪号)
	#d1 ~ a {  查找id是d1标签同级别下面所有a标签
            color: red;
        }
        

后代选择器(以空格分隔)
子元素选择器(以大于号分隔）
相邻兄弟选择器（以加号分隔）
普通兄弟选择器（以破折号分隔）
（1）后代选择器

<!--    后代选择器用于选取某元素的后代元素，以下实例选取所有 <p> 元素插入到 <div> 元素中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    div p
    {
    background-color:yellow;
    }


    </style>
</head>
<body>

<div>
    <p>段落 1。 在 div 中。</p>
    <p>段落 2。 在 div 中。</p>
</div>

<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>

</body>



</html>

子元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
div>p
{
	background-color:yellow;
}


    </style>
</head>>
<body>
<h1>欢迎来到我的主页</h1>
<div>
    <h2>我的名字叫Tom</h2>
    <p>我住在中国</p>
</div>

<div>
    <span><p>啊哈哈</p></span>
</div>

<p>我最好的朋友是Rose</p>


</body>
</html>

相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素，如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <style>
div+p
{
	background-color:yellow;
}

        </style>
    </head>

<body>
<h1>文章标题</h1>

<div>
    <h2>DIV 内部标题</h2>
    <p>DIV 内部段落。</p>
</div>

<p>DIV 之后的第一个 P 元素。</p>

<p>DIV 之后的第二个 P 元素。</p>


</body>
</html>

后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素，以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
<style>
div~p
{
	background-color:yellow;
}
</style>
</head>
<body>

<p>之前段落，不会添加背景颜色。</p>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>

<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>

</body>
</html>

属性选择器

我们平常提到的 属性选择器 是指 [type = "radio"] 这类选择器，实际上 这是一种简称。

指的是  “属性值匹配选择器”； 在正式文档中:

类选择器 和 ID 选择器都属于 属性选择器。 应为本质上 类选择器 是 匹配 HTML 中 class 的属性值， ID 选择器 是 匹配 HTML 中的 Id 属性值。
属性选择器可以为拥有指定属性的 HTML 元素设置样式；属性选择器通过 [] 来定义，[] 内部为元素的属性，属性选择器的权重要高于标签选择器
# 根据标签内部的属性名和属性值查找标签(关键符号是中括号)
1.方式1:直接通过属性名查找
	[type] {
            background-color: red;
        }
  
2.方式2:属性名是type并且值是text的标签
  [type='text'] {
            background-color: red;
        }

3.方式3:属性名是type并且值是text的div标签
	div[type='text'] {
            background-color: red;
        }

分组与嵌套

分组
在样式表中有很多具有相同样式的元素。

h1
{
    color:green;
}
h2
{
    color:green;
}
p
{
    color:green;
}
为了尽量减少代码，你可以使用分组选择器。

每个选择器用逗号分隔。

在下面的例子中，我们对以上代码使用分组选择器：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
h1,h2,p
{
	color:green;
}
</style>
</head>
 
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>

嵌套
它可能适用于选择器内部的选择器的样式。

在下面的例子设置了三个样式：

p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p
{
	color:blue;
	text-align:center;
}
.marked
{
	background-color:red;
}
.marked p
{
	color:white;
}
p.marked{
    text-decoration:underline;
}
</style>
</head>

<body>
<p>这个段落是蓝色文本，居中对齐。</p>
<div class="marked">
<p>这个段落不是蓝色文本。</p>
</div>
<p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p>

<p class="marked">带下划线的 p 段落。</p>
</body>
</html>

伪类选择器

# 1.鼠标悬浮
  p:hover {  鼠标移动到p标签上方 字体颜色动态修改为橙色
              color: orange;
          }
# 2.获取聚点
	input:focus {  输入框被鼠标左键选中(聚焦)
            background-color: black;
        }
posted @   文质彬彬赵其辉  阅读(33)  评论(0)  编辑  收藏  举报
相关博文：
· day38(前端)
· day40（浮动）
· 前端之CSS
· HTML+CSS
· 前端开发(二)
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火，是硬核还是营销？
· 一文读懂知识蒸馏
· 终于写完轮子一部分：tcp代理 了，记录一下
点击右上角即可分享
微信分享提示