CSS结构

CSS由选择器（Selectors）和声明块（Declaration Blocks）组成。

选择器指定要应用样式的HTML元素，而声明块包含了一组属性和值，用于描述该元素的样式。

CSS规则的基本结构如下：

selector {
  property1: value1;
  property2: value2;
  /* more properties and values */
}

  • selector：选择器指定了要应用样式的HTML元素。它可以是标签名、类名、ID、属性等。

  • property：属性表示要修改的样式特性，如字体颜色、边框宽度等。

  • value：值是属性的具体设置，如红色、10像素等。

可以使用多个规则来选择不同的元素，并为它们设置不同的样式。

CSS语法

CSS的语法相对简单直观，以下是一些重要的语法规则：

注释

/* 这是一个CSS注释 */

可以使用/*和*/来注释CSS代码，注释部分不会被浏览器解析和应用。

选择器

选择器用于指定要应用样式的HTML元素。以下是一些常见的选择器示例：

  • 标签选择器：选择所有具有相同标签的元素，如 p 选择所有段落元素。

  • 类选择器：选择具有相同类名的元素，以.开头，如 .red 选择所有类名为 "red" 的元素。

  • ID选择器：选择具有相同ID的元素，以#开头，如 #header 选择ID为 "header" 的元素。

  • 属性选择器：选择具有特定属性的元素，如 [type="button"] 选择所有type属性为 "button" 的元素。

声明块

声明块包含一组属性和值，用于描述要应用的样式。每个声明由一个属性和对应的值组成，用分号分隔。最后一个声明后面不需要添加分号。

selector {
  property1: value1;
  property2: value2;
  /* more properties and values */
}

值

属性的值可以是不同类型的值，如颜色、长度、百分比、字体名称等。

  • 颜色值可以使用颜色名称（如 red）或十六进制值（如 #FF0000）表示。

  • 长度值可以使用像素（如 10px）或相对单位（如 %）表示。

  • 百分比值用于相对于父元素的长度，如 50% 表示父元素宽度的50%。

  • 字体值可以使用字体名称（如 Arial）或字体栈（如 Arial, sans-serif）表示。

嵌套和继承

CSS允许样式的嵌套和继承。

  • 嵌套：可以将一个选择器嵌套在另一个选择器内部，以指定更具体的样式规则。例如：

    .container {
  background-color: #FFF;
  padding: 10px;
  /* more styles */
}
​
.container h1 {
  color: blue;
  /* more styles */
}

  • 继承：某些属性值可以从父元素继承到子元素。例如，设置父元素的字体样式会影响子元素的字体样式。

这是CSS的基本结构和语法。通过选择器和声明块的组合，开发者可以为网页元素应用样式，实现各种自定义的外观和布局效果。