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、组合选择器(前面统一加#)

# 补充:标签关系
div1
	
div2
		
p1
	
	
p2
		span1
	
	span2

"""
通过嵌套层级来表示亲属关系
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）儿子选择器（关键符号是大于号）

# 查找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标签