CSS入门指南：从零开始学习层叠样式表

欢迎来到CSS的世界！

大家好，欢迎来到今天的讲座！今天我们要一起探索的是CSS——层叠样式表（Cascading Style Sheets）。如果你是一个前端开发的初学者，或者对CSS还不是很熟悉，那么你来对地方了！我们将从零开始，一步一步地学习CSS的基础知识，并通过一些实际的例子来帮助你更好地理解。

什么是CSS？

首先，我们来回答一个最基本的问题：什么是CSS？

CSS是一种用于描述HTML文档外观的标记语言。它可以帮助我们控制网页的颜色、字体、布局、间距等视觉效果。简单来说，HTML是网页的骨架，而CSS则是给这个骨架穿上漂亮的衣服，让它看起来更加美观和有吸引力。

举个例子，假设你有一个HTML文件，里面有一段文本：

<p>这是一个普通的段落。</p>

默认情况下，这段文本会以浏览器的默认样式显示。但如果我们加上CSS，就可以让这段文本变得更加个性化：

p {
  color: blue;
  font-size: 20px;
  font-family: Arial, sans-serif;
}

现在，这段文本会变成蓝色，字体大小为20像素，使用Arial字体。是不是很简单？

CSS的基本语法

接下来，我们来看看CSS的基本语法。CSS的规则由两部分组成：选择器和声明块。

选择器：用来指定你想要应用样式的HTML元素。
声明块：包含一组属性和值，定义了该元素的具体样式。

一个完整的CSS规则看起来像这样：

选择器 {
  属性1: 值1;
  属性2: 值2;
  ...
}

例如：

h1 {
  color: red;
  text-align: center;
}

这条规则的意思是：所有<h1>标签中的文本颜色为红色，并且居中对齐。

选择器的种类

CSS提供了多种选择器，帮助我们更精确地控制页面中的元素。常见的选择器有以下几种：

选择器类型	语法	描述
标签选择器	`element`	选择所有指定的HTML标签，如`p`、`div`、`h1`等。
类选择器	`.class`	选择所有具有指定类名的元素。类名前面需要加点号`.`。
ID选择器	`#id`	选择具有指定ID的唯一元素。ID前面需要加井号`#`。
伪类选择器	`:pseudo-class`	选择处于特定状态的元素，如`:hover`、`:active`、`:visited`等。
伪元素选择器	`::pseudo-element`	选择元素的特定部分，如`::before`、`::after`。

示例

<!-- HTML -->
<h1 class="title">欢迎来到我的网站</h1>
<p id="intro">这是一个介绍段落。</p>
<a href="https://example.com">点击这里</a>

/* CSS */
.title {
  color: green;
}

#intro {
  font-size: 18px;
}

a:hover {
  text-decoration: none;
  color: orange;
}

在这个例子中：

.title选择了所有带有class="title"的元素，并将它们的文本颜色设置为绿色。
#intro选择了ID为intro的元素，并将其字体大小设置为18像素。
a:hover选择了鼠标悬停时的链接，并去掉了下划线，同时将颜色改为橙色。

内联样式、内部样式表和外部样式表

CSS可以有三种不同的方式应用到HTML文档中：内联样式、内部样式表和外部样式表。每种方式都有其优缺点，下面我们来逐一介绍。

1. 内联样式

内联样式是直接在HTML标签中使用style属性来定义样式。这种方式的优点是简单直接，但缺点是代码重复性高，维护困难。

<p style="color: purple; font-size: 16px;">这是一个带有内联样式的段落。</p>

2. 内部样式表

内部样式表是将CSS代码放在HTML文档的<head>部分的<style>标签内。这种方式比内联样式更灵活，适用于同一页面内的多个元素。

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <p>这是第一个段落。</p>
  <p>这是第二个段落。</p>
</body>
</html>

3. 外部样式表

外部样式表是最常用的方式，它将CSS代码保存在一个单独的.css文件中，然后通过<link>标签引入到HTML文档中。这种方式的好处是可以复用样式，减少代码冗余，并且便于维护。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>这是第一个段落。</p>
  <p>这是第二个段落。</p>
</body>
</html>

/* styles.css */
p {
  color: green;
  font-size: 16px;
}

常用的CSS属性

CSS中有许多属性可以用来控制页面的外观。下面是一些常用的属性及其说明：

属性	说明
`color`	设置文本颜色。
`background-color`	设置背景颜色。
`font-size`	设置字体大小。
`font-family`	设置字体类型。
`text-align`	设置文本对齐方式（`left`、`right`、`center`、`justify`）。
`margin`	设置元素的外边距。
`padding`	设置元素的内边距。
`border`	设置元素的边框。
`width`	设置元素的宽度。
`height`	设置元素的高度。
`display`	控制元素的显示方式（`block`、`inline`、`none`等）。
`position`	设置元素的定位方式（`static`、`relative`、`absolute`、`fixed`）。

示例

p {
  color: red;
  background-color: yellow;
  font-size: 18px;
  font-family: "Times New Roman", serif;
  text-align: center;
  margin: 20px;
  padding: 10px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
  display: block;
  position: relative;
}

盒模型（Box Model）

在CSS中，每个HTML元素都可以看作是一个矩形盒子，称为“盒模型”。盒模型由四个部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。

内容区（content）：元素的实际内容区域，比如文本或图像。
内边距（padding）：内容区与边框之间的空间。
边框（border）：围绕内容区和内边距的线条。
外边距（margin）：元素与其他元素之间的空间。

盒模型的示例

div {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid blue;
  margin: 30px;
  background-color: lightgray;
}

在这个例子中：

width和height定义了内容区的尺寸。
padding定义了内容区与边框之间的距离。
border定义了边框的样式和颜色。
margin定义了元素与其他元素之间的距离。

响应式设计与媒体查询

随着移动设备的普及，响应式设计成为了现代网页开发的重要组成部分。响应式设计的目标是让网页在不同设备上都能有良好的显示效果。CSS的媒体查询功能可以帮助我们根据设备的屏幕大小、分辨率等因素来调整样式。

媒体查询的语法

@media (条件) {
  /* 在满足条件时应用的样式 */
}

示例

/* 当屏幕宽度小于600px时，应用以下样式 */
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }

  h1 {
    font-size: 24px;
  }

  p {
    font-size: 14px;
  }
}

/* 当屏幕宽度大于600px时，应用以下样式 */
@media (min-width: 601px) {
  body {
    background-color: white;
  }

  h1 {
    font-size: 36px;
  }

  p {
    font-size: 18px;
  }
}

结语

好了，今天的讲座到这里就结束了！我们从CSS的基本概念开始，逐步学习了选择器、样式表的引入方式、常用的CSS属性、盒模型以及响应式设计。希望这些内容能帮助你更好地理解和掌握CSS。

当然，CSS的学习之路还很长，还有很多高级技巧和特性等着你去探索。不过，只要掌握了今天所讲的基础知识，你就已经迈出了重要的一步。接下来，多动手实践，多参考一些优秀的CSS资源，相信你会越来越熟练的！

如果你有任何问题，欢迎随时提问！祝你在CSS的学习之旅中取得成功！ 😊

参考资料：

MDN Web Docs: 一个非常权威的前端开发文档库，涵盖了CSS的所有基础知识和高级特性。
W3C CSS规范：CSS的官方标准文档，详细描述了CSS的语法和行为。