表单标签内容补充、CSS
目录表单标签的补充说明
基于form表单发送数据
1.用于获取用户数据的标签至少应该含有name属性，name属性相当于字典的键；
用户输入的数据会保存到标签的value属性中，value属性相当于字典的值
2.如果不需要用户填写数据，只需要选择，那就需要我们自己填写value
<input type="radio"name="gender" value="male">
# 这样用户可直接点击已有选项选择，不用自己输入数据
"没有name属性的标签，form表单会直接忽略，不会发送"
3.针对input标签理论上应该配一个label标签绑定，但是也可以不写
<label for="d1">username: <input type="text" id="'d1"></label>
# label标签简单理解为可以绑定表单元素，label本身与某个表单绑定，当用户点击了label标签则会触发表单，也就相当于点击了表单
代码演示：
给需要绑定的表单设置一个id，然后给label设置一个for，他们的值相匹配就可以实现绑定
<label for="d1">username:</label>
<input type="text" id="d1">
"label只针对于表单绑定，其他元素没有效果"
4.标签的属性如果和属性值相等，可简写
代码演示：
<input type="file"multiple="multiple">
简写：<input type="file"multiple>
5.针对选择类型的标签可以提前设置默认选项
<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层叠样式表
CSS层叠样式表主要用来调节HTML标签的各种样式
# 区分标签的两大重要属性
class属性：分门别类，主要用于批量查找；
id属性：精确查找，主要用于点对点
# CSS语法结构
选择器{
样式名1：样式值1；
样式名2：样式值2
}
# CSS注释语法
/*注释内容*/
# 引入CSS的多种方式
head内style标签内部编写
head内link标签引入（标准方式）
标签内部通过style属性直接编写（不推荐）
CSS选择器
# CSS基本选择器
1.标签选择器——按照标签名查找标签
div {
color：red；
} div下的所有值都会起作用
2.类选择器——按照标签的class值查找标签
.c1 {
color: green;
} 对类的对应值起作用
3.id选择器——根据标签的id值精准查找标签
#d1{
color:yellow;
} 只针对某一个值
4.通用选择器——直接选择页面所有的标签
* {
color:blue;
} 对所有选择器都会起作用
# CSS组合选择器
针对标签的上下层级以及嵌套有另外的说法：
父标签、后代标签、子标签、弟弟标签、哥哥标签、祖先标签
1.后代选择器（空格连接）
div span {
color：red
}
呈现效果：div内所有的span标签都会变成红色
2.儿子选择器（大于号连接）
div>span {
color：yellow;
}
呈现效果：div里的span标签都会变黄色，但div里含有的标签里的span标签就不会起作用了
3.毗邻选择器（加号连接）
div+span {
color：yellow;
}
呈现效果：div下面的span标签变黄色
4.弟弟选择器（小波浪号连接）
div~span {
color：yellow;
}
呈现效果：div上下相邻的span标签变黄色
# 分组与嵌套
# 多个选择器合并查找
div，p,span{
color:yellow;
}
呈现结果：div、p、span标签都变成黄色
#d1,.c1,span{
color:green;
}
呈现结果：id为d1的、类为c1的、标签为span的都变成绿色
div.c1 {
color:red;
}
呈现结果：div里的类为c1的都变成红色
div#d1{
color:red;
}
呈现结果：div里id为d1的都变成红色
.c1 p.c2{
color:white;
}
呈现结果：c1类里的p标签类名为c2的标签变成白色
#属性选择器
/*[username] {*/ 按照属性名查找
/* color: red;*/
/*}*/
/*[username='jason'] {*/ 按照属性名等于属性值
/* color: yellow;*/
/*}*/
div[username='jason'] {
color: darkcyan;
}
#伪类选择器
"""a标签补充说明 针对没有点击过的网址 默认是蓝色 点击过的则为紫色"""
a:hover {
color: orange;
}
input:focus { input获取焦点(被点击)之后采用的样式
background-color: red;
}
#伪元素选择器
/*p:first-letter {*/
/* font-size: 48px;*/
/* color: red;*/
/*}*/
p:before { css添加文本无法正常选中
content: '嘿嘿嘿';
color: blue;
}
p:after { css添加文本无法正常选中
content: '呵呵呵';
color: red;
}
选择器优先级
- 选择器相同，导入方式不同
就近原则
-
选择器不同，导入方式相同
内联样式 > id选择器 > 类选择器 > 标签选择器
CSS样式调节
字体样式
font-size:14px 24px 28px 36px 字体代码
font-weight: lighter; 字体粗细
color:三种模式
/*color: red;*/
/*color: #3d3d3d;*/
color: rgb(186,11,98);
rgba()最后一个参数还可以控制透明度 0~1
text-align: center 文本居中
text-decoration: none; 主要用于a标签取消下划线
text-indent: 32px; 首行缩进
"""
取色器工具
1.pycharm
2.截图功能
"""
背景属性
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;*/
/*background-repeat: repeat-x;*/
/*background-repeat: repeat-y;*/
/*background-position: center center;*/
background: url("666.png") blue no-repeat center center;
}
当多个属性名有相同的前缀 那么可以简写一次性完成