什么是 CSS？

什么是 CSS？

CSS 是 Cascading Style Sheets 的缩写，是用来装饰文档样式的样式表语言。

可以指定字体、背景色、宽高、位置等。

把 CSS 应用到 HTML 的方法

• 内联样式表：直接在 HTML 标签里写 CSS 代码
• 内部样式表：在 <style> 标签里写 CSS 代码
• 外部样式表：在单独的 CSS 文件里写 CSS 代码

优先级

如果对一个元素应用了相同属性、不同值的 CSS 值，则优先级按 内联 > 内部 > 外部 的顺序应用。

选择器

可以用选择器给特定元素应用样式。

**通用选择器          标签选择器**

**id 选择器       类选择器**

**子、后代选择器   伪类选择器**

通用选择器：选择所有元素的选择器，*{ 属性 : 属性值; }

标签选择器：选择 HTML 标签的选择器，标签名 { 属性 : 属性值; }

id 选择器：选择特定 id 的选择器，#id 名 { 属性 : 属性值; }

类选择器：选择特定类的选择器，.类名 { 属性 : 属性值; }

子选择器：选择子元素的选择器，父标签 > 子标签 { 属性 : 属性值; }

后代选择器：选择后代元素的选择器，父标签 后代标签 { 属性 : 属性值; }

伪类选择器：选择虚拟存在元素的选择器，元素:伪类 { 属性 : 属性值; }

id 选择器 vs 类选择器

页面内多次重复的样式 = 使用类选择器

仅唯一应用一次的样式 = 使用 id 选择器

这是因为类属性可以重复，而 id 属性不能重复。

高效学习 CSS 的方法

https://developer.microsoft.com/en-us/microsoft-edge/platform/usage/

要在浩瀚的 CSS 中高效学习，我推荐通过这样的指标先学常用的代码。

示例

下面的代码是拖拽时会改变 text 的阴影和颜色、背景色的代码。用伪选择器 ::selection 制作。这就是当前在本站拖拽文字会显示紫色的那段代码。另外下面的按钮用伪选择器 :hover 制作，鼠标悬停时会出现 box-shadow。

See the Pen by nabomhalang (@nabomhalang) on CodePen.

如上，善用伪选择器就能装饰得非常漂亮。再举个漂亮的 css 示例，

See the Pen CSS 3D Blend Mode Buttons by Lisi (@lisilinhart) on CodePen.

See the Pen wallet - icon animation by Mike Aparicio (@peruvianidol) on CodePen.

上面这样的代码可以不用 JS 就做出来。

如果想浏览更漂亮的按钮，请访问 https://freefrontend.com/css-buttons/。

由于我们在网站上最显眼的就是设计（css），所以我觉得 css 非常重要。希望你务必好好掌握。

---

原文（韩语）: tistory — 发布于 2021-06-27，已迁移至本博客。本翻译由 AI 协助完成。