一、CSS初识
CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
二、引入CSS样式表
1.行内式（内联样式）
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
2.内部样式表
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
3.外部样式表（外链式）
<head>
<link href="CSS文件的路径" rel="stylesheet" />
</head>
三、CSS基础选择器
1.标签选择器
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
2.类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> /*千万别忘了它*/
/*上面点声明 ，下面class调用*/
span { /*标签选择器 让所有的span 都变成 150 */
font-size: 150px;
}
.g {
color: skyblue;
}
.o {
color: red;
}
.oo {
color: orange;
}
.l {
color: green;
}
/* 类选择器 可以选择 一个 或者 多个 标签*/
</style>
</head>
<body>
<span class="g">G</span>
<span class="o">o</span>
<span class="oo">o</span>
<span class="g">g</span>
<span class="l">l</span>
<span class="o">e</span>
<div class="nav"></div> <!-- 导航 我们习惯性的约定 -->
<div class="banner"></div> <!-- 导航 我们习惯性的约定 -->
</body>
</html>
3.多类名选择器
给同一标签指定多个类名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>.red{
color: red;
}.font20{
font-size: 20px;
color: blue;
}
</style>
</head>
<body>
<div class="font20 red">多类名</div>
<div>多类名</div>
<p class="red">多类名</p>
</body>
</html>
4.id选择器
id选择器使用“#”进行标识，后面紧跟id名。
<!DOCTYPE html>
<head>
<style>#last{
color: pink;
}
</style>
</head>
<body>
<div>id选择器</div>
<div id="last">id选择器</div>
</body>
</html>
id选择器和类选择器区别：
类选择器（class） 好比人的名字， 是可以多次重复使用； id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。
id选择器和类选择器最大的不同在于 使用次数上。
5.通配符选择器
用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。通配符选择器基本用不到。
* { /** 代表所有标签的意思 使用较少 */
color: pink;
}
四、复合选择器
1.父代选择器
后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。
<head>
<style>
/*需求 把所有的王思聪选出来*/
div p { /*河北 邯郸 后代选择器*/
color: pink;
}
.jianlin p { /*中间用空格隔开*/
color: purple;
}
</style>
</head>
<body>
<div> 王者荣耀 </div>
<div> 王者荣耀 </div>
<div>
<p>王思聪</p>
</div>
<div class="jianlin">
<p>王思聪</p>
</div>
</body>
</html>
2.子代选择器
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/*1. 需求 要一级菜单改为蓝色 */
ul li a { /*后代选择器 ul li下所有 a 标签内容变为红色*/
color: red;
}
ul li > a { /*子代选择器 子 指的是 亲儿子(即最近层级) 大于号分割，仅设定 ul li下一层 a 标签内容变为绿色
*/
color: green;
} </style>
</head>
<body>
<ul>
<li>
<a href="#">一级菜单</a>
<div>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
</div>
</li> </ul>
</body>
3.交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间用 . 连接。
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div.red { /*交集选择器 选择div下面，class="red" */
color: red;
}
</style>
</head>
<body>
<div>交集选择器</div>
<div class="red">交集选择器</div>
<p>交集选择器</p>
<p class="red">交集选择器</p>
</body>
4.并集选择器
选择器通过逗号连接而成的，任何形式的选择器都可以作为并集选择器的一部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*1. 需求 吧 div p span 改为红色*/
div, p, span { /*并集选择器 用逗号隔开 , 代表 和 集体声明 适合于相同样式 */
color: red;
}
</style>
</head>
<body>
<div>并集选择器</div>
<div>并集选择器</div>
<div>并集选择器</div>
<p>并集选择器</p>
<p>并集选择器</p>
<p>并集选择器</p>
<span>并集选择器</span>
<span>并集选择器</span>
<span>并集选择器</span>
<span>并集选择器</span>
<h1>并集选择器</h1>
<a href="#">并集选择器</a>
</body>
</html>
5.伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。
6.链接伪类选择器
- :link /* 未访问的链接 */
- :visited /* 已访问的链接 */
- :hover /* 鼠标移动到链接上 */
- :active /* 选定的链接 */
注意写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a:link { /* 未访问过的连接状态*/
color: #3c3c3c;
font-size: 25px;
text-decoration: none; /*取消下划线*/
font-weight: 700;
}
a:visited { /*这个链接我们已经点过的样子 已访问过链接*/
color: orange;
}
a:hover { /*鼠标经过连接时候的样子*/
color: #f10215;
}
a:active { /*鼠标按下时候的样子*/
color: green;
} </style>
</head>
<body>
<a href="http://www.asdf12312312312312.com">秒杀</a>
</body>
</html>
实际开发中的伪类链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a {
color: #333;
text-decoration: none;
font-size: 25px;
font-weight: 700;
}
a:hover { /*鼠标经过*/
color: #f10215;;
}
</style>
</head>
<body>
<a href="http://www.asdf12312312312312.com">秒杀</a>
</body>
</html>
五、综合测试题 （1）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.site-r a {
color: red;
}
.nav a { /*后代选择器*/
color: orange;
} .nav, .sitenav { /*并集选择器*/
font: 14px "微软雅黑";
}
.nav> ul > li > a { /*子代选择器*/
color: green; /*123123123 */
}
</style>
</head>
<body> <div class="nav"> <!-- 主导航栏 -->
<ul>
<li><a href="#">公司首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司产品</a></li>
<li>
<a href="#">联系我们</a>
<ul>
<li><a href="#">公司邮箱</a></li>
<li><a href="#">公司电话</a></li>
</ul>
</li>
</ul>
</div>
<div class="sitenav"> <!-- 侧导航栏 -->
<div class="site-l">左侧侧导航栏</div>
<div class="site-r"><a href="#">登录</a></div>
</div>
</body>
</html>
六、综合测试题（2）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.nav {
text-align: center;
}
.nav a{ /*后代选择器 限定范围 */
width: 120px;
height: 50px;
/*background-color: pink;*/
/*因为a是行内元素， 没有大小，我们需要转换 inline-block */
display: inline-block;
background-image: url(images/bg.png);
text-align: center; /*让盒子内的文字居中对齐*/
/*1. 行内元素 行内块元素 我们可以看做文本 */
color: #fff;
text-decoration: none; /*取消下划线*/
/*2. 行高等于盒子的高度，可以让 单行文本垂直居中*/
line-height: 50px;
}
.nav a:hover { /*当我们鼠标经过了 nav 里面的连接的时候*/
background-image: url(images/bgc.png);
}
</style>
</head>
<body>
<div class="nav"> <!-- 导航栏开始了 -->
<a href="#">网站导航</a>
<a href="#">网站导航</a>
<a href="#">网站导航</a>
<a href="#">网站导航</a>
<a href="#">网站导航</a>
<a href="#">网站导航</a>
</div>
</body>
</html>
--