CSS语法基础

CSS的基本语法由选择器（Selector）、属性（Property）和值（Value）组成。理解这些基本语法结构是学习CSS的基础。

CSS规则的基本结构

一个完整的CSS规则由两部分组成：选择器和声明块。

css 
选择器 {
  属性1: 值1;
  属性2: 值2;
  /* 更多属性和值 */
}

1. 选择器

选择器指定了CSS规则应用的HTML元素。例如，要选择所有<p>元素，可以使用元素选择器：

css 
p {
  /* 样式规则 */
}

2. 声明块

声明块包含在大括号{}中，由一个或多个声明组成。每个声明由属性和值组成，中间用冒号:分隔，每个声明以分号;结束。

css 
p {
  color: blue;      /* 属性: 值 */
  font-size: 16px;  /* 属性: 值 */
}

CSS的基本语法规则

1. 区分大小写

CSS是区分大小写的语言。例如，color和Color是不同的属性名。

css 
/* 正确 */
color: red;

/* 错误 - 属性名拼写错误 */
Color: red;

2. 空格和换行

CSS忽略多余的空格和换行，可以根据需要添加空格和换行来提高代码的可读性。

css 
/* 紧凑写法 */
p{color:blue;font-size:16px;}

/* 更易读的写法 */
p {
  color: blue;
  font-size: 16px;
}

3. 属性值的引号

当属性值包含空格或特殊字符时，需要使用引号（单引号或双引号）括起来。

css 
/* 包含空格的属性值需要引号 */
font-family: "Arial Black", sans-serif;

/* 不包含空格的属性值可以省略引号 */
font-size: 16px;

选择器的基本类型

CSS选择器用于选择要应用样式的HTML元素。以下是几种最基本的选择器类型：

1. 元素选择器

通过HTML元素名选择元素。

css 
/* 选择所有<p>元素 */
p {
  color: green;
}

/* 选择所有<div>元素 */
div {
  background-color: lightgray;
}

2. ID选择器

通过元素的id属性选择元素，使用#前缀。

html 
<div id="main-content">这是主要内容</div>
css 
/* 选择id为main-content的元素 */
#main-content {
  width: 80%;
  margin: 0 auto;
}

3. 类选择器

通过元素的class属性选择元素，使用.前缀。

html 
<p class="highlight">这段文字需要高亮显示</p>
<p class="highlight">这段文字也需要高亮显示</p>
css 
/* 选择所有class为highlight的元素 */
.highlight {
  background-color: yellow;
  font-weight: bold;
}

4. 通用选择器

选择所有元素，使用*符号。

css 
/* 选择页面上的所有元素 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

属性和值

CSS提供了大量的属性，用于控制元素的各种样式。以下是一些常用的属性类别：

1. 文本属性

控制文本的外观，如颜色、字体、大小等。

css 
p {
  color: blue;          /* 文本颜色 */
  font-family: Arial;   /* 字体 */
  font-size: 16px;      /* 字体大小 */
  font-weight: bold;    /* 字重 */
  text-align: center;   /* 文本对齐 */
}

2. 盒模型属性

控制元素的尺寸和间距。

css 
div {
  width: 300px;         /* 宽度 */
  height: 200px;        /* 高度 */
  margin: 20px;         /* 外边距 */
  padding: 15px;        /* 内边距 */
  border: 1px solid black;  /* 边框 */
}

3. 背景属性

控制元素的背景。

css 
div {
  background-color: lightblue;    /* 背景颜色 */
  background-image: url('image.jpg');  /* 背景图片 */
  background-repeat: no-repeat;   /* 背景重复 */
  background-position: center;    /* 背景位置 */
}

选择器分组

可以将多个选择器组合在一起，共享相同的样式声明，使用逗号分隔。

css 
/* h1、h2和h3元素共享相同的样式 */
h1, h2, h3 {
  color: darkred;
  font-family: "Times New Roman", serif;
}

嵌套规则

在CSS中，可以使用嵌套规则来表示元素之间的层次关系（在CSS预处理器如Sass中更为常见，但标准CSS也支持）。

css 
/* 选择ul元素内的所有li元素 */
ul li {
  list-style-type: square;
}

/* 选择div元素内的所有p元素内的所有span元素 */
div p span {
  color: orange;
}

总结

CSS的基本语法由选择器、属性和值组成。理解这些基本概念对于学习CSS至关重要：

  • 选择器用于选择要应用样式的元素
  • 声明块包含一个或多个属性-值对
  • 可以使用不同类型的选择器来精确控制元素
  • 合理的语法结构和格式可以提高代码的可读性和可维护性

继续学习CSS引入方式，了解如何将CSS应用到HTML文档中。

最后更新：2026-02-07