CSS 基本语法

CSS 基本结构

选择器 {
  属性名1: 属性值1;
  属性名2: 属性值2;
  属性名3: 属性值3;
}

语法说明

选择器(Selector)

选择器用于选择要应用样式的 HTML 元素。

属性(Property)

CSS 属性用于定义元素的样式,如颜色、字体、边距等。

属性值(Value)

每个属性都有对应的值,定义属性的具体效果。

示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS 基本语法</title>
    <style>
      /* 这里写css */
      h1 {
        color: rebeccapurple;
        font-family: "Courier New", Courier, monospace;
        font-size: small;
      }
    </style>
  </head>
  <body>
    <h1>我是h1</h1>
  </body>
</html>

代码解析

h1 {
  /* 选择器: 选择所有 h1 标签 */
  color: rebeccapurple; /* 属性: 文字颜色 */
  font-family: ...; /* 属性: 字体 */
  font-size: small; /* 属性: 字体大小 */
}

书写规范

1. 每条声明以分号结束

h1 {
  color: red; /* ✓ 正确 */
  color: blue; /* ✗ 错误,缺少分号 */
}

2. 属性名和属性值之间用冒号分隔

h1 {
  color: red;      /* ✓ 正确 */
  color red;       /* ✗ 错误,缺少冒号 */
}

3. 选择器后的大括号

h1 {
  color: red;
}

4. 缩进和空格

h1 {
  color: red; /* 推荐使用缩进 */
  font-size: 16px;
}

CSS 注释

/* 这是单行注释 */
h1 {
  color: red; /* 这是行内注释 */
}

/*
  这是多行注释
  可以写多行
*/

常用属性

属性	描述	示例
`color`	文字颜色	`color: red;`
`font-size`	字体大小	`font-size: 16px;`
`font-family`	字体	`font-family: Arial;`
`background-color`	背景色	`bdzckground-color: blue;`
`width`	宽度	`width: 100px;`
`height`	高度	`height: 100px;`

学习要点

基本结构: 选择器 + 属性 + 属性值
分号结尾: 每条声明必须以分号结束
缩进规范: 保持代码格式清晰
注释使用: 添加注释提高代码可读性

css css学习