css&html

怎么使div随着鼠标的指向改变颜色?

2007-07-02

网友问答

以前很牛 20:03:11
我用DIV做的表格,用什么代码可以使当鼠标移动到div上面div的背景色变成其他的颜色?望高手赐教!!!

活不明白 15:08:33
当鼠标指向div的时候,div背景怎么变色呀?

可爱的猴子

前面我已经讲解了 如何使鼠标移动到表格元素上,并且使表格元素变色? ,div的颜色改变完全可以照上个例子写,在这里我再帮大家写一个(像p标签span标签等的变色原理也是一样的),具体可以查看示例与其源代码。

HTML 使div的背景随着鼠标的移动改变颜色 示例

如何使鼠标移动到表格元素上,并且使表格元素变色?

2007-06-29

网友问答

angel:

如何使鼠标移动到表格元素上,并且使表格元素变色(就像链接那种颜色的改变)?就是使td的底色发生变化。

可爱的猴子:

在firefox中可以使用csshover属性,ie不支持此属性,在ie中使用js实现(onmouseover和onmouseout)。我写了个例子,具体可以查看示例与其源代码。

HTML 表格每行随鼠标的移动改变颜色 示例

CSS教程中的属性取值正则表达式介绍(一)

2007-06-10

这几天经常有同学反映CSS教程中的属性的取值看不明白。比如background-position的取值[ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit 。

首先CSS属性的取值是参考了w3c对CSS属性取值的方式(是利用正则表达式表示的),我感觉这种方式能全面的表现CSS属性的各种取值情况。(正则表达式我将在js教程中详细介绍)

下面我就简单介绍一下几个已经涉及到的取值表达式(正则表达式)的符号的含义:

| — 代表“或”的意思(有且只有一个)

比如color属性的取值: <color> | inherit 。此取值方式说明可以使用<color>(颜色表示法)或者inherit(继承),而且我们只能在<color>和inherit中选其一。(inherit是继承的意思,CSS高级教程我将介绍)

目前CSS教程中的大部分属性都只使用了“|”符号。比较简单:)

 

|| — 代表“可以取一个或多个”(正好和|符号相对应)

比如background属性的取值:[<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>] | inherit

首先我们将其分解为三部分:

第一部分:

[<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>]

第二部分:

|

第三部分:

inherit

从上面的分解可以看出background只能有两种取值方式,只能取[<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>]或者只能取inherit。

如果我们选择第一种取值方式[<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>],那么这个取值表达式本身就包含了一个取值表达式。

<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>的意思就是说可以取这5种情况的一个或多个。

 

[] — 代表一个匹配(就是一个表达式)

就是说当不能用一个值来简单的表达的时候,我们就应该使用[]

比如inherit就是一个值,我们就没有必要加[]了,当然加了也没关系。
像<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>不是一个简单的值(是一个表达式),就应该加[]表示。

今天先讲到这(不知道大家明白了吗?),大家先消化一下,过两天我再给大家讲background-position的取值表达式。

什么是 web标准 ?

2007-05-16

2007年5月12号,在蓝色bbs上一位网友发了一个帖子,题目是:到底什么是web标准?

这个帖子得到大家很热烈的讨论。我现在以问答的方式总结了一下大家的观点(答案主要来自greengnn与old9的回答),放到我的博客里。

问:谁提出的web标准(Web Standards)?

答:”web标准”就是提出web标准的人起的名字,可以去看看web标准组织的网站 http://www.webstandards.org/ 看看。

问:web标准内容是什么?倡导的是什么?

答:就是w3c的一系列白纸黑字的规范。Web标准组织倡议大家采用W3C的语言规范XHTML,CSS,DOM,ECMAScript(XML等)来设计网页,至于版本号当然是目前推行的版本,要根据W3C的发布和浏览器的支持程度去决定使用哪种语言版本。 w3c官方网站

问:结构和表现的分离有什么好处?

答:作为分离的开发模式,类似于后台的MVC开发模式,降低相关因素的耦合,提高并发协作效率和降低维护成本,向前向后兼容浏览器和设备,让网站可以在不同设备不同浏览器畅行无阻。

问:web标准的目标是什么?

答:其实最重要的就是“用正确的方法去做正确的网页”(注:greengnn的回答真是很精彩)

正确的网页是什么?

  1. 优秀的信息架构
  2. 良好的交互设计

上面两点最终达到了良好的用户体验。

正确的方法是什么?

  1. 标准的语言规范,XHTML,CSS,ECMAScript (标准的Javascript),DOM,XML,XMLHTTPRequest,甚至XSL等W3C的标准化规范语言
  2. 浏览器设备的支持情况的权衡以及解决方法
  3. 海量用户访问是的服务器负载

最终用户得到了良好的用户体验,搜索引擎得到了你想Open的数据,结果很完美!其实技术是相通的,web标准没有明显的界定,大体思路就是利用W3C标准的语言规范结合当前支持环境的实际情况去做到网页设计的最优化。

问:xhtml死跟web标准有什么关系?

答:说实话 xhtml 就没有活过,所以也就没有死之说……它绝大多数情况下只是挂了个x的头,卖html的肉。xhtml 带给普通开发者的,只是结构表现分离,代码规范严格等等优秀的思想。

问:html5来了,就没有web标准了?

答:以我目前了解的情况来看,html5 和 web 标准的思想没有什么冲突,就好像现在 HTML4 和 web 标准没有冲突一样。为什么要对 HTML5 这么敏感呢?

问:既然是标准,是不是所有浏览器都都支持这些标准?

答:标准理论上是所有设备都应该完全遵守和支持的,可是企业要生存要盈利要竞争,没人愿意让用户感觉自己的产品是和别人是一样的,浏览器也是一个很大的平台,没人会舍弃平台的优势而去遵循W3C那种非强制性的标准。所以必然存在浏览器差异。

即使FF非常支持标准,但是它还仍然保留自己的私有代码就是这样原因。

但是作为开发者,我们希望什么?统一的标准,让我们的工作更轻松和简单,所以作为在浏览器上开发应用的开发人员我们是不是应该为了自己的利益去完全支持标准,给浏览器等设备的制造商以压力,让他们完美的支持标准,好减轻我们开发者们的负担和复杂度?

外部引用CSS中 link与@import的区别

2007-05-11

这两天刚写完XHTML加载CSS的几种方式,其中外部引用CSS分为两种方式link@import

本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别。

差别1:老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。

link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。

差别2:加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显(梦之都加载CSS的方式就是使用@import,我一边下载一边浏览梦之都网页时,就会出现上述问题)。

差别3:兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。

差别4:使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

大致就这几种差别了(如果还有什么差别,大家告诉我,我再补充上去),其它的都一样,从上面的分析来看,还是使用link标签比较好。

标准网页制作加载CSS文件时,还应该选定要加载的媒体(media),比如screen,print,或者全部all等。这个我到CSS高级教程中再给大家介绍。

注:

1,网友comehope在留言中提出了另一种区别。

差别5:@import可以在css中再次引入其他样式表,比如可以创建一个主样式表,在主样式表中再引入其他的样式表,如:

main.css
———————-
@import “sub1.css”;
@import “sub2.css”;

sub1.css
———————-
p {color:red;}

sub2.css
———————-
.myclass {color:blue}

这样更利于修改和扩展.

猴子提示:这样做有一个缺点,会对网站服务器产生过多的HTTP请求,以前是一个文件,而现在却是两个或更多文件了,服务器的压力增大,浏览量大的网站还是谨慎使用。有兴趣的可以观察一下像新浪等网站的首页或栏目首页代码,他们总会把css或js直接写在html里,而不用外部文件。

CSS连入HTML的方式

3.1. 外部引用CSS
3.1.1 使用 link 标签引用CSS
3.1.2 使用 @import 引用CSS
3.2. 内部引用CSS
3.3. 内联引用CSS