内容概览

• 表单标签知识补充
• CSS层叠样式表
• CSS选择器
• 字体样式
• 背景属性
• 边框属性
• display属性

表单标签知识补充

1. 获取用户输入的标签两大重要的属性
   name属性：类似于字典的键
   value属性：类似于字典的值
   form表单往后端发送数据的时候，标签必须要有name，否则不会发送该标签的值
2. 获取用户输入的input标签理论上需要有label配合使用

   <label for="input的id值">label>
   <input type="text" name="" id="">
   
   1
   2
   3

3. 获取用户输入的input标签可以添加背景提示

   <input type="text" name="username" placeholder="用户名">
   1

4. 获取用户输入的标签如果不会让用户传入值，那么value值需要提前填写

   <input type="radio" name="gender" value="male">男
   <input type="checkbox" name="hobby" value="basketball">篮球
   <select name="province">
   	<option value="sh">上海option>
   select>
   
   1
   2
   3
   4
   5
   6
   7

5. 针对radio和checkbox可以默认选中

   <input type="radio" name="gender" value="male" checked="checked">男
   <input type="radio" name="gender" value="female">女
   
   1
   2
   3

6. 针对select也可以默认选中

   <select name="province">
   	<option value="bj">北京option>
   	<option value="sh" selected>上海option>
   select>
   
   1
   2
   3
   4
   5

CSS层叠样式表

1. 调整标签样式
2. 语法结构
   选择器 {
   属性名1:属性值1;
   属性名2:属性值2;
   }
3. 注释语法
   /*注释*/
4. 三种编写CSS的方式
   1. head中style标签内部编写
   2. head中link标签引入外部文件(最正规)
   3. 直接在标签内部通过style属性编写(不推荐)

CSS选择器

基本选择器

1. 标签选择器
div {
	color: green;  /*查找所有div标签,并将字体改为绿色*/
}

2. 类选择器
.c1 {
	color: red;  /*查找所有class属性中含有c1的标签,并将字体改为红色*/
}

3. id选择器
#d1 {
	color: blue;  /*查找到id值为d1的标签,并将字体改为蓝色*/
}

4. 通用选择器
* {
	color: yellow;  /*查找所有标签,并将字体改为黄色*/
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

组合选择器

1. 标签之间的关系：
   • 后代：当前标签内嵌套的所有标签
   • 儿子：当前标签内嵌套的第一层标签
   • 毗邻：当前标签同级别的下边第一个标签
   • 弟弟：当前标签同级别的下边所有标签
2. 组合选择器

   <div id="d1">
   	<p>儿子
   		<span>后代span>
   	p>
   	<span>儿子span>
   div>
   <p>毗邻p>
   <span>弟弟span>
   1. 后代选择器:两个选择器之间空格隔开,查找前边选择器获取到的标签内部所有符合后边选择器条件的标签
   <style>
   	#d1 span {
   		color: blue;
   	}
   style>
   2. 儿子选择器:两个选择器之间大于号隔开,查找前边选择器获取到的标签内部下第一层符合后边选择器条件的标签
   <style>
   	#d1>span {
   		color: orange;
   	}
   style>
   3. 毗邻选择器:两个选择器之间加号隔开,查找前边选择器获取到的标签下紧挨着的第一个标签,而且该标签要符合后边选择器的条件
   <style>
   	#d1+p{
   		color: red;
   	}
   style>
   4. 弟弟选择器:两个选择器之间波浪号隔开,查找前边选择器获取到的标签下边所有符合后边选择器条件的标签
   <style>
   	#d1~span {
   		color: blue;
   	}
   style>
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32

属性选择器

所有的标签除了有本身默认的属性之外，还可以拥有自定义的任意属性
默认属性：id、class
自定义属性：a=1、b=2

<style>
1. 查找含有name属性的标签,并修改背景颜色
		[name] {
			background-color: red;
		}
2. 查找含有name属性并且值是username的标签,并修改背景颜色
		[name="username"] {
			background-color: orange;
		}
3. 查找input标签,并且含有属性名name值为username,修改背景颜色
		input[name="username"] {
			background-color: aqua;
		}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

分组与嵌套

当多个选择器查找到的标签需要调整同样的样式，那么可以合并简写

div,p,span {
	color: red;
}
1
2
3

合并的选择器彼此互不干扰，可以使用任意类型

#d1,.c1,span {
	color: red;
}
1
2
3

可以在选择器的基础上添加额外的条件，让查找更精确

span.c1 {  /*查找所有span标签,class中有c1的标签*/
	color: red;
}
1
2
3

伪选择器

a标签默认有两种颜色，紫色和蓝色
紫色是访问过的链接地址
蓝色是没有访问过的链接地址

1. 没有访问过的链接
a:link {
	color: darkgoldenrod;
}
2. 鼠标悬停在链接上
a:hover {
	color: azure;
}
3. 点击链接时
a:active {
	color: blank;
}
4. 已访问过的链接
a:visited {
	color: darkgreen;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

伪元素选择器

通过css代码来操作标签的文本内容

p:first-letter {
	font-size: 48px;
	color: red;
}  /*将p标签中第一个字修改字体大小,并修改为红色*/
p:before {
	content:"p标签之前插入内容";
	color: red;
}
p:after {
	content:"p标签之后插入内容";
	color: red;
}
/*伪元素选择器可以用在解决标签浮动所带来的负面影响,也可以用来做数据的防爬*/
1
2
3
4
5
6
7
8
9
10
11
12
13

选择器优先级

1. 当选择器相同，引入位置不同时
   按照执行顺序，最终结果为最后执行的命令修改
2. 当选择器不同，引入位置相同时
   id选择器>类选择器>标签选择器

行内样式优先级最高
!important可强制修改标签样式，但不推荐使用

字体样式

width属性可以设置元素宽度
height属性可以设置元素高度
块级标签才能够修改，行内标签完全由内容决定

1. 字体属性

   1. 字体
   body {
   	font-family: "微软雅黑"
   }  /*修改body内的字体*/
   2. 字体大小
   p {
   	font-size: 14px;
   }  /*修改p标签内字体大小*/
   3. 字体粗细
   p {
   	font-weight: lighter;
   }  /*将p标签内字体修改为更细的字体*/
   4. 字体颜色
   p {
   	color: red;
   	color: rgb(51,51,51);
   	color: #333333;
   }
   /*修改字体颜色除了可以直接使用英文,还可以使用RGB三原色、十六进制值
   还有rgba,第四个值控制的是透明度,范围从0.0-1.0*/
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20

   值	描述
   normal	默认值，标准粗细
   bold	粗体
   bolder	更粗
   lighter	更细
   100~900	设置具体粗细，400等同于normal，而700等同于bold

2. 文字属性

   3. 文字对齐
   p {
   	text-align:center;
   }  /*将文字居中*/
   4. 文字装饰
   a {
   	text-decoration: none;
   }  /*使a标签不使用下划线作为装饰*/
   5. 首行缩进
   p {
   	text-indent: 32px;
   }  /*首行缩进32个像素,一个字默认大小为16像素*/
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12

   值	描述
   left	左边对齐 默认值
   right	右对齐
   center	居中对齐
   none	默认，定义标准的文本
   underline	定义文本下的一条线
   overline	定义文本上的一条线
   line-through	定义穿过文本下的一条线

背景属性

1. 背景颜色
div {
	background-color: red;
}
2. 背景图片
div {
	background-image: url(图片地址);
}
/*
背景图片如果大小比标签背景小,默认会重复平铺满整个区域
repeat(默认)：图片平铺排满整个网页
repeat-x：图片只在水平方向上铺满
repeat-y：图片只在垂直方向上铺满
no-repeat：图片不平铺
*/
3. 背景位置
div {
	background-position: center;
}
4. 简写
div {
	background: #333333 url("1.jpg") no-repeat lift top
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

边框属性

#d1 {
	border-width: 2px;  /*边框宽度*/
	border-style: solid;  /*边框类型*/
	border-color: red;  /*边框颜色*/
}
简写：
	border: 2px solid red;

单独设置指定边框
#d1 {
	border-left-color: red;
	border-top-color: bule:
	border-right-color: blank;
	border-bottom-color: green;
}

border-radius
用这个属性可以实现圆角边框的效果
	border-radius: 50%;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

display属性

用于控制HTML元素的显示效果

1. 隐藏标签
div {
	display: "none"
}
2. 使行内标签具备块级标签特性
span {
	display: "block"
}
3. 使块级标签具备行内标签特性
div {
	display: "inline"
}
4. 使标签同时具有行内标签与块级标签的特点
div {
	display: "inline-block"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16