CSS级联样式表（Cascading Style Sheets，简称CSS）是一种用来定义HTML文档的外观和格式的语言。它可以控制文本大小、颜色、字体、图片位置和其他多种元素。CSS可以使HTML文档更加丰富多彩，并且能够使页面的内容更加有条理。
CSS是一种层叠样式表语言，它允许用户将不同的样式应用于不同的HTML元素。这意味着用户可以在一个文件中定义所有的样式，而不必在每个HTML文件中重复定义相同的样式。这使得CSS非常有效，因为用户只需要在一个地方修改样式就能影响整个站点。
body {
font-family: Arial, sans-serif;
font-size: 14px;
color: #333333;
}
h1 {
font-size: 24px;
color: #0099cc;
}
a {
color: #0099cc;
text-decoration: none;
}
例如，为一个元素选择文本的颜色。
浏览器将需要为CSS颜色属性找到一个值。
首先，它将检查它试图渲染的元素是否具有定义颜色值的内联样式，如下所示：
<a style="color:red" href="https://www..cn">Visit the website</a>
如果没有内联样式，浏览器将查找包含适用于元素的样式的样式元素，如下所示：
<style type="text/css">
a {
color: red;
}
</style>
如果没有这样的样式元素，浏览器会查看通过链接元素加载的样式表。
属性的前三个来源（内联样式，嵌入样式和样式表）统称为作者样式。
用户样式表中定义的样式称为用户样式，浏览器定义的样式称为浏览器样式。
您可以通过将属性值标记为重要来覆盖正常的级联顺序。
通过对声明附加！important ，可以将单个值标记为重要。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
a {
color: black !important;
}
</style>
</head>
<body>
<a style="color:red" href="https://www..cn">Visit the website</a>
<p>This is a text.</p>
<a href="https://www.w3.org" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >Visit the W3C website</a>
</body>
</html>浏览器优先选择重要的样式，无论它们在何处定义。
如果有两个样式应用于在同一级别定义的元素，并且它们都包含浏览器正在寻找的CSS属性的值。
要决定使用哪个值，浏览器会评估每个样式的特异性，并选择最具体的值。
浏览器通过计算三个不同的特征来确定样式的特异性：
浏览器合并来自每个评估的值，并应用来自最特定样式的属性值。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a {
color: black;
}
a.myclass {
color:white;
background:grey;
}
</style>
</head>
<body>
<a href="https://www..cn">Visit the website</a>
<p>The is a test.</p>
<a class="myclass" href="https://www.w3.org" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >Visit the W3C website</a>
</body>
</html>
当评估特异性时，您以a-b-c的形式创建一个数字，其中每个字母是三个特征之一的总和。
只有a值相等，浏览器才会比较b值。
只有当a和b的值相同时，浏览器才会考虑c值。
1-0-0的特异性得分比0-2-2更特异。
在上面的代码中，selector a.myclass包含一个类属性，这意味着样式的特殊性是0-1-0。 0用于id值，1用于其他属性，0用于元素名称。
当呈现已分配给myclass类的元素时，浏览器会为color属性找到一个值。对于所有其他的元素，将使用另一个样式的值。
当在具有相同特定性的样式中定义值时，浏览器根据顺序选择值。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a.myclass1 {
color: black;
}
a.myclass2 {
color:white;
background:grey;
}
</style>
</head>
<body>
<a href="https://www..cn">website</a>
<p>This is a paragraph.</p>
<a class="myclass1 myclass2" href="https://www.w3.org" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >W3C</a>
</body>
</html>
如果浏览器找不到一个可用样式中的值，它将使用继承。
继承意味着获取由父元素定义的属性的值。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
color:white;
background:grey;
border: medium solid black;
}
</style>
</head>
<body>
<a href="https://www..cn">website</a>
<p>This is a <span>test</span>.</p>
<a href="https://www.w3.org" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >W3C</a>
</body>
</html> span 元素的父代是 p 元素。
span元素从父p元素继承color属性。
不是所有的CSS属性都是继承的。
只有与外观相关的是继承的，包括文本颜色，字体详细信息等。
与布局相关的不是继承。
你可以通过使用inherit在样式中强制继承，
inherit 显式地告诉浏览器对属性使用父元素的值。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
color:white;
background:grey;
border: medium solid black;
}
span {
border: inherit;
}
</style>
</head>
<body>
<a href="https://www..cn">website</a>
<p>This is a <span>test</span> from www..cn.</p>
<a href="https://www.w3.org" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >W3C</a>
</body>
</html>
CSS 创建当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。 如何插入样式表插入样式表的方法有三种:外部样式表内部样式表...
css 是一个网页的外衣，网页好不好看取决于 css 样式，而布局是 css 中比较重要的部分，当产品把一个需求设计交到手中，我首先要...
CSS 单位若您想让某个 HTML 元素在指定窗口显示出您所期望的样子，那么需要您为它设置 CSS 属性并为该属性指定一个具体的数值和...
header 标签表示介绍性的内容，可以让您了解页面涉及的内容，具有导航性。header 标签可能包含标题元素或者其他元素，比如下面的...
ol 标签在 HTML 中表示有序列表，是 ordered lists 的缩写。您可以自定义有序列表的初始序号，请参考下面的实例：实例2 个不同的...