CSS样式特效学习：onMouseOver、display与样式规则解析

下载需积分: 0 | PPT格式 | 2.21MB | 更新于2024-07-12 | 93 浏览量 | 举报

"预习检查-js学习 ppt 第三章" 在JavaScript的学习中，了解和掌握CSS样式规则、事件处理以及元素状态的控制是至关重要的。本章主要涵盖了以下几个知识点： 1. **样式规则的语法和用法**： CSS样式规则通常由选择器和声明块组成。选择器指向你想要应用样式的HTML元素，而声明块包含一个或多个属性-值对，用分号分隔。例如，`p { color: red; font-size: 16px; }`。用法上，你可以通过行内样式（如`style="..."`），内联样式表（`<head>`内的`<style>`标签）或外部样式表（`.css`文件）来应用样式。 2. **事件处理：onMouseOver与onMouseOut的区别**： - `onMouseOver`事件在鼠标指针进入元素时触发，常用于显示额外信息或改变元素状态。 - `onMouseOut`事件在鼠标指针离开元素时触发，常用于隐藏之前`onMouseOver`显示的信息或恢复元素原状。 3. **display属性的作用**： - `inline`：元素以行内元素的方式显示，允许与其他元素在同一行内并排。 - `block`：元素以块级元素的方式显示，独占一行，常用于段落、标题等。 - `none`：元素不显示，且不占用任何空间，常用于隐藏元素。本章还涉及了其他JavaScript和CSS的实践应用，包括： - **getElementById()**：这个函数用于获取具有特定ID的唯一HTML元素，是JavaScript操作页面元素的基础方法。 - **getElementsByName()**：此函数返回一个包含所有具有特定name属性的元素的数组，常用于处理表单元素。 - **浮动广告图片的实现思路**：通常利用CSS的`position`属性和`float`属性，使图片能够在页面上浮动。 - **全选/反选复选框**：通过JavaScript监听复选框的状态，并更新其他复选框的选中状态，实现联动效果。在本章的任务中，你将学习到如何使用`style`属性动态改变边框颜色，运用`className`改变按钮背景图片，以及利用`display`属性实现层或图片的隐藏/显示切换，这些都是创建交互式网页的关键技能。同时，复习了之前学习的CSS样式表，包括各种文本属性（如`font-size`，`font-family`，`color`，`text-align`）和背景属性（如`background-color`，`background-image`，`background-repeat`），以及特定样式如无下划线的超链接样式，细边框样式和图片按钮样式。通过完成这些任务和示例，你将能够更深入地理解JavaScript和CSS如何协同工作，创建动态、视觉吸引人的网页效果。