Day-13-CSS基础

作者

Day 13: CSS 基础

🎯 学习目标

  • 理解 CSS 的作用和基本语法
  • 掌握选择器的使用方法
  • 学会设置文本、颜色、背景等基本样式
  • 了解盒模型的概念
  • 学会使用 CSS 排版和布局

💡 核心概念

什么是 CSS？

CSS（Cascading Style Sheets，层叠样式表） 是用于描述网页外观和格式的样式语言。

CSS 的作用：

  • 控制网页的布局（Layout）
  • 设置颜色、字体、大小
  • 添加动画和过渡效果
  • 实现响应式设计（适配不同设备）

HTML vs CSS：

  • HTML：网页的结构（骨架）
  • CSS：网页的样式（皮肤）

CSS 的三种引入方式

1. 行内样式（Inline Style）

<p style="color: red; font-size: 20px;">
    这是红色文字
</p>

优点：优先级最高，用于覆盖其他样式
缺点：代码混乱，不推荐大量使用

2. 内部样式（Internal Style）

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>这是红色文字</p>
</body>
</html>

优点：样式集中管理
缺点：不能跨文件复用

3. 外部样式（External Style）⭐ 推荐

<!-- HTML 文件 -->
<link rel="stylesheet" href="styles.css">

/* styles.css */
p {
    color: red;
    font-size: 20px;
}

优点：

  • 样式与结构分离
  • 多个页面共享样式
  • 浏览器缓存，提高加载速度

CSS 语法结构

选择器 {
    属性名: 属性值;
    属性名: 属性值;
}

/* 示例 */
h1 {
    color: blue;
    font-size: 32px;
    text-align: center;
}

组成部分：

  • 选择器（Selector）：选中要样式化的元素
  • 属性（Property）：要设置的样式属性
  • 值（Value）：属性的具体值

📝 CSS 选择器

基础选择器

1. 元素选择器（Type Selector）

/* 选中所有 p 元素 */
p {
    color: black;
}

/* 选中所有 h1 元素 */
h1 {
    font-size: 32px;
}

2. 类选择器（Class Selector）⭐ 常用

/* 选中所有 class 为 "highlight" 的元素 */
.highlight {
    background-color: yellow;
}

/* 选中 class 包含 "btn-primary" 的元素 */
.btn-primary {
    background-color: blue;
    color: white;
}

<p class="highlight">高亮文本</p>
<button class="btn-primary">主要按钮</button>

3. ID 选择器（ID Selector）

/* 选中 id 为 "header" 的元素 */
#header {
    background-color: navy;
    color: white;
}

<div id="header">页面头部</div>

注意：ID 在页面中应该是唯一的

4. 通配符选择器（Universal Selector）

/* 选中所有元素 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

组合选择器

1. 后代选择器（Descendant Selector）

/* 选中 div 内部的所有 p 元素 */
div p {
    color: blue;
}

2. 子元素选择器（Child Selector）

/* 只选中 div 的直接子元素 p */
div > p {
    color: red;
}

3. 相邻兄弟选择器（Adjacent Sibling Selector）

/* 选中紧接在 h1 后面的 p 元素 */
h1 + p {
    font-weight: bold;
}

4. 通用兄弟选择器（General Sibling Selector）

/* 选中 h1 之后的所有 p 兄弟元素 */
h1 ~ p {
    color: gray;
}

伪类选择器（Pseudo-class Selector）

/* 鼠标悬停 */
a:hover {
    color: red;
}

/* 访问过的链接 */
a:visited {
    color: purple;
}

/* 未访问的链接 */
a:link {
    color: blue;
}

/* 被激活的链接 */
a:active {
    color: orange;
}

/* 第一个子元素 */
li:first-child {
    font-weight: bold;
}

/* 最后一个子元素 */
li:last-child {
    border-bottom: none;
}

/* 第 n 个子元素 */
li:nth-child(3) {
    color: red;
}

/* 偶数项 */
li:nth-child(even) {
    background-color: #f0f0f0;
}

/* 奇数项 */
li:nth-child(odd) {
    background-color: #fff;
}

🎨 常用 CSS 属性

文本样式

.text-style {
    /* 颜色 */
    color: #333333;

    /* 字体大小 */
    font-size: 16px;

    /* 字体粗细 */
    font-weight: bold;

    /* 字体家族 */
    font-family: Arial, sans-serif;

    /* 文本对齐 */
    text-align: center;

    /* 文本装饰 */
    text-decoration: underline;

    /* 行高 */
    line-height: 1.5;

    /* 字母间距 */
    letter-spacing: 1px;

    /* 文本转换 */
    text-transform: uppercase;
}

背景样式

.background-style {
    /* 背景颜色 */
    background-color: #f0f0f0;

    /* 背景图片 */
    background-image: url('image.jpg');

    /* 背景重复 */
    background-repeat: no-repeat;

    /* 背景位置 */
    background-position: center center;

    /* 背景大小 */
    background-size: cover;

    /* 简写 */
    background: #f0f0f0 url('image.jpg') no-repeat center;
}

边框样式

.border-style {
    /* 边框宽度 */
    border-width: 2px;

    /* 边框样式 */
    border-style: solid;

    /* 边框颜色 */
    border-color: #333;

    /* 圆角 */
    border-radius: 5px;

    /* 简写 */
    border: 2px solid #333;
    border-radius: 5px;
}

间距（Padding & Margin）

.spacing {
    /* 内边距 */
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;

    /* 简写：上 右 下 左 */
    padding: 10px 20px 10px 20px;

    /* 简写：上下 左右 */
    padding: 10px 20px;

    /* 外边距 */
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;

    /* 简写 */
    margin: 10px 20px;

    /* 居中（块级元素） */
    margin: 0 auto;
}

📦 盒模型（Box Model）

什么是盒模型？

CSS 中的每个元素都被表示为一个矩形盒子，包含四个部分：

┌─────────────────────────────┐
│       Margin (外边距)        │  ← 元素外部
├─────────────────────────────┤
│    Border (边框)            │
├─────────────────────────────┤
│    Padding (内边距)         │
│  ┌─────────────────────┐    │
│  │  Content (内容)     │    │  ← 实际内容
│  └─────────────────────┘    │
└─────────────────────────────┘

盒模型属性

.box {
    /* 内容宽度 */
    width: 200px;

    /* 内容高度 */
    height: 100px;

    /* 内边距 */
    padding: 20px;

    /* 边框 */
    border: 2px solid #333;

    /* 外边距 */
    margin: 10px;

    /* 盒模型类型 */
    box-sizing: border-box;  /* 推荐 */
}

box-sizing 属性

/* content-box（默认） */
/* width 只包含内容，不包含 padding 和 border */
.box1 {
    box-sizing: content-box;
    width: 200px;
    padding: 20px;  /* 总宽度 = 200 + 20*2 = 240px */
    border: 5px;    /* 总宽度 = 240 + 5*2 = 250px */
}

/* border-box（推荐） */
/* width 包含内容、padding 和 border */
.box2 {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;  /* 总宽度 = 200px（内容自动缩小） */
    border: 5px;
}

🎮 示例代码

示例 1: 卡片样式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卡片样式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            padding: 20px;
        }

        .card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin: 20px auto;
            max-width: 400px;
        }

        .card-title {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }

        .card-content {
            font-size: 16px;
            color: #666;
            line-height: 1.6;
        }

        .card-footer {
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid #eee;
            text-align: right;
        }

        .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }

        .btn:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="card">
        <div class="card-title">欢迎使用 CSS</div>
        <div class="card-content">
            CSS 是网页设计中最重要的技能之一。
            掌握 CSS 可以让你的网页更加美观和专业。
        </div>
        <div class="card-footer">
            <a href="#" class="btn">了解更多</a>
        </div>
    </div>
</body>
</html>

示例 2: 导航栏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
        }

        .navbar {
            background-color: #333;
            overflow: hidden;
        }

        .navbar a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            transition: background-color 0.3s;
        }

        .navbar a:hover {
            background-color: #555;
        }

        .navbar .active {
            background-color: #4CAF50;
        }

        .navbar-right {
            float: right;
        }
    </style>
</head>
<body>
    <div class="navbar">
        <a href="#" class="active">首页</a>
        <a href="#">新闻</a>
        <a href="#">产品</a>
        <a href="#">关于</a>
        <div class="navbar-right">
            <a href="#">登录</a>
            <a href="#">注册</a>
        </div>
    </div>
</body>
</html>

示例 3: 表格样式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格样式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #4CAF50;
            color: white;
            font-weight: bold;
        }

        tr:hover {
            background-color: #f5f5f5;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        .table-caption {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="table-caption">学生成绩表</div>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>85</td>
                <td>90</td>
                <td>88</td>
                <td>263</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>92</td>
                <td>87</td>
                <td>95</td>
                <td>274</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>78</td>
                <td>85</td>
                <td>82</td>
                <td>245</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

⚠️ 重要注意事项

1. 优先级（Specificity）

当多个规则应用于同一元素时，优先级决定哪个规则生效。

优先级从高到低：

  1. !important
  2. 内联样式（style="..."）
  3. ID 选择器
  4. 类选择器、伪类选择器
  5. 元素选择器
  6. 通配符选择器
/* 优先级：ID > 类 > 元素 */
#header .nav a {
    color: red;  /* 优先级最高 */
}

.nav a {
    color: blue;
}

a {
    color: green;  /* 优先级最低 */
}

2. 颜色表示方法

.color-methods {
    /* 颜色名称 */
    color: red;

    /* 十六进制 */
    color: #FF0000;
    color: #F00;  /* 简写 */

    /* RGB */
    color: rgb(255, 0, 0);

    /* RGBA（带透明度）*/
    color: rgba(255, 0, 0, 0.5);

    /* HSL */
    color: hsl(0, 100%, 50%);

    /* HSLA（带透明度）*/
    color: hsla(0, 100%, 50%, 0.5);
}

3. 单位

长度单位：

.sizing {
    /* 绝对单位 */
    width: 200px;      /* 像素 */
    font-size: 16pt;   /* 磅 */
    font-size: 1cm;    /* 厘米 */

    /* 相对单位（推荐）*/
    width: 50%;        /* 百分比 */
    font-size: 1.2em;  /* 相对于父元素字体大小 */
    font-size: 1.2rem; /* 相对于根元素字体大小 */
    width: 10vw;       /* 视口宽度 */
    height: 10vh;      /* 视口高度 */
}

4. CSS 命名规范

推荐：

/* BEM 命名法（Block Element Modifier） */
.card { }                    /* Block */
.card__title { }             /* Element */
.card--highlight { }         /* Modifier */

/* 小写 + 连字符 */
.main-content { }
.nav-bar { }

避免：

/* 驼峰命名（JavaScript 风格）*/
.mainContent { }  /* 不推荐 */

/* 下划线 */
.main_content { }  /* 部分项目使用 */

✍️ 练习任务

练习 1: 个人名片

要求：

  1. 创建一个个人名片卡片
  2. 包含头像、姓名、职业、联系方式
  3. 添加悬停效果（放大、阴影）
  4. 使用圆角和阴影美化

提示：使用 transform: scale() 实现放大效果

练习 2: 代码块样式

要求：

  1. 为代码块设计样式
  2. 深色背景（#282c34）
  3. 语法高亮（关键词、字符串、注释）
  4. 行号显示
  5. 复制按钮

提示：使用 ::before 伪元素添加行号

练习 3: 响应式卡片网格

要求：

  1. 创建卡片网格布局
  2. 大屏幕：3 列
  3. 中等屏幕：2 列
  4. 小屏幕：1 列
  5. 卡片间距 20px

提示：使用媒体查询 @media

🎓 今日挑战

实现：完整的个人作品集页面

功能要求：

  1. 头部区域

    • 导航栏（固定顶部）
    • Logo 和菜单项
    • 滚动时高亮当前部分

  2. 英雄区（Hero Section）

    • 全屏背景图
    • 标题和副标题
    • CTA 按钮
    • 向下滚动提示

  3. 关于我

    • 个人简介
    • 技能标签（带图标）
    • 进度条显示技能熟练度

  4. 作品展示

    • 卡片网格布局
    • 悬停显示详情
    • 分类筛选（全部/网页/应用）

  5. 联系方式

    • 表单样式
    • 社交媒体链接
    • 地图占位符

技术要点：

  • 使用 Flexbox 或 Grid 布局
  • 响应式设计（移动优先）
  • 平滑滚动效果
  • CSS 过渡和动画

扩展功能：

  • 暗色模式切换
  • 滚动动画（使用 Intersection Observer API）
  • 返回顶部按钮

💡 常见问题 FAQ

Q1: px、em、rem 有什么区别？

A:

单位 相对于 适用场景
px 固定值 边框、固定尺寸
em 父元素字体大小 局部组件
rem 根元素字体大小 全局布局

示例：

html {
    font-size: 16px;  /* 根元素 */
}

.parent {
    font-size: 20px;
}

.child {
    /* em: 相对于 .parent 的 20px */
    font-size: 0.8em;  /* 16px */

    /* rem: 相对于 html 的 16px */
    font-size: 1.5rem;  /* 24px */

    /* px: 固定值 */
    width: 100px;
}

Q2: 如何水平居中元素？

A:

/* 方法1：文本和行内元素 */
.text-center {
    text-align: center;
}

/* 方法2：块级元素（已知宽度）*/
.block-center {
    width: 200px;
    margin: 0 auto;
}

/* 方法3：Flexbox（推荐）*/
.flex-center {
    display: flex;
    justify-content: center;
}

/* 方法4：绝对定位 */
.abs-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

Q3: 什么时候使用 class，什么时候使用 ID？

A:

使用 Class：

  • 可重复使用的样式
  • 多个元素共享样式
  • JavaScript 选择元素

使用 ID：

  • 页面唯一的元素
  • 锚点链接（如 #section1）
  • JavaScript 特定操作

示例：

<!-- ✅ 正确 -->
<div class="card">卡片1</div>
<div class="card">卡片2</div>
<div id="header">页面头部（唯一）</div>

<!-- ❌ 错误 -->
<div class="header">应该用 ID</div>
<div id="card1">应该用 class</div>

Q4: 如何优化 CSS 性能？

A:

1. 选择器优化：

/* ❌ 避免：过长的选择器链 */
div ul li a span { }

/* ✅ 推荐：使用 class */
.nav-link { }

2. 避免通配符：

/* ❌ 性能差 */
* { margin: 0; }

/* ✅ 更好的方式 */
body, h1, p, ul { margin: 0; }

3. 使用简写：

/* ✅ 简写 */
margin: 10px 20px;
background: #fff url('bg.jpg') no-repeat;

/* ❌ 冗长 */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

4. 压缩 CSS：

  • 使用工具：cssnano、cssminifier
  • 移除注释和空格
  • 合并相同规则

Q5: CSS 预处理器（Sass/Less）值得学习吗？

A: 强烈推荐！

优点：

  1. 变量：定义颜色、尺寸等
  2. 嵌套：更清晰的代码结构
  3. 混合（Mixins）：可复用的代码块
  4. 函数：动态计算值
  5. 模块化：拆分为多个文件

Sass 示例：

// 变量
$primary-color: #4CAF50;

// 混合
@mixin border-radius($radius) {
    border-radius: $radius;
    -webkit-border-radius: $radius;
}

// 使用
.button {
    color: $primary-color;
    @include border-radius(5px);
}

学习建议：先掌握 CSS 基础，再学习预处理器。

📚 拓展阅读

相关主题

  1. Flexbox 布局：现代一维布局方案
  2. Grid 布局：现代二维布局方案
  3. CSS 动画：transition 和 animation
  4. 响应式设计：媒体查询和移动优先
  5. CSS 预处理器：Sass、Less、Stylus

推荐资源

  • MDN Web Docs: https://developer.mozilla.org/zh-CN/docs/Web/CSS
  • CSS-Tricks: https://css-tricks.com/
  • Can I Use: 查询浏览器兼容性

实用工具

  1. CSS Reset: normalize.css
  2. CSS 框架: Bootstrap、Tailwind CSS
  3. 在线生成器：渐变、阴影、圆角

学习时间: 2026-03-13 07:14
难度: ⭐⭐⭐☆☆
预计用时: 3-4 小时
关键词: CSS, 选择器, 盒模型, 样式, 布局
相关标签: #08-样式