css的三种使用方式
1.行内样式。不推荐使用。如果只有这么一个的话要改变样式，偷懒也可以。
2内部样式表。放在head标签里面的
3.外部样式表。（推荐）分离样式。
外部引用CSS的两种方式
1.外部引用css（建议采用外部引用的方式）
<link rel="stylesheet" href="css/style.css">
- 外部引用CSS的优势。内容和表现分离。
- 网页结构比较统一，可以实现复用。
- 样式十分丰富。
- 建立使用独立于HTML的CSS文件。
- 利用SEO容易被搜索引擎收录。
2.导入式 这个是CSS2.1之后特有的。
<style>
@import url("链接url")
</style>
优先级：行内样式>内部样式表>外部样式表。也就是，就近原则。
第一部分基础选择器。
CSS的选择器。一共有三种。
作用:选择页面中的某一个或者某一类元素。
基本选择器
h1{
1.标签选择器。
选中所有的h1标签元素。
}
class="name"
.name{
类选择器。优点是可以跨标签。
可以多个标签归类，属于同一个class。
}
#id名{
3.id选择器。Id必须全局唯一。
id="id名"
}
优先级：Id选择器>类选择器>标签选择器。
第二部分层次选择器。
层次选择器不改变自己。
body p{
1.后代选择器。body下所有p标签
}
p>a{
2.子选择器，p标签的子类标签
}
.active + p{
3.相邻兄弟选择器。只有向下的邻居会发生变化。
class下面的第一个p标签才会发生变化。
}
.active~p{
4.通用选择器
当前选中元素的向下的所有的兄弟元素。
}
css style以分号为结尾
伪类选择器
结构 伪类选择器带冒号的一般都是伪类
ul li:first-child{
选中ul列表的第一个元素
}
ul li:last-child{
选中列表的最后一个元素。
}
p:nth-child(1){
选择当前p元素的父级元素。选中父级元素的第一个，并且是当前元素才生效。
}
p:nth-type(2){
选中父元素下的，p元素的第二个类型。
}
a:hover{
鼠标悬停时，a标签会产生变化
}
属性选择器，可以支持正则表达式。
a[id=first,class="links"]{<--!属性选择器可以选择多个参数-->
可以选择a标签，Id为多少多少的
}
a[class="links"]{
这里是绝对的。必须等于links才能够改变。
}
a[class*="links"]{
这里是相对的。包含links都能够改变。
}
a[class$="links"]{
祝你选中以links为结尾的class
}
美化网页
span标签，约定俗成，很重要的元素都放在里面。