跳到主要内容

第一节 初识CSS

一、CSS 的简介与引用​

CSS（Cascading Style Sheets，层叠样式表）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。如果说 HTML 是网页的“骨架”，那么 CSS 就是网页的“皮肤”和“衣服”，负责网页的布局、颜色、字体等视觉效果。 在 HTML 中引入外部 CSS 文件是最推荐的做法。在现代代码编辑器（如 VS Code）中，我们可以在 HTML 文件的 <head> 标签内输入 link:css，利用快捷键下拉提示，自动生成以下标准引用代码：

<link rel="stylesheet" href="style.css" />

随后，在同级目录下新建一个 CSS 文件并命名为 style.css，即可开始编写样式。

二、CSS 文件归档​

随着项目体积的增大，所有的文件如果都堆积在根目录下，会显得非常混乱。良好的文件归档习惯是前端开发的基本素养。 我们需要新建一个名为 style（或 css）的文件夹，把刚刚创建的 style.css 移动到该文件夹内。移动后，HTML 文件引用 CSS 的路径也需要进行相应的修改：

<link rel="stylesheet" href="style/style.css" />

三、内外边距的使用​

在 CSS 中，所有的 HTML 元素都可以看作是一个个的“盒子”。了解盒模型是控制网页布局的基础。

  • Padding（内边距）：内容与边框之间的距离。
  • Margin（外边距）：元素（盒子）与其他元素（盒子）之间的距离。
.box {
  padding: 20px; /* 内边距为 20 像素 */
  margin: 30px; /* 外边距为 30 像素 */
}

重置浏览器默认样式

有些 HTML 标签（如 body, ul, p 等）自带默认的内外边距，这会影响我们的精准布局。通常，我们可以通过“重置”的方式消除这些自带属性：

body {
  margin: 0; /* 消除网页主体的默认外边距 */
}

nav ul {
  padding: 0;
  margin: 0;
}

模块化内外边距应用示例

在实际开发中，我们经常使用 padding 和 margin 来控制不同区块的呼吸感：

/* 头部与底部模块：增加上下内边距，使内容不贴边 */
header,
footer {
  padding: 20px 0;
}

/* 主区域的各个子模块：设置统一的外边距和内边距 */
.about,
.other {
  margin: 20px; /* 与其他区块保持距离 */
  padding: 10px; /* 内部内容与边框保持距离 */
}

教学提示：使用通义灵码解读代码

在学习上述代码时，学生可以将不理解的 CSS 选择器或属性选中，利用通义灵码的“代码解释”功能，AI 会自动用自然语言逐行分析代码的作用，帮助学生快速掌握内外边距的用法。

四、非布局样式的运用​

CSS 中包含大量与位置布局无关的样式属性，它们主要用于美化网页。这些属性涵盖了字体、颜色、背景、边框以及装饰性效果（如去掉下划线、去掉列表圆点等）。 以下是常见非布局样式的综合运用示例：

/* 背景与文本对齐 */
header,
footer {
  background-color: #faa0a5; /* 自定义背景色 */
  text-align: center; /* 内部文字水平居中 */
}

/* 边框与背景颜色 */
.about {
  border: 1px solid rgb(223, 124, 170); /* 实线边框：1像素、实线、粉色 */
  background-color: rgb(213, 12, 82); /* 背景颜色 */
}

.other {
  border: 1px solid rgb(223, 124, 170);
  background-color: #ffffff; /* 边框内的背景颜色设为白色 */
}

/* 导航栏装饰性重置 */
nav {
  background-color: rgb(213, 12, 82);
}

nav ul {
  list-style: none; /* 去掉列表默认的圆点符号 */
}

nav ul a {
  text-decoration: none; /* 去掉超链接默认的下划线 */
  color: #000000; /* 设置文字颜色为黑色 */
}

五、最低高度与视口单位​

在网页设计中，为了防止页面内容过少时，底部模块（footer）悬浮在屏幕中间，我们通常会给主内容区域设置一个最低高度（min-height）。 这里引入一个非常实用的单位：vh (Viewport Height，视口高度)。1vh 等于浏览器可视区域高度的 1%。

/* 设置 main 元素的最小高度为视口高度的 80% */
main {
  min-height: 80vh;
}

这样设置后，无论页面内容有多少，main 区域都至少会占据屏幕 80% 的高度，从而保证页面结构的稳定和美观。