上查看所有课程
CSS 语法用于将 CSS 添加到 HTML 文档中。CSS 语法由选择器和声明块组成。例如，
selector {
property1: value;
property2: value;
}CSS 的基本语法包含 **3** 个主要部分
选择器- 指定我们希望应用样式的 HTML 元素属性1**/**属性2- 指定我们希望更改的 HTML 元素的属性（如颜色、背景等）值- 指定您要为属性分配的新值（例如，文本颜色为 红色，背景为 灰色 等）
示例 CSS 语法
让我们来看一个 CSS 示例
p {
color: red;
font-size: 20px;
background-color: yellow;
}这里，
p- 选择器，它会选择文档中的所有<p>元素color: red;- 将<p>内容的文本颜色更改为 红色font-size: 20px;- 将<p>内容的字体大小更改为 20pxbackground-color: yellow;- 将<p>元素的背景设置为 黄色
我们使用 <style> 标签将 CSS 添加到 HTML 文件中。例如，
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<title>Browser</title>
<style>
p {
color: red;
font-size: 20px;
background-color: yellow;
}
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>浏览器输出
示例：样式化多个元素
我们可以一次性将 CSS 应用于多个 HTML 元素。例如，
h1, p {
color: red;
font-size: 20px;
background-color: yellow;
}在这里，CSS 规则将同时应用于 <h1> 和 <p> 元素。现在，让我们将上述 CSS 代码添加到我们的 HTML 文件中。
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<title>Browser</title>
<style>
h1,p {
color: red;
font-size: 20px;
background-color: yellow;
}
</style>
</head>
<body>
<h1>This is the heading</h1>
<p>This is a paragraph</p>
<div>This is a div</div>
</body>
</html>浏览器输出
内联 CSS 的 CSS 语法
我们可以使用 HTML 标签内的 style 属性将 CSS 应用于单个 HTML 元素。这称为内联 CSS。例如，
<p style="color: blue">This text will be blue.</p>浏览器输出
这里，
style="color: blue"内联 CSS 中的多个属性
我们也可以使用内联 CSS 添加多个样式。例如，
<p style="color: blue; font-size: 50px">This text will be blue.</p>浏览器输出
在这里，我们使用分号 (;) 分隔多个属性。
