一个网页由三部分组成：HTML负责结构，CSS负责表现，JavaScript负责行为。CSS全称是Cascading Style Sheets，中文叫层叠样式表，它是对网页进行样式美化、布局排版和视觉表现控制的技术。换句话说，HTML决定了页面上有哪些内容，而CSS决定了这些内容长什么样、放在哪里、如何随设备变化而变化。如果没有CSS，所有网页都会变成一串从头排到尾的纯文字，毫无美感可言。
CSS到底对网页做了哪些操作
具体来说，CSS对网页的操作可以归纳为四大类。第一类是外观设置，包括文字的颜色、大小、字体，元素的背景色、边框、圆角、阴影等。第二类是布局排版，决定元素在页面中的位置关系，比如并排排列、上下堆叠、居中显示等。第三类是响应式适配，让同一套页面在手机、平板、电脑上都能良好展示。第四类是交互与动画，通过过渡、变换和动画，让页面元素在状态变化时有平滑的视觉效果。
这四类操作是通过CSS规则来实现的。一条CSS规则由选择器和声明块组成，选择器负责找到要操作的元素，声明块里写具体的样式属性和值。浏览器解析HTML时，会把CSS规则应用到对应元素上，最终渲染出你看到的页面。
外观设置：让内容变得好看
外观设置是CSS最基础的功能。通过color、font-size、background、border等属性，可以精确控制元素的视觉呈现。比如下面这段代码：
body {
font-family: "Microsoft YaHei", sans-serif;
font-size: 16px;
color: #333;
background-color: #f5f5f5;
}
.card {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
}这段代码首先设置了整页的字体和背景色，然后给类名为card的元素加了白色背景、圆角和阴影，形成一个卡片效果。这类操作在网页设计中随处可见，几乎所有视觉细节都依赖CSS完成。
值得注意的是，CSS中的颜色支持多种写法，包括十六进制（如#ff0000）、RGB（如rgb(255, 0, 0)）和HSL等。选择合适的颜色表示方式，可以让代码更易维护。
布局排版：控制元素的位置
布局是CSS中最能体现功力的部分。每个HTML元素在页面上都被看作一个矩形盒子，这就是著名的盒模型，由内容区、内边距、边框和外边距四层组成。CSS通过控制这个盒子，决定元素占据的空间和位置。
现代CSS布局主要依靠Flexbox和Grid两大体系。Flexbox适合一维布局，也就是一行或一列的排列；Grid适合二维布局，可以同时控制行和列。下面是一个典型的Flex布局例子：
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}第一个规则让导航栏的Logo和菜单分别靠左靠右对齐并垂直居中；第二个规则把容器分成三等列，列间距20像素，常用于商品列表或卡片墙。相比早期的浮动布局，这两种方式代码更简洁，兼容性也已经非常好，是目前的主流选择。
此外，position属性可以实现绝对定位、固定定位和粘性定位，配合z-index还能控制元素的层叠顺序，这些组合起来就能应对绝大多数排版需求。
响应式适配：一套代码适配多设备
用户访问网页的设备屏幕尺寸差异巨大，从几百像素宽的手机到两三千像素宽的显示器都有。CSS通过媒体查询（Media Query）解决这个问题，让样式根据屏幕宽度动态变化：
.sidebar {
width: 300px;
}
@media (max-width: 768px) {
.sidebar {
width: 100%;
}
}这段代码表示：屏幕宽度超过768像素时侧边栏固定300像素宽，小于等于768像素时改为占满整行，也就是手机上常见的布局方式。配合flex-wrap、百分比单位、vw和vh视口单位、clamp()函数等，可以让页面在不同设备上都获得良好的浏览体验。
响应式设计的核心思想是移动优先，先写好小屏幕的样式，再用媒体查询逐步增强大屏幕的展示效果，这样能减少覆盖样式的数量，代码结构更清晰。
交互与动画：提升页面体验
CSS不仅能做静态样式，还能做动画。通过transition过渡属性，可以让元素的状态变化平滑进行；通过@keyframes关键帧，可以定义复杂的连续动画：
.btn {
background: #1e90ff;
transition: background 0.3s ease, transform 0.3s ease;
}
.btn:hover {
background: #0066cc;
transform: translateY(-2px);
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 0.5s ease forwards;
}上面的代码让按钮在鼠标悬停时变色并微微上浮，同时定义了一个淡入动画。相比用JavaScript实现动画，CSS动画由浏览器的合成线程处理，性能更好，代码也更简洁。当然，涉及复杂逻辑判断的动画仍然需要JavaScript配合，两者各司其职。
总结
回到最初的问题：CSS是对网页进行什么操作？答案是样式美化、布局排版、响应式适配和交互动画四大类操作。它与HTML、JavaScript分工明确，是前端开发不可或缺的技能。学习CSS建议从选择器和盒模型入手，掌握Flex和Grid布局后再深入响应式设计与动画，循序渐进才能真正驾驭网页的表现层。