12月1日内容总结——表单标签知识补充、css介绍、css选择器和选择器的优先级、css样式调解

一、表单标签的补充说明
二、CSS：层叠样式表
三、CSS选择器
四、选择器优先级
五、CSS样式调节

一、表单标签的补充说明

基于form表单发送数据

1.用于获取用户数据的标签至少应该含有name属性

<form action="">

	<input type="radio" name="nothing">好家伙

	<input type="radio" name="nothing">好东西

	<input type="radio" name="nothing">好宝贝

</form>

name属性相当于字典的键，用户输入的数据会被保存到标签的value属性中，拥有name属性的数据才能发送到后端被识别。
value属性相当于字典的值
radio类型的input标签需要设置统一的name属性才能实现单选的目的
没有name属性的标签，form表单会直接忽略，不会发送。

2.如果不需要用户填写数据只需要选择那么我们需要自己填写value

<input type="radio" name="gender" value="male">

这里的value就相当于默认参数，如果不写就是使用默认的值，如果写了就是使用我们给定的值。

3.针对input标签理论上应该配一个label标签绑定但是也可以不写

	<label for="d1">username:

        <input type="text" id="d1">

    </label>

   	<label for="d1">username:</label>

    <input type="text" id="d1">

用上这label标签后，我们点击网页中的username就会自动跳转到input的选项框中区。

4.标签的属性如果和属性值相等那么可以简写

	<input type="file" multiple="multiple">

	<input type="file" multiple>

<select name="" id="" multiple>

    <option value="" selected="selected">111</option>

</select>

<select name="" id="" multiple>

    <option value="" selected>222</option>

</select>

5.针对选择类型的标签可以提前设置默认选项

input标签使用checked属性设置默认值，select标签中的option标签需要设置selected属性设置默认值，两者因为属性值和属性名称一样，都可以省略值的书写。

	<input type="radio" name="gender" checked="checked">

 	<input type="radio" name="gender" checked>

 	<input type="checkbox" checked="checked">

   	<input type="checkbox" name="gender" checked>

	<option value="" selected="selected">222</option>

    <option value="" selected>222</option>

6.下拉框与文件上传可以复选

	<input type="file" multiple>

   	<select name="" id="" multiple>

在标签中加上属性multiple就可以设置成复选。

二、CSS：层叠样式表

css 介绍

css（Cascading Style Sheet，层叠样式表)，是一种样式表语言，用来描述HTML和XML文档的呈现（定义如何显示HTML元素）。
随着HTML的发展，为了满足页面设计者的要求，HTML添加了很多显示功能，但是随着这些功能的增加，使得HTML越来越杂乱
HTML 页面也越来越臃肿，CSS便随之诞生
CSS 用于简化HTML标签，把关于样式部分的内容提取出来，进行单独的控制，使结构与样式分离开发。
CSS 是以HTML为基础，设置网页的外观显示样式，如字体、颜色、背景的控制及整体的布局等，和HTML 类似
CSS也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

如何查找标签

思考:页面都是由HTML构成的，并且页面上有很多相同的HTML标签，但是相同的HTML标签在不同的位置可能有不同的样式。我们如何区分标签？

标签的两大重要属性>>>:用于区分标签

1.class属性

分门别类，主要用于批量查找

2.id属性

精确查找，主要用于点对点

    <div class="c1 c2 c3"></div>

    <p class="c1 c5"></p>

    <span class="c1 c8"></span>

    <div id="d1"></div>

    <a href="" id="d2"></a>

学习css的流程

肯定有同学会问，为啥不想学样式的具体内容，反而先学习如何查找标签，我们可以这样想，我们只有会找标签了，才能知道对应的css代码作用于什么标签上。

1.先学习如何查找标签
2.再学习如何调整样式

css语法基础知识

1.css语法结构

选择器 {

样式名1:样式值1;

样式名2:样式值2

}

2.css注释语法

注释是代码之母。

/*注释内容*/

3.引入css的多种方式

1.head内style标签内部编写(学习的时候使用)

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        p{

            background-color: #2b99ff;

        }

    </style>

</head>

2.head内link标签引入(标准的方式)

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

3.标签内部通过style属性直接编写(不推荐)

<p style="color: red">Hello world.</p>

三、CSS选择器

1.CSS基本选择器

	1.标签选择器(直接按照标签名查找标签)

        div {

                color: red;

            }

 	2.类选择器(按照标签的class值查找标签)

    	 .c1 {

            color: green;

        }

 	3.id选择器(根据标签的id之精准查找标签)

    	#d1 {

            color: yellow;

        }

 	4.通用选择器(直接选择页面所有的标签)

    	* {

            color:blue;

        }

2.CSS组合选择器

    """

    预知知识点 我们对标签的嵌套有另外一套说辞

        <p>ppp</p>

        <p>ppp</p>

        <div>div

            <div>divdiv

                <p>divdivp

                    <span>divdivpspan</span>

                </p>

            </div>

            <p>divp</p>

            <span>divspan</span>

        </div>

        <p>ppp</p>

        <span>spanspan</span>

    针对标签的上下层级以及嵌套有另外的说法

        父标签 后代标签 子标签 弟弟标签 哥哥标签 祖先标签

    """

    1.后代选择器(空格隔开)

		div内部的span标签设置字体颜色

        div span {

                color: red;

            }

    2.儿子选择器(大于)

		选择所有父级是 <div> 标签的 <span> 标签

        div>span {

                color: yellow;

            }

    3.毗邻选择器(加号)

		符合条件（需要是span便签）并且与父标签（div）相邻

        div+span {

                color: yellow;

            }

    4.弟弟选择器(小波浪号)

		div后面所有的兄弟span标签（也就是同级标签）

        div~span {

                color: yellow;

            }

3.分组与嵌套

	同时查找div、p、span三种同级标签，修改他们的颜色，改为黄色

	div,p,span {  # 多个选择器合并查找

            color: yellow;

        }

	修改id值为d1的标签和class值为c1的标签，还有外层span标签的颜色，改为绿色

 	#d1,.c1,span {

            color: green;

        }

	div.c1 {  查找class含有c1的div

            color: red;

        }

	div#d1 {  查找id是d1的div

            color: red;

        }

	.c1 p.c2 {  查找含有c1的class值的标签里面的含有c2样式值的p标签

           color: antiquewhite;

        }

4.属性选择器

	[username] {	按照属性名查找

        color: red;

    }

    [username='jason'] {  按照属性名等于属性值

        color: yellow;

    }

    div[username='jason'] {  查找div标签中username属性为jason的标签

        color: darkcyan;

    }

5.伪类选择器

伪类选择器是什么？

伪类选择器简称“伪类”，伪类是一种不存在的类，伪类用来表示元素的一种状态。
伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。
伪类就是开头为冒号的关键字，如:hover

用户行为伪类

一些伪类只会在用户以某种方式和文档交互的时候应用。这些用户行为伪类，有时叫做动态伪类，表现得就像是一个类在用户和元素交互的时候加到了元素上一样。案例包括：

:hover：只会在用户将指针挪到元素上的时候才会激活，一般就是链接元素；
:focus：只会在用户使用键盘控制，选定元素的时候激活（被点击之后采用的样式）；

ps：a标签补充说明，针对没有点击过的网址，默认是蓝色，点击过的则为紫色。

:hover示例

<!--css-->

a:hover{

    color:red;

}

<!--html-->

<div><a href="http://www.baidu.com" >百度</a></div>

:focus示例

<!--css-->

input:focus {

            background-color: red;

        }

<!--html-->

INPUT:<input type="text">

6.伪元素选择器

伪元素：用于创建一些不在文档树中的元素，并为其添加样式

单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素

常见的伪元素选择器：

::first-letter 选择元素文本的第一个字母。
::first-line 选择元素文本的第一行。
::before 在元素内容的最前面添加新内容。（常用）
::after 在元素内容的最后面添加新内容。（常用）
::selection匹配用户被用户选中或者处于高亮状态的部分
::placeholder匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效

作用：

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的HTML元素一样，而不是向现有的元素上应用类。

	    p:first-letter {  修改第一个字母的大小

            font-size: 48px;

            color: red;

        }

        p:before {		css添加文本无法正常选中

            content: '嘿嘿嘿';

            color: blue;

        }

        p:after {		css添加文本无法正常选中

            content: '呵呵呵';

            color: red;

        }

四、选择器优先级

1.选择器相同，导入方式不同

就近原则，代码处于下方的样式，会先被使用

2.选择器不同，导入方式相同

优先级：内联样式 > id选择器 > 类选择器 > 标签选择器

五、CSS样式调节

字体属性

字重（粗细）

font-weight用来设置字体的字重（粗细）。

值	作用描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，而700等同于bold
inherit	继承父元素字体的粗细值

文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

ps：取色器工具可以快速取得想要的颜色，以下两种软件有这种功能。

1.pycharm

2.微信截图功能，可以看rgb值

文字属性

文字对齐

text-align 属性规定元素中的文本的水平对齐方式。

值	作用描述
left	左边对齐默认值
right	右对齐
center	居中对齐
justify	两端对齐

文字装饰

text-decoration 属性用来给文字添加特殊效果。

值	作用描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
inherit	继承父元素的text-decoration属性的值。

常用的为去掉a标签默认的自划线：

a {

  text-decoration: none;

}

首行缩进

将段落的第一行缩进 32像素：

p {

  text-indent: 32px;

}

背景属性

	div {

            width: 800px;

            height: 800px;

        设置背景框的大小

            /*background-color: red;*/

        背景颜色

            /*background-image: url("https://img2.baidu.com/it/u=167083063,1652780278&fm=253&fmt=auto&app=138&f=JPEG?w=369&h=472");*/

        使用图片充当背景填充内容

            /*background-image: url("666.png");*/

        默认情况下使用背景填充内容会重复重复填充，直到填满背景框

            /*background-repeat: no-repeat;*/

        用了no-repeat之后就只填充一张图片，不会重复填充

            /*background-repeat: repeat-x;*/

        横向填充

            /*background-repeat: repeat-y;*/

        竖向填充

            /*background-position: center center;*/

        使图片在x轴和y轴上都处于中间，也就是正中间

            background:  url("666.png") blue no-repeat center center;

        }

    当多个属性名有相同的前缀 那么可以简写一次性完成