[分享]什么是CSS样式表

什么是 CSS 样式表？

当你打开一个网页时，文字的字体、颜色、大小，图片的位置，背景的颜色，元素之间的间距——所有这些视觉呈现，都由 CSS 来定义。

CSS（Cascading Style Sheets，层叠样式表） 是一种用于控制网页外观和排版布局的样式表语言。它的核心功能非常简单：告诉浏览器"这个元素应该长什么样"。

在 CSS 出现之前，网页的样式直接在 HTML 中定义。比如要让文字变成红色，就要在 HTML 标签上写 <font color="red">。这种方式有几个明显的缺陷：

CSS 解决了这些问题。它将内容的编写和样式的定义分开，让 HTML 专注于页面结构，CSS 专注于视觉呈现。

CSS 中的"C"代表"Cascading（层叠）"，这是 CSS 最核心的机制。它指的是多条样式规则可以同时作用于同一个 HTML 元素，浏览器会按照一定的优先级规则来决定最终应用哪个样式。

"层叠"有三层含义：

CSS 由一条条"规则"组成，每条规则包含选择器和声明块。

选择器 {
    属性: 值;
    属性: 值;
}

示例：

/* 将所有段落文字设为蓝色，字号为 16px */
p {
    color: blue;
    font-size: 16px;
}

将 CSS 代码写在独立的 .css 文件中，在 HTML 中通过 <link> 标签引入。这是最推荐的方式，适合多页面共享样式，便于维护。

1 2	<!-- HTML 中引用 --> <link rel="stylesheet" href="style.css">

/* style.css 文件内容 */
body {
    background-color: #f0f0f0;
}

在 HTML 的 <head> 中使用 <style> 标签编写 CSS。适用于单个页面的独有样式。

<head>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>

直接在 HTML 元素的 style 属性中定义样式。不推荐使用，因为它将样式和内容混在一起，难以维护，且优先级最高会覆盖其他所有样式。

1	<p style="color: red; font-size: 20px;">这是一段文字</p>

选择器用于定位需要应用样式的 HTML 元素，它是 CSS 最基础也最灵活的部分。

选择器类型	语法	说明	示例
标签选择器	`标签名`	选中所有该标签的元素	`p { color: red; }`
类选择器	`.类名`	选中所有带有该 class 的元素	`.intro { font-weight: bold; }`
ID 选择器	`#ID名`	选中具有该 id 的唯一元素	`#header { height: 80px; }`
后代选择器	`父子`	选中父元素内的所有子元素	`div p { color: blue; }`
子选择器	`父 > 子`	选中父元素的直接子元素	`ul > li { list-style: none; }`
伪类选择器	`:状态`	选中元素的特定状态	`a:hover { color: red; }`
伪元素选择器	`::位置`	选中元素的特定部分	`p::first-line { font-weight: bold; }`

当多条 CSS 规则作用于同一个元素时，浏览器会根据优先级规则决定使用哪一条。

优先级顺序（从高到低）：

当多个选择器优先级相同且作用于同一元素时，后定义的样式覆盖先定义的样式。

CSS 几乎可以控制网页的所有视觉方面：

版本	发布年份	主要特点
CSS 1	1996	基本样式（字体、颜色、边距等）
CSS 2	1998	添加了定位、伪类、媒体类型等
CSS 2.1	2011	修复和规范了 CSS 2
CSS 3	2011 起持续演进	模块化发布，新增圆角、阴影、动画、Flexbox、Grid、渐变等