标题：
1.scc概述
2.行内样式
3.内接样式
4.外接样式（链接式） 推荐使用
5.外接样式（导入式）
6.嵌套规则
7.css选择器
1.scc（Cascading Style Sheets）层叠样式表
当前CSS前端分为三层：
HTML：超文本标记语言。从语义的角度描述页面结构。
CSS：层叠样式表。从审美的角度负责页面样式。
JS：JavaScript 。从交互的角度描述页面行为
css的作用其实就是给HTML页面标签添加各种样式，定义网页显示效果，将网页内容和显示样式进行分离
css缺点：兼容性不是太好；要求浏览器足够智能化；数据和显示没有分开；功能还不够强大
css有点：使数据和显示分开；降低网络流量；使整个网络视觉效果一样；降低了耦合性，提高了开发效率
2.行内样式
<div>
<p style="color: green">这是行内样式</p>
</div>
3.内接样式
<style type="text/css">
/*2.内接样式*/
p{
color: red;
font-size: 20px;
}
</style>
4.外接样式（链接式） 推荐使用
<link rel="stylesheet" type="text/css" href="./main.css">
建立一个index.css的文件，在主页面把它导入：
5.外接样式（导入式）
<style type="text/css">
@import url('./index.css');
</style>
将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：
6.嵌套规则
有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
li内可以包含div
块级元素与块级元素并列、内联元素与内联元素并列
7.css选择器
7.1基础选择器
“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素
1.通用元素选择器 *: 所有的标签都变色
2.标签选择器：匹配所有使用p标签的样式 p{color:red}
3.id选择器：匹配指定的标签 #p2{color:red}
4.class类选择器：谁指定class谁的变色，可选多个 .c1{color:red} 或者 div.c1{color:red}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
/*标签选择器*/
/*所有标签是div的都变了*/
div{
font-family: 华文彩云;
} /*id选择器*/
/*给id='c2'的设置样式，id一般不常用。因为id是不能重复的。*/
#c2 p{
background-color: yellow;
font-size: 20px;
color: purple;
} /*calss类选择器*/
.a1{
color: red;
} /*通用元素选择器，整体改变*/
*{
background-color: pink;
color: green;
}
</style>
<body>
<div>
<div id="c2">
<p>根据c2 p的信息改变颜色</p>
<div class="a1">这里字体是红色</div>
</div>
</div>
<p>p2</p>
<div class="a1">666
<p>你好啊</p>
<h1>我是h1标签</h1>
</div>
</body>
</html>
7.2组合选择器
1.后代选择器，使用空格表示后代选择器 (不分层级，只让p标签变色) .c2 p{color:red}
2.子代选择器，使用>表示子代选择器（只在儿子层找） .c2>p{color:red}
3.多元素选择器：同时匹配所有指定的元素，之间通过逗号隔开 .div,p{color:red}
或者
.c2 .c3,.c2~.c3{
color: red;
background-color: green;
font-size: 15px;
}
不常用
3.毗邻选择器（紧挨着，找相邻的,只找下面的，不找上面的）.c2+p{color:red}
4.兄弟选择器：同一级别的，离得很近的.c2~p{color:red}
5.多元素选择器： .c2 .c3,.c2~ .c3{ color:red }
多元素选择器的说明：
.a1 .a2, .a1~p{
color: blue;
font-size: 15px;
background-color: red;
}
#下面的两个就相当于上面的一个，用逗号隔开可以减少代码的重用
.a1 .a2{
color: blue;
font-size: 15px;
background-color: red;
}
.a1~p{
color: blue;
font-size: 15px;
background-color: red;
}
举例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>组合选择器</title>
<style>
/*后代选择器(部分层级)：选择所有类为a1的p标签*/
.a1 p{
background-color: blue;
} /*子代选择器*/
.c2>p{
color: green;
} /*毗邻选择器*/
.a2+p{
background-color: aquamarine;
} /*兄弟选择器:同一级别的，离得很近的*/
.a2~p{
background-color: brown;
} /*多元素选择器：同时匹配所有指定的元素*/
.div,p{
background-color: yellow;
} .a1 .a2, .a1~p{
color: purple;
font-size: 30px;
background-color: red;
}
</style>
</head>
<body>
<p>第六组</p>
<div class="a1">
<div class="a2">
<p>过去永远是画面</p>
<div class="c2">
<p>那片海</p>
</div> </div>
<p>666666666</p>
<h1 class="a2">第一章</h1>
<h2>第二章</h2>
</div>
<div class="a1">
<b>第三章</b>
<div class="a2">
<p>®</p>
<b>singal</b>
</div>
</div>
<h5>第五组</h5>
<p>第六组</p>
</body>
</html>
7.3属性选择器
属性选择器，字面意思就是根据标签中的属性，选中当前的标签。
属性选择器仅限于在表单控件中
/*根据属性查找*/
/*[for]{
color: red;
}*/ /*找到for属性的等于username的元素 字体颜色设为红色*/
/*[for='username']{
color: yellow;
}*/ /*以....开头 ^*/
/*[for^='user']{
color: #008000;
}*/ /*以....结尾 $*/
/*[for$='vvip']{
color: red;
}*/ /*包含某元素的标签*/
/*[for*="vip"]{
color: #00BFFF;
}*/ /**/ /*指定单词的属性*/
label[for~='user1']{
color: red;
} input[type='text']{
background: red;
}
例：
<!DOCTYPE html>
<html>
<head>
<title></title> <style type="text/css">
label[for]{
color: red
}
input[type='text']{
background-color: red;
}
label[for^='vip']{
color: blue;
}
label[for*='i']{
color: yellow;
} </style>
</head>
<body> <!-- 属性选择器仅限于在表单控件中 -->
<form action=""> <label for="username">用户名</label>
<label for="vip">vip</label>
<label for="vivp">vvip</label> <input type="text">
<input type="password">
</form> </body>
</html>
7.4伪类选择器（和链接显示效果相关）
一般用在超链接a标签中，专用于控制链接的显示效果
'''
a:link（没有接触过的链接）,用于定义了链接的常规状态。 a:hover（鼠标放在链接上的状态）,用于产生视觉效果。 a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。 a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。 伪类选择器 : 伪类指的是标签的不同状态: a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态 a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; } '''
例：
<!DOCTYPE html>
<html>
<head>
<title></title> <style type="text/css"> .box ul li.item a:link{
color: red;
}
.box ul li.item a:visited{
color: yellow;
}
.box ul li.item a:hover{
color: green;
font-size: 30px;
} .box ul li.item a:active{
color: pink;
background-color: #000; }
span{
display: block;
width: 200px;
height: 200px;
background-color: yellow;
}
span:hover{
color: red;
cursor: pointer;
background-color: #000;
font-size: 30px;
}
input{
width: 300px;
height: 200px;
}
ul>li{
/*width: 100px;
height: 70px;*/
background-color: red;
}
/*
行内标签：
a span
1、在一行内显示
2、不能设置宽高
3、宽高 是内容的宽高 行内块
1.在一行内显示
2.可以设置宽高 块级标签
div p ul li
1、独占一行
2、可以设置标签宽高
3、如果不设置宽高，默认body100%宽度
*/ </style>
</head>
<body>
<span>哈哈哈</span>
<input type="text">
<input type="password">
<ul>
<li>111</li>
</ul> <div class="box">
<ul>
<li class="item">
<a href="#">超链接</a>
</li>
</ul>
</div> </body>
</html>
7.5nth-child()选择器
可以给指定的几行自定属性，如颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*ul>li{
list-style: none;
}*/
ul li:first-child{
color: red;
}
ul li:last-child{
color: red;
}
ul li:nth-child(3){
color: blue;
}
/*设置为n全部为黄色*/
ul li:nth-child(n){
color: yellow;
}
/*3n+1的倍数行全部绿色*/
ul li:nth-child(3n+1){
color: green;
}
</style>
</head>
<body> <ul>
<li>冯波1</li>
<li>冯波2</li>
<li>冯波3</li>
<li>冯波4</li>
<li>冯波5</li>
<li>冯波6</li>
<li>冯波7</li>
<li>冯波8</li>
</ul> </body>
</html>
7.6 before，after伪类 （后面解决浮动问题需要用到这里的知识）
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
font-size: 29px;
} p::first-letter{
color: red;
font-size: 30px; }
p::before{
content:'6666';
} /*这个非常重要，解决我们后面浮动产生的问题（布局）*/
p::after{ content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both
}
</style>
</head>
<body> <p>董方方</p> </body>
</html>