By Moment Only

更新日期:

文章目录
  1. 1. CSS
    1. 1.1. CSS入门
      1. 1.1.1. 为什么学习CSS(CSS的作用)
      2. 1.1.2. 什么是CSS(CSS的概念)
    2. 1.2. CSS引入
    3. 1.3. 选择器
      1. 1.3.1. 通用选择器
      2. 1.3.2. 元素选择器
      3. 1.3.3. id选择器
      4. 1.3.4. 类选择器
      5. 1.3.5. 选择器的优先级
      6. 1.3.6. 其他选择器
        1. 1.3.6.1. 后代选择器
        2. 1.3.6.2. 兄弟选择器
        3. 1.3.6.3. 伪类选择器
    4. 1.4. 常用的属性
      1. 1.4.1. 常用的属性1
      2. 1.4.2. 常用的属性2
    5. 1.5. 定位
    6. 1.6. 盒子模型
  2. 2. CSS3
    1. 2.1. 新增选择器
      1. 2.1.1. 伪类选择器，伪对象选择器
      2. 2.1.2. 属性选择器
    2. 2.2. 新增属性

CSS

CSS入门

为什么学习CSS(CSS的作用)

​ 【1】HTML 虽然可以在一定程度上修饰页面，但是页面的整体还是不够美观

​ 【2】HTML 进行网页的书写重复的代码比较多，后期的维 护性不好。

什么是CSS(CSS的概念)

​ 英文全称：Cascading Style Sheets

​ 层叠样式表（级联样式表）

CSS引入

​ CSS的引入的三种方式

    <!--     
        CSS引入方式的顺序，就近原则
     -->
     <link rel="stylesheet" type="text/css" href="css/css1.css"/>
    <style>
        /*p代表标签的名称*/
        p{
            /*字体颜色*/
            color: yellow;
            /*字体大小*/
            font-size: 25px;
            /*字体加粗*/
            font-weight: bold;
        }

    </style>
    <!-- 外部式（链接式） rel:引入的文件和当前文件的关系
                        type:引入类型
                        href:引入文件的
     -->

    <!-- <style>
        /**导入式(了解即可)*/
        @import url("css/css1.css");

    </style> -->
</head>
<body>
    <!-- 1.行内形式  键：值-->
    <!-- <p style="color: red;">我们不一样</p> -->
    <!-- 内嵌形式 -->
    <!-- <p>我们不一样</p>
    <p>我们不一样</p> -->
    <p>我们不一样</p>
</body>

外部css

1
2
3
4
5
6
7
8
9
p{
	/**字体的风格*/
	font-family: 宋体;
	
	/**字体的样式*/
	font-style: italic;
	
	color: green;
}

CSS引入方式的顺序，就近原则，跟随最近的加载的引入

选择器

通用选择器

/**通用选择器,代表该页面中所有元素*/
        *{
            color: red;
            background-color: black;
        }

元素选择器

1
2
3
4
5
6
7
8
/**元素选择器*/
div{
    width: 200px;
    height: 200px;
    background: blue;
    /**边框的粗细:1px   边框的风格:solid 边框的颜色*/
    border: 1px solid red;
}

id选择器

1
2
3
4
5
6
/* id选择器，#后加id名,id的名称保证唯一，
						id的命名: 由数字、字母、下划线、中划线组成，不能以数字开头
*/
#div1{
	background: green;
}

类选择器

1
2
3
4
/* 类选择器 */
.div_1{		
    background: pink;
}

选择器的优先级

​ id选择器>类选择器>元素选择器>通用选择器
权重： 100 10 1 0
​

其他选择器

可以使用任意组合（元素选择器，id选择器,类选择器）

后代选择器

1
2
3
4
5
6
7
8
/**后代选择器:只要包含该标签对象即可

*/
div span{
	font-size: 27px;
	font-family: 宋体;
	color: green;
}

​ 子选择器

​ 

1
2
3
4
/**子选择器：直系子标签*/
div>span{
 color: red;
}

兄弟选择器

​ 

1
2
3
4
5
6
7
8
9
/**兄弟选择器:只会改变下面相邻的元素对象*/
 #p_1+p{
	color: #0000FF;
}
/**兄弟选择器后面所有的兄弟对象都改变*/
#p_1~p{
	color: red;
	font-size: 30px;
}

伪类选择器

1
2
3
4
/**伪类选择器**/
a:hover{ /*hover:鼠标放上*/
	color: red;
}

常用的属性

常用的属性1

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.top{
			width: 100%;
			height: 100px;
			border: 1px solid red;
		}
		.top_a{
			/**字体颜色*/
			color: gray;
			/**字体大小*/
			font-size: 12px;
			/*字体的加粗*/
			/* font-weight: bold; */
			/**字体的风格*/
			/* font-family: 宋体; */
			/**字体的样式*/
			font-style: italic;
			
			/**去除下划线*/
			text-decoration: none;
		}
		
		a:hover{
			color: red;
			/**下划线展示*/
			text-decoration: underline;
		}
		.tips{
			width: 100%;
			height: 40px;
			border: 1px dotted indigo;
			background-color: pink;
			/**文本居中*/
			text-align: center;
			/**行高： 行高的高度和div外面的高度一致，这时里面的内容就会垂直居中*/
			line-height: 40px;
		}
		.center{
			width: 100%;
			height: 500px;
			border: 1px solid red;
			/**设置背景图片*/
			background-image: url("http://img13.360buyimg.com/da/jfs/t1/43308/30/8709/99646/5d22e91dE4a7f5729/6b8ea2cf39afcbd1.jpg");
			/**设置背景图片不重复*/
			background-repeat: no-repeat;
			/**调整背景图片的位置   x值    y值*/
			background-position: center;
			/*调整背景图片的大小 宽    高*/
			/* background-size: 1200px 500px; */
			/**背景颜色  或者使用rgb(255,0,0)*/
			background-color: #37cef5;
			/**rgba()最后的.1是透明度*/
			/* background-color: rgba(255,0,0,.1); */
		}
	</style>
	<body>
		<!-- 顶部的位置 -->
		<div class="top">
			<a href="" class="top_a">登录页面，调查问卷</a>
		</div>
		<!-- 中间的提示 -->
		<div class="tips">
			<span>根据网络安全法，为保障您的账号安全，请完成手机号验证</span>
		</div>
		<!-- 中间位置 -->
		<div class="center">
			
		</div>
	</body>
</html>

常用的属性2

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div_1{
				width: 200px;
				height: 200px;
				background: rgba(255, 0, 0);
				color: rgba(0,0,255);
				/**调整透明度（0-1）*/
				opacity: 0.4;
				
				/**超出：hidden隐藏  auto：自动*/
				overflow: hidden;
			}
			#span_1{
				width: 100px;
				height: 100px;
				color: red;
				border: 1px solid red;
				
				/**显示： 行内元素转换成块元素 行内元素：inline  块元素:block
						none：隐藏
				*/
				display: block;
			}
			ul{
				/*向右浮动*/
				float: right;
			}
			li{
				/*列表的风格去除*/
				list-style: none;
				/**向左浮动*/
				float: left;
				/*内边距*/
				padding-left: 15px;
			}
		</style>
	</head>
	
	<body>
		<ul>
			<li><a href="">新闻</a></li>
			<li><a href="">hao123</a></li>
			<li><a href="">地图</a></li>
			<li><a href="">视频</a></li>
			<li><a href="">贴吧</a></li>
			<li><a href="">学术</a></li>
		</ul>
		<hr />
		<!-- 
			行内元素：多个标签位于同一行
				span,font,小标签
			块元素：标签可以自动换行
					div, h1-h6, ul, p
		 
		 -->
		<div class="div_1">
			我们都是div我们都是div我们都是div
			我们都是div我们都是div
			我们都是div我们都是div
			我们都是div我们都是div我们都是div
			我们都是div我们都是div
			我们都是div我们都是div
			我们都是div我们都是div我们都是div
			我们都是div我们都是div
			我们都是div我们都是div我们都是div我们都是div我们都是div
			我们都是div我们都是div
			我们都是div我们都是div
		</div>
		<hr />
		01<span id="span_1">234</span>56
	</body>
</html>

定位

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
33
34
35
36
37
38
39
/** 绝对定位 
				absolute:定位离开之后释放的之前的位置   基于外层父级标签
			相对定位
				relative:定位离开之后不释放之前的位置   基于之前的位置来说
			固定定位
				fixed:始终是居于浏览器的左上角的定位，   适合做广告
			默认定位
				static:初始的定位位置
		 */
		.div_1{
			width: 200px;
			height: 200px;
			background-color: red;
			/* 绝对定位 */
			/* position: absolute;
			top: 300px;
			left: 300px; */
			/* 相对定位 */
			/* position: relative;
			top: 300px;
			left: 300px; */
			/**固定定位*/
			position: fixed;
			top: 150px;
			left: 150px;
			
			/**置于底层*/
			z-index: -1;
		}
		.div_2{
			width: 200px;
			height: 200px;
			background-color: green;
			/**相对定位：基于之前的位置*/
			/* position: relative;
			top: 300px;
			left: 300px; */	
		}
	</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
33
34
35
36
37
38
39
40
<style type="text/css">
			/**清除body和html标签的边距**/
			body,html{
				margin: 0px;
				padding: 0px;
			}
			.div_1{
				width: 300px;
				height: 300px;
				background-color: red;
				/* 内边距 真实div与border之间的距离
						 30px是上下的距离，50px是指左右的距离
						 指定四个值：上右下左
						 padding-left: 30px;在一个方向加
				*/
				/* padding: 30px 50px; */
				/* padding-left: 30px; */
				/* 外边距 给盒子进行定位*/
				/* margin: 50px; */
				/* margin-left: 100px;
				margin-top: 70px; */
				
				margin-bottom: 40px;
				
				margin-right: 40px;
			}
			.div_2{
				width: 300px;
				height: 300px;
				background-color: green;
				
				/* 外边距 垂直的方向会取较大的值 */
				margin-top: 70px;
				/* 外边距 水平方向会合并 */
				margin-left: 50px;
			}
			div{
				float: left;
			}
		</style>

CSS3

新增选择器

伪类选择器，伪对象选择器

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<style type="text/css">
			/* 获取class名称是div_1下面的第一个子元素 */
			.div_1>p:first-child{
				color: red;
			}
			.div_1>p:last-child{
				color: blueviolet;
			}
			/**获得具体的某一个子元素*/
			/* .div_1>p:nth-child(4){
				color: brown;
			} */
			/* 单双行 even:双   odd:单*/
			/* .div_1>p:nth-child(even){
				background-color: red;
			}
			.div_1>p:nth-child(odd){
				background-color: green;
			} */
			/* 获得空的元素对象 */
			.div_1>p:empty{
				height: 50px;
				background-color: #8A2BE2;
			}
			/* 获得焦点执行的样式 */
			/* input:focus{
				width: 300px;
				height: 300px;
			} */
			input:checked{
				width: 20px;
				height: 20px;
			}
		</style>
	</head>
	<body>
		<div class="div_1">
			<p>1</p>
			<p>2</p>
			<p>3</p>
			<p></p>
			<p>4</p>
			<p>5</p>
		</div>
		<hr />
		<input type="text" />
		<hr />
		男:<input type="radio" name="sex"/>
		女:<input type="radio" name="sex" />
	</body>

属性选择器

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
33
34
35
36
37
38
39
40
<style type="text/css">
			/* 属性选择器 可以操作任意有属性的标签*/
			/* input[type=text]{
				width: 300px;
				height: 30px;
			} */
			/* 属性  ^用fom开头的  $用结尾 */
			input[name^=fom]{
				width: 300px;
				height: 30px;
			}
			
		</style>
	</head>
	<body>
		<!-- 选择器的种类
				1)基础选择器
					*    id   class  标签  .....
				2)关系选择器
					>   +   ~   .......
				3)伪类选择器
					hover   .........
				4)伪对象选择器 
					before   after  .......
				4)属性选择器
					input[type=text]  ......
		 -->
		<p>
			账号：<input type="text" name="fom_zh"/>
		</p>
		<p>
			密码：<input type="password" name="fom_pwd"/>
		</p>
		<p>
			邮箱：<input type="email" name="fom_email"/>
		</p>
		<p>
			年龄：<input type="number" name="age" />
		</p>
	</body>

新增属性

​ 

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
body{
		background-color: pink;
			}
			.cen{
				width: 200px;
				height: 200px;
				background-color: red;
				/* 阴影
					参数值：水平偏移  垂直偏移 模糊度(值越大越模糊) 颜色 
				 */
				box-shadow: 0px 0px 70px red;
				/* 调用动画 */
				/* animation: 1s aj infinite; */
			}
			.lef{
				/**倒圆角指令*/
				border-radius: 100px;
				/* 左上右下  右上左下 */
				/* border-radius: 10px 60px; */
				/**左上  右上    右下   左下*/
				/* border-radius: 10px 20px 30px 40px; */
				position: absolute;
				top: 200px;
				left: 200px;
				animation: 1s aj1 infinite;
			}
			.rig{
				border-radius: 100px;
				position: absolute;
				top: 200px;
				left: 341px;
				animation: 1s aj1 infinite;
			}
			.c{
				/* 旋转角度 */
				transform: rotate(45deg);
				position: absolute;
				top: 269px;
				left: 271px;
				/* background-color: black; */
				animation: 1s aj2 infinite;
			}
			div:hover{
				/* 放大的倍数 */
				/* transform: scale(1.3); */
				/* translate（水平位移  垂直位移） */
				/* transform: translate(0px,-50px);
				box-shadow: 0px 0px 70px red; */
				/* skew：2d旋转 */
				/* transform: skew(45deg); */
			}
			/**C3中的动画*/
			@keyframes aj1{
				/* 过程 */
				/* form{}
				to{} */
				/* 百分比指定 */
				0%{transform: scale(1);}
				50%{transform: scale(1.1);}
				100%{transform: scale(1);}
			}
			@keyframes aj2{
				/* 需要旋转 */
				0%{transform: scale(1) rotate(45deg);}
				50%{transform: scale(1.1) rotate(45deg);}
				100%{transform: scale(1) rotate(45deg);}
			}
		</style>
	</head>
	<body>
		<!-- 给class起两个名字 -->
		<div class="cen lef"></div>
		<div class="cen c"></div>
		<div class="cen rig"></div>
	</body>
文章目录
  1. 1. CSS
    1. 1.1. CSS入门
      1. 1.1.1. 为什么学习CSS(CSS的作用)
      2. 1.1.2. 什么是CSS(CSS的概念)
    2. 1.2. CSS引入
    3. 1.3. 选择器
      1. 1.3.1. 通用选择器
      2. 1.3.2. 元素选择器
      3. 1.3.3. id选择器
      4. 1.3.4. 类选择器
      5. 1.3.5. 选择器的优先级
      6. 1.3.6. 其他选择器
        1. 1.3.6.1. 后代选择器
        2. 1.3.6.2. 兄弟选择器
        3. 1.3.6.3. 伪类选择器
    4. 1.4. 常用的属性
      1. 1.4.1. 常用的属性1
      2. 1.4.2. 常用的属性2
    5. 1.5. 定位
    6. 1.6. 盒子模型
  2. 2. CSS3
    1. 2.1. 新增选择器
      1. 2.1.1. 伪类选择器，伪对象选择器
      2. 2.1.2. 属性选择器
    2. 2.2. 新增属性