CSS 选择器简介

1. CSS 简介

CSS，全称“层叠样式表”(Cascading Style Sheets)，是一种用于描述 HTML 文档样式的语言。通过使用 CSS，开发者可以控制网页的布局、颜色、字体等视觉表现。

2. CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {
  property: value;
}

3. CSS 选择器

CSS 选择器用于选择你想要添加样式的 HTML 元素。常见的选择器有元素选择器、类选择器、ID 选择器等。

元素选择器

元素选择器根据 HTML 元素名来选择元素。

p {
  color: red;
}

类选择器

类选择器使用点（.）来标识。你可以在 HTML 元素中使用 class 属性来引用类选择器。

.myClass {
  background-color: yellow;
}

ID 选择器

ID 选择器使用井号（#）来标识。HTML 元素中的 id 属性应该是唯一的。

#myId {
  font-size: 20px;
}

4. CSS 样式属性

CSS 有许多不同的样式属性，可以用来控制 HTML 元素的各个方面。以下是一些常见的样式属性：

  • color: 文本颜色

  • background-color: 背景颜色

  • font-size: 字体大小

  • font-family: 字体类型

  • text-align: 文本对齐方式

  • padding: 内边距

  • margin: 外边距

5. CSS 示例

下面是一个简单的 CSS 示例，展示了如何使用 CSS 来改变一个段落的样式。

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
      text-align: center;
      background-color: lightgray;
      padding: 10px;
      margin: 20px;
    }
  </style>
</head>
<body>
  <p>这是一个样式化的段落。</p>
</body>
</html>

在这个示例中，p 元素被选中，并应用了多种样式属性。这些样式包括文本颜色、字体大小、文本对齐方式、背景颜色、内边距和外边距。