今日内容
form表单标签知识补充
1.获取用户输入的标签两大重要属性
name属性
类似于字典的键
value属性
类似于字典的值
form表单朝后端发送数据的时候 必须要有name属性 否则不会发送该标签的值
2.获取用户输入的input标签理论需要有label配合使用
<label for="d1"></label>
<p>
username: <input type="text" name="username" id="d1">
</p>
3.获取用户输入的input标签也可以添加背景提示
password <input type="password" name="username" placeholder="密码">
4.获取用户输入的标签如果不是让用户自己写而是选择 那么标签需要自己写value
<input type="radio" name="gender" value="male">男
<input type="checkbox" name="hobby" value="basketball">篮球
5.针对radio和checkbox可以默认选中
checked="checked" 如果属性名和属性值相等 那么可以简写checked
<input type="radio" name="gender" value="others" checked>其他
6.针对option标签也可以默认选中
selected="selected" 简写为 selected
<select name="province" id="">
<option value="beijing" selected>北京</option>
</select>
CSS层叠样式表
1.调整标签样式
2.语法结构
选择器 {
属性名1:属性值1
属性名2:属性值2
}
3.注释语法
/*注释内容*/
4.三种编写CSS的方式
1.head中style标签内部直接编写(学习阶段使用)
<style>
h1{
color: blue;
}
</style>
2.head中link标签引入外部css文件(最正规)
<link rel="stylesheet" href="myscc.css">
3.直接在标签内部通过style属性编写(不推荐)
<h1 style="color:red">今天好困呀</h1>
CSS基本选择器
1.标签选择器:直接编写标签名来查找标签
div {
coler:blue;
} /*查找所有的div标签 并将内部的文本颜色变为蓝色*/
2.类选择器:通过编写class的值来查找标签
.c1 {
color: red;
} /*查找所有class属性中含有c1的标签 并将内部的文本颜色变为红色*/
3.id选择器:通过编写id的值来精准查找标签
#d1 {
color: aqua;
} /*查看id值是d1的标签 并将内部的文本颜色变成天蓝色*/
4.通用选择器:查找所有的标签
* {
color: blueviolet;
} /*查看所有的标签 并将内部的文本颜色变成紫色*/
CSS组合选择器
储备知识
"""
<p></p> /*属于div的哥哥*/
<div>
<p> /*div内部p属于div的儿子*/
<span></span> /*div内部p内部span属于div的孙子 div内部的所有标签无论层级都称之为div的后代*/
<p>
</dir>
<p></p> /*属于div的弟弟*/
"""
1.后代选择器:两个选择器之间空格隔开
#d1 span {
ccolor: blue;
} /*查找div标签内所有的span*/
2.儿子选择器:两个选择器之间大于号隔开
d1>span {
color: blue;
} /*查找div标签内所有的儿子span*/
3.毗邻选择器:两个选择器之间加号隔开
d1+span {
color: orange
} /*查找div标签同级别下面紧挨着的一个span标签*/
4.弟弟选择器:两个选择器之间小波浪号隔开
#d1~span {
color: orange
} /*查找div同级别下所有的span标签*/
CSS属性选择器
1.查找属性名含义name的标签
[name] {
background-color: red;
}
2.查找属性名含义name并且值是username的标签
[name='username'] {
background-color: blue;
}
3.查找input标签 并且属性名含有name 值是username的
input[name='username'] {
background-color: aqua;
}
CSS选择器之分组与嵌套
当多个选择器查找的标签需要调整相同的样式 那么可以合并(分组)
div,p,span {
color: red;
} /*查找div或者p或者span*/
合并的选择器彼此不干扰也没有类型的限制(嵌套)
#d1,.c1,span {
color: red;
} /*查找id是d1或者class是c1或者是span*/
还可以在选择器基础之上添加额外的选择使得查找更精确
span.c1 /*查找class含有c1的span*/
div#d1 /*查找id含有d1的div*/
CSS选择器之伪类选择器
"""
补充知识
a标签默认的颜色有两种 紫色跟蓝色
紫色:链接地址已经被点击过了
蓝色:链接地址从来没有点击过
"""
1.鼠标悬浮
a:hover {
coler: blue
} /*鼠标悬浮上去之后样式改成蓝色 适用于所有含有文本的标签*/
CSS选择器之伪元素选择器
通过css代码来操作标签的文本内容
1.修改首个字体样式
p:first-letter {
font-size: 36px;
color: aqua;
}
2.在文本开头添加内容(添加的内容不可选中)
p:before {
content: "好想出去玩呀";
color: red;
}
3.在文本末尾添加内容(添加的内容不可选中)
p:after {
content: "嘿嘿嘿";
color: coral;
}
伪元素选择器可以用在解决标签浮动所带来的的负面影响 也可以用来做数据的防爬
CSS选择器优先级
当多个选择器查找到相同的标签修改不同的样式 那么标签该听谁的
1.选择器相同 引入位置不同
就近原则
2.选择器不同的情况下
行内 > id选择器 > 类选择器 > 标签选择器
字体样式
1.文字字体
body {
font-family: "微软雅黑";
}
2.文字大小
p {
font-size: 16px;
}
3.字体粗细
p {
font-weight: lighter; /*更粗*/
font-weight: ;bolder /*更细*/
}
4.字体颜色(四种方式)
p {
color: red;
color: rgb(255,1,1);
color: #3e3e3e
color: agba(255,1,1,0.8)
}
"""
获取颜色的方式有很多
微信截图自带取色功能:rgb(255,1,1)
pycharm提供的取色器:左侧色块双击即可
"""
5.文字对齐
p {
text-align:center; /*居中对齐*/
text-align:right; /*右对齐*/
text-align:left; /*左对齐*/
text-align:justify; /*两端对齐*/
}
6.文字装饰
a {
text-decoration: none; /*去除a标签默认的自划线*/
text-decoration: underline; /*下划线*/
text-decoration: overline; /*上边线*/
text-decoration: line-through; /*删除线*/
}
7.首行缩进
p {
text-indent: 32px;
} /*首行缩进32px*/
背景属性
1.背景颜色
background-color: red;
2.背景图片
background-image: url('填写图片地址');
3.背景重复
3.1.background-repeat: repeat(默认):背景图片平铺排满整个网页
3.2.background-repeat: repeat-x:背景图片只在水平方向上平铺
3.3.background-repeat: repeat-y:背景图片只在垂直方向上平铺
3.4.background-repeat: no-repeat:背景图片不平铺
"""
多个属性有相同前缀的时候 一般可以简写
background: blue url('填写图片地址')no-repeat center center
"""
4.背景位置
background-position: left top;
background-attachment: fixed;背景附着(固定)
边框属性
1.边框属性
border-left-color /*边框颜色*/
border-left-width /*边框宽度*/
border-left-style /*边框样式*/
2.统一设置边框
border-left-color: red; /*边框颜色为红色*/
border-left-width: 5px; /*边框宽度5像素*/
border-left-style: dashed /*边框样式dashed*/
"""
只要前缀一样都可以简写
border: 2px solid red; 这样写上下左右全部一样
"""
3.单独设置边框(上下左右不一样)
div {
height: 100px;
width: 600px;
background-color: aqua;
border-left:10px solid red;
border-right:10px solid blue;
border-top:10px solid chartreuse;
border-bottom:10px solid deeppink;
}
"""
none 无边框
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框
"""
4.画圆:border-radius
想要画圆长宽必须保持一样 不是一致则会变成椭圆
p {
height: 400px;
width: 400px;
background-color: aqua;
border-radius: 50%;
}
参数设置成50%就行
display属性
1.display:"none"
隐藏标签 页面不会显示也不会保留位置
2.display:"block"
让标签聚集块儿级标签的特征
3.display:"inline"
让标签聚集行内标签的特征
4.display:"inline-block"
使元素同时具有行内元素和块级元素的特征
5.visibility:"hidden"
同样是隐藏标签 页面不会显示但是会保留位置
标签:span,color,标签,前端,查找,div,选择器,CSS
From: https://www.cnblogs.com/lisony/p/16617966.html