CSS 基础入门教程：从零开始学习样式表

原创于 2025-08-17 09:00:00 发布 · 947 阅读

17 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#css #学习 #前端

一、CSS 简介

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述 HTML 或 XML 等文档呈现方式的语言。它是现代网页设计的三大核心技术之一，与HTML（结构层）和JavaScript（行为层）共同构成了网页开发的基础架构。

CSS的主要优势在于实现了网页内容与表现的分离，这种分离带来了诸多好处：

提高了开发效率：通过外部样式表，可以统一管理整个网站的样式
增强了可维护性：修改样式时无需改动HTML结构
提升了页面性能：浏览器可以缓存CSS文件
增加了设计灵活性：同一内容可以呈现多种样式

CSS的控制范围非常广泛，主要包括：

布局控制：通过盒模型、浮动、定位（positioning）、弹性盒子（Flexbox）和网格布局（Grid）等技术实现响应式设计
视觉样式：包括颜色（color）、背景（background）、边框（border）等
文字排版：控制字体（font）、字号、行高、对齐等
动画效果：通过transition和animation实现动态效果

实际应用示例：

/* 响应式导航栏样式 */
.navbar {
  display: flex;
  background-color: #333;
  padding: 1rem;
}

.nav-item {
  color: white;
  padding: 0.5rem 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.nav-item:hover {
  background-color: #555;
  transform: scale(1.05);
}

CSS的发展经历了多个版本，从CSS1（1996年）到现在的CSS3，功能不断增强。现代CSS还支持变量（CSS Variables）、混合模式（Blend Modes）、滤镜效果（Filters）等高级特性，大大扩展了网页设计的可能性。

二、CSS 的引入方式

在网页设计中引入 CSS 主要有以下三种方式，每种方式都有其特定的使用场景和优缺点：

（一）内联样式（Inline Style）

内联样式是将 CSS 样式直接写在 HTML 元素的 style 属性中，仅对当前元素生效。这种方式的优先级最高，会覆盖其他方式定义的相同样式。

典型应用场景：

需要快速测试某个元素的样式效果时
需要临时覆盖其他样式时
在动态生成内容时需要为特定元素设置独特样式

基础操作指令示例：

<p style="color: red; font-size: 16px; text-decoration: underline;">这是一段使用内联样式的文本</p>

在这个例子中：

color: red 表示将文本颜色设置为红色
font-size: 16px 表示将字体大小设置为 16 像素
text-decoration: underline 表示添加下划线样式

优点：

优先级最高
修改即时可见
不需要额外的文件或标签

缺点：

样式无法复用
维护困难
增加HTML文件体积
不符合内容与表现分离的原则

（二）内部样式表（Internal Style Sheet）

内部样式表是将 CSS 样式写在 HTML 文档的<head>标签内的<style>标签中，作用范围是当前整个 HTML 文档。

典型应用场景：

单页应用或小型网站
需要为特定页面设置独特样式时
当CSS代码量不大时

基础操作指令示例：

<head>
    <style>
        p {
            color: blue;
            font-family: "Microsoft YaHei", sans-serif;
            line-height: 1.6;
        }
        .special {
            background-color: #f0f0f0;
            padding: 10px;
        }
    </style>
</head>
<body>
    <p>这是一段使用内部样式表的文本</p>
    <p class="special">这段文本应用了特殊样式</p>
</body>

这里：

p 是元素选择器，表示对所有<p>标签应用样式
.special 是类选择器，表示对具有"special"类的元素应用样式
color: blue 设置文本颜色为蓝色
font-family 设置字体为 "微软雅黑"，并指定备用字体为无衬线字体
line-height 设置行高为1.6倍

优点：

样式可在当前文档内复用
便于单个页面的样式管理
不需要额外的HTTP请求

缺点：

不能在多个文档间共享样式
当样式较多时会增加HTML文件体积
不利于大型项目的样式维护

（三）外部样式表（External Style Sheet）

外部样式表是将 CSS 样式写在一个独立的.css文件中，然后在 HTML 文档中通过<link>标签引入。这种方式可以实现多个 HTML 文档共享同一份样式，便于样式的统一管理和维护。

典型应用场景：

大型网站或多页面应用
需要保持样式一致性的项目
需要团队协作开发时

基础操作指令示例：

1.创建一个style.css文件，内容如下：

/* 基本段落样式 */
p {
    color: green;
    line-height: 1.5;
    margin-bottom: 15px;
}

/* 特殊内容区域样式 */
.content-box {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    background-color: #f9f9f9;
}

/* 响应式设计 */
@media (max-width: 768px) {
    p {
        font-size: 14px;
    }
}

2.在 HTML 文档中引入style.css文件：

<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!-- 可以引入多个样式表 -->
    <link rel="stylesheet" type="text/css" href="css/layout.css">
</head>
<body>
    <div class="content-box">
        <p>这是一段使用外部样式表的文本</p>
    </div>
</body>

其中：

rel="stylesheet" 表示引入的是样式表文件
type="text/css" 指定文件类型为 CSS
href="style.css" 表示 CSS 文件的相对路径
可以同时引入多个CSS文件，便于模块化管理

优点：

实现样式与内容完全分离
样式可在多个页面间共享
便于维护和更新
可以利用浏览器缓存提高性能
支持模块化开发
方便实现响应式设计

缺点：

需要额外的HTTP请求
初次加载时可能会有样式闪烁问题
文件路径管理需要额外注意

最佳实践建议：

大型项目推荐使用外部样式表
可以结合使用SASS/LESS等CSS预处理器
使用构建工具合并和压缩CSS文件
重要样式可以适当使用内联样式
开发阶段可以使用内部样式表快速原型开发

三、CSS 选择器

选择器是 CSS 中用于精准定位 HTML 元素并为其应用样式的核心工具。通过合理使用选择器，开发者可以实现精细化的页面样式控制。以下是常见 CSS 选择器的详细介绍：

（一）元素选择器（Element Selector）

元素选择器是最基础的选择器类型，它通过 HTML 元素的标签名来匹配页面上的所有该类型元素。这种选择器适用于需要为某种元素统一设置样式的情况。

应用场景

重置浏览器默认样式
统一相同标签的显示效果
设置基础排版样式
定义全局元素样式

代码示例

h1 {
    color: purple;
    text-align: center;
    font-family: 'Arial', sans-serif;
    margin-bottom: 20px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    letter-spacing: 1px;
}

效果说明

选择文档中所有的<h1>标题元素
设置文字颜色为紫色(purple)
文本居中对齐
使用Arial字体(若不可用则使用系统默认无衬线字体)
底部留出20像素的外边距
添加轻微的文字阴影效果
设置1px的字母间距

使用建议

适用于需要统一修改某一类HTML元素默认样式的场景
通常放在CSS文件的开头部分，用于设置基础样式
可配合其他选择器一起使用，构建完整的样式体系

（二）类选择器（Class Selector）

类选择器通过元素的class属性值进行匹配，以点号(.)开头。一个元素可以拥有多个类名，一个类也可以应用于多个元素，具有很好的复用性。

应用场景

创建可重用的样式模块
标记特定状态（如active、disabled等）
实现BEM等CSS方法论
组件化开发中的样式定义

代码示例

<style>
.highlight {
    background-color: yellow;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 3px;
    transition: background-color 0.3s ease;
}
.warning {
    color: red;
    border-left: 3px solid red;
    padding-left: 10px;
}
.success {
    color: green;
    background-color: #e8f5e9;
}
</style>

<body>
    <p class="highlight">这段文本会被黄色背景高亮</p>
    <span class="highlight warning">同时具有高亮和警告样式</span>
    <div class="highlight success">成功状态的高亮元素</div>
    <button class="btn btn-primary highlight">带高亮效果的主按钮</button>
</body>

特性说明

类名可以包含字母、数字、连字符和下划线，但不能以数字开头
一个元素可以同时拥有多个类（如class="class1 class2"）
类选择器优先级高于元素选择器（特异性为0,0,1,0）
支持链式调用（如.btn.primary）
可以使用属性选择器进行部分匹配（如[class*="col-"]）

最佳实践

使用有意义的类名（如.active-nav-item而非.red）
遵循一致的命名规范（如BEM、OOCSS等）
避免过度使用类选择器导致特异性战争
考虑使用CSS预处理器（如Sass）来管理类样式

（三）ID 选择器（ID Selector）

ID选择器通过元素的id属性进行匹配，以井号(#)开头。ID在文档中应该是唯一的，通常用于标识特定的页面元素。

应用场景

定位唯一元素（如页眉、页脚）
实现锚点跳转（如#section1）
JavaScript操作特定元素
覆盖其他选择器的样式

代码示例

<style>
#main-header {
    background-color: #333;
    color: white;
    padding: 15px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#contact-form {
    max-width: 600px;
    margin: 20px auto;
    padding: 30px;
    background: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

#scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #333;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: none;
}
</style>

<body>
    <header id="main-header">网站主导航</header>
    <form id="contact-form">联系我们表单</form>
    <button id="scroll-to-top">↑</button>
</body>

注意事项

一个ID在文档中应该只出现一次
ID选择器优先级高于类选择器（特异性为0,1,0,0）
应避免过度使用ID选择器，因其特异性过高会影响样式复用
ID选择器不利于样式复用和模块化开发
在JavaScript中使用ID选择器时，可以直接通过document.getElementById()获取元素

使用建议

主要用于页面布局中确定唯一的元素
避免在CSS中过度依赖ID选择器
考虑使用类选择器替代ID选择器来实现样式
保留ID选择器用于JavaScript交互和锚点定位

（四）后代选择器（Descendant Selector）

后代选择器通过空格分隔多个选择器，用于选择某个元素内部的所有特定后代元素，不论嵌套层级。

应用场景

嵌套结构的样式控制
内容区域的特定样式设置
模块化组件内部的样式定义
避免全局样式污染

代码示例

<style>
/* 选择article中的所有p元素 */
article p {
    line-height: 1.6;
    margin-bottom: 15px;
    color: #333;
    font-size: 16px;
}

/* 选择main中的a元素 */
main a {
    color: #0066cc;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* 多层次的后代选择 */
.navbar ul li a {
    padding: 8px 12px;
    display: block;
    color: #555;
}

/* 复杂后代选择器 */
.card .content .meta .author {
    font-weight: bold;
    color: #222;
}
</style>

<body>
    <article>
        <h2>文章标题</h2>
        <p>这段文字会应用样式</p>
        <div class="content">
            <p>这个嵌套的p元素也会应用样式</p>
            <blockquote>
                <p>引用中的p元素同样会被选中</p>
            </blockquote>
        </div>
    </article>
</body>

选择原理

从右向左匹配：先找到所有p元素，再检查它们是否在article内
适用于任何深度的嵌套关系
会遍历所有后代元素，性能随嵌套深度增加而降低
可以连接多个层级（如.a .b .c）

性能优化

避免过深的后代选择（如.a .b .c .d .e）
尽量使用具体的类名而非标签名
考虑使用子选择器替代深层后代选择器
在大型项目中使用CSS模块化方案

（五）子选择器（Child Selector）

子选择器使用大于号(>)连接，仅选择直接子元素，不包含更深层级的后代元素。

应用场景

精确控制直接子元素样式
避免样式过度继承
提高样式选择性能
构建严格的组件结构

代码示例

<style>
/* 只选择ul的直接子元素li */
ul > li {
    list-style-type: square;
    margin-left: 20px;
    position: relative;
}

/* 菜单导航的样式控制 */
.nav > .menu-item {
    display: inline-block;
    padding: 10px 15px;
    border-bottom: 2px solid transparent;
}

/* 表格行直系单元格 */
tr > td {
    padding: 8px;
    border: 1px solid #ddd;
    vertical-align: middle;
}

/* 卡片布局的直接子元素 */
.card > .header {
    background: #f5f5f5;
    padding: 15px;
    border-bottom: 1px solid #eee;
}
</style>

<body>
    <ul class="nav">
        <li class="menu-item">首页</li>
        <li class="menu-item">
            产品
            <ul class="submenu">
                <li>子菜单项不受影响</li>
                <li>另一个子菜单项</li>
            </ul>
        </li>
    </ul>
    
    <div class="card">
        <div class="header">卡片标题</div>
        <div class="content">
            <p>卡片内容不受子选择器影响</p>
        </div>
    </div>
</body>

与后代选择器的区别

特性	子选择器 (>)	后代选择器 (空格)
匹配范围	仅直接子元素	所有后代元素
性能	更高	相对较低
特异性	相同	相同
使用场景	严格的父子关系	任意嵌套关系
代码可读性	关系明确	可能产生歧义

使用建议

在组件化开发中优先使用子选择器
结合BEM等命名规范使用效果更佳
对于已知的DOM结构，使用子选择器更安全
避免过度使用导致样式过于严格

四、CSS 样式属性

CSS 提供了丰富的样式属性，用于精确控制网页元素的各种外观表现。通过合理运用这些属性，可以实现从简单到复杂的各种页面设计效果。以下是常见CSS样式属性的分类详解：

（一）文本样式

color

设置文本颜色，支持多种颜色表示方式：

颜色名称（如red, blue）
十六进制值（如#ff0000表示红色）
RGB/RGBA值（如rgb(255,0,0)或rgba(255,0,0,0.5)带透明度）
HSL/HSLA值（如hsl(0,100%,50%)）

p {
  color: #ff0000; /* 十六进制值表示红色 */
  /* 也可以写成 color: red; */
}

font-size

设置字体大小，常用单位：

px（像素，绝对单位）
em（相对单位，1em等于当前元素的字体大小）
rem（相对根元素(html)的字体大小）
%（百分比，相对于父元素的字体大小）
vw/vh（视窗宽度的1%/视窗高度的1%）

h2 {
  font-size: 24px; /* 绝对大小 */
}

.small-text {
  font-size: 0.8em; /* 相对大小 */
}

font-family

设置字体类型，可以指定多个备选字体（用逗号分隔）。浏览器会优先使用第一个可用的字体。

body {
  font-family: "Arial", "Helvetica", sans-serif;
  /* 如果用户电脑没有Arial，会尝试Helvetica，最后使用系统默认无衬线字体 */
}

text-align

控制文本在容器中的水平对齐方式：

left（默认值，左对齐）
right（右对齐）
center（居中对齐）
justify（两端对齐）

div {
  text-align: center; /* 文本居中 */
}

text-decoration

设置文本装饰效果：

none（无装饰，常用于去除链接的下划线）
underline（下划线）
overline（上划线）
line-through（删除线）
组合使用：underline overline

a {
  text-decoration: none; /* 去除链接的下划线 */
}

.strike {
  text-decoration: line-through; /* 删除线效果 */
}

（二）背景样式

background-color

设置元素的背景颜色，与color属性一样支持多种颜色表示方式。

.box {
  background-color: #f0f0f0; /* 浅灰色背景 */
}

background-image

设置元素的背景图片，使用url()函数指定图片路径。可以是相对路径或绝对路径。

.bg-image {
  background-image: url("images/bg-pattern.jpg");
}

background-repeat

控制背景图片的重复方式：

repeat（默认值，在水平和垂直方向都重复）
repeat-x（只在水平方向重复）
repeat-y（只在垂直方向重复）
no-repeat（不重复）
space（图片等间距排列）
round（图片拉伸以适应容器）

.bg-image {
  background-image: url("image.jpg");
  background-repeat: no-repeat; /* 背景图片只显示一次 */
}

background-position

设置背景图片的位置，可以使用：

关键字组合：如center center、top right等
精确坐标：如50px 100px
百分比：如50% 50%

.bg-image {
  background-image: url("image.jpg");
  background-position: center center; /* 图片居中 */
  
  /* 也可以写成： */
  background-position: 50% 50%;
}

（三）盒模型相关样式

CSS盒模型是布局的基础概念，每个HTML元素都可以看作是一个矩形盒子，由内到外包括：

内容区(content)
内边距(padding)
边框(border)
外边距(margin)

width和height

设置元素内容区的宽度和高度。注意这些值不包括padding、border和margin。

.container {
  width: 500px;   /* 固定宽度 */
  height: 300px;  /* 固定高度 */
}

.responsive {
  width: 80%;    /* 相对父元素宽度的80% */
  height: auto;  /* 高度自动调整 */
}

padding

设置元素内边距（内容与边框之间的距离）。可以分别设置四个方向的值：

.box {
  /* 单独设置各边 */
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  
  /* 简写方式 */
  padding: 10px 20px; /* 上下10px，左右20px */
  padding: 10px 20px 15px; /* 上10px，左右20px，下15px */
  padding: 10px 15px 5px 20px; /* 上右下左顺时针方向 */
}

border

设置元素的边框，包括三个属性：

border-width：边框宽度
border-style：边框样式（solid实线、dashed虚线、dotted点线等）
border-color：边框颜色

.border-box {
  /* 详细写法 */
  border-width: 1px;
  border-style: solid;
  border-color: #333;
  
  /* 简写方式 */
  border: 1px solid #333;
  
  /* 单独设置某一边 */
  border-top: 2px dashed red;
  border-bottom: none; /* 去除下边框 */
}

margin

设置元素的外边距（与其他元素之间的距离）。语法与padding类似：

.space {
  /* 单独设置各边 */
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
  
  /* 简写方式 */
  margin: 20px; /* 四个方向都是20px */
  margin: 10px auto; /* 上下10px，左右自动（常用于居中） */
  
  /* 负值用法 */
  margin-left: -10px; /* 元素向左移动10px */
}

box-sizing

控制盒模型的计算方式：

content-box（默认值）：width/height只包含内容区
border-box：width/height包含内容区、padding和border

* {
  box-sizing: border-box; /* 推荐全局设置，更直观的盒模型 */
}

五、CSS 注释

CSS 注释是样式表中用于添加说明性文字的重要工具，它能帮助开发者理解代码意图、标记特殊修改或临时禁用某些样式。在团队协作和长期维护项目中，良好的注释习惯尤为重要。

基本语法

CSS 注释使用 /* 开头，*/ 结尾的块注释形式，可以跨越多行：

/* 这是一个单行注释 */

/*
 * 这是一个多行注释
 * 第二行注释内容
 * 第三行注释内容
 */

注释内容会被浏览器完全忽略，不会影响页面渲染效果，也不会增加CSS文件解析时间。

常见应用场景

1. 代码说明

为复杂的样式规则添加解释说明：

/* 
 * 响应式图片样式
 * 确保图片在容器内自适应，保持原始宽高比
 * 同时限制最大宽度不超过父容器
 */
.responsive-img {
    max-width: 100%;  /* 防止图片溢出容器 */
    height: auto;     /* 保持原始宽高比 */
    display: block;   /* 消除图片底部间隙 */
}

2. 代码分区

使用注释将样式表划分为逻辑区块：

/* ===================================
   布局框架样式
   =================================== */
.container {
    width: 1200px;
    margin: 0 auto;
}

/* ===================================
   导航菜单样式
   =================================== */
.main-nav {
    background: #2c3e50;
    padding: 15px 0;
}

/* ===================================
   内容区域样式
   =================================== */
.content-area {
    padding: 20px;
    background: #f9f9f9;
}

3. 调试与临时禁用

通过注释快速启用/禁用特定样式：

/* 实验性新样式 - 待评估效果 */
/*
.new-feature {
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}
*/

/* 旧版样式保留，供紧急回滚使用 */
.old-feature {
    border: 1px solid #ddd;
}

4. 版本控制与修改记录

记录重要变更：

/*
 * 样式表版本：v2.1.3
 * 最后更新：2023-11-15
 * 
 * 修改历史：
 * 2023-11-10 - 调整主色调为#3498db
 * 2023-11-05 - 修复移动端菜单显示问题
 * 2023-10-28 - 新增卡片组件样式
 */

高级用法

1. 条件注释（浏览器hack）

针对特定浏览器添加样式：

/* IE10+专属样式 */
@media all and (-ms-high-contrast: none) {
    .ie-only {
        background: #f1f1f1;
    }
}

/* Firefox专属修复 */
@-moz-document url-prefix() {
    .firefox-fix {
        padding-top: 2px;
    }
}

2. 文档区块注释

/**
 * @name: 主按钮样式
 * @description: 用于网站主要操作按钮
 * @state: active, disabled
 * @requires: button-reset.css
 */
.primary-btn {
    background: #3498db;
    color: white;
    padding: 10px 20px;
}

最佳实践

适度注释：在关键算法、特殊处理或hack代码处添加说明，避免过度注释
注释风格统一：团队应约定统一的注释格式标准
及时更新：当代码变更时，同步更新相关注释
避免嵌套：CSS不支持注释嵌套，会导致解析错误
构建优化：生产环境可使用构建工具自动移除注释

/* 错误示例：嵌套注释会导致解析问题 */
/*
外层注释
/*
内层注释
*/
外层注释
*/

工具支持

现代CSS预处理器和构建工具都提供注释处理功能：

Sass/Less：支持//单行注释和/**/多行注释
PostCSS：可通过插件自动清理或保留特定注释
Webpack：使用css-loader时可通过配置控制注释保留策略

合理使用CSS注释可以显著提升代码可维护性，是专业前端开发的重要组成部分。