本节概要:
一、CSS样式
1、css的使用
2、css选择器
3、css优先级
1、css使用的三种格式：嵌入式，行内式，外链式
2、css选择器：三种开发要求、关系选择器（同伴、子关系、后代关系），伪类选择器，属性选择器
3、css优先级：行间选择器>Id 选择器>class>选择器>标签选择器
一、CSS样式:
在前面的学习当中完成了html基本标签学习，可以把标签放到页面上展示，但是我们没有办法决定标签的样式：
大小
颜色
背景
边框
边距
位置
所以CSS的学习就是为了解决html标签上述的问题。
CSS：层叠样式，层叠就是指多种样式混合到一起，形成一个新的效果。
一个css负责颜色
一个css负责大小
一个css负责位置
一个好看前端标签，至少由一个css负责，也可能是n个css负责。
1、CSS的使用
返回文章顶部CSS的基本格式：
选择器 {
属性: 值；
属性: 值；
}
在html当中，编写CSS有三种格式:
A、行内式CSS 通常用于单独的更改
B、嵌入式CSS 通常用于单个文件的教学或者独立案例
C、外链式CSS 通常用于复杂的样式。
A、行内式CSS
就是在标签内部使用style属性指出样式，所有html标签都有属性
<p style="color:red">
hello world
</p>
B、嵌入式式CSS
嵌入式css样式是在头部使用style标签，然后在标签当中编写css,就算是多个p标签也是红色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
color:red;
}
</style>
</head>
<body>
<p>
hell world
</p>
<p>
222222
</p>
</body>
</html>
A、外链式式CSS
外链式css样式，通过在head部分使用link标签链接外部的css文件实现样式
新建一个html文件，再新建一个css文件html文件代码:
<!DOCTYPE html> <!-- 新建的html文件-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="外链式钥匙.css"> <!--rel 指得是文件类型即css文件 href指css路径-->
</head>
<body>
<p>
hell world
</p>
<p>
222222
</p>
</body>
</html>
CSS文件代码:
p {
color:blue;
}
效果图
2、CSS选择器
返回文章顶部上面css的样式简单的使用了css的color，使用并不是很灵活，开发者如何单独选出一个标签进行操作？
开发需求：
A、可能40个p标签，选出排第23个p标签进行颜色修改
B、可能单独选一种 整个页面所有的a标签，下划线去掉
C、可能单独选一类 不是一类标签
选择器：
E、关系选择器 ( 同伴关系，用逗号分割，各个选择器都包括,子关系,后代关系)
F、伪类选择器
G、属性选择器
A、可能40个p标签，选出排第23个p标签进行颜色修改
给这个标签设置id，css通过id进行选择元素 整个页面当中，id必须唯一
在这里嵌入式css，原本学习使用的是p标签，我们通过指定建立ID的方式，需要改成#green
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#green{ 这里原本使用的P标签，指定全部P标签使用绿色
color:green;
}
#red{
color:chocolate;
}
</style>
</head>
<body>
<p id="green">
这是外链式css使用
</p>
<p id="red" style="color:red">
行内式样式css使用 1
</p>
<p style="color:blue">
行内式样式css使用 2
</p>
</body>
</html>
效果：
B、可能单独选一种 整个页面所有的a标签，下划线去掉，选一种
直接通过标签的名称进行选择元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a { 选一种 B类型
color:black;
}
</style>
</head>
<body>
<a href="">B方案</a>
<a href="">B方案</a>
</body>
</html>
C、可能单独选一类 不是一类标签
对所有页面上的新闻标题进行样式修改，给标签定义类名，然后css通过类名来选择元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.title {
color:orange;
}
</style>
</head>
<body>
<span class="title">第三部分 C方案</span> 不单单是标签span 还有p 是一类
<p class="title">第一部分 C方案</p>
<p class="title">第二部分 C方案</p>
</body>
</html>
效果:
E、关系选择器
1、同伴关系，用逗号分割，各个选择器都包括
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p,span{
color:orange;
}
</style>
</head>
<body>
<p id="green">
这是外链式css使用
</p>
<p id="red" style="color:red">
行内式样式css使用 1
</p>
<p style="color:blue">
行内式样式css使用 2
</p>
<a href="">B方案</a>
<a href="">B方案</a>
<p class="title">第一部分 C方案</p>
<p class="title">第二部分 C方案</p>
<span class="title">第三部分 C方案</span>
</body>
</html>
我们可以看到关于s，span标签的颜色都是橙色：
2、子关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div>p{ <！--关键点-->
color:red;
}
</style>
</head>
<body>
<div id="div">
<p>outer 父亲</p>
<div>
<p>inner 儿子</p>
</div>
</div>
</body>
</html>
可以看到，外围的盒子父亲的颜色为红色
3、后代关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div p{ 关键代码处
color:red;
}
</style>
</head>
<body>
<div id="div">
<p>outer 父亲</p>
<div>
<p>inner 儿子</p>
</div>
</div>
</body>
</html>
看到了后代所有，我的所有关系全部变红
F、伪类选择器
1、a: link: 链接没有被访问的时候的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.title{ 点击后，关键点
color:red;
}
.title:link{ 没被点击前，关键点
color: blue;
}
</style>
</head>
<body>
<a class="title" href="#">超链接,没有被点击前我是蓝色，点击后变成红色</a>
<div>
超链接介绍，这是一个超链接
</div>
</body>
</html>
效果 当我鼠标没点击前是蓝色，点击后变红色：
2、a:visited：链接被访问过后的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.title{
color:red;
}
.title:link{
color: blue;
}
.title:visited{ 关键处关键处关键处关键处关键处关键处
color: green;
}
</style>
</head>
<body>
<a class="title" href="#">超链接,没有被点击前我是蓝色，点击后变成绿色</a>
<div>
超链接介绍，这是一个超链接
</div>
</body>
</html>
在这里提到优先级概念问题,原本title样式被置换了，不起作用只有a:visted起作用
3、a:hover： 鼠标经过的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.title{
color:red;
}
.title:link{
color: blue;
}
.title:visited{ 关键处关键处关键处关键处关键处关键处关键处关键处关键处关键处
color: green;
}
.title:hover{
color:orange;
}
</style>
</head>
<body>
<a class="title" href="#">超链接,没有被点击前我是蓝色，鼠标经过是橙色，点击后变成绿色</a>
<div>
超链接介绍，这是一个超链接
</div>
</body>
</html>
鼠标放到链接上面时候，颜色变成橙色
4、a:active：鼠标选中的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.title{
color:red;
}
.title:link{
color: blue;
}
.title:visited{
color: green;
}
.title:hover{
color:orange;
}
.title:active{ 关键处关键处关键处关键处关键处关键处
color:mediumvioletred;
}
</style>
</head>
<body>
<a class="title" href="#">超链接,没有被点击前我是蓝色，点击后变成绿色,鼠标经过是橙色，鼠标按住是紫色</a>
<div>
超链接介绍，这是一个超链接
</div>
</body>
</html>
效果，鼠标选中链接是紫色：
5、补充：target：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
:target{ 关键点
color:red;
}
</style>
</head>
<body>
<a class="title" href="#descriptionA">超链接A</a>
<a class="title" href="#descriptionB">超链接B</a>
<div id="descriptionA">
超链接介绍，这是一个超链接,建立锚点，当"超链接A"被点击后，我这段文字变成红色，锚点元素的变化
</div>
<div id="descriptionB">
超链接介绍，这是一个超链接,建立锚点，当"超链接B"被点击后，我这段文字变成红色，锚点元素的变化
</div>
</body>
</html>
当连接A,B轮流被点时候，属于它的ID锚点颜色变红
G、属性选择器(看懂即可)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a [data="d"]{
color:red;
}
</style>
</head>
<body>
<a data="d" class="title" href="#descriptionA">超链接A</a>
<div id="descriptionA">
超链接介绍，这是一个超链接,建立锚点，当"超链接A"被点击后，"超链接A"变红色
</div>
</body>
</html>
3、CSS选择器优先级问题
返回文章顶部CSS选择器的优先级类似于python的作用域：越靠近自己优先级越高
优先顺序，官方给的分数:
行间选择器 A 1000
Id选择器 B 100
Class选择器 C 10
标签选择器 D 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
color: red; D
}
.p_class{
color: mediumvioletred; C
}
#p_pid{
color: green; B
}
</style>
</head>
<body>
<p id="p_pid" class="p_class" style="color:blue"> A
这是一个P标签
</p>
</body>
</html>
我们可以通过 一个一个等级的对比来观察，这里代码全部放入
