一、CSS的概念
CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS 是 1996 年 W3C 审核通过并且推荐使用的。
CSS 的引入就是为了使得 HTML 语言能够更好地适应页面的美工设计。它以 HTML 语言为基础，提供了丰富的格式化功能，如字体、颜色、背景和整体排版等。
二、CSS的优点
- 内容与表现分离。
- 网页的表现统一 ， 容易修改 。
- 丰富的样式 ， 使得页面布局更加灵活。
- 减少网页的代码量 ， 增加网页的浏览速度 ， 节省网络带宽。
- 运用独立于页面的CSS ， 有利于网页被搜索引擎收录 。
三、CSS的语法
CSS 代码可以放在 HTML 文件的 <style> 标签内，也可以放在网页标签的 style 属性中，但是推荐用法是放在单独的样式表中，然后通过 <link> 标签或 @import 命令导入网页文档。CSS 样式表文件是一个文本文件，扩展名为 .css，可以使用任何文本编辑器打开，并进行编辑。
简单来说 CSS 有三种导入方式，下面为大家进行介绍。
1、行内样式
行内样式就是在 HTML 标签的 style 属性直接使用，添加多个样式中间要用分号隔开，实例代码如下：
<h1 style="color: #96ffe6">Hello,css</h1>
<p style="color: #ff5f5d;font-weight: bold">Hello,css</p>
这样的写法会使代码看起来很臃肿，并且不方便后期的维护，不推荐使用。
2、内部样式表
内部样式表是在 <head> 标签内 使用 <style> 标签，然后把样式写在选择器中，实例代码如下：
<html>
<head>
<meta charset="UTF-8">
<title>内部样式表</title>
<!--内部样式表-->
<style>
p{
font-size: 50px;
color:red;
}
</style>
</head>
<body>
<p>山河故人</p>
</body>
</html>
3、外部样式表
外部导入就是另外创建一个 CSS 文档，不用 <style> 直接使用选择器进行样式的设置，然后使用 link 标签 或者@import 命令 进行导入，实例代码如下：
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--1、link标签-->
<!--href 后面写的是CSS 文档的路径-->
<link rel="stylesheet" href="../resources/css/Style.css">
<!--2、@import命令-->
<style>
@import url("../resources/css/Style.css");
</style>
</head>
<body>
<div>
认真学习的样式很Cool
</div>
</body>
</html>
这种前提是有一个 CSS 文档进行链接或导入。
这三种导入样式的优先级遵循 就近原则，即：行内样式 > 内部样式表 > 外部样式表 。
四、CSS 选择器
每一条 CSS 样式定义由两部分组成，形式如下:
选择器 {样式}
在 { } 之前的就是选择器，选择器 指明了 { } 中样式的作用对象，也就是样式作用于网页中的哪些元素。
1、标签选择器
标签选择器就是针对哪些标签采用 CSS 样式，例如在 style.css 文件中 对 p 标签 样式声明如下：
p{
font-size: 15px;
color: red;
}
代码运行后，页面中所有 p 标签的 字体都是 15px ，文字颜色为红色。
2、ID 选择器
ID选择器使用 “#”前缀标识符进行标识，后面要跟着指定元素的 ID 名称 ，注意，ID 选择器具有全局唯一，不能同名语法如下所示：
#goods{
font-size: 200px;
color: blue;
}
ID选择器需要引用 id 属性中的值，以下是针对 ID 选择器的 p 标签中 id 属性设置的实例：
<p class="a" id="aaa">山河故人</p>
3、类选择器
类选择器使用 “.”前缀进行标识，代码如下：
.abc {
color: #96ffe6;
}
这样设置是就是一类的格式，类名相同的都为一个样式，实例代码如下：
<p class="abc">山河</p>
<a href="" class="abc">故人</a>
运行结果就是 p 标签 和 a 标签的内容格式是一样的，因为 它们的 class 属性的名称相同
4、后代选择器
后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，后代选择器用两个选择器，中间加上一个空格表示。前面通常选择父元素，后面的选择子元素，代码如下：
body p{
background-color: green;
}
这个样式选择的就是 body 下面所有的 p 标签，后代选择器可以更加精确的定位元素。
5、子选择器
子选择器和后代选择器的区别就是，子选择器就作用于子元素的第一个后代，而后代选择器是作用于所有子后代元素。子选择器是在两个选择器之间加一个“>” 来选择，实例代码如下：
CSS：
#links a{
color: red;
}
HTML：
<p id="links">
<a href="#">山河</a>
<a href="#">故人</a>
<div><a href="#">李十八</a></div>
</p>
上面的代码运行时，就山河故人几个字会变红，因为属于第一个后代，而 div 标签中的 a 标签不属于第一个后代，所以颜色不变化。
6、相邻兄弟选择器
如果我们想要找到两兄弟中的一个，就需要相邻兄弟选择器，如一个 标题 h1 元素后面跟了两个 p 元素 ，我们想定位到 第一个 p 元素，那我们就可以使用相邻兄弟选择器，用“+” 号连接两个选择器，实例代码如下：
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 + p {
color: blue;
font-size: 15px;
}
</style>
</head>
<body>
<h1>标题一</h1>
<p>山河</p>
<p>故人</p>
</body>
</html>
运行结果会看到“山河”两个字是蓝色的，而第二个段落不受影响。
7、通用兄弟选择器
这个和第6条不同的是，他可以使 标题 h1 后面的兄弟都被选中，格式为 E~F ，表示获取指定E元素的同级元素的F标签，实例代码如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.aaa~p{
background: bisque;
}
</style>
</head>
<body>
<p class="aaa">1</p>
<p id="a">2</p>
<p>3</p>
<ul>
<li>
<p>4</p>
</li>
<li>
<p>5</p>
</li>
<li>
<p>6</p>
</li>
</ul>
<p>4</p>
</body>
</html>
运行结果为 段落2、3、4 均有背景颜色，而 无序列表中的 段落没有背景颜色。
8、结构伪类选择器
| 选择器 | 功能描述 |
|---|---|
| E:first-child | 作为父元素的第一个子元素的元素E |
| E:last-child | 作为父元素的最后一个子元素的元素E |
| E F:nth-child(n) | 选择父级元素E的第n个子元素F，（n可以是1、2、3），关 键字为even、odd |
| E:first-of-type | 选择父元素内具有指定类型的第一个E元素 |
| E:last-of-type | 选择父元素内具有指定类型的最后一个E元素 |
| E F:nth-of-type(n) | 选择父元素内具有指定类型的第n个F元素 |
其中冒号前均为一个选择器，冒号后面跟的是一个伪类（官方定义好的）
9、属性选择器
我们还可以判断 HTML 标签的某个属性是否存在的方法来定义 CSS，属性选择器是根据元素的属性来匹配的。
| 属性选择器 | 功能描述 |
|---|---|
| E[attr] | 选择匹配具有属性attr的E元素 |
| E[attr=val] | 选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小 写） |
| E[attr^=val] | 选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的 任意字符串 |
| E[attr$=val] | 选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的 任意字符串 |
| E[attr*=val] | 选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val” |
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
