CSS概述
什么是CSS？(了解)
CSS: 层叠样式表，用于修饰、渲染网页的一门技术
使用css样式修饰网页，可以实现将设置样式的css代码和展示数据的html代码进行分离，增强了网页的展示能力！
在HTML中引入CSS
方式1：通过style属性引入css（不推荐）
<!--
1.通过标签上的style属性给div设置样式
边框:2px solid red
字体大小:26px
背景颜色为:pink
-->
<div style="border:2px solid red;font-size:26px;background:pink;">这是一个div...</div>
由于上面这种方式是将css样式代码，直接写在标签上的style属性内部，如果属性太多，容易造成页面结构的混乱，不利于后期的维护。
将样式代码写在标签上，样式代码只对当前标签生效，代码无法复用！
并且使用这种方式无法将html标签和css样式进行分离!
因此不推荐使用这种方式！（这种通过style属性添加的样式，叫做行内样式/内联样式）
方式2：通过style标签引入css
在head标签内部可以添加一个style标签，在style标签内部可以直接书写css样式
这种方式是将所有的css样式代码集中在一个style标签内部统一管理，这种方式不会造成页面结构的混乱，并且可以实现代码的复用！
初步的实现了将html标签代码和css样式代码进行了分离!
代码示例 ：
<!-- 2.通过style标签给span设置样式如下：
边框: 2px solid green
字体大小: 30px
字体加粗
-->
<head>
<meta charset="utf-8" />
<style type="text/css">
/* ****** CSS样式 ****** */
span{ /* 为当前html中的所有span标签设置样式 */
border:2px solid green;
font-size:30px;
font-weight:bolder; /* bold/bolder */
}
</style>
</head>
方式3：通过link链接引入外部的css文件
在head标签内部，通过一个link标签可以引入外部的CSS文件
这种方式是将所有的css代码集中在一个单独的css文件中统一管理，真正的实现了将css代码和html代码的分离，实现了代码的复用。
代码示例：html中引入demo.css文件
<!-- 3.通过link标签引入外部的css文件，为p元素设置样式如下：
边框: 2px solid blue;
字体颜色:red
字体设置为华文琥珀
设置首行文本缩进50px
-->
<!-- 引入demo.css文件(中的样式) -->
<link rel="stylesheet" href="demo.css" />
demo.css文件
@charset "UTF-8";
p{
border: 2px solid blue;
color: red;
font-family: 华文琥珀;
text-indent: 50px;
}
验证优先级
多种引入方式操作同一个标签，以哪一个为准。
内联优先级最高
内部和外部同时存在，就近原则。
标签默认效果优先级最低。
标签 (元素) ：html或者xml中存在一对尖括号中加内容称为标签，标签分为
单标签(<a>) 双标签(<a></a>) 自闭标签（<a/>）
属性:存在于标签内部的键值对
子标签：标签内部的标签
标签内容：标签内部的文本
CSS选择器
所谓的选择器就是能够在html中帮助我们选中元素进行修饰的一门技术。
标签名选择器
通过元素名称(或标签名称)选中指定名称的所有标签
格式: 元素名/标签名{ css样式... }
/* ----- 1.标签名选择器练习 -----
将所有span标签的背景颜色设置为#efbdef, 设置字体大小为22px，字体加粗；*/
span{ /* 选中所有的span元素 */
background-color:#efbdef;
font-size: 22px;
font-weight: bolder;
}
class选择器
可以为元素添加一个通用的属性 -- class，通过class属性为元素设置所属的组，class值相同的元素则为一组。通过class值可以选中这一组的元素，为元素添加样式。
格式：.class值{ css样式... }
实例:
/* ----- 2.类选择器练习 -----
(1)将所有的span（但是不包括div和p标签下的span）的背景颜色设置为#faf77b，边框改为2px solid cyan；
(2)将div下的span和内容为"span111"的span，背景颜色设置为#5eff1e、字体颜色设置
#ec0e7e；*/
.s1{ /* 选中所有class值为s1的元素 */
background: #faf77b;
border: 2px solid cyan;
}
.s2{ /* 选中所有class值为s2的元素 */
background: #5eff1e;
color: #ec0e7e;
}
另外，一个元素也可以设置多个class值，多个class值中间用空格分隔，例如：
<span class="s1 s2" >span111</span>
表示当前元素同时属于多个分组，多个分组上设置的样式也会同时作用在当前元素上。
如果多个分组设置了相同的样式（但是值不一样），样式会发生冲突，写在后面的样式会覆盖前面的样式！
内容补充：选择器优先级顺序：
（1）如果是同一类选择器，同时给某些元素设置了样式，如果样式冲突了，那么写在后面的样式会覆盖前面的样式。
（2）如果是不同的选择器，设置的样式优先级顺序是：id选择器(100) > 类选择器(10) > 元素名选择器(1)
id选择器
通过标签上通用的属性id，可以为标签设置一个独一无二的编号（id值应该是唯一的），通过id值可以唯一的选中一个元素。
格式：#id值{ css样式 }
/* ----- 3.id选择器练习 -----
用id选择器将第一个p标签设置字体大小为24px，字体颜色为#a06649, 首行文本缩进20px。*/
#p1{ /* 选中id值为p1的元素 */
font-size:24px;
color: #a06649;
text-indent: 20px;
}
<p id="p1">这是一个p元素!!!</p>
后代选择器
选中指定元素内部的指定后代元素
格式: 祖先 后代{ css样式... }
/* ----- 4.后代选择器练习 -----
为p元素内部的所有span元素，设置字体大小为18px,字体颜色为红色,背景颜色为pink;*/
p span{ /* 匹配所有p元素内部的所有span元素 */
font-size:18px;
color: red;
background: pink;
}
/* p,span{} 匹配所有的p元素和所有的span元素 */
<p id="p1">
这是一个p元素!!!
<span>这是一个span元素!!!</span>
</p>
属性选择器
在选择器选中元素的基础上，根据元素的属性条件筛选/过滤元素
格式：选择器[属性条件]...{ css样式 }
/* ----- 5.属性选择器 -----
为所有的文本输入框，设置背景颜色为#FF7CCC、字体大小22px，首行文本缩进15px；*/
input[type='text']{ /* 匹配所有的input并且type值为text的元素 */
background: #FF7CCC;
font-size: 22px;
text-indent: 15px;
}
input[type='text'][name='email']{
/* 选中所有的input并且type值为text、并且name为email的元素 */
background : yellow;
}
伪元素选择器
伪元素选择器选择的是元素的状态
状态分为以下几种：
link 表示元素未被点击时的状态
hover 表示鼠标悬停时的状态
active 表示元素被点击时的状态
visisted 表示元素被点击后的状态
格式：#id:hover{}
分组选择器
可以将多种选择器结合到一起使用，用来统一设定样式。
样式：
h1,h2,#abc,.m{
}
子元素选择器
和后代类似，但是只能获得子元素
格式：
ul>li>a{6
}