当前位置:知识文库 ❯ 图文

CSS入门教程：零基础学CSS样式设计完整指南

发布日期：2026-07-28 作者：小城

一、什么是CSS？为什么要学CSS？

如果你已经学过HTML，你应该知道HTML是用来搭建网页结构的，但是只有HTML的网页是朴素的，只有黑白文字和简单的排列。

CSS就是用来给HTML"化妆"的。

CSS（Cascading Style Sheets，层叠样式表） 是用来描述网页样式的语言，它可以控制网页中元素的外观、布局、颜色、大小、位置等。

CSS的作用：

控制网页的外观和样式
实现精美的页面布局
提高开发效率（样式可以复用）
便于维护（改样式不用改结构）
实现响应式设计

HTML和CSS的关系就像房子和装修：HTML是房子的结构（墙、门窗），CSS是装修（刷墙、铺地板、买家具）。

二、CSS引入方式

CSS有三种引入方式：行内样式、内部样式、外部样式。

2.1 行内样式（Inline CSS）

直接在HTML标签的style属性中写样式。

代码示例

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

优点： 优先级最高，直接生效 缺点： 不能复用，代码混乱，不推荐大量使用

2.2 内部样式（Internal CSS）

在HTML的head标签中，用style标签写CSS。

代码示例

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

优点： 一个页面内可以复用 缺点： 不能跨页面复用

2.3 外部样式（External CSS）

把CSS写在单独的.css文件中，然后在HTML中引入。

HTML文件（index.html）：

代码示例

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>这是一段红色的文字</p>
</body>
</html>

CSS文件（style.css）：

代码示例

p {
    color: red;
    font-size: 16px;
}

优点： 可以跨页面复用，便于维护，HTML和CSS分离 缺点： 需要额外引入

实际开发中最推荐外部样式！

三、CSS选择器

选择器就是用来"选择"你要给哪些元素加样式的。

3.1 基础选择器

1. 标签选择器

直接用标签名选择，选择所有该标签的元素。

代码示例

p {
    color: red;
}
/* 选择所有的<p>标签 */

2. 类选择器（class）

用.开头，选择所有带有这个class的元素。

代码示例

.red-text {
    color: red;
}
/* 选择所有class="red-text"的元素 */

代码示例

<p class="red-text">红色文字</p>
<div class="red-text">红色div</div>

3. ID选择器

用#开头，选择带有这个ID的元素（ID在页面中是唯一的）。

代码示例

#title {
    font-size: 24px;
}
/* 选择id="title"的元素 */

代码示例

<h1 id="title">标题</h1>

4. 通配符选择器

用*表示，选择所有元素。

代码示例

* {
    margin: 0;
    padding: 0;
}
/* 给所有元素去掉外边距和内边距 */

3.2 组合选择器

1. 后代选择器（空格分隔）

选择某个元素内部的后代元素。

代码示例

.container p {
    color: red;
}
/* 选择container类里面所有的p标签 */

2. 子选择器（>）

选择某个元素的直接子元素。

代码示例

.container > p {
    color: red;
}
/* 只选择container的直接子元素p，不包括孙子辈 */

3. 并集选择器（,）

同时选择多个选择器。

代码示例

h1, h2, h3 {
    color: blue;
}
/* h1、h2、h3都变蓝色 */

4. 相邻兄弟选择器（+）

选择紧挨着的下一个兄弟元素。

代码示例

h1 + p {
    color: red;
}
/* 选择紧跟在h1后面的p */

3.3 伪类选择器

常见的伪类：

代码示例

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

/* 点击时 */
a:active {
    color: blue;
}

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

/* 获取焦点时 */
input:focus {
    border-color: blue;
}

/* 第一个子元素 */
li:first-child {
    color: red;
}

/* 最后一个子元素 */
li:last-child {
    color: blue;
}

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

3.4 选择器优先级

当多个选择器同时选中一个元素时，谁的优先级高就听谁的。

优先级从高到低：

行内样式（style属性）- 优先级最高
ID选择器（#id）
类选择器/伪类选择器（.class, :hover）
标签选择器（p, div）
通配符选择器（*）- 优先级最低

记忆口诀：行内 > ID > 类 > 标签 > 通配符

还有个终极武器：!important，加上之后优先级最高，但尽量少用。

代码示例

p {
    color: red !important;
}

四、常用CSS属性

4.1 文本相关属性

代码示例

p {
    color: #333;           /* 文字颜色 */
    font-size: 16px;        /* 字体大小 */
    font-family: "微软雅黑", sans-serif;  /* 字体 */
    font-weight: bold;      /* 字体粗细 */
    font-style: italic;     /* 斜体 */
    text-align: center;     /* 水平对齐：left/center/right */
    line-height: 1.8;       /* 行高 */
    text-decoration: underline;  /* 下划线 */
    text-indent: 2em;       /* 首行缩进 */
    letter-spacing: 2px;    /* 字间距 */
}

4.2 背景相关属性

代码示例

div {
    background-color: #f5f5f5;  /* 背景颜色 */
    background-image: url("bg.jpg");  /* 背景图片 */
    background-repeat: no-repeat;  /* 背景是否重复 */
    background-position: center;   /* 背景位置 */
    background-size: cover;        /* 背景尺寸 */
    
    /* 简写 */
    background: #f5f5f5 url("bg.jpg") no-repeat center / cover;
}

4.3 盒模型相关属性

每一个HTML元素都可以看作一个盒子，由内容区、内边距、边框、外边距组成。

代码示例

div {
    /* 内容尺寸 */
    width: 300px;          /* 宽度 */
    height: 200px;         /* 高度 */
    
    /* 内边距（内容和边框之间的距离） */
    padding: 20px;                 /* 四个方向都是20px */
    padding: 10px 20px;             /* 上下10px，左右20px */
    padding: 10px 20px 30px 40px;   /* 上右下左 */
    padding-top: 10px;              /* 单独设置 */
    
    /* 边框 */
    border: 1px solid #ccc;         /* 边框粗细 样式 颜色 */
    border-radius: 8px;             /* 圆角 */
    
    /* 外边距（元素和其他元素之间的距离） */
    margin: 20px;                   /* 四个方向 */
    margin: 0 auto;                 /* 左右auto可以水平居中块元素 */
}

盒模型计算： 元素实际宽度 = width + padding-left + padding-right + border-left + border-right

4.4 布局相关属性

display属性：

代码示例

/* 块级元素：独占一行，可以设置宽高 */
div { display: block; }

/* 行内元素：不独占一行，不能设置宽高 */
span { display: inline; }

/* 行内块元素：不独占一行，但可以设置宽高 */
img { display: inline-block; }

/* 隐藏元素 */
.hidden { display: none; }

浮动（float）：

代码示例

.left { float: left; }   /* 左浮动 */
.right { float: right; } /* 右浮动 */

注意：浮动会脱离文档流，父元素会高度塌陷，需要清除浮动。

清除浮动的方法：

代码示例

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

4.5 Flex布局（重点）

Flex布局是现代CSS最常用的布局方式，简单强大。

代码示例

.container {
    display: flex;          /* 开启flex布局 */
    flex-direction: row;    /* 主轴方向：row水平/column垂直 */
    justify-content: center; /* 主轴对齐方式 */
    align-items: center;    /* 交叉轴对齐方式 */
    flex-wrap: wrap;        /* 是否换行 */
    gap: 20px;              /* 元素间距 */
}

.item {
    flex: 1;                /* 占比 */
    flex-grow: 1;           /* 放大比例 */
    flex-shrink: 1;         /* 缩小比例 */
}

justify-content常用值：

flex-start：左对齐
center：居中
flex-end：右对齐
space-between：两端对齐，中间平分
space-around：每个元素两边平分空间

align-items常用值：

flex-start：顶部对齐
center：垂直居中
flex-end：底部对齐
stretch：拉伸填满

五、实战小项目：一个简单的卡片

让我们用学到的知识做一个简单的卡片组件。

HTML代码：

代码示例

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="card.css">
</head>
<body>
    <div class="card">
        <img src="image.jpg" alt="封面" class="card-img">
        <div class="card-body">
            <h3 class="card-title">卡片标题</h3>
            <p class="card-desc">这是卡片的描述文字，介绍卡片的内容信息。</p>
            <button class="card-btn">点击查看</button>
        </div>
    </div>
</body>
</html>

CSS代码（card.css）：

代码示例

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    padding: 50px;
    background-color: #f5f5f5;
    font-family: "微软雅黑", sans-serif;
}

.card {
    width: 300px;
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.card:hover {
    transform: translateY(-5px);
}

.card-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.card-body {
    padding: 20px;
}

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

.card-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 16px;
}

.card-btn {
    width: 100%;
    padding: 10px;
    background-color: #2196F3;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.card-btn:hover {
    background-color: #1976D2;
}

这样你就得到了一个精美的卡片组件，有悬停效果、圆角、阴影。

六、CSS学习路线图

第一阶段：基础入门（1-2周）

CSS基本语法和引入方式
常用选择器
文本和背景属性
盒模型
display和浮动

第二阶段：进阶布局（2-3周）

Flex布局（重点掌握）
定位（position）
Grid布局（了解即可）
响应式设计基础
媒体查询

第三阶段：高级技巧（持续学习）

CSS动画和过渡
CSS变量
伪元素
常用CSS框架（Bootstrap、Tailwind等）
CSS预处理器（Sass、Less等）

学习建议

多练多写：看十遍不如写一遍，多写多练才能掌握
多参考：看看优秀的网站是怎么做的
用浏览器调试：F12开发者工具是学习CSS的好帮手
循序渐进：先掌握基础，再学高级技巧
做项目：通过项目来检验和巩固所学知识

七、常用工具推荐

VS Code：最好用的代码编辑器
Chrome开发者工具：调试CSS必备
Can I use：查询CSS属性的浏览器兼容性
CodePen：在线练习和参考别人的作品
MDN Web Docs：最权威的CSS文档

八、总结

CSS是前端开发三剑客之一，是网页美观的保障。CSS入门不难，但要学好学精需要大量练习和积累。

这篇教程涵盖了CSS的核心基础知识，掌握了这些，你就可以写出精美的网页样式了。但CSS的世界远比这广阔，还有很多有趣的特性等待你去探索。

继续加油，在成为前端工程师的路上更进一步吧！

FAQ

常见问题

CSS和HTML先学哪个？

先学HTML，再学CSS。HTML是结构，CSS是样式，先有结构再加样式。

CSS难学吗？

入门不难，精通需要时间。基础语法很简单，但布局、动画、兼容性等需要慢慢积累经验。

学CSS需要背吗？

不用死记硬背，常用的属性写多了自然就记住了，不常用的可以查文档。

CSS框架要不要学？

建议先把原生CSS学扎实，再学框架。框架是工具，基础扎实了才能用得好。

学完CSS能做什么？

学完CSS你就可以写出精美漂亮的静态网页了。接下来建议学习JavaScript，让网页动起来。

标签： CSS教程 CSS入门前端开发 CSS样式网页设计前端教程 HTML+CSS 零基础学前端

本文涉及AI创作

内容由AI创作，请仔细甄别

快速访问

上一篇：简历面试技巧全攻略：从简历优化到面试通关，拿offer就靠这篇下一篇：高效学习方法论：7个科学高效的学习方法，让你学习效率翻倍

AI语音工具推荐：7款热门AI语音软件对比，文字转语音/语音转文字神器

发布日期 2026-07-28

本文为你精选7款2026年最热门的AI语音工具，涵盖文字转语音、语音转文字、AI配音、数字人语音等多种类型，每款工具详细评测功能、优缺点、价格和适用场景，帮你找到最适合的AI语音工具。

小城电脑数码

高效学习方法论：7个科学高效的学习方法，让你学习效率翻倍

发布日期 2026-07-28

本文为你介绍7个经过科学验证的高效学习方法，从大脑认知规律出发，帮你告别低效学习，提升学习效率，用更少的时间学得更多更好。

小城职场技巧

简历面试技巧全攻略：从简历优化到面试通关，拿offer就靠这篇

发布日期 2026-07-28

本文为你系统整理简历优化和面试技巧全攻略，涵盖简历撰写、投递技巧、面试准备、常见问题回答、谈薪方法等全流程，帮你提高面试通过率，拿到心仪的offer。

小城

短视频运营入门：从0到1做短视频完整指南

发布日期 2026-07-28

本文为零基础新手打造的短视频运营完整指南，涵盖账号定位、内容创作、拍摄剪辑、发布运营、变现方式五大模块，手把手教你从零开始做短视频，少走弯路快速入门。

pin_drop当前位置:知识文库 ❯ 图文

CSS入门教程：零基础学CSS样式设计完整指南

目录

一、什么是CSS？为什么要学CSS？

二、CSS引入方式

2.1 行内样式（Inline CSS）

代码示例

2.2 内部样式（Internal CSS）

代码示例

2.3 外部样式（External CSS）

代码示例

代码示例

三、CSS选择器

3.1 基础选择器

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

3.2 组合选择器

代码示例

代码示例

代码示例

代码示例

3.3 伪类选择器

代码示例

3.4 选择器优先级

代码示例

四、常用CSS属性

4.1 文本相关属性

代码示例

4.2 背景相关属性

代码示例

4.3 盒模型相关属性

代码示例

4.4 布局相关属性

代码示例

代码示例

代码示例

4.5 Flex布局（重点）

代码示例

五、实战小项目：一个简单的卡片

代码示例

代码示例

六、CSS学习路线图

第一阶段：基础入门（1-2周）

第二阶段：进阶布局（2-3周）

第三阶段：高级技巧（持续学习）

学习建议

七、常用工具推荐

八、总结

标签

FAQ

常见问题

list快速访问

poll相关推荐

AI语音工具推荐：7款热门AI语音软件对比，文字转语音/语音转文字神器

高效学习方法论：7个科学高效的学习方法，让你学习效率翻倍

简历面试技巧全攻略：从简历优化到面试通关，拿offer就靠这篇

短视频运营入门：从0到1做短视频完整指南

当前位置:知识文库 ❯ 图文

快速访问

相关推荐