跳到主要内容

CSS 语法

介绍​

CSS（层叠样式表）是一种用于描述HTML文档外观和格式的语言。通过CSS，你可以控制网页的布局、颜色、字体等样式。CSS语法是编写CSS样式规则的基础，理解它是掌握CSS的关键。

CSS 语法基础​

CSS语法由选择器（Selector）和声明块（Declaration Block）组成。声明块包含一个或多个声明（Declaration），每个声明由属性（Property）和值（Value）组成。

基本语法结构​

css
选择器 {
  属性: 值;
  属性: 值;
}
  • 选择器：用于选择要应用样式的HTML元素。
  • 属性：定义要更改的样式属性，如 color、font-size 等。
  • 值：指定属性的具体值，如 red、16px 等。

示例​

css
h1 {
  color: blue;
  font-size: 24px;
}

在这个例子中，h1 是选择器，color 和 font-size 是属性，blue 和 24px 是值。这段代码将所有 <h1> 元素的文本颜色设置为蓝色，字体大小设置为24像素。

选择器​

选择器是CSS语法的核心部分，它决定了哪些HTML元素会被应用样式。常见的选择器类型包括：

  • 元素选择器：选择特定类型的HTML元素，如 p、h1 等。
  • 类选择器：选择具有特定类名的元素，如 .classname。
  • ID选择器：选择具有特定ID的元素，如 #idname。
  • 属性选择器：选择具有特定属性的元素，如 [type="text"]。

示例​

css
/* 元素选择器 */
p {
  color: green;
}

/* 类选择器 */
.highlight {
  background-color: yellow;
}

/* ID选择器 */
#header {
  font-size: 30px;
}

/* 属性选择器 */
input[type="text"] {
  border: 1px solid #ccc;
}

声明块​

声明块包含一个或多个声明，每个声明由属性和值组成。多个声明之间用分号 ; 分隔。

示例​

css
div {
  width: 100%;
  height: 200px;
  background-color: #f0f0f0;
  border: 1px solid #000;
}

在这个例子中，div 元素的宽度设置为100%，高度设置为200像素，背景颜色为浅灰色，边框为1像素的黑色实线。

实际应用场景​

案例1：设置网页标题样式​

假设你有一个网页标题 <h1>，你想将其颜色设置为红色，字体大小设置为36像素，并居中显示。

css
h1 {
  color: red;
  font-size: 36px;
  text-align: center;
}

案例2：创建按钮样式​

你想创建一个带有蓝色背景、白色文字和圆角的按钮。

css
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-align: center;
  display: inline-block;
}

总结​

CSS语法是编写CSS样式规则的基础，理解选择器、属性和值的概念是掌握CSS的关键。通过选择器，你可以精确地选择要应用样式的HTML元素；通过声明块，你可以定义这些元素的样式。

提示

练习是掌握CSS语法的最佳方式。尝试为你的网页编写一些简单的CSS样式，看看效果如何。

附加资源​

通过不断练习和探索，你将能够熟练地使用CSS语法来美化你的网页。