多个文件:

前女友:

左依依
右珊珊
双艳艳

6、button标签

按钮，在form中使用时有提交功能，和的功能一样,标签的文本即是按钮的提示文字

# 提交数据的功能
点我也可以注册 # 可以代替submit的提交功能
注意：与input属性中的button按钮的区别
# 仅仅是普通按钮


二、CSS简介

1、语法结构

选择器 {属性名1:属性值1;属性名2:属性值2}


2、语法注释

一个正常的网页css样式是非常多的 就算专门开设css文件存储也很乱,这个时候就可以在css文件中通过注释来辅助辨别与查找

/*注释内容*/


3、CSS的几种引入方式

（1）行内样式

head内style标签内部直接编写css代码

ps:建议在小白学习阶段可以使用 方便查看

Hello world.

（2）外部样式

head内link标签引入外部css文件，

ps:工作中一般使用的都是link形式，符合标准

（3）内部样式

即嵌入式：
嵌入式是将CSS样式集中写在网页的标签对应的标签中。
也称之为"行内式",是最不推荐使用的一种方式,因为它会将HTML和CSS柔和到一起,增加了耦合度







问题来了：CSS是用于调整HTML标签样式的，但是同一个页面上有很多相同的标签并且可能需要有不同的样式，怎么办呢？

首先我们要知道修改样式的标签是哪一个，因此：

CSS的学习流程是:

先学会如何查找标签（CSS选择器）

之后才能学如何给标签修改样式

三、CSS选择器

• 基本选择器


• 组合选择器


• 属性选择器


• 分组与嵌套


• 伪类选择器

1、基本选择器

（1）标签选择器（范围查找）

# 直接通过标签名查找标签
h1 {
color: deeppink; /*让所有h1标签内部所有的字体颜色变为深粉色*/
}


（2）类选择器（范围查找）

通过标签的class属性查找标签（关键符号是句点符）

.c1 {
color: greenyellow; /*将所有class属性中含有c1的标签内部字体颜色改为亮绿色*/
}


（3）id选择器（精确查找）

通过标签的id属性查找标签，即通过标签id号查找（关键符号是#）

#d1 {
color: orange;
}


（4）通用选择器

可以查找所有的标签

* {
color: blue;
}


2、组合选择器(前面统一加#)

# 补充:标签关系


（1）儿子选择器（关键符号是大于号）

# 查找id是d1的标签内部所有的儿子span
#d1>span {
color: red
}


（2）后代选择器（关键符号是空格）

# 查找id是d1标签内部所有的后代span
#d1 span {
color: red;
}


（3）毗邻选择器（关键符号是加号）

# 查找id是d1标签同级别下面紧挨着第一个a标签
#d1 + a {
color: red;
}


（4）弟弟选择器（关键符号是小波浪号）

# 查找id是d1标签同级别下面所有a标签
#d1 ~ a {
color: red;
}


3、属性选择器

根据标签内部的属性名和属性值查找标签(关键符号是中括号)

（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;
}


4、分组与嵌套

（1）分组

# 查找div或者p或者span标签
div, p, span {
color: red;
}


（2）嵌套

# 查找id是d1或者class包含c1或者span标签
# d1, .c1, span {
color: red;
}


（3）综合玩法

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


5、伪类选择器

（1）鼠标悬浮

# 鼠标移动到p标签上方，字体颜色动态修改为橙色
p:hover {
color: orange;
}


（2）获取聚点

# 输入框被鼠标左键选中就会产生聚焦效果
input:focus {
background-color: black;
}


6、伪元素选择器

通过css操作文本内容

# 1.修改首个字体样式
p:first-letter {
color: red;
font-size: 48px;
}

# 2.在文本开头添加内容
p:before {
content:'开头';
color: blue;
}

# 3.在文本结尾添加内容
p:after {
content:'结尾';
color: yellow;
}


使用场景:

(1)用于后面清除浮动带来的负面影响

(2)用于网站的内容防爬

7、选择器的优先级

（1）CSS继承

继承是CSS的一个主要特征，只要定义了一个标签的样式，它也会作用域它的后代，例如一个body定义了的字体颜色值也会应用到段落的文本中，不过只要给对应的子标签设置字体颜色就可以覆盖继承的样式。

CSS继承权重是0，因此优先级很低

（2）选择器的优先级

在一个HTML页面中有很多种方式找到一个元素并且为其设置样式，浏览器是根据选择器的权重来应用哪个样式的

# html文件中
1.相同选择器
'就近原则'：谁离标签越近就听谁的
2.不同选择器
行内选择器 > id选择器 > 类选择器 > 标签选择器


权重计算方式如下图：

除此之外还可以通过添加 !important方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。

万不得已可以使用!important

四、CSS样式操作

...

代码操作：

form表单














用户注册



用户名:



CSS层叠样式表

学习之路本身就是充满荆棘的!!!

学习之路本身就是充满荆棘的!!!

学习之路本身就是充满荆棘的!!!

学习之路本身就是充满荆棘的!!!

学习之路本身就是充满荆棘的!!!

学习之路本身就是充满荆棘的!!!

学习之路本身就是充满荆棘的!!!

我是个p标签

我是个span标签