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注释可以显著提升代码可维护性，是专业前端开发的重要组成部分。