CSS常用选择器

CSS概述
CSS: 全称层叠样式表（Cascading Style Sheets），作用是美化HTML标签，让HTML标签有更多的丰富展示样式。 css代码的语法：属性名:值;

为什么要使用CSS？
使用CSS是为了解耦，有的HTML标签，带有样式，但是样式又不够丰富，不能满足我们的要求。CSS有大量的样式属性，能够满足我们的要求，那也就是说，HTML标签，只需要定义网页元素，至于这个HMTL标签的展示样式，全交由CSS来控制。

CSS与HTML 结合的方式

1. 内联样式：将CSS代码写到标签的内部，CSS样式就会作用到该标签上，确定就是，CSS代码没有复用性，书写凌乱，语法

<style type="text/css">
			CSS代码
		</style>

2. 内部样式：将CSS代码单独写在页面内部，通过选择器，选择一个或多个标签，进行样式的控制，好处就是提高了CSS代码的复用性。缺点：他一次只能控制一个HTML页面中HTML元素的样式。
3. 在head标签里面定义 style标签，style标签里面就可以书写CSS代码，对一个或多个标签，进行样式的控制
   外部样式：将CSS代码单独写在一个文件中，哪个页面，想要用这个样式，就可以引用该样式，复用性更高，一次可以控制一个或多个HTML页面的展示样式，开发首选。

选择器
选择器：选择标签的一种语法

id选择器
一次选中一个标签；每个标签的 id属性值是唯一的，不能重复。id选择器前面有”#”
eg:

#d2{
			background-color: brown;
			width: 100%;
			height: 100;
			font-size: 20mm;
		}

Class选择器（类选择器）
一次选中一类
class 选择器，前面有个”.”，记得添加
class属性值一样，那就归为一类
eg:

.one{
		color: aqua;
		background-color: darkblue;
		font-size: large;
	}

标签选择器
标签名选择器就是对一种标签进行选择，设计此种标签的样式。
eg:

button{
			color: green;
			background-color: #00FFFF;
			font-size: 10mm;
		}

包含选择器
包含选择器指的是一个标签中嵌套一个标签，对子标签进行选择
eg:

#d2 ul li a {
color: darkslategray;
}

并列选择器
把要添加的格式的名字用逗号隔开，写在一起，就是并列选择器。并列选择器可以同时选择多个标签，方便开发者修改属性
eg：

h1,span,h6{
				color: #00008B;
				background-color: #00FFFF;
				font-size: 15mm;
			}

通配符选择器

1. 全局通配 对全局内容进行选择
   eg：

   *{
   				background-color: #00FFFF;
   				color: #00008B;
   				font-size: 20mm; 			} ```
   

2. 局部通配 对全局内容进行选择
   eg：

   div{ 			background-color: #B22222; 			font-size: 10mm; 	}
   

注： 全局通配和局部通配冲突，应该按照局部为主

伪类选择器
针对a标签的四种状态，提供的四种伪类选择器

1. 链接状态:link
2. 鼠标悬浮:hover
3. 鼠标按下:active
4. 链接访问过后:visited

注：可以去掉a标签默认的下划线 :text-decoration: none;
eg：

<style type="text/css">
		*{
			font-size: 10mm;
		}
		
			#a :link{
				color: darkgoldenrod;
				text-decoration: none;
			}
			#a:hover{
				color: #00FFFF;
				font-size: larger;
				text-decoration: none;
			}
			#a:active{
				color: #B22222;
				text-decoration: none;
			}
			#a:visited{
				color: grey;
				text-decoration: none;
			}
		</style>

选择器优先级：
多个选择器选中了同一个标签，他们控制样式，如果没有冲突，那就叠加生效
如果控制的属性有冲突时，按照选择器的优先级来定：
优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
优先级相同的，按照代码的上下顺序，后面的就会覆盖前面的
注：!important 让样式的优先级最高

样式具有继承性，子类元素会继承父类的样式
层叠性：多个样式叠加生效
继承性：子类元素会继承父类元素的样式

定位方式
position: 元素的定位方式
relative 相对定位
absolute; 绝对定位

relative 相对定位时,设置元素的间距时
eg：

	margin-left: 50px;
	margin-top: 100px;
	margin-right: 200px;
	margin-bottom: 500px;

页面的原点位置，在页面的左上角，那第一个元素，一定会去原点位置
元素默认的定位方式，用的是相对定位

• 相对定位：第一个元素参照原点位置，后面的元素参照上一个元素

• 绝对定位：所有元素都参照原点位置

绝对定位，设置距离原点的位置
eg：

 top:450px;
		 left:130px;
		 bottom: ;
		 right: ;

去掉页面的预留间距
margin: 0;
去掉所有元素自带的内间距
padding: 0;
px(pixel 像素)