网页设计基础第十二讲：CSS选择器之打造动态图片跑马灯效果在掌握了CSS的基础知识后，本章将通过一个生动的例子——动态

在上一章色彩斑斓的网页——CSS基础概览中，我们初步了解了CSS的基本概念及其在网页设计中的重要性，并通过几种不同的方式展示了如何将样式应用到HTML文档中。现在，我们将更进一步，深入探讨CSS的语法细节，并通过具体的示例来巩固所学的知识。掌握CSS语法不仅能够帮助我们更精细地控制网页的外观，还能提高我们解决问题的能力，使网页设计更加灵活多样。

知识回顾

选择器（Selectors）

选择器是用来指定哪些HTML元素应该应用样式规则的部分。常见的选择器包括： CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

元素选择器

直接使用HTML元素的名称作为选择器，如div、p等。

p {
    color: blue;
}

类选择器

使用.来指定类名，类名可以应用于多个元素。

类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

.highlight {
    background-color: yellow;
}

ID选择器

使用#来指定ID名，ID在页面中应该是唯一的。

ID 属性不要以数字开头，数字开头的 ID 在 Mozilla/Firefox 浏览器中不起作用。
ID 属性只能在每个 HTML 文档中出现一次。

#header {
    font-size: 2em;
}

属性选择器：使用[]来指定属性及其值。

   input[type="text"] {
      border: 1px solid black;
  }

属性与值（Properties and Values）

属性定义了要改变的样式类型，而值则指定了具体的样式参数。例如：

body {
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
}

在此示例中，background-color和font-family是属性，而#f4f4f4和Arial, sans-serif是它们各自的值。

伪类与伪元素（Pseudo-classes & Pseudo-elements）

常用的伪类选择器

:hover - 鼠标悬停在元素上时应用样式。
:active - 鼠标按下时应用样式。
:focus - 元素获得焦点时应用样式，通常用于输入框。
:nth-child(n) - 选择特定位置的子元素，例如选择每二个或每三个元素。
:first-child - 选择第一个子元素。
:last-child - 选择最后一个子元素。
:not(selector) - 选择不匹配指定选择器的元素。示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航菜单示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        nav {
            background-color: #333;
            padding: 10px;
        }

        nav ul {
            list-style: none; /* 移除列表项前的默认标记 */
            padding: 0;
            margin: 0;
            display: flex;
        }

        nav ul li {
            margin: 0 15px;
        }

        nav ul li a {
            color: white;
            text-decoration: none;
            padding: 8px 12px;
            display: block; /* 使链接变成块级元素，以便于点击 */
        }

        /* 鼠标悬停效果 */
        nav ul li a:hover {
            background-color: #575757;
            border-radius: 4px; /* 圆角效果 */
        }

        /* 当前页面链接样式 */
        nav ul li a.active {
            background-color: #007BFF;
            color: white;
        }

        /* 选择每个第二个菜单项 */
        nav ul li:nth-child(2n) a {
            background-color: #444; /* 为每个第二个项设置背景 */
        }

        nav ul li:nth-child(2n):hover a {
            background-color: #666; /* 鼠标悬停在第二个项时效果 */
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#home" class="active">首页</a></li>
            <li><a href="#about">关于我们</a></li>
            <li><a href="#services">服务</a></li>
            <li><a href="#contact">联系</a></li>
        </ul>
    </nav>

    <h1>欢迎来到我们的网站</h1>
    <p>这是一个示例网页，展示了CSS伪类选择器的使用。</p>
</body>
</html>

多重样式优先级顺序

下列是一份优先级逐级增加的选择器列表，其中数字 7 拥有最高的优先权：

通用选择器（*）
元素(类型)选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式

!important 规则例外

当 !important 规则被应用在一个样式声明中时，该样式声明会覆盖 CSS 中任何其他的声明，无论它处在声明列表中的哪里。尽管如此，!important 规则还是与优先级毫无关系。使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。

一些经验法则：

Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important
Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
Never 永远不要在全站范围的 CSS 上使用 !important
Never 永远不要在你的插件中使用 !important

任务描述

实现图片跑马灯效果：按暂停按钮或鼠标停在图片上暂停

任务实施

新建index.html网页

<!DOCTYPE html>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片跑马灯</title>
    <link rel="stylesheet" href="css/styles.css">


    <div class="marquee" id="marquee">
        <div class="marquee-content" id="marquee-content">
            <img src="img/1.png" alt="图片1">
            <img src="img/2.png" alt="图片2">
            <img src="img/3.png" alt="图片3">
            <img src="img/4.jpeg" alt="图片4">
        </div>
    </div>
    <button id="toggle">暂停</button>
    <script src="js/script.js"></script>

在css目录下创建style.css

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.marquee {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    background-color: #f0f0f0; /* 背景颜色 */
}

.marquee-content {
    display: inline-block;
    animation: marquee 10s linear infinite; /* 动画效果 */
}

.marquee img {
    height: 200px; /* 图片高度 */
    margin-right: 20px; /* 图片间距 */
}

@keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

在js目录下创建script.js

const marqueeContent = document.getElementById('marquee-content');
const toggleButton = document.getElementById('toggle');

let isPaused = false; // 用于控制动画状态

toggleButton.addEventListener('click', () => {
    if (isPaused) {
        // 如果已暂停，则重新开始动画
        marqueeContent.style.animationPlayState = 'running';
        toggleButton.textContent = '暂停';
    } else {
        // 如果正在播放，则暂停动画
        marqueeContent.style.animationPlayState = 'paused';
        toggleButton.textContent = '继续';
    }
    isPaused = !isPaused; // 切换状态
});

// 鼠标悬停事件
marqueeContent.addEventListener('mouseenter', () => {
    marqueeContent.style.animationPlayState = 'paused'; // 暂停动画
});

marqueeContent.addEventListener('mouseleave', () => {
    marqueeContent.style.animationPlayState = 'running'; // 继续动画
});

效果如下：

动画.gif

实验实训

班级照片墙

结语

通过本章的学习，你应该能够熟练掌握CSS的基本语法，并能够运用到实际的网页设计中。接下来，我们将进一步探讨更多高级的CSS技巧，帮助你在网页设计方面更上一层楼。

通过本章的学习，你将能够掌握CSS的基本语法，并能够运用这些知识来美化你的网页。继续探索更多的CSS技巧，不断丰富你的技能库。

网页设计基础 第十二讲：CSS选择器之打造动态图片跑马灯效果