CSS是什么意思

网页设计百科

概览 定义 特性 用法 实践

CSS

/ˌsiː es ˈes/
计算机术语 前端技术

全称：层叠样式表（Cascading Style Sheets）

作用：控制网页的视觉表现和布局

📚 核心定义

样式表语言

用于描述HTML文档的呈现方式

CSS defines how HTML elements are displayed.
CSS定义HTML元素的显示方式。
网页设计

样式分离

实现内容与表现的分离

CSS separates content from presentation.
CSS实现了内容与表现的分离。
前端开发

标准化技术

由W3C制定的网页标准

CSS is maintained by the W3C.
CSS由W3C组织维护。
Web标准

CSS是构建现代网页的三大核心技术之一（HTML、CSS、JavaScript），最新版本是CSS3，支持响应式设计和动画效果。

🔄 功能对比

无CSS的网页

Plain text with default styling

No layout control

Limited visual effects

使用CSS的网页

精美的视觉设计

灵活的布局控制

丰富的动画效果

✨ 主要特性

CSS2
1998年发布

基础样式、定位、媒体类型

CSS3
1999年起分模块发布

圆角、阴影、渐变、动画

核心功能：

CSS3新增特性

  • 边框圆角（border-radius）
  • 文本阴影（text-shadow）
  • 渐变背景（gradient）
  • 2D/3D变换（transform）

🎯 基本用法

内联样式

直接在HTML元素中使用

<p style="color:red;">
直接在元素中定义样式
优先级最高

内部样式表

在HTML文档头部定义

<style> p {color:blue;} </style>
在head标签内定义样式
单页适用

外部样式表

通过链接引入.css文件

<link rel="stylesheet" href="style.css">
推荐的主流使用方式
多页共享

语法结构

选择器： 指定样式应用的元素
声明块： 包含一组样式声明
属性值： 定义具体的样式表现

⚠️ 常见误区

注意事项：

CSS可以改变网页内容 (错误)

正确：CSS只改变内容的表现形式

CSS可以替代HTML (错误)

正确：CSS需要与HTML配合使用

✍️ 实践练习

基础练习

1. 将所有段落文字设为蓝色
2. 给div添加红色边框
3. 设置页面背景为浅灰色

1. p { color: blue; }

2. div { border: 1px solid red; }

3. body { background-color: #f0f0f0; }

选择器练习

写出匹配以下元素的CSS选择器：

• ID为"header"的元素
• 类名为"active"的按钮
• 所有h1标题元素

1. #header { ... }

2. button.active { ... }

3. h1 { ... }

改错练习

找出并改正错误：

1. p { color=red; }
2. .box { width: 100; }
3. body { font-size 16px; }

1. p { color: red; }

2. .box { width: 100px; }

3. body { font-size: 16px; }