CSS 简介
2025-05-07
CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。
通过使用 CSS 我们可以大大提升网页开发的工作效率！
在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。
CSS3 现在已被大部分现代浏览器支持，而下一版的 CSS4 仍在开发中。
- 包含选择器、布局（Flex/Grid）、动画等完整教程。MDN CSS 文档
- 实用技巧和示例（如居中、阴影、响应式设计）。CSS Tricks
- 官方标准文档（适合高级开发者）。W3C CSS 规范
- 交互式游戏学习 Flexbox。Flexbox 布局指南
什么是 CSS?
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
- 选择器通常是您需要改变样式的 HTML 元素。
- 声明是您希望应用于选择器的样式属性及其值。
<p>Hello World!</p>
<p>这个段落采用CSS样式化。</p>p
{
color:red;
text-align:center;
}选择器
- id 选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 伪元素选择器
- 通配选择器
- 标签选择器
内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器
ID 选择器
ID 选择器是通过元素的 id 属性来选择元素的。
<p id="demo">Hello World!</p>
<p>这个段落未采用CSS样式化。</p>#demo
{
color:red;
text-align:center;
}类选择器
类选择器是通过元素的 class 属性来选择元素的。
ID 选择器是通过元素的 id 属性来选择元素的。
<p class="demo">Hello World!</p>
<p class="demo">Hi World!</p>
<p>这个段落未采用CSS样式化。</p>.demo
{
color:red;
text-align:center;
}标签选择器
标签选择器是通过元素的标签名来选择元素的。
<p class="demo">Hello World!</p>
<p class="demo">Hi World!</p>
<h2>这个段落未采用CSS样式化。</h2>p
{
color:red;
text-align:center;
}通用选择器
通用选择器是通过星号 (*) 来选择所有元素的。
组合选择器
组合选择器是通过空格来选择多个元素的。
样式表插入方式
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。
每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:
<head>
<style>
p
{
color:red;
text-align:center;
}
</style>
</head>内联样式
当需要为一个单独的元素添加样式时，就应该使用内联样式。你可以直接在相关标签中使用 style 属性，就像这样:
<p style="color:red;text-align:center;">Hello World!</p>这种方法不太常用，但有时确实有用。
多重样式
当多个样式规则应用于同一个元素时，它们将按照它们在样式表中出现的顺序进行层叠。 例如，如果一个元素同时具有两个类，并且这两个类都有相同的样式属性，那么将应用最后出现的样式。
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
@tab html
<style>
.v1
{
color:red;
font-size:16px;
}
.v2
{
text-align:right;
}
</style>
<p class="v1">Hello World!</p>
<p class="v2" style="text-align:left;">Hi World!</p>
<p class="v1 v2" style="color:green;">Yeah World!</p>@tab css
.v1
{
text-align:center;
color:red;
}
.blue
{
color:blue;
}注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 /* 开始, 以 */ 结束, 实例如下:
/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}