前端（2）CSS

css：
Cascading Style Sheet 层叠样式表——修饰、美化网页，化妆师
CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。
行间样式 > 内嵌css样式 > 外链css样式（在style之前引入）
如果外链css样式在style之后引入，则外链css样式覆盖内嵌css样式，谁在后面以谁为准。
行间样式直接写在标签里：

<div style=" 100px;height: 100px;background: bisque"></div>

内嵌css样式写在head的style里：

<style>
div{
　　width: 100px;
　　height: 100px;
　　background: red;
}
</style>

外链css样式：

通过link标签，引用一个外部的css文件

<link rel="stylesheet" href="index.css">

基本选择器：

<style>
/* *通配符选择器 匹配任何元素 */
*{
　　margin: 0;
　　padding: 0;
}
/*元素选择器 选择相同的元素对相同的元素设置一种css样式选中页面中所有的此元素*/
div{
　　width: 100px;
　　height: 100px;
　　background: red;
}
/* id选择器 给标签设置一个id属性，在写样式时，在id名字前面加个 # */
#box{
　　width: 150px;
　　height: 150px;
　　background: bisque;
}
/* class选择器 给标签设置一个class属性，在写样式时，在class名字前面加个.一般给具有相同属性的元素设置同一个class */
.box{
　　width: 120px;
　　height: 120px;
　　background: blueviolet;
}
</style>

复杂选择器：

<style>
/* 群组选择器 对几个有相同属性的选择器进行样式设置 两个选择器之间必须用逗号隔开*/
div,p{
　　width: 120px;
　　height: 120px;
　　background: bisque;
}
/* ~ 兄弟选择器 操作的对象是该元素下的所有兄弟元素*/
div ~ p{
　　width: 100px;
　　height: 100px;
　　background: blueviolet;
}

/* > 子代选择器 选择某个元素下面的子元素*/
div > div{
　　width: 50px;
　　height: 50px;
　　background: blue;
}

/* + 相邻选择器操作的对象是该元素的同级元素选择div相邻的下一个兄弟元素选择到紧随目标元素后的第一个元素*/
div + p{
　　width: 100px;
　　background: blueviolet;
　　height: 100px;
}
</style>

后代选择器：

<style>
li{
/*去掉li标签前面的东西*/
/*list-style: none;*/
　　width: 50px;
　　height: 50px;
　　background: bisque;
}
div ol li{
　　list-style: none;
}
</style>    

伪类选择器：

<style>
/*LoVe HAte*/
a:link{/*link 未被点击的链接*/
　　color: red;
}
a:visited{/*已被点击的链接*/
　　color: blueviolet;
}
a:hover{/*鼠标悬停其上的元素 这个一定要掌握*/
　　color: yellowgreen;
}
a:active{/*鼠标已经再其上按下但是还没有释放的元素*/
　　color: aqua;
}
div{
　　width: 100px;
　　height: 100px;
　　background: bisque;
}
div:hover{ /*改变的是div本身*/
　　background: blueviolet;
　　cursor: pointer;/*手指*/
　　cursor: help;/*帮助*/
　　cursor: wait;/*等待*/
　　cursor: default;/*默认*/
}
div:hover p{ !*改变的是p*!
　　width: 50px;
　　height: 50px;
　　background: blue;
}
a:link,a:visited,a:hover,a:active{
　　color: blue;
　　cursor: pointer;
　　/*去掉下划线*/
　　text-decoration: none;
}
</style>

选择器优先级：

1.先比id(最高位)   class（中间位） tagName（个数位）
　　　　1　　　　 2 　　　　　　 3
2.id选择器个数不相等，id越多，优先级越高
3.id选择器个数相同,则看class,class多的优先级高
4.class个数相等，就看tagName个数