什么是 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>
自己尝试 »
点击“自己尝试”按钮查看其工作原理。
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 参考。
