编辑“︁CSS”︁

== CSS ==

'''CSS'''（级联样式表，Cascading Style Sheets）是一种用于描述HTML或XML（包括SVG，MathML等派生语言）文档样式的样式表语言。<ref>https://developer.mozilla.org/zh-CN/docs/Web/CSS</ref> CSS是Web开发中不可或缺的工具，它为网页添加样式，包括字体，颜色，间距，对齐和布局等。

== 历史 ==
CSS由荷兰计算机科学家哈肯·利（Håkon Wium Lie）在1994年首次提出，最初的目标是解决HTML在视觉表现方面的局限性。CSS1的最初草案于1996年12月公布，随后在1998年5月，CSS2成为W3C推荐标准。此后，CSS3开始作为一系列模块进行开发和发布，使得语言变得更加丰富和灵活。

== 语法 ==
CSS规则由两个主要部分组成：选择器，以及一组被大括号包围的声明。每个声明包括一个属性和一个值，用冒号分隔。

<syntaxhighlight lang="css">
/* CSS 注释 */
/* 选择器 {
  属性: 值;
} */

body {
  background-color: #f0f0f0;
  color: #333;
}
</syntaxhighlight>

上述代码中，选择器是`body`，表示这些样式会应用到网页中所有`<body>`元素。声明是`background-color: #f0f0f0;`和`color: #333;`，分别设置背景颜色和文字颜色。

== 选择器 ==
CSS提供多种选择器，可以根据元素名，类名，ID，属性，属性值等选择元素。以下是一些常用的选择器：

* 元素选择器：选择HTML元素。例如，`p`选择器会选择所有`<p>`元素。
* 类选择器：以`.`开始，选择具有特定类的元素。例如，`.intro`选择器会选择所有具有`intro`类的元素。
* ID选择器：以`#`开始，选择具有特定ID的元素。例如，`#firstname`选择器会选择ID为`firstname`的元素。

<syntaxhighlight lang="css">
/* 元素选择器 */
p {
  color: red;
}

/* 类选择器 */
.intro {
  font-size: 20px;
}

/* ID选择器 */
#firstname {
  border: 1px solid black;
}
</syntaxhighlight>

== CSS盒模型 ==
在CSS中，所有HTML元素都可以看作盒子。CSS盒模型是对HTML元素的描述，包括内容(content)，填充(padding)，边界(border)和外边距(margin)。这是CSS布局的基础。

<mermaid>
graph LR
A[Content] --> B[Padding]
B --> C[Border]
C --> D[Margin]
</mermaid>

== 实际应用 ==
使用CSS，开发者可以大幅度改变网页的外观和感觉。例如，下面的代码将改变所有段落的字体颜色，背景颜色，字体大小和文本对齐方式：

<syntaxhighlight lang="css">
p {
  color: white;
  background-color: #333;
  font-size: 18px;
  text-align: center;
}
</syntaxhighlight>

这将使所有的段落文本颜色变为白色，背景颜色变为深灰色，字体大小为18像素，且文本居中对齐。

== 参考文献 ==
<references />

[[Category:编程语言]]
[[Category:前端开发]]
[[Category:Web开发]]