What is CSS?
CSS 代表 Cascading Style Sheets (层叠样式表)
CSS 描述了 HTML 元素应如何显示
CSS 示例
<style>
body {background-color:lightblue; text-align:center;}
h1 {color:blue; font-size:40px;}
p {font-family:verdana; font-size:20px;}
</style>
自己动手试一试 »
单击“Try it Yourself”按钮查看其工作原理。
CSS 语法
CSS 规则由一个选择器和一个声明块组成
选择器指向要样式化的 HTML 元素 (h1)。
声明块（在花括号内）包含一个或多个由分号分隔的声明。
每个声明都包含一个 CSS 属性名称和一个值，由冒号分隔。
在下面的示例中，所有 <p> 元素都将居中对齐、显示为红色，并且字体大小为 32 像素。
示例
<style>
p {font-size:32px; color:red; text-align:center;}
</style>
相同的示例也可以这样编写
<style>
p {
font-size: 32px;
color: red;
text-align: center;
}
</style>
自己动手试一试 »
外部样式表
CSS 样式表可以存储在外部文件中
mystyle.css
body {background-color: orange; font-family:verdana}
h1 {color: white;}
p {font-size: 20px;}
外部样式表使用 <link> 标签链接到 HTML 页面
示例
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="mystyle.css">
<body>
<h1>我的第一个 CSS 示例</h1>
<p>这是一个段落。</p>
</body>
</html>
内联样式
示例
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="mystyle.css">
<body>
<h1>我的第一个 CSS 示例</h1>
<p>这是一个段落。</p>
<p style="font-size:25px">这是一个段落。</p>
<p style="font-size:30px">这是一个段落。</p>
</body>
</html>
层叠顺序
如果为 HTML 元素指定了不同的样式，则样式将层叠成具有以下优先级的较新样式
- 优先级 1：内联样式
- 优先级 2：外部和内部样式表
- 优先级 3：浏览器默认样式
- 如果在同一优先级级别上定义了不同的样式，则最后一个具有最高优先级。
示例
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="mystyle.css">
<style>
body {background-color: lightblue;}
</style>
<body style="background-color: olivedrab">
<h1>多种样式层叠为一种</h1>
<p>尝试通过删除样式来实验，看看层叠样式表是如何工作的。</p>
<p>尝试先删除内联样式，然后是内部样式，最后是外部样式。</p>
</body>
</html>
CSS 演示 - 一个 HTML 页面 - 多种样式！
在这里，我们将展示一个带有 4 种不同样式表的 HTML 页面。
点击样式表按钮 (1-4) 即可查看页面使用不同样式显示。
完整 CSS 教程
以上是 CSS 的简要介绍。
如需完整的 CSS 教程，请访问 W3Schools CSS 教程。
如需完整的 CSS 参考，请访问 W3Schools CSS 参考。
