表单标签的补充说明
基于form表单发送数据
1.用于获取用户数据的表情至少应含有name属性
name属性相当于字典的键
用户输入的数据会被保存到标签的value属性中
value属性相当于字典的值
2、如果不需要用户填写数据 只需要选择 那么我们需要自己填写value
<input type='radio' name='gender' value='male'>
ps:没有name属性的表情 form表单会直接忽略 不会发送
3.针对input标签理论上应该配一个label标签绑定 但是不绑也没事
<label for="d1">username:
<input type='text' id='d1'>
</label>
label for="d1">username:</label>
<input type='text' id='d1'>
ps:用上这label标签后，我们点击网页中的username就会自动跳转到input的选项框中区。
4.标签的属性如果和属性值相等 那么可以简写
<input type'file' multiple='multiple'>
<input type'file' multiple> file(文件) multiple 属性规定输入字段可选择多个值
5.针对选择类型的标签可以提前设置默认选项
input 默认 checked
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>
css叠层样式表
主要是用来调节html表情的各种样式
思考:页面都是由HTML构成的并且页面上有很多相同的HTML标签 但是相同的HTML标签在不同的位置
可以有不同的样式 我们该如何区分标签
标签的两大重要属性>>>:区分标签
1.class属性
分门别类 主要用于批量查找
2.id属性
精确查找 主要用于点对点
学习css的流程
1.先学习如何查找标签
2.再学习如何调整样式
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: #4799ff;
}
</style>
</head>
2.head内link标签引入(标准的方式)
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
3.标签内部通过style属性直接编写（不推荐）
<p style="color: red">Hello world.</p>
css选择器
一.css基本选择器
1.标签选择器（直接按照标签名查找标签）
div{
color:red;
}
2.类选择器(按照标签的class值查找标签)
.c1{
color:green;
}
3.id选择器(根据标签的id值精准查找标签)
#d1{
color:yellow;
}
4.通用选择器(直接选择页面所有的标签)
*{
color:blue;
}
二.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{
color:red;
}
在div内的标签都属于他的后代标签
2.儿子选择器(大于)
div>span{
color:yellow;
}
选择所有父级是 <div> 标签的 <span> 标签
3.毗邻选择器(加号)
div+span{
color:yellow;
}
ps:毗邻选择器只会对他后面紧挨着的标签生效如果中间隔一个他也是不会生效的
4.弟弟选择器(小波浪号)
div~span{
color:yellow;
}
div后面所有的兄弟span标签（也就是同级标签）
三.分组与嵌套
div,p,span { # 多个选择器合并查找
color: yellow;
}
#d1,.c1,span {
color: green;
}
div.c1 { 查找class含有c1的div
color: red;
}
div#d1 { 查找id是d1的div
color: red;
}
.c1 p.c2 { 查找含有c1样式值里面的含有c2样式值的p标签
color: antiquewhite;
}
四.属性选择器
/*[username] {*/ 按照属性名查找
/* color: red;*/
/*}*/
/*[username='jason'] {*/ 按照属性名等于属性值
/* color: yellow;*/
/*}*/
div[username='jason'] { 按照标签是div属性名等于属性值查找
color: darkcyan;
}
五.伪类选择器
伪类选择器是什么？
- 伪类选择器简称“伪类”，伪类是一种不存在的类，伪类用来表示元素的一种状态。
- 伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。
- 伪类就是开头为冒号的关键字，如: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样式调节
字体属性
字体大小
p {
font-size: 14px;
}
字重（粗细）
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;
}
当多个属性名有相同的前缀 那么可以简写一次性完成