发表更新软件开发 / HTML小白8 分钟读完 (大约1218个字)0次访问

20 CSS基础之选择器与属性

在本章中，我们将详细介绍CSS中的选择器与属性，这些是控制网页外观的基本工具。选择器允许我们定义哪些HTML元素将应用特定的样式，而属性则用于描述这些样式的具体值。

选择器

选择器是CSS中用来选择要应用样式的HTML元素的部分。不同种类的选择器适用于不同的情况，以下是一些常用的选择器：

1. 元素选择器

元素选择器直接通过HTML标签名选择元素。例如，以下选择器将选中所有的<p>标签：

1
2
3
p {
    color: blue; /* 将所有<p>元素的文本颜色设置为蓝色 */
}

2. 类选择器

类选择器用“.”(点)符号开始，可以选择带有特定类的元素。例如，以下选择器将选择所有具有class="highlight"的元素：

1
2
3
.highlight {
    background-color: yellow; /* 为所有.highlight类的元素设置背景颜色为黄色 */
}

在HTML中使用时，您可以这样写：

1
<p class="highlight">这段文本将会有黄色背景。</p>

3. ID选择器

ID选择器用“#”符号开始，用于选择具有特定ID的单个元素。每个ID只能在页面中使用一次，例如：

1
2
3
#header {
    font-size: 2em; /* 将ID为header的元素字体大小设置为2em */
}

在HTML中可以这样使用：

1
<div id="header">这是头部内容</div>

4. 组合选择器

组合选择器允许我们结合使用多个选择器来选择更具体的元素。例如，选择所有位于带有class="container"类的<div>内部的<p>标签：

1
2
3
.container p {
    margin: 20px; /* 为.container类中的<p>元素设置外边距为20像素 */
}

5. 伪类选择器

伪类选择器用于选择元素的特定状态。例如，可以使用:hover伪类选择器改变当光标悬停在元素上时的样式：

1
2
3
a:hover {
    color: red; /* 当鼠标悬停在链接上时，将文本颜色设置为红色 */
}

在HTML中，当您将鼠标悬停在链接上时，文本颜色会变成红色：

1
<a href="#">这是一个链接</a>

属性

在CSS中，属性用于定义样式的具体值。每个样式规则至少包含一个选择器和一组属性。下面是一些常见的CSS属性：

1. 背景属性

背景属性可用于设置元素的背景颜色或背景图像：

1
2
3
4
5
6
7
8
body {
    background-color: #f0f0f0; /* 设置页面的背景颜色 */
}

.header {
    background-image: url('header-bg.jpg'); /* 设置头部背景图像 */
    background-size: cover; /* 背景图像覆盖整个区域 */
}

2. 文字属性

文字相关的属性可用于设置字体、大小、颜色等：

1
2
3
4
5
6
p {
    font-family: 'Arial', sans-serif; /* 设置字体 */
    font-size: 16px; /* 设置字体大小 */
    color: #333; /* 设置文本颜色 */
    line-height: 1.5; /* 设置行高 */
}

3. 边距与填充

边距(margin)和填充(padding)是控制元素间距的重要属性。margin用于设置元素外部的空间，而padding用于设置元素内部的空间：

1
2
3
4
5
.box {
    margin: 20px; /* 设置元素外部的边距为20像素 */
    padding: 10px; /* 设置元素内部的填充为10像素 */
    border: 1px solid #ccc; /* 设置元素的边框 */
}

4. 边框属性

边框属性用于定义元素的边框样式、宽度和颜色：

1
2
3
4
.container {
    border: 2px solid black; /* 设置黑色边框 */
    border-radius: 5px; /* 设置圆角边框 */
}

5. 布局属性

布局属性用于控制元素的位置和大小，如display、position、width和height：

1
2
3
4
.sidebar {
    width: 300px; /* 设置侧边栏的宽度 */
    float: left; /* 使侧边栏向左浮动 */
}

实践案例

让我们通过一个简单的网页案例来综合运用这些选择器与属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 基础案例</title>
    <style>
        body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: navy;
        }
        .container {
            width: 80%;
            margin: auto;
            background-color: white;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 8px;
        }
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>欢迎学习CSS基础</h1>
        <p>这是一个测试段落，尝试用CSS来样式化这样一段文本。</p>
        <p class="highlight">这里的文本有额外的背景色。</p>
    </div>
</body>
</html>

在这个案例中，我们使用了不同类型的选择器（如元素选择器、类选择器等）和多种CSS属性（如背景、边框和文字样式），以实现一个简单的网页结构。

结论

通过本章的学习，我们了解了CSS选择器与属性的基本使用方法。这些知识为我们后续的样式应用章节打下了坚实的基础。在下一章中，我们将讨论如何将这些样式应用到实际的网页中，以实际操作深入理解CSS的强大功能。

20 CSS基础之选择器与属性

https://zglg.work/html-zero/20/

作者

IT教程网(郭震)

发布于

2024-08-10

更新于

2024-08-11

许可协议

#

分享转发

学习下节

复习上节

交流

更多教程加公众号

更多教程加公众号

加入星球获取PDF

加入星球获取PDF

打卡评论

×