> For the complete documentation index, see [llms.txt](https://tonyyipx.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tonyyipx.gitbook.io/web/2-html-css/05-css-jian-jie.md). # 05 - CSS 简介 ### ★为什么我们需要 CSS `什么是 CSS？` * What：**C**ascading **S**tyle **S**heet (**CSS**) **层叠样式表** * **C**ascading * 在编程中，“cascading” 通常与 **CSS（Cascading Style Sheets）** 相关，即样式会按照优先级从上到下逐层应用。 * 样式的应用方式如瀑布般层层递进 * **S**tyle **S**heet * 类似于HTML，是一种标记语言 * 一种允许我们指定网站上的内容的外观 * 该语言有很多种类型： * CSS：最重要的 * Sass：它在语法上很棒的样式表 * Less：代表Learner CSS * ... * Why： * HTML 3.2 (\[最初只有html时]1997年W3C发布)：引入新的HTML标签 * font tag：font size/color/face * \ * 已被弃用：因为我们的HTML应该是用于内容的，如果在所有内容中添加大量的样式，那么这将会极大地扰乱你的所有HTML，无法分辨出该网站的结构和内容到底是什么 * 1996年W3C的Håkon Wium Lie建议 * 允许附加样式 (eg. fonts, colors and spacing)到HTML文档 * 这是一个突破：能够将风格与内容分开 * 模块化：关注点分离，以便有人负责 (like 汽车生产线) * How：[Example HTML Website](https://appbrewery.github.io/just-add-css/) * 网页中的每个元素本质上都是由一系列盒子组成的 ### ★ 如何添加 CSS 内联样式 `Inline CSS` 内部样式 `Internal CSS` 外部样式 `External CSS` * 内联CSS * CSS属性可以放在HTML文件中，直接位于各个HTML标签内，为页面提供样式 * 内部CSS * 在 \ 标签中使用 \

标题

这是段落内容，带有通用选择器设置的样式。

``` #### 总结 | 使用场景 | 示例 | 说明 | | --------- | ---------------------- | ------------ | | 全局重置 | `* { margin: 0; }` | 初始化所有元素的默认样式 | | 全局默认设置 | `* { color: #333; }` | 设置默认字体颜色、大小等 | | 限定范围的通用样式 | `.container * { ... }` | 在特定范围应用全局样式 | **通用选择器**适用于全局设置，但需要在性能和需求之间权衡，避免不必要的渲染负担。 ### ★ \[项目] 颜色词汇网站 `学习西班牙语的网站`

```html ``` ```html Spanish Vocabulary

Colors

Learn the colors in Spanish!

Rojo

Azul

Anaranjado

Verde

Amarillo

``` ```css /* 设置所有图片的尺寸 */ img { height: 200px; /* 图片高度为 200 像素 */ width: 200px; /* 图片宽度为 200 像素 */ } /* .color-title 类样式 */ /* 适用于所有 class 为 "color-title" 的

元素 / .color-title { font-weight: normal; / 设置字体为正常粗细（非默认粗体） / } / 特定颜色的样式设置 / / 为每种颜色的

标题设置对应的文本颜色 / / 红色标题 "Rojo" / #red { color: red; / 文本颜色为红色 / } / 蓝色标题 "Azul" / #blue { color: blue; / 文本颜色为蓝色 / } / 橙色标题 "Anaranjado" / #orange { color: orange; / 文本颜色为橙色 / } / 绿色标题 "Verde" / #green { color: green; / 文本颜色为绿色 / } / 黄色标题 "Amarillo" / #yellow { color: yellow; / 文本颜色为黄色 */ } ``` --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://tonyyipx.gitbook.io/web/2-html-css/05-css-jian-jie.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.

标题