CSS初级教程-CSS结合JS的运用

 利用CSS配合JavaScript的可以做很多更酷的动态页面效果,在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先,要搞清楚事件和动作的概念。在客户端脚本中,JavaScript 通过对事件进行响应来获得与用户的交互。例如,当用户单击一个按钮或者在某段文字上移动鼠标时,就触发了一个单击事件或鼠标移动事件,通过对这些事件的响应,可以完成特定的功能(例如,单击按钮弹出对话框,鼠标移动到文本上后文本变色等)。

  下面介绍几种常见的事件:

  onClick:鼠标单击事件。(是指鼠标按下,然后松开时产生。)

  onDblClick:鼠标双击事件。(是指鼠标快速按下,松开,并再次按下时产生。)

  onMouseDown:鼠标按下事件。(鼠标按下时即产生。)

  onMouseUp:鼠标释放事件。(是指鼠标从按下的状态到弹起。)

  onMouseMove:鼠标移动事件。(是指在特定元素上移动鼠标。)

  onMouseOver:鼠标经过事件。(是指,当指针从外界往元素上移动时产生。)

  onMouseOut:鼠标离开事件。(是指鼠标从特定元素上离开时产生。)

  onLoad:载入事件。(当图象或页面结束载入时产生。)

  onUnload:卸载事件。(当访问者离开页面时产生。)

  onScroll:滚动条滚动事件。(当访问者使用卷轴上移或下移时产生。)

  有了事件以后,我们就为事件加上动作。这里只说改变当前元素自定义样式的动作,我们可以用这个方法先设定好两个自定义的CSS样式,对象原先调用第一种样式,当产生鼠标事件时让对象应用到第二种CSS样式,而产生的鼠标效果。

时间: 2024-12-01 04:49:44

CSS初级教程-CSS结合JS的运用的相关文章

七 CSS初级教程总结:属性结合起来使用

css|教程 如果你学完HTML初级教程即可学习CSS初级教程,使用CSS处理HTML样式. 下面的代码覆盖了初级教程的所有方面,保存下面的CSS文件并且在浏览器里观看连接的HTML,你可以明白各个CSS属性的用法.最好的学习方法就是理解作用在HTML上的CSS文件,改变CSS HTML会发生什么变化. body {font-family: arial, helvetica, sans-serif;font-size: 80%;color: black;background-color: #ff

css 入门教程:css控制input与bottn样式

哈哈今天我们来看看,css 入门教程:css控制文本输入框与按钮的css样式,好了我们先来看看效果图. 现在看到了我的文本输入框是不是淡色的背景与边框哦.现在来看看我们下面是怎么实现的吧.  <p align="center"><input name="" type="submit" class="btn" value="提交"></p>     <p align=

CSS初级教程&amp;nbsp;选择符&amp;nbsp;属性和值

HTML有标签(tag),CSS就有选择符(selector).选择符就是赋予内部或者外部样式表的名字.在 CSS初级指南中,我们致力于HTML选择符,即是HTML的标签,用来改变一个指定标签的样式.每个选择符都有属性(properties)在大括号{}中,里面包括诸如color.font-weighth或者 background-color形式的字样.值(value)在半角英文引号:后面,用半角英文分号;隔离. body { font-size: 0.8em; color: navy; } 如

CSS高级教程: CSS框架

文章简介:可以从CSS框架中借鉴到什么. 现在很多人会使用 CSS 框架进行快速建站.那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局.表单样式.网格.简单组件.以及样式重置.使用 CSS 框架大大降低工作成本进行快速建站.当然对于一些大型的项目,可能会很难照搬某些框架直接使用的,因为直接使用会带来一些限制或者冗余的问题.但在 CSS 框架已经日趋成熟的今天,在我们设计项目架构.规范的时候,现时市面上一些优秀的框架也可以给我们提供很多可借鉴的地方. 本文主要从几个

CSS初级教程&amp;nbsp;边框

边框可以应用到在主体元素body中的绝大部分HTML元素中. 创建一个包围着元素的边框,你所需要的是边框样式border-style.它们的值可以是 solid.dotted.dashed.double.groove.ridge. inset和outset.(你有必要每个值都试一试,看看效果如何译者注) 边框宽度border-width为边框设置宽度,通常用像素来表示.当然,还可以单独设置四个方向的边框属性,它们是border-top-width.border-right-width. bord

CSS初级教程&amp;nbsp;边界和补白

边界margin和补白padding(依据国内出版社的翻译惯例,margin被翻译成边界,padding被翻译成补白,译者依照习惯翻译.但译者认为,margin翻译成外边距,padding翻译成内边距更为直白和形象.你可以依据自己的习惯来适应这两种不同的译法.译者注)是隔开元素最常用的两个属性.边界是元素外边的距离,而补白则是元素内部的距离. 为h2改进代码如下:  代码如下 复制代码 h2 {  font-size: 1.5em;  background-color: #ccc;  margi

[css]简明教程 CSS样式表概述

css|教程|样式表     CSS(Cascading Style sheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具之一.使用CSS能够简化网页的格式代码,加快下载显示的速度,也减少了需要上传的代码数量,尤其是在设计者面对有数百个网页的站点时,大大减少了重复劳动的工作量. W3C(The World Wide Web Consortium)把动态HTML(Dynamic HTML)分为三个部分来实现:脚本语言(包括JavaScript

css入门教程:CSS Position 教程

随着知识的CSS定位,你将能够操纵的确切位置的HTML元素.设计,以前需要使用JavaScript或HTML图片地图现在可以这样做完全是在CSS .它不仅是容易的代码,但它也加载更快! 相对位置相对定位变化的立场HTML元素相对的地方通常会出现.如果我们有一个标题,出现在我们上方的网页,我们可以使用相对定位,将它移到有点权,并减少了几个像素.下面就是一个例子. h3 { position: relative; top: 15px; left: 150px; } p { position: rel

CSS实例教程:CSS Selector的优先级

文章简介:11个class与一个id"谁的优先级高的问题. 上周五下班前我们敬爱的三三大人又在组里讨论了关于"11个class与一个id"谁的优先级高的问题-_-! 猜一下 01 <!DOCTYPE HTML> 02 <html> 03 <head> 04 <meta charset="utf-8"> 05 <style type="text/css"> 06 body{fon