今日学习内容
一、表单标签补充知识
-
name相当于字典的键，value相当于字典值。对于前端到后端传数据需要用到
name属性，不然无法被后端识别该数据是 什么。form表单在朝后端发送数据的时候，标签必须要有name，否则不会发送该标签的值。
-
获取用户输入的input标签页理论上需要有label配合使用。
<label for="该input标签的id值"></label> 效果：使输入框连带则标签旁边的文本一起选中 -
获取用户输入的input标签做第二次提示的背景提示。
<input type="radio" name="password" placeholder="密码"> -
获取用户输入的标签如果是默认选中框
针对radio和checked、option标签可以默认选中数据。 <input type="radio" name="gender" value="male">男 <input type="checkbox" name="hobby" value="basketball">篮球 <select name="province" id="1"> <option value="sh">上海</option> </select> 注意： checked="checked" 如果属性名和属性值相等，那么可以简写成 checked selected="selected" 可以简写成 selected -
文件file或files、日期不需要标识。
二、CSS简介
-
CSS作用：调整标签样式
-
语法结构
选择器 { 属性名1:属性值1; 属性名2:属性值2; ...... } -
注释语法
/*注释内容*/ -
三种编写CSS的方式
1.<head>中style内部编写 2.<head>中link标签引入外部CSS文件（最正规） 3.标签内部通过style属性编写 ===> 行内式 <p span="color:read">hahaha</p>
三、选择器
-
基本选择器
选择器 定义 举例 说明 标签选择器 用标签名来找找标签 div{
color:green;
}查找所有的div标签，并将内容文本颜色变为绿色 类选择器 用class里的值来查找标签 .c1{
color:red;
}查找所有class属性中带有带有c1标签并将内部文本颜色变成红色 id选择器 用id的值来精确查找标签 #d1{
color:yellow;
}查找id值是d1的标签并将内部文本颜色变成黄色 通用选择器 查找所有的标签 *{
color:blue;
}查找所有的标签并将内部的文本颜色改为蓝色 -
组合选择器
标签之间的关系（自定义）：后代选择器、儿子选择器、毗邻选择器、弟弟选择器
<p></p> <div id="d1"> <p> <span>haha</span> </p> <span>lala</span> </div> <span>hehe</span> <p></p> <span>dodo</span>1.查找div标签内部所有的隔标签的span(后代：隔代) #d1 span { color: blue; } 后代选择器：两个选择器之间空格隔开，查找前面标签内所有的与之相隔标签的空格后面选择器的标签 2.查找div标签内部所有儿子span #d1>span { color: orange; } 儿子选择器：两个选择器间用大于号隔开，查找前面标签内下面第一个为大于号后面的选择的标签。 3.查找div标签同级别下面紧挨着的一个span标签 #d1>span { color: orange; } 毗邻选择器：两个选择器用+隔开，查找前面标签内下面与之紧挨着的加号后面选择器，中间有标签隔开没有紧挨着则不会查询到。 4.查找div标签下面所有的span标签（弟弟们） #d1~span { color: orange; } 弟弟选择器：两个选择器用~隔开，查找前面标签内下面所有为波浪线后面的选择器的标签。 -
属性选择器
所有的标签除了有自己默认的属性之外，还可以拥有自定义的任意属性。
1.查找属性名含有name的标签 [name] { background-color:red; } 2.查找属性名含有name并且值是username的标签 [name="username"] { background-color:orange; } 3.查找input标签并且属性名含有name值是username的标签 input[name="username"] { background-color:aqua; } 前面的选择器可以是任意类型的 标签、id、class... -
分组与嵌套
1.当多个选择器需要调整相同的样式，那么可以合并标签 div,p,span { color:red; } 2.合并的选择器彼此不干扰也没有类型限制 #d1,c1,span { color:red; } 3.还可以在选择器基础上添加额外的选择使得查找更精确 span.c1 div#d1 -
伪装选择器
补充知识 a标签有记录是否被点击的颜色区分：紫色（该链接地址已被点击）、蓝色（该链接地址从来没有被点击过） a:hover { color:blue; } 鼠标悬浮上去后样式改变，适用于所有文本的标签 还有其他的，不常用了解即可： :link 、:active 、:visited 、:hover -
伪元素选择器
通过CSS代码来操作文本标签的内容。
1.单独改第一个字 p:first-letter { font-size: 48px; color:red; } 2.CSS动态添加文本内容使其在页面不能为选择。 p:before { content:"他们咋那么帅喽喽喽~~~"; color:red; } p:after { content:"博君一肖是真的" color:blue; } 伪元素选择器可以用在解决标签浮动说带来的负面影响，也可以防爬虫。 -
选择器优先级
当多个选择器查找到相同的标签并修改不同的样式，那么样式呈什么样子。
-
选择器相同，引入位置不同
就近原则
-
选择器不同的情况
行内 > id选择器 > 类选择器 >标签选择器 -
强制修改标签样式的操作
!important1.只有一条语句使用!important修饰,按照该语句样式显示，最后显示为橙色。 .p{color:#blue !important} <style> .box1 { color: green; } #类选择器 #d1 { color: red; } #id选择器 p { color: orange !important; } #标签选择器 <style> 2.如果语句都使用!important修饰，那么将按照语句所在选择器的权重大小来起作用,最后显示红色。`id选择器 > 类选择器 >标签选择器` <style> .box1 { color: green !important; } #d1 { color: red !important; } p { color: orange !important; } <style> 3.• 如果是继承过来的样式，他的权重为0，加上!important属性权重仍为0，即!important不能提升权重为0的样式，结果显示为橙色。 <style> .box1 { color: green !important; } p { color: orange;} </style> <body> <div class="box1"> <p>文字颜色</p> </div> </body> ----------------<body>------------------------ <body> <p id="d1" class="box1">文字颜色</p> </body> ------------------------------------------------
-
四、字体相关样式
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度，行内标签的宽度由内容来决定。
1.设置body内所有字体为微软雅黑
body {
font-family: "微软雅黑";
}
2.对标签p内字体大小做修改
p {
font-size: 16px;
}
3.对标签p内的字体粗细做出修改
p {
font-weight:lighter;
}
4.对标签p内颜色改变
有三种方式：
十进制值：#
RGB(参数1,参数2,参数3)
RGBA(参数1,参数2,参数3,0-1间小数表透明程度)
p {
color:red;
color:rgb();
color:#3e3e3e;
color:rgba(1,1,1,0.5)
}
5.对标签p内容居中对齐
p {
text-align:center;
}
6.对a标签的内容取消下划线
a {
text-decoration: none;
}
7.对标签p内容文本上下间隔距离
p {
text-indent: 32px;
}
五、背景属性
1.背景颜色
background-color: red;
2.背景图片
background-image: url('图片相对路径，在根路径下的路径');
3.背景重复
repeat：背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
通常设置背景图片不重复为：background-repeat: no-repeat;
4.背景位置
background-position: left top;
background-position: 200px 200px;
以上可以简写，当同样的属性时，可以把他们合并写。
background: url("imgs/xzwyb.jpg") center center no-repeat;
六、边框属性
| 边框 | 描述 |
|---|---|
| none | 无边框 |
| dotted | 点状虚线边框 |
| dashed | 矩形虚线边框 |
| solid | 实现边框 |
1.点状虚线边框
border: 4px dotted black;
2.矩形虚线边框
border: 4px dashed black;
3.实现边框
border: 4px solid black;
----------------<body>------------------------
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
boder-radius= 百分值
表示框的趋于圆的幅度，等宽等高的框50%就是个圆
七、display属性
style = "display:none"
作用于行内标签表示隐藏信息，就是说可以用于将用户输入的数据，客户端页面是看不了的，但可以将数据发送给服务端。