一、CSS
前面也提到过，CSS是指层叠样式表，它是一个存放样式的样式表，而样式可以定义如何显示HTML元素，且样式通常保存在外部的.css文件中，通过相应的编辑，这个外部样式表就可以让你可以自定义该页面中所有的布局和外观。
样式表允许以多种方式规定样式信息。样式可以规定在单个的HTML元素中、在HTML的头元素中（＜head＞标签）、或在一个外部的CSS文件中。甚至可以在同一个HTML文档内部引用多个外部样式表。
那么，当同一个HTML元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其第四个拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于＜head＞标签内部）
- 内联样式（在HTML元素内部）
因此，内联样式（在HTML元素内部）拥有最高的优先权，当同一个HTML元素被不止一个样式定义时，会优先采用内联样式。
CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。
- 选择器：通常是你需要改变样式的HTML元素。常用的选择器有标签选择器、类（class）选择器、id选择器、属性选择器。
- 声明：每条声明由一个属性和一个值组成。
- 属性：是你希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。
下面的示意图更清晰的展示了CSS语法的构成部分：
插入样式表
当读到一个样式表时，浏览器会根据它来格式化HTML文档。插入样式表的方法有三种：
- 外部样式表：指将在外部编辑好的.css文件引入到当前HTML文档中。每个页面使用＜link＞标签来链接到外部的样式表。
注：＜link＞标签是空标签，它仅包含属性，并且它只存在于head部分，且能出现任意次数。
link元素的常用属性有：- href：规定被链接文档的位置
- rel：规定当前文档与被链接文档的关系
- type：规定被链接文档的类型
- 内部样式表：当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用＜style＞标签来在文档＜head＞标签中定义内部样式表。且＜style＞标签有一个必需的属性type，它规定了样式表的类型。
- 内联样式：由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。要使用内联样式，需要在相关的标签内使用样式（style）属性，（注：不是style标签，而是style属性），style属性可以包含所有CSS属性。例如前面提到过的在＜font＞标签中改变字体的属性。
注：当这些样式同时存在时，且针对同一个标签时，谁离该标签近就采用谁，简而言之，谁在最后就谁，后面会把前面重复的样式覆盖掉。
CSS常用选择器
- 标签选择器：针对某一种标签整体样式的设计,直接用标签名来表示
- 类（class）选择器：针对某一类样式的设计，用 ".+类名"来表示
- id选择器：针对某一个id样式的设计，用"#+id"名来表示
- 属性选择器：针对某个标签中属性样式的设计，用"[属性名]"来表示
其中：在前三种选择器中，优先级的顺序是：id＞类＞标签，举个例子就是如果id选择器的优先级是100的话，类选择器就是10，标签选择器的优先级就是1。
示例代码如下：
①HTML文档部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css的练习</title>
<!--外联样式：针对整个项目样式的设计 -->
<link rel="stylesheet" type="text/css" href="style.css">
<!--内嵌样式：针对当前网页样式的设计-->
<!--
<style type="text/css">
p{
font-size: 20px;
color: red;
font-weight: bold;
}
</style>
-->
<!-- style标签 此处是定义了p标签 的样式 20px、字体为红色 加粗 -->
<!--当内嵌样式和外联样式共同存在时，谁离设计的样式最近就用谁，简而言之
谁在最后就用谁，后面的会把前面的覆盖掉。
-->
</head>
<body>
<!--行内样式：针对某一行样式的设计 class 表示对其分类 -->
<p>哈哈哈哈哈</p>
<p class="TSYD">朴宝英</p>
<p class="TSYD TV">朴信惠</p>
<p class="TSYD TV" id="zw">谭松韵</p>
<p class="TSYD TV">杨紫</p>
<p style="font-size: 15px; color: green;">刘昊然</p>
<p class="BYXH">就哦哦卡萨丁</p>
<p class="BYXH">大</p>
<p class="BYXH">啊我店铺</p>
</body>
</html>
②外部CSS样式（style.css）：
/* 标签选择器：针对某一种标签整体样式的设计*/
p{
font-size: 20px;
color: red;
font-weight: bold;
font-style: italic;
}
/*对类的设计 用。来表示*/
/*类选择器-- 针对某一类样式的设计*/
.TSYD{
text-decoration: underline;
}
.BYXH{
font-family: "宋体";
}
.TV{
background-color: azure;
}
/*id 选择器： 针对某一个id样式的设计*/
#zw{
/* border 为边框的意思
border-top: solid;
border-top-width: 3px;
border: dashed 2px red;
*/
border-top: solid 3px yellow;
border-bottom: dashed 5px black;
border-left: solid 4px red;
border-right: dashed 6px green;
}
/*优先级 id 100 class 10 标签 1*/
代码运行效果如下图：
二、超链接的状态
前面以及学过的用＜a＞标签来表示超链接，在学习过CSS后，本次将采用CSS样式表来显示控制超链接的状态。
所谓的超链接状态：就是类似于鼠标悬停在链接上方的样式或是鼠标点击在链接上方时的样式之类的状态；具体如下：
- link：普通的、未被访问的链接样式
- visited：已被访问的链接样式
- hover：鼠标悬停链接上方的样式
- active：鼠标点击链接时的样式
css定义超链接是有先后顺序的。否则，在某些浏览器里面有可能会出现某个样式不能起作用的bug。不能显示出想要的效果。CSS定义超链接的顺序是：L-V-H-A。
示例代码如下：
①HTML文档部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接的状态</title>
<link rel="stylesheet" type="text/css" href="zw-10超链接的状态.css"/>
</head>
<body>
<a href="index.html" target="_blank">
超链接状态
</a>
</body>
</html>
②外部CSS样式（style.css）：
/*link 表示普通的、未被访问的链接样式
*表示只要你进入过该网站，那么link中的内容不会实现*/
a:link{
color: red;
font-size: 20px;
text-decoration: none;
}
/*visited 用户已访问的链接样式*/
a:visited{
color: skyblue;
}
/*hover 鼠标指针位于链接上方样式*/
a:hover{
color: green;
text-decoration: underline;
}
/*active 链接被点击时的时刻样式*/
a:active{
color: blue;
}
效果如下：
 |  |  |
| 鼠标未悬停和点击时 | 鼠标悬停时 | 鼠标点击时 |
本文的部分内容参考来源于W3 school
1416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
