# 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

red

Azul

blue

Anaranjado

orange

Verde

green

Amarillo

yellow ``` ```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; /* 文本颜色为黄色 */ } ```