CSS 网页制作完整教程

第一部分：基础概念与准备

在开始写代码之前,我们需要了解几个核心概念。

css网页制作教程
（图片来源网络，侵删）

什么是 CSS？

CSS 的全称是 Cascading Style Sheets，中文译为“层叠样式表”。

你可以把它想象成给网页“化妆”和“穿衣服”的工具。

  • HTML (结构)：负责搭建网页的骨架，定义了哪些是标题、哪些是段落、哪些是图片，就像人体的骨骼和器官。
  • CSS (样式)：负责美化网页，定义了颜色、字体、间距、布局等，就像人的皮肤、发型和衣服。
  • JavaScript (行为)：负责网页的交互，比如点击按钮、弹出提示框等，这是本教程不涉及的内容，但了解它很重要。

核心思想：HTML 负责“是什么”，CSS 负责“长什么样”。

CSS 如何工作？

CSS 通过 选择器 和 声明块 来工作。

css网页制作教程
（图片来源网络，侵删）
  • 选择器：告诉浏览器你要给哪个 HTML 元素添加样式。p 选择器会选择所有的 <p>
  • 声明块：包含一个或多个 声明，每个声明由一个 属性 和一个 值 组成，用冒号 分隔，多个声明用分号 分隔。
p {
  color: blue; /* 属性: 值; */
  font-size: 16px;
}

这段代码的意思是：选择所有的 <p> 元素，将它们的文字颜色设置为蓝色，字体大小设置为 16 像素。

如何将 CSS 应用到 HTML？

有三种主要方式,推荐使用第三种。

  1. 内联样式：直接写在 HTML 标签的 style 属性里。（不推荐，难以维护）

    <p style="color: red;">这是一段红色文字。</p>

  2. 内部样式表：写在 HTML 文件头部的 <style> 标签里。（适用于单页面）

    <head>
  <style>
    p {
      color: green;
    }
  </style>
</head>

  3. 外部样式表（强烈推荐）：创建一个独立的 .css 文件，然后在 HTML 中用 <link> 标签引入。

    • 创建 styles.css 文件:
      /* styles.css */
p {
  color: purple;
}
    • 在 HTML 文件中引入:
      <head>
  <link rel="stylesheet" href="styles.css">
</head>

      优点：样式和内容分离，便于复用和维护，是专业开发的标准做法。

第二部分：CSS 核心选择器

选择器是 CSS 的基础，你需要精确地告诉浏览器要修改哪个元素。

基础选择器

  • 元素选择器：直接使用 HTML 标签名。

    p { /* 所有 <p> 元素 */ }
h1 { /* 所有 <h1> 元素 */ }
div { /* 所有 <div> 元素 */ }

  • 类选择器：通过 class 属性来选择，这是最常用、最灵活的选择器，以点 开头。

    <p class="highlight">这段文字会高亮显示。</p>
<p>这段文字则不会。</p>
    .highlight {
  background-color: yellow;
  font-weight: bold;
}

    一个元素可以有多个类,用空格隔开：<p class="highlight big-text">。

  • ID 选择器：通过 id 属性来选择。id 在整个页面中必须是唯一的，以井号 开头。

    <p id="intro">这是网站的介绍段落。</p>
    #intro {
  font-size: 20px;
  border: 1px solid black;
}

    注意：虽然 ID 选择器很强大，但通常用于页面中唯一的元素（如页头、页脚），而类选择器用于重复使用的样式。

组合选择器

  • 后代选择器：选择某个元素内部的所有后代元素（不一定是直接子代），用空格隔开。

    div p { /* 选择所有在 <div> 标签内部的 <p> 标签 */ }

  • 子代选择器：只选择某个元素的直接子代，用 > 隔开。

    ul > li { /* 选择所有 <ul> 的直接子代 <li>，不会选择孙代 <li> */ }

  • 分组选择器：用逗号 隔开，为多个选择器应用相同的样式。

    h1, h2, h3 {
  color: navy;
}

第三部分：常用 CSS 属性

现在我们开始学习如何美化网页。

文本与字体

属性 描述 示例
color 文本颜色 color: #333; (十六进制)
font-family 字体族 font-family: "Microsoft YaHei", Arial, sans-serif;
font-size 字体大小 font-size: 16px;
font-weight 字体粗细 font-weight: bold; 或 font-weight: 700;
line-height 行高 line-height: 1.5;
text-align 文本对齐 text-align: center;
text-decoration 文本装饰 text-decoration: none; (常用于链接)

盒模型

这是 CSS 中最重要的概念。网页上几乎所有的元素都是一个盒子。

一个盒子由四个部分组成：内容、内边距、边框、外边距。

  • width / height区域的宽高。
  • padding (内边距)与边框之间的距离。
    • padding-top, padding-right, padding-bottom, padding-left
    • 简写：padding: 10px 20px 30px 40px; (上右下左)
  • border (边框)和内边距的线。
    • border-width, border-style, border-color
    • 简写：border: 1px solid black;
  • margin (外边距)：盒子与其他盒子之间的距离。
    • margin-top, margin-right, margin-bottom, margin-left
    • 简写：margin: 10px auto; (上下10px，左右自动，常用于水平居中)

背景与颜色

属性 描述 示例
background-color 背景颜色 background-color: lightblue;
background-image 背景图片 background-image: url('image.jpg');
background-repeat 背景平铺 background-repeat: no-repeat;
opacity 不透明度 opacity: 0.8; (0.0 完全透明, 1.0 完全不透明)

布局 - 浮动与定位

这是 CSS 布局的传统方法，现在虽然 Flexbox 和 Grid 更主流，但理解它们对维护旧代码很重要。

  • 浮动：让元素脱离正常的文档流，向左或向右浮动。
    .box {
  float: left; /* 向左浮动 */
  width: 200px;
  margin-right: 10px;
}

    注意：浮动元素会影响其后面的元素，通常需要清除浮动，常见方法是在父元素末尾添加一个空元素并设置 clear: both;。

第四部分：现代布局 - Flexbox 和 Grid

这是现代网页布局的基石,让复杂布局变得异常简单。

Flexbox (弹性盒子)

一维布局模型,非常适合在行或列上排列元素。

  • 父容器 (Flex Container)：需要添加 display: flex;。
  • 子项目 (Flex Items)：容器内的所有直接子元素都会成为 Flex 项目。

常用父容器属性：

  • flex-direction: 主轴方向。row (水平，默认) 或 column (垂直)。
  • justify-content: 主轴对齐方式。flex-start (默认), center, space-between, space-around。
  • align-items: 交叉轴对齐方式。stretch (默认), center, flex-start。

示例：创建一个水平居中的导航栏

.nav-container {
  display: flex; /* 启用 Flexbox */
  justify-content: center; /* 水平居中 */
  background-color: #333;
}
.nav-item {
  color: white;
  padding: 15px 20px;
  text-decoration: none;
}

Grid (网格)

二维布局模型,可以同时控制行和列，非常适合构建复杂的页面布局。

  • 父容器 (Grid Container)：需要添加 display: grid;。
  • 子项目 (Grid Items)：容器内的直接子元素。

常用父容器属性：

  • grid-template-columns: 定义列的宽度。grid-template-columns: 1fr 2fr 1fr; (三列，中间是两侧的两倍宽)。
  • grid-template-rows: 定义行的高度。
  • gap: 设置网格之间的间距。

示例：创建一个经典的三栏布局

.page-layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px; /* 左侧边栏，主内容，右侧边栏 */
  grid-template-rows: auto 1fr auto; /* 头部，内容，底部 */
  gap: 20px;
  min-height: 100vh; /* 让页面高度至少占满整个视口 */
}
.header { grid-column: 1 / -1; } /* 头部横跨所有列 */
.main-content { /* 主内容区域 */ }
.sidebar-left { /* 左侧边栏 */ }
.sidebar-right { /* 右侧边栏 */ }
.footer { grid-column: 1 / -1; } /* 底部横跨所有列 */

第五部分：实战项目 - 制作一个个人作品集网页

让我们把学到的知识串联起来,动手做一个简单的网页。

项目结构：

my-portfolio/
├── index.html
└── styles.css

步骤 1: 创建 HTML 文件 (index.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的个人作品集</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="main-header">
        <h1>张三的作品集</h1>
    </header>
    <div class="container">
        <section class="hero">
            <h2>你好，我是前端开发者张三</h2>
            <p>欢迎来到我的个人空间，这里展示了我的一些项目和想法。</p>
        </section>
        <section class="projects">
            <h2>我的项目</h2>
            <div class="project-card">
                <h3>项目一：在线商城</h3>
                <p>一个使用 React 和 Node.js 构建的电商平台。</p>
            </div>
            <div class="project-card">
                <h3>项目二：任务管理应用</h3>
                <p>一个简洁的待办事项列表工具，支持拖拽排序。</p>
            </div>
        </section>
    </div>
    <footer class="main-footer">
        <p>&copy; 2025 张三. All rights reserved.</p>
    </footer>
</body>
</html>

步骤 2: 创建 CSS 文件 (styles.css)

/* --- 全局样式 --- */
body {
    font-family: "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    background-color: #f4f4f4;
    color: #333;
}
.container {
    width: 80%;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1, h2, h3 {
    color: #0056b3;
}
/* --- 头部 --- */
.main-header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    margin-bottom: 20px;
}
/* --- 主要内容区 --- */
.hero {
    text-align: center;
    margin-bottom: 40px;
    padding: 40px 0;
    background-color: #e9ecef;
    border-radius: 8px;
}
/* --- 项目卡片 --- */
.projects {
    display: grid; /* 使用 Grid 布局 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 响应式布局 */
    gap: 20px;
}
.project-card {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 5px;
    transition: transform 0.2s; /* 添加一个简单的悬停效果 */
}
.project-card:hover {
    transform: translateY(-5px); /* 鼠标悬停时卡片上移 */
}
/* --- 页脚 --- */
.main-footer {
    text-align: center;
    padding: 20px;
    margin-top: 20px;
    background-color: #333;
    color: #fff;
}

步骤 3: 在浏览器中查看

直接用浏览器打开 index.html 文件，你就能看到一个布局清晰、带有基本样式的个人作品集网页了！

第六部分：进阶与资源

响应式设计

让你的网页在不同设备（手机、平板、桌面）上都能良好显示。

  • 视口标签：在 HTML 的 <head> 中加入 <meta name="viewport" content="width=device-width, initial-scale=1.0">>，这是响应式设计的基石。
  • 媒体查询：使用 @media 规则，根据不同的屏幕尺寸应用不同的 CSS 样式。
/* 默认样式（针对桌面） */
.container {
    width: 80%;
}
/* 当屏幕宽度小于 768px 时（平板或手机） */
@media (max-width: 768px) {
    .container {
        width: 95%; /* 在小屏幕上让容器更宽一些 */
    }
    .projects {
        grid-template-columns: 1fr; /* 项目卡片变成单列 */
    }
}

推荐学习资源

  • MDN Web Docs (Mozilla Developer Network)：最权威、最全面的 Web 技术文档，CSS 参考手册的圣经。
  • W3Schools：一个非常友好的在线教程和参考网站，适合快速查询和入门。
  • CSS-Tricks：一个高质量的博客，有大量实用的 CSS 技巧、文章和“Almanac”（CSS 属性大全）。
  • CodePen / JSFiddle：在线代码编辑器，你可以直接在上面写 HTML, CSS, JavaScript 并实时看到效果，非常适合学习和实验。

恭喜你！你已经完成了 CSS 的入门之旅，学习 CSS 的关键在于：

  1. 多写多练：理论知识需要通过实践来巩固。
  2. 多看多模仿：浏览你喜欢的网站，尝试用开发者工具（F12）去分析它们的 CSS 结构。
  3. 善用工具：学会使用浏览器的开发者工具来调试 CSS，这是必备技能。

从今天开始,尝试用 CSS 去美化你的每一个 HTML 项目吧！祝你学习愉快！