1、CSS 引入
1、1 内联式:
直接写在 html <style>标签内部
<标签名 style="样式名1:样式值1;样式名2:样式值2;"></标签名>
1、2 内部式
格式： 选择器 样式块
<style>
选择器{
样式名1:样式值1;
样式名2:样式值2;
}
</style>
1、3 外部链接式
<link rel="stylesheet" href="url地址">
<link href="url" type="text/css" rel="stylesheet"/>
1、4 外部导入式：
<style>
@import url("url地址");
</style>
2、选择器
2、1 标签选择器
标签选择器 标签名{}
标签选择器是通过html标签来确定所修饰的对象，例如对p标签进行修饰就可以直接使用p{ 属性：属性值}进行修饰。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
p{
color: #f40;
font-size: 25px;
}
</style>
<body>
<div>
<p>这是标签选择器</p>
</div>
</body>
</html>
2、2 id选择器
是通过在定义标签时的唯一id来获取所修饰的对象用法是通过在id前加上 # 来识别 多用于js
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
#text{
color: red;
}
</style>
<body>
<p id="text">这是id选择器</p>
</body>
</html>
2、3 类选择器 （通过类名进行选择）
多用于css
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.p1{
color: #00ff00;
}
.p2{
color: #0000ff;
}
</style>
<body>
<p class="p1">这是类选择器</p>
<p class="p2">hello world</p>
</body>
</html>
2、4 后代选择器（选择某个标签的所有后代以设置相同样式）
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
div ul li{
color: red;
list-style: none;
}
</style>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>
2、5 兄弟选择器（选择兄弟关系的标签设置样式）
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
p+a{
color: green;
}
</style>
<body>
<p>这是兄弟选择器</p>
<a>hello world</a>
</body>
</html>
2、6 父子选择器（选择父子关系的标签中子标签设置样式）
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
div>p {
color: red;
}
</style>
<body>
<div>
<p>这是父子选择器</p>
</div>
</body>
</html>
关系：
父元素： 直接包含其他元素，这个元素就是包含元素的父元素
祖先元素：包含其他元素，这个元素就是包含元素的祖先元素
子元素： 直接被包含的元素，这个被包含的元素就是包含元素的子元素
后代元素： 被包含的元素，这个被包含的元素就是包含元素的后代元
2、7 属性选择器（通过属性（如name属性）进行选择以设置相同的样式）
选择器[属性名 = 属性值]
1、选择器[属性名 = 属性值] 完全匹配
2、选择器[属性名 ^= 属性值] 开头匹配
3、选择器[属性名 $= 属性值] 结尾匹配
4、选择器[属性名 *= 属性值] 包含匹配
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
[name="pra1"]{
color: blue;
}
[name="pra2"]{
color: red;
}
</style>
<body>
<p name="pra1">这是属性选择器</p>
<p name="pra2">hello world</p>
</body>
</html>
2、8 伪类选择器
伪类选择器和基础选择器不同，它不能自定义名字，主要是用来针对标签不同状态、不同行为、不同特征来实现不同样式。
:visited 已经访问过
:link 未访问过的页面样式
：hover 鼠标悬停在该标签上时的样式
2、9 伪元素选择器
::first-line 向元素的第一行内容添加样式
::first-letter 向元素首字符添加样式
::before 向元素之前添加内容 与content结合使用
::after 向元素之后添加内容 与content结合使用
