-
表单标签知识补充
1.获取用户输入的标签两大重要的属性
name属性
类似于字典的键
value属性
类似于字典的值
form表单在朝后端发送数据的时候 标签必须要有name 否则不会发送该标签的值
2.获取用户输入的input标签理论上需要有label配合使用
<label for="某个input标签的id值"></label>
3.获取用户输入的input标签也可以添加背景提示
<input type="text" name="password" placeholder="密码">
4.获取用户输入的标签如果不是让用户自己写而是选择 那么标签需要自己写value
<input type="radio" name="gender" value="male">男
<input type="checkbox" name="hobby" value="basketball">篮球
<select name="province" id="">
<option value="sh">上海</option>
</select>
5.针对radio和checkbox可以默认选中
checked="checked" 如果属性名和属性值相等 那么可以简写 checked
6.针对option标签也可以默认选中
selected="selected" 简写为 selected
-
CSS知识
一.CSS语法结构编写方式
1.调整标签样式
2.语法结构
选择器 {
属性名1:属性值1;
属性名2:属性值2;
}
3.注释语法
/*注释内容*/
4.三种编写CSS的方式
1.head中style标签内部直接编写(学习阶段使用 方便)
2.head中link标签引入外部css文件(最正规)
3.直接在标签内部通过style属性编写(不推荐)
二.CSS选择器
基本选择器
标签选择器：
直接编写标签名来查找标签
div {
color: green; /*查找所有的div标签 并将内部的文本颜色变为绿色*/
}
类选择器：
通过编写class的值来查找标签
.c1 {
color:red; /*查找所有class属性中含有c1的标签 并将内部的文本颜色变为红色*/
}
id选择器:
通过编写id的值来精准查找标签
#d1 {
color: aquamarine; /*查找id值是d1的标签 并将内部的文本颜色改为天青色*/
}
通用选择器:
查找所有的标签
* {
color: blue; /*查找所有的标签 并将内部的文本颜色改为蓝色*/
}
组合选择器
后代选择器：
查找div标签内部所有的span(后代)，两个选择器之间空格隔开 查找前面选择器获取到的标签内部所有符合空格后面选择器要求的标签
#d1 span {
color: blue;
}
儿子选择器：
查找div标签内部所有的儿子span，两个选择器之间大于号隔开 查找前面选择器获取到的标签内部第一层级符合大于号后面选择器要求的标签
#d1>span {
color: orange;
}
毗邻选择器：
查找div标签同级别下面紧挨着的一个span标签(弟弟)
#d1+span {
color: red;
}
弟弟选择器：
查找div标签同级别下面所有的span标签(弟弟们)
#d1~span {
color: blue;
}
CSS属性选择器
"""
所有的标签除了有自己默认的属性之外 还可以拥有自定义的任意属性
默认属性 id class
自定义属性 x=1 y=2
"""
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
CSS选择器之分组与嵌套
当多个选择器查找到的标签需要调整相同的样式 那么可以合并
div,p,span {
color: red;
}
并且合并的选择器彼此不干扰也没有类型的限制
#d1,.c1,span {
color: red;
}
还可以在选择器基础之上添加额外的选择使得查找更精确
span.c1
div#d1
CSS选择器之伪类选择器
"""
补充知识
a标签默认的颜色有两种 紫色跟蓝色
紫色:链接地址已经被点击过了
蓝色:链接地址从来没有点击过
"""
/* 鼠标移动到链接上 */
a:hover {
color: #FF00FF
}
鼠标悬浮上去之后样式改变 适用于所有含有文本的标签
/* 选定的链接 */
a:active {
color: #0000FF
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
/*input输入框获取焦点时样式*/
input:focus {
outline: none;
background-color: #eee;
}
View Code
CSS选择器之伪元素选择器
伪元素选择器可以用在解决标签浮动所带来的的负面影响 也可以用来做数据的防爬
first_letter:
常用的给首字母设置特殊样式
p:first-letter {
font-size: 48px;
color: red;
}
before:
在每个<p>元素之前插入内容
p:before {
content:"今天会下雨";
color:red;
}
after：
在每个<p>元素之后插入内容
p:after {
content:"你说得对";
color:blue;
}
css选择器优先级
"""
当多个选择器查找到相同的标签修改不同的样式 那么标签该听谁的
"""
1.选择器相同 引入位置不同
就近原则
2.选择器不同的情况
行内 > id选择器 > 类选择器 > 标签选择器
-
css属性
一.字体属性
width属性可以为元素设置宽度。 height属性可以为元素设置高度。 块级标签才能设置宽度，行内标签的宽度由内容来决定
字体样式
CSS 使用 font family属性定义文本的字体系列
body {
font-family: "微软雅黑";
}
字体大小
CSS 使用 font-size 属性定义字体大小
p {
font-size: 16px;
}
字体粗细
CSS 使用 font-weight 属性设置文本字体的粗细
p {
font-weight:lighter;
}
常用属性值：
| 值 | 说明 |
| normal | 默认值，标准粗细 |
| bold | 粗体 |
| bolder | 更粗 |
| lighter | 更细 |
| 100~900 | 设置具体粗细，400等同于normal，而700等同于bold |
| inherit | 继承父元素字体的粗细值 |
文字对齐：
text-align 属性规定元素中的文本的水平对齐方式
center 居中对齐
left 向左对齐（默认）
right 向右对齐
文字装饰：
text-decoration 属性用来给文字添加特殊效果
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。
常用的去掉a标签默认的自划线：
a {
text-decoration: none;
}
二.背景边框属性
背景颜色
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/
简写：background:#336699 url('1.png') no-repeat left top;
边框属性
属性： border-width border-style border-color 样式（style）： none 无边框。 dotted 点状虚线边框。 dashed 矩形虚线边框。 solid 实线边框。
border-radius
用这个属性能实现圆角边框的效果。
将border-radius设置为长或高的一半即可得到一个圆形。
display:none:
可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
标签：color,标签,查找,选择器,CSS,属性 From： https://www.cnblogs.com/tai-yang77/p/16616549.html