# CSS 语言基础 LLMS index: [llms.txt](/wikis/llms.txt) --- # CSS 语言基础 ## 样式与样式表 CSS 的全称为 **C**ascading **S**tyle **S**heets（层叠样式表），可以系统地描述网页内容的布局与面貌。 你可以点击 链接 来体会一下样式表的意义。在这个示例中，描述网页内容的 HTML 文本只有一份，但通过改变样式表，网页的布局就有了天翻地覆的变化。 > [!NOTE] > **引入 CSS** > > > 在 HTML 中引入样式的方式通常有三种： > > - 内嵌于页面元素中； > - 通过 ` CSS 示例

这是标题

这是段落。和我一起读：

你——好——世——界——

前往百度

``` 你可以点击链接 引入 CSS 前 以及 引入 CSS 后 来感受 CSS 的作用。 ## 类 使用上述样式表，我们可以对网页中指定类型的元素设置统一的样式。然而，我们有时会希望只对某一部分元素设定样式，这时就要引入**类**的概念了。 类的 CSS 选择语法与元素的类似，只需在类名前加上一个 `.` 即可。例如，我们希望定义一个类 `red`，它的背景色是红色（`red`），文本颜色为白色，且具有 `10px` 的内边距（`padding`）和 `5px` 的外边距（`margin`）。我们可以这样写： ```css .red { background: red; color: white; padding: 10px; margin: 5px; } ``` 在 HTML 代码中，我们只需给一个元素赋予 `class="red"` 的属性，这个元素就具备了我们所定义的 `red` 类的样式： ```html

红色主题

``` > [!TIP] > **使用 `
` 添加分组** > > > 当我们想要将一系列元素视为一个整体进行布局时，我们可以采用 `
` 元素创建一个分组，对这个分组设置样式或进行排版。 我们还可以以此类推，创建 `blue`、`green` 类。完整代码如下所示： ```html CSS 示例

红色主题

蓝色主题

绿色主题

``` 你可以点击 链接 在浏览器中预览这段代码。 观察上述代码，我们发现，`red`、`blue`、`green` 类的 CSS 定义中都有三条重复的属性。我们可以将公共部分提取为一个公共的类 `theme`，并给 HTML 中的每个 `
` 元素的 `class` 属性都额外添加一个 `theme` 类，如下所示： ```html CSS 示例

红色主题

蓝色主题

绿色主题

``` 这样，我们的 CSS 代码也变得更加清晰与简洁。 > [!TIP] > **用好开发者工具** > > > Firefox、Chrome、Edge、Safari 等浏览器均为开发者提供了用于查看和调试网页的工具。打开开发者工具的快捷键通常为 F12，当然这也可能因你的浏览器和操作系统而异。你可以借助搜索引擎进一步了解。 > > 以上述示例代码的网页为例，点击 链接，在打开的页面中启动开发者工具，动手查看一下元素的组织方式、元素的样式以及它们所属的类吧！ > > 以下是使用 Firefox 浏览器调试上述示例代码网页的截屏。 > > ![Firefox-debug.png](https://i.loli.net/2021/10/22/ImOGY54eTNnrpFX.png) > > 你也可以利用同样的方式对后续的示例网页进行查看与调试。 ## 组合选择器 考虑这样的需求：只希望 `theme` 类下的链接变为红色，其余位置的链接仍需使用默认样式。这就需要用到 CSS 组合选择器的语法了。如下所示： ```css .theme a { color: red; } ``` `.theme` 是类选择器，`a` 是元素选择器，它们之间通过空格分隔，表示只对 `.theme` 类的 `` 元素后代有效。 完整代码如下所示： ```html CSS 示例

红色主题，红色链接

普通链接

``` 你可以点击 链接 在浏览器中预览这段代码。 > [!NOTE] > **不同的组合方式** > > > 在 CSS3 中一共包含了四种组合方式： > > - 后代选择器(以空格分隔) > - 子元素选择器(以大于号 **`>`** 分隔） > - 相邻兄弟选择器（以加号 **`+`** 分隔） > - 普通兄弟选择器（以波浪号 **`~`** 分隔） > [!NOTE] > **参考手册** > > > CSS 选择器有多种多样的表达形式，你可以参阅 [CSS 选择器参考手册](https://www.w3school.com.cn/cssref/css_selectors.ASP) 来找到你所需要的选择器语法。 ## 盒模型 ![盒模型](https://www.runoob.com/images/box-model.gif) 盒模型将每个 HTML 元素视为一个方形盒子，关注的核心在于内外边距以及边框的样式。在排版布局时，我们需要合理设置 `padding` 和 `margin` 的数值，才能让自己的网页呈现出最舒适的布局。 ## 网页布局 ![网页布局](https://www.runoob.com/wp-content/uploads/2019/04/DBD1E737-47C5-445E-BFEC-7547210D88D5.jpg) 网页的布局通常有一些固定的模式。我们一般会将各个区域用 `
` 元素组合起来，然后考虑这些区域的排版布局。 > [!TIP] > **了解原理即可** > > > 事实上，我们很少会完全手写网页的布局，因为许多前端样式库能够帮我们实现这些事情，且通常比我们手写的做得更好。 ### 左右布局 网页的排布逻辑一般都是自上而下的。左右布局的区域通常需要组合后嵌套在一行中，且需要利用浮动（`float`）属性，如下所示： ```html
上面的内容
左
中
右
下面的内容
``` > [!NOTE] > **内嵌样式** > > > 你可能注意到了，上面的示例代码中，左边区域和右边区域的 `
` 元素上都添加了 `width`、`float` 等样式属性。 > > 这是一种通过内嵌于页面元素引入 CSS 的方式，可以“临时”“一次性”地为一些元素添加样式。 ### 固定布局 我们有时会希望一些区域固定在网页的某个位置，例如我们会希望导航栏固定在页面顶部，不随页面滚动而改变。这时，我们只需使用 `position: fixed` 属性，如下所示： ```css .top { position: fixed; top: 0; left: 0; } ``` 即可让 `top` 类的元素实现固定顶部的效果。 完整代码如下所示： ```html CSS 示例
``` 你可以点击 链接 在浏览器中预览这段代码。 ## 后续拓展 现在，你已经学会了通过 CSS 控制网页的样式。接下来，你可以为你的网页赋予行为，这就需要 JavaScript 的相关知识。 当然，你可能会不满于手写 CSS 样式，想要探索一些前端样式库，因此你也可以继续往下阅读前端样式库的有关文档。 后续可以阅读的文档有： - JavaScript 语言基础 [/languages/javascript](/wikis/skills/languages/javascript/) - Bootstrap 简介 [/languages/css/bootstrap](/wikis/skills/languages/css/bootstrap/) - MDUI 简介 [/languages/css/mdui](/wikis/skills/languages/css/mdui/) ## 资源链接 - w3school CSS 教程 [https://www.w3school.com.cn/css/index.asp](https://www.w3school.com.cn/css/index.asp) - 菜鸟教程 CSS 教程 [https://www.runoob.com/css/css-tutorial.html](https://www.runoob.com/css/css-tutorial.html) --- Section pages: - [Bootstrap 简介](/wikis/skills/languages/css/bootstrap/) - [MDUI 简介](/wikis/skills/languages/css/mdui/)