CSS 基础入门教程
🎯 引言
CSS（Cascading Style Sheets）是网页设计中的核心技术之一，负责定义网页的外观和样式。无论你是刚刚开始学习网页开发的新手，还是想要进一步提升自己技能的开发者，掌握 CSS 都是必不可少的。
在这篇文章中，你将会了解 CSS 的基础概念、语法结构、继承机制，以及如何应用 CSS 来美化网页。通过本教程，你不仅能学会如何设置网页的颜色、字体、布局，还能了解更进阶的 CSS3 特性，进一步提升你设计网页的能力。
接下来，我们将从最基本的知识讲起，逐步深入，帮助你掌握 CSS 的各项技能。
🧨 什么是 CSS？
CSS 是层叠样式表（Cascading Style Sheets）的缩写，是一种用于描述 HTML（超文本标记语言）和 XML（可扩展标记语言）文档外观的语言。它与 HTML 一起使用，能够控制网页的布局、颜色、字体等样式。
为什么需要 CSS？
- 分离内容与样式：HTML 主要用来定义网页的结构内容，而 CSS 则负责网页的外观设计。通过这种分离，网页的结构和样式能更加独立，维护起来更方便。
- 提高网页加载效率：通过集中管理样式，可以减少重复代码，使得网页的加载速度更快。
- 增强用户体验：CSS 提供了丰富的设计功能，可以让网页更具交互性，提升用户的浏览体验。
✍️ CSS 的三种写法
CSS 有三种主要的写法方式，分别是：
- 内联样式（Inline CSS）：直接写在 HTML 元素的
style属性中。 - 内部样式表（Internal CSS）：写在 HTML 页面的
<style>标签内，通常位于文档的<head>部分。 - 外部样式表（External CSS）：通过外部的
.css文件来控制样式，并通过<link>标签引入。
内联样式（Inline CSS）
内联样式是直接在 HTML 标签的 style 属性中写 CSS 样式。它的优点是方便快速，但缺点是难以维护和复用。
<p style="color: red;">这是一个红色的段落。</p>
内部样式表（Internal CSS）
内部样式表一般放在 HTML 文件的 <head> 部分，通过 <style> 标签来定义。
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>这是一个红色的段落。</p>
</body>
外部样式表（External CSS）
外部样式表将 CSS 代码写在独立的 .css 文件中，然后通过 <link> 标签引用。这种方式最适用于大型网站，能够有效地复用样式和减少冗余。
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<p>这是一个红色的段落。</p>
</body>
🧱 基本语法结构：选择器 + 属性
CSS 的基本语法是由选择器和属性组成的。选择器用于指定哪些 HTML 元素应用样式，而属性则定义了具体的样式。
选择器
选择器是 CSS 规则的核心，它用于指定页面中需要应用样式的 HTML 元素。常见的选择器有：
- 元素选择器：选择指定类型的所有元素。
p { color: red; } - 类选择器：选择所有具有指定类名的元素，前面加
.。.myClass { color: blue; } - ID 选择器：选择具有特定 ID 的元素，前面加
#。#myId { color: green; }
属性
属性是 CSS 规则的一部分，用于定义样式的具体内容。常见的属性包括 color、font-size、background-color 等。
p {
color: red;
font-size: 16px;
}
🧬 CSS 的继承机制
CSS 有一个非常重要的概念——继承。它是指一些样式属性会自动地从父元素传递给子元素，这样可以避免在每个元素上都重复设置相同的样式。
继承示例
比如，设置了 body 的字体样式，所有的段落和文本元素都会继承该样式。
body {
font-family: Arial, sans-serif;
}
p {
color: blue;
}
这时，所有的段落文字都会使用 Arial 字体，并且显示为蓝色。
🚀 什么是 CSS3？
CSS3 是 CSS 的第三个版本，相比于之前的版本，它新增了许多现代网页设计的特性，使得网页可以有更加丰富的效果和动画。CSS3 引入了以下重要的功能：
- 圆角：通过
border-radius属性可以使元素的边角变圆。div { border-radius: 10px; } - 阴影效果：可以为元素添加阴影，使页面更加立体。
p { box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); } - 渐变背景：通过
background-image和linear-gradient创建渐变效果。body { background-image: linear-gradient(to right, red, yellow); } - 动画与过渡：CSS3 提供了动画和过渡效果，使网页更加生动。
.box { transition: all 0.3s ease; } .box:hover { transform: scale(1.2); }
🧾 小节总结
- CSS 是网页样式设计的核心技术，负责定义网页的外观。
- CSS 有三种常见写法：内联样式、内部样式表和外部样式表。
- CSS 的基本语法是由选择器和属性组成的，选择器用于指定应用样式的 HTML 元素，属性用于定义样式内容。
- CSS 的继承机制可以使样式自动传递到子元素。
- CSS3 引入了许多现代网页设计的特性，如圆角、阴影、渐变、动画等。
❓ 知识问答（Q&A）
Q：什么是内联样式，它有什么缺点？
A：内联样式是将 CSS 样式直接写在 HTML 元素的 style 属性中，缺点是样式难以复用，不易维护。
Q：为什么使用外部样式表？
A：外部样式表使得 CSS 样式与 HTML 内容分离，方便管理和维护，能够复用样式，减少代码重复。
Q：CSS3 引入了哪些新特性？
A：CSS3 引入了圆角、阴影效果、渐变背景、动画与过渡等新特性，可以让网页更加生动和现代。
🧪 小练习
练习 1：应用内联样式
请在网页中创建一个段落元素，并使用内联样式将该段落的文字颜色设置为红色。
<p style="color: red;">这是一个红色的段落。</p>
请拷贝到编辑器中去尝试预览体验吧！
练习 2：使用外部样式表设置字体
创建一个 .css 文件，设置所有段落的字体为 Arial，文字大小为 16px，并在 HTML 文件中引用该外部样式表。
/* styles.css */
p {
font-family: Arial, sans-serif;
font-size: 16px;
}
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<p>这是一个段落。</p>
</body>
请拷贝到编辑器中去尝试预览体验吧！
🎉 恭喜你已经掌握了 CSS 的基础语法、继承机制以及 CSS3 的一些常用特性！继续加油，下一步我们会学习更进阶的技巧！