CSS：选择器和属性-css教程-PHP中文网

CSS：选择器和属性

王林

发布： 2024-08-22 06:30:32

原创

876 人浏览过

CSS: selectors and properties

第二讲：选择器和属性

在本次讲座中，我们将深入探讨 CSS 的构建块：选择器和属性。这些是基本概念，可让您定位网页上的特定元素并有效地设计它们。

什么是 CSS 选择器？

CSS 选择器是用于选择要设置样式的 HTML 元素的模式。不同类型的选择器允许您根据标签、类、ID、属性等将样式应用于各种元素。

选择器的类型

元素（类型）选择器：
- 针对特定类型的所有元素。
- 示例：
```
 p {
   color: green;
 }
```
登录后复制
这将改变所有
的颜色元素变为绿色。
类别选择器：
- 针对具有特定类属性的元素。
- 示例：
```
 .highlight {
   background-color: yellow;
 }
```
登录后复制
在 HTML 中，任何带有 class="highlight" 的元素都将具有黄色背景。
```
 <p class="highlight">This is highlighted text.</p>
```
登录后复制
ID 选择器：
- 针对具有唯一 ID 属性的单个元素。
- 示例：
```
 #header {
   font-size: 24px;
 }
```
登录后复制
只有 id="header" 的元素才会有 24px 的字体大小。
```
 <div id="header">Welcome to My Website</div>
```
登录后复制
组选择器：
- 将相同的样式应用于多个选择器。
- 示例：
```
 h1, h2, h3 {
   color: blue;
 }
```
登录后复制
此规则将使所有
、
和
蓝色元素。
后代选择器：
- 定位其他元素（其后代）内部的元素。
- 示例：
```
 div p {
   font-style: italic;
 }
```
登录后复制
这将使所有
内的元素斜体。
```
 <div>
   <p>This text is italicized because it's inside a div.</p>
 </div>
```
登录后复制

理解 CSS 属性

CSS 属性定义您想要设置所选元素的哪些方面的样式。每个属性后面都有一个指定所需结果的值。

示例属性：

颜色：
- 设置文本颜色。
- 示例：
```
h1 {
  color: red;
}
```
登录后复制
背景颜色：
- 设置背景颜色。
- 示例：
```
body {
  background-color: #f0f0f0;
}
```
登录后复制
字体大小：
- 设置文本的大小。
- 示例：
```
p {
  font-size: 16px;
}
```
登录后复制
保证金：
- 设置元素外部的空间。
- 示例：
```
.box {
  margin: 20px;
}
```
登录后复制
填充：
- 设置元素内部内容和边框之间的空间。
- 示例：
```
.content {
  padding: 10px;
}
```
登录后复制

实际例子：

让我们将所学内容与一个简单的示例结合起来。

HTML：

<div id="container">
  <h1>Welcome to CSS Basics</h1>
  <p class="intro">This is an introduction to CSS selectors and properties.</p>
  <p>Selectors help you target elements, and properties allow you to style them.</p>
</div>

登录后复制

CSS：

/* ID Selector */
#container {
  border: 2px solid black;
  padding: 10px;
}

/* Element Selector */
h1 {
  color: purple;
}

/* Class Selector */
.intro {
  background-color: lightblue;
  font-size: 18px;
}

/* Group Selector */
h1, p {
  font-family: Arial, sans-serif;
}

/* Descendant Selector */
#container p {
  margin-bottom: 15px;
}

登录后复制

在此示例中：