本文介绍了HTML的span和div块标签，用于标记文本和划分区域。重点阐述了CSS，包括其职责、工作原理、简单语法、引入方式、选择器类型及优先级。CSS可美化HTML页面，通过选择器作用于元素，引入方式有内嵌、内部和外部样式表，选择器类型多样。
在这一讲进行之前，我还要再介绍两个HTML的块标签，span和div。他俩都是通用标签，没什么具体的语义。
<span>标签通常用于标记段落中的某块文本内容，然后通过该标签，可以单独为这块文本内容增加CSS样式；
<div>标签一般用于，将屏幕某块区域划分出来后，用该标签标记后可通过选择器作用自定义的CSS样式。
例如，
CSS的概述
CSS(Cascading Style Sheets，层叠样式表)，它是用来美化我们的HTML页面的，而HTML决定了网页的骨架，这样CSS就将页面的HTML和美化进行了分离。因此我们首先需要清楚，CSS的职责是控制HTML文档里的文本内容在网页上样式呈现的效果，写的每一个样式最终是通过选择器作用到具体的元素上面。
CSS的工作原理
CSS实际上是如何工作的呢？可见下图。
CSS整个的工作流程，可以解释为如下4步：
- 互联网其实都是通过网页相互连接组成的，每个网页都是一份HTML文档，因此浏览器与后端的首次通信是以HTML文档为基准，那么整个流程的第一步也就是解析HTML文档；
- 如果在解析HTML文档过程中发现有通过<link>标签引用了外部的CSS文件时，那么浏览器会去下载相对应的CSS文件；
- 当HTML文档解析完毕后会生成一个DOM文档结构，DOM文档结构中记录着每个节点的元素，各元素之间的关系；
- 最后，通过CSS的选择器将相对应的样式作用到DOM中选择器找到的元素节点，然后浏览器渲染呈现在网页上。
CSS的简单语法
CSS的典型结构如下图：
一个CSS的典型结构总共由两部分组成：选择器 + 样式。{}大括号内部的都是具体的某种样式，可用来控制元素的背景、大小、排版位置等样式效果，而{}左边的则是选择器，用来指定后面跟随的样式列表要作用到HTML文档中的哪个元素上。
CSS的选择器类型很多，规则也很多，因此会有一种现象，就是某个元素被不止一个选择器匹配到，如果某个样式属性起冲突了，那么就会按照一定的优先级顺序处理。如果使用了未知的样式属性，或者给某个样式属性赋予了无效值，那么该样式属性会被视为无效，浏览器的CSS引擎会完全忽略它。
CSS的引入方式
CSS基本结构是由选择器和样式属性列表组成，那么如何跟HTML文档关联起来使用呢？一共有三种方式。
内嵌样式
使用HTML元素的全局属性style声明，仅影响一个元素，除非工作环境受限，比如只允许编辑HTML的body，否则强烈不推荐这种方式。
<a href="index.html" style="background: gray; color: #6a90d9">点击跳转</a>
内部样式表
在HTML中的<head>内使用<style>标签，在某些情况下很有用，比如当你不能直接修改CSS文件时。
<style>
a {
background: gray;
color: #6a90d9
}
</style>
外部样式表
将CSS保存在一个独立的扩展名为.css的文件中，并在HTML的<head>里使用<link>元素引用它，这种方法可以说是最好的，因为你可以使用一个样式表来设置多个文档的样式，并且需要更新CSS的时候只要在一个地方更新。
<link type="text/css" rel="stylesheet" href="css/nms.css">
CSS的选择器
选择器，顾名思义，就是选择到HTML文档中具体的元素对象，并将CSS代码作用在它身上。
基本选择器
基本选择器其实是一些比较常用、简单的选择器，包括元素选择器、id选择器、class选择器、属性选择器、组合选择器。下面我就来一一它们。
元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span {
color: blue;
}
</style>
</head>
<body>
<span>讲完这个内容，大家就可以下课了。</span>
<span>讲完这个内容，大家就可以下课了。</span>
<span>讲完这个内容，大家就可以下课了。</span>
<span>讲完这个内容，大家就可以下课了。</span>
</body>
</html>
效果：作用于HTML文档中的所有span标签的元素上。
id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*
#ID的名称 {
属性名称:属性的值;
属性名称:属性的值;
}
*/
#div1 {
color: red;
}
</style>
</head>
<body>
<!--请将JAVAEE颜色改成红色-->
<div id="div1">JAVAEE</div>
<div>IOS</div>
<div>ANDROID</div>
</body>
</html>
id在HTML文档中须唯一存在，所有id选择器只作用于单个元素。
class选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
.类的名称 {
属性名称:属性的值;
属性名称:属性的值;
}
-->
<style>
.shuiguo {
color: yellow;
}
.shucai {
color: green;
}
</style>
</head>
<body>
<!--请将水果类改成黄色，蔬菜类改成绿色-->
<div class="shuiguo">香蕉</div>
<div class="shucai">黄瓜</div>
<div class="shuiguo">苹果</div>
<div class="shucai">茄子</div>
<div class="shuiguo">橘子</div>
</body>
</html>
HTML文档中可对多个元素应用相同class，所以class可同时作用于多个元素。
属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--修改包含title属性的a标签-->
<style>
/*a[title='aaa'] {
color: red;
}*/
a[href][title] {
color: yellow;
}
</style>
</head>
<body>
<a href="#" title="aaa">张三</a>
<a href="#">李四</a>
</body>
</html>
作用于所有既包含href属性又包含title属性的a标签上。这里其实是属性选择器最基本用法的一种，而它还支持其他很多规则的用法，如下：
选择器 描述
[attr] 选择定义attr属性的元素，不管属性的取值具体是什么
[attr=“val”] 选择定义attr属性，且属性值为val的元素
[attr^=“val”] 选择定义attr属性，且属性值以字符串val打头的元素
[attr$=“val”] 选择定义attr属性，且属性值以字符串val结尾的元素
[attr*=“val”] 选择定义attr属性，且属性值包含字符串val的元素
[attr~=“val”] 选择定义attr属性，且属性值具有多个值，其中一个为字符串val的元素
也就是说，属性选择器不仅可以用来匹配那些具有指定属性的元素，还可以进一步根据不同属性值来匹配。
组合选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a.myClass {
background: gray;
color: #6a90d9;
}
</style>
</head>
<body>
<a class="myClass" href="index.html">点击跳转</a>
<span class="myClass">另一文本</span>
</body>
</html>
元素选择器和class选择器组合使用，作用于a元素中有声明myClass类型的元素。
通用选择器
<style>
* {
background: gray;
}
</style>
作用到所有元素上。
并集选择器
并集选择器的语法为：
选择器1, 选择器2, ... {
属性的名称: 属性的值;
属性的名称: 属性的值;
......
}
并集选择器是通过,逗号将不同选择器组合使用的一种选择器，这种情况下，各个选择器之间是没有任何关系，都是相互独立的，就是他们具有相同的样式属性表而已。这只是一种简便写法的用法而已，具有相同样式属性表的不用再复制粘贴，可以直接通过,逗号将不同选择器分开即可。只要HTML文档中的元素满足其中一个选择器即可。例如，
a, h1, span, div {
background-color: black;
}
上述示例中有四个选择器含有同样的样式属性，HTML文档中只要满足其中一个选择器即可被匹配到。
后代选择器
后代选择器的语法为：
选择器1 选择器2 {
属性的名称: 属性的值;
属性的名称: 属性的值;
......
}
多个选择器之间通过空格分隔开的话表示这是一个后代选择器，也就是说，需要先满足第一个选择器的前提下，在第一个选择器匹配到的元素的后代元素中去匹配第二个选择器。这里的后代包括了子孙后代。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*请将h1下面的所有em标签(元素)的内容颜色改成红色*/
/*中间以空格隔开的是后代选择器*/
h1 em {
color: red;
}
</style>
</head>
<body>
<h1>
This is a
<em>儿子</em>
<strong>
<em>孙子</em>
</strong>
heading
</h1>
</body>
</html>
以上示例中，选择器要匹配的元素是位于h1元素的后代元素中的em元素，因此h1元素下面的所有em标签(元素)都会被匹配到。
儿子选择器
儿子选择器的语法为：
选择器1 > 选择器2 {
属性的名称: 属性的值;
属性的名称: 属性的值;
......
}
儿子选择器是多个选择器之间通过>右箭头符号连接，表示的是在满足第一个选择器的前提下，从它匹配到的元素的直接子元素中寻找第二个选择器。跟后代选择器的区别就在于它只能在直接子元素中匹配第二个选择器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
h1 > em {
color: red;
}
</style>
</head>
<body>
<h1>
This is a
<em>儿子</em>
<strong>
<em>孙子</em>
</strong>
heading
</h1>
</body>
</html>
以上示例中，选择器要匹配的元素是位于h1元素的后代元素中的第一个em元素。
兄弟选择器
兄弟选择器的语法为：
选择器1 + 选择器2 {
属性的名称: 属性的值;
属性的名称: 属性的值;
......
}
兄弟选择器是多个选择器之间通过+加号连接。表示的是，在满足第一个选择器的前提下，从它匹配到的元素的紧跟着的位于同一层级的下一个元素，看该元素是否符合第二个选择器。也就是说，兄弟选择器，两个选择器所匹配的元素要求位于同一层级，且相邻。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
p + a {
background-color: #6a90d9;
}
</style>
</head>
<body>
<a>第一个a</a>
<p>第二个<a>a</a></p>
<a>第三个a</a>
<a>第四个a</a>
</body>
</html>
上述示例中，同时满足位于同一层级，且相邻，且需要先满足第一个选择器的前提下，还满足第二个选择器这四个条件的a元素就是第三个a元素了。
普通兄弟选择器
普通兄弟选择器的语法为：
选择器1 ~ 选择器2 {
属性的名称: 属性的值;
属性的名称: 属性的值;
......
}
普通兄弟选择器，是多个选择器之间通过~波浪符号连接。表示的是满足第一个选择器的前提下，从它匹配到的元素后，去寻找位于同一层级，且在该元素后面的所有满足第二个选择器的元素。兄弟选择器只匹配相邻的一个元素，而普通兄弟选择器则是可以匹配位于元素后面的所有符合第二个选择器的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
p ~ a {
background-color: #6a90d9;
}
</style>
</head>
<body>
<a>第一个a</a>
<p>第二个<a>a</a></p>
<a>第三个a</a>
<a>第四个a</a>
</body>
</html>
同时满足同一层级，且在p元素后面的兄弟元素有两个，第三个a元素和第四个a元素，因此这里可以匹配到这两个元素。
伪类选择器
伪类选择器是通过满足一些指定状态、行为来匹配元素的一种选择器，比如满足是否获取焦点等等。
伪类选择器相对来说，比较多，但这里只介绍作用在a标签上的。
属性 描述
:link 选取未访问的链接元素
:visited 选取用户已访问的链接元素
:hover 选取鼠标指针悬停的元素
:active 选取当前被用户激活的元素，这通常意味着用户即将点击该元素
例如，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a:link {color: red} /*未访问的链接*/
a:visited {color: #00FF00} /*已访问的链接*/
a:hover {color: ##FF00FF} /*鼠标移动到链接上*/
a:active {color: #0000FF} /*选定的链接*/
</style>
</head>
<body>
<a href="#">草榴社区</a>
</body>
</html>
选择器的优先级
按照选择器搜索精确度来编写，优先级由高到低分别是：行内样式 > ID选择器 > 类选择器 > 元素选择器。示例如下，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*元素选择器*/
div {
color: red;
}
/*类选择器*/
.chifan {
color: deeppink;
}
/*ID选择器*/
#div1 {
color: greenyellow;
}
/*
按照选择器搜索精确度来编写
行内样式 > id选择器 > 类选择器 > 元素选择器
*/
</style>
</head>
<body>
<div class="chifan" id="div1" style="color: goldenrod;">扩展完，就可以去吃饭啦！</div>
</html>
其实，选择器的优先级还有一个就近原则，即哪个样式离标签最近，标签就显示哪个样式。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
