Css选择器简介-工具盒子

CSS 选择器简介 {#css-%E9%80%89%E6%8B%A9%E5%99%A8%E7%AE%80%E4%BB%8B}

1. CSS 简介 {#1.-css-%E7%AE%80%E4%BB%8B}

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

2. CSS 语法 {#2.-css-%E8%AF%AD%E6%B3%95}

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

selector {
  property: value;
}

3. CSS 选择器 {#3.-css-%E9%80%89%E6%8B%A9%E5%99%A8}

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

元素选择器 {#%E5%85%83%E7%B4%A0%E9%80%89%E6%8B%A9%E5%99%A8}

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

p {
  color: red;
}

类选择器 {#%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8}

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

.myClass {
  background-color: yellow;
}

ID 选择器 {#id-%E9%80%89%E6%8B%A9%E5%99%A8}

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

#myId {
  font-size: 20px;
}

4. CSS 样式属性 {#4.-css-%E6%A0%B7%E5%BC%8F%E5%B1%9E%E6%80%A7}

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

color: 文本颜色
background-color: 背景颜色
font-size: 字体大小
font-family: 字体类型
text-align: 文本对齐方式
padding: 内边距
margin: 外边距

5. CSS 示例 {#5.-css-%E7%A4%BA%E4%BE%8B}

下面是一个简单的 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 元素被选中，并应用了多种样式属性。这些样式包括文本颜色、字体大小、文本对齐方式、背景颜色、内边距和外边距。