回顾CSS基础知识

什么是CSS？

层叠样式表语言（不是编程语言，属于样式表语言）
CSS是HTML的一个化妆品，专门用来修饰HTML。
CSS是为HTML服务的，所以HTML是主体，CSS依附于HTML

如何嵌入CSS

1.内联定义 <标签 style=“样式名: 样式值；”></标签>
2. 定义内部样式块 head标签中写 < style type=“text/css”></ style>
3. 链入外部样式文件 head标签中引入< link rel=“stylesheet” type=“text/css” href=" "></ link>
在Web前端开发中，第三种方式最常用

CSS选择器

• 标签选择器
• id选择器
• class选择器

id选择器>class选择器>标签选择器

/*标签选择器，作用于所有此标签*/
div {
样式名:属性值;
样式名:属性值;
样式名:属性值;
}
/*id选择器，只作用于id这个元素，同一个网页中id不可重复*/
#id {
样式名:属性值;
样式名:属性值;
样式名:属性值;
}
/*class选择器，作用于当前网页中某一类标签*/
.class {
样式名:属性值;
样式名:属性值;
样式名:属性值;
}

常见的CSS样式

不需死记样式属性值，查阅CSS相关手册即可，随用随查

/*隐藏*/
div {
	display:none;
	display:block;
}
/*文本装饰样式*/
div {
	text-decoration:underline
	text-decoration:overline
	text-decoration:line-through
	text-decoration:blink;
}
/*列表*/
div {
	list-style-type:none;
	list-style-type:solid;
	list-style-type:circle;
}
/*设置鼠标的悬停效果(hover在使用时:两边不能有空格)*/
span:hover {
	color:red;
	font-size:100px;
}
/*内外补丁，适用于盒子套盒子场景的盒子定位*/
/*<div id="div1">
	<div id="div2">
	</div>
</div> 盒子套盒子*/
#div1 {
	width:300px;
	height:300px;
	blackground-color:#00FFFF;
	border:solid 1px red;
	/*padding-left:20px 打内补丁*/
}
#div2 {
	width:100px;
	height:100px;
	blackground-color:black;
	border:solid 1px red;
	/*在div2这个节点顶部top打一个补丁，这个补丁高位10px*/
	/*margin-top:10px 打外补丁*/
}
/*float浮动效果*/
div {
		float:left;
		float:right;
}
/*定位样式*/
div {
	position:absolute;
	top:300px;
	left:300px;
}
/*光标样式*/
div {
	cursor:pointer;/*变小手样式，尽量不要使用hand有浏览器兼容问题*/
}