上查看所有课程
CSS（层叠样式表）是一种样式语言，用于为网页添加样式。
HTML 提供网页的结构和内容，而 CSS 通过各种样式增强该内容的视觉呈现。例如，
CSS 语法
以下是为网页元素添加样式的语法
selector {
property1: value;
property2: value;
}CSS 的基本语法包括 3 个主要部分
selector- 指定我们要应用样式的 HTML 元素property1/property2- 指定我们要更改的 HTML 元素的属性（颜色、背景等）value- 指定要分配给属性的新值（文本颜色为红色、背景为灰色等）
要了解更多信息，请访问 CSS 语法教程。
示例：使用 CSS 为文档设置样式
让我们看一个没有 CSS 的 HTML 页面的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Example</title>
</head>
<body>
<p>This is a sample text.</p>
</body>
</html>浏览器输出
现在，让我们为上述 HTML 代码添加 CSS。
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Example</title>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>This is a sample text.</p>
</body>
</html>浏览器输出
在上面的示例中，请注意以下代码
<style>
p {
color: blue;
}
</style><style>- 一个用于定义包含 CSS 的部分的 HTML 标签p- 是一个选择器，指定要应用于页面上所有<p>元素的样式color: blue- 将<p>标签的文本颜色更改为蓝色
将 CSS 添加到 HTML
在最后一个示例中，我们在 HTML 文件中使用了 CSS 代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Example</title>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>This is a sample text.</p>
</body>
</html>这里，由于 CSS 代码位于 HTML 文件本身内部，因此称为内部 CSS。
还有其他方法可以将 CSS 添加到 HTML。要了解更多信息，请访问 将 CSS 添加到 HTML。
CSS 中的注释
注释是与代码一起编写的备注，浏览器会忽略它们。例如，
/* this is css comment */CSS 注释以 /* 开头，以 */ 结尾。让我们看看如何将注释与 CSS 代码一起使用。
/* Define text color for the div*/
div {
color: blue;
}/* Define text color for headings */
h1{
color: green;
}在上面的例子中：
/* Define text color for the div*//* Define text color for headings */是单行注释。在阅读代码时可以看到它，但在页面渲染期间会被浏览器忽略。
我们也可以在 CSS 中添加多行注释。只需在不同的行结束注释即可。例如，
/* This is
a multi-line
comment */为什么要使用 CSS 注释？
- 代码中的注释有助于阅读代码的人理解您在编写代码时想要做什么。
- 这使得其他开发人员更容易理解代码并在必要时进行更改。
- 注释对于将来需要维护代码的任何人也很有用。
为什么要学习使用 CSS？
我们应该学习 CSS，原因如下：
1. 自定义和设计网站
CSS 允许您以多种不同方式自定义网页内容的外观。例如，
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<title>Browser</title>
<style>
p {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>浏览器输出
如您所见，我们使用 CSS 更改了网页元素的字体和颜色。CSS 让我们能够自由地以最符合我们设计愿景的方式呈现内容。
2. 响应式设计
响应式网页设计是一种网页设计方法，旨在使网页在所有具有不同屏幕尺寸和视口的设备上都能良好渲染。
随着各种尺寸设备的增加，创建能够适应不同设备尺寸的网页变得非常重要。
CSS 媒体查询和其他技术允许创建能够自动适应屏幕尺寸变化的网页。例如，
Programiz 网站的桌面视图
Programiz 网站的移动视图
在这里，您可以看到设计同时适用于移动和桌面设计。
3. CSS 动画和过渡
CSS 提供了向网页添加动画和过渡的工具。动画和过渡可以增强网页的用户体验。