前端（2）CSS

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

<div style="width: 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>