当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > CSS 循序渐进(四)表里春秋

HTML/XHTML教程
一些不太常用的XHTML标签用法以及实例
网页中图片的设置涉及的三个问题
商业HTML邮件的制作建议
HTML Marquee 字符片段滚动
DOCTYPE 文档类型声明(网页爱好者必看)
纯HTML标签你熟悉多少?
HTML元素的ID和Name属性的区别
HTML meta的大作用
HTML标签tbody的用法与说明
HTML 特殊字符转换表
HTML基础 HTML的组成结构
HTML基础之HTML内容细则
Shtml 精简教程
浅谈html table 标签
html Frame、Iframe、Frameset 的区别
HTML 网页页面切换的各种变换效果
HTML的10个表格相关标记
让IE8启动IE7兼容模式的代码
HTML 结构化实现方法
xhtml的块级标记小结

HTML/XHTML教程 中的 CSS 循序渐进(四)表里春秋


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 30 ::
收藏到网摘: n/a

 

   这一次还是继续为大家介绍一些样式表应用方面的技巧。大家知道样式表的定义是针对容器(tag)而言的,那么在HTML 中,Anchor(锚,即超级链接标记)是一类作用非常之大的容器。它实现了HTML最根本的功能(超文本,超链接)。而CSS也有关于Anchor的一些特殊用法。使得页面的联接更紧凑,更富有条理。

   跟其它的tag一样,Anchor的定义方法也可以是:

      A:{css标记}

  可是它特殊之处在于,它有各种相关的属性,比如visited(浏览过),active(激活),hover(鼠标在其上),link(有链接)。可以根据不同需要而做出专门的定义以根据用户不同的动作做出反应,从而形成比较好的效果。

  比如说,您可以做以下的定义:

< html>
< head>
< title>Untitled Document< /title>
< meta http-equiv="Content-Type" content="text/html; charset=gb2312">
< style type="text/css">
< !-- a:active { font-family: "宋体"; font-size: 9pt; color: #9999FF; text-decoration: underline}a:hover { font-family: "宋体"; font-size: 9pt; color: #99FF99; text-decoration: underline}a:link { font-family: "宋体"; font-size: 9pt; color: #FFCCCC; text-decoration: none}-->
< /style>
< /head>
< body bgcolor="#000000">
< a href="www.www.www">返回< /a>
< /body>
< /html>

图一
图二

  在这个例子中,定义了锚的active,hover,link三种状态。当例子中存在着超级链接时,就会呈现出如图一的没有下划线的淡红,而将鼠标置于其上时,鼠标变成了手形,而这个链接则会呈现出如图二的亮绿色。而一旦访问过后,该链接则会呈现出深红色。这种变化既美观了页面,又提醒了用户。为绝大多数网站采用。

  事实上,有很多时候我们在没有使用锚的时候也需要对象根据用户的动作作一些改变。这时候我们往往需要当用户控制鼠标经过该对象时,能够给他一些提示。比如鼠标换个形状。像手形,十字形之类的,再结合必要的javascript,不就可以出现很炫的效果了吗?而且很多时候使用了锚的话容易改变当前焦点。比如当我们使用到Dhtml中的层概念时,如果是层是不可见的,利用锚将其改为可视,可一旦鼠标移上去以后,焦点马上到了层的上面,令大家感到非常不方便。不过,css里面刚好有这个属性,可以帮我们改变鼠标属性,解除这个烦恼。我们现在就看这个例子:

< html>
< head>
< title>测试一< /title>
< meta http-equiv="Content-Type" content="text/html; charset=gb2312">
< style type="text/css">
< !-- .text1 { font-family: "宋体"; font-size: 9pt; color: #9999FF; cursor: crosshair}
-->
< /style>
< /head>
< body bgcolor="#FFFFFF">
< p align="center" class="text1" onClick="javascript:{window.close()}">关闭窗口< /p>
< /body>
< /html>

  这里的关闭窗口的这个文字鼠标属性为一个十字,所以当移上去时,鼠标就变化为十字形。而点击它则会出现关闭窗口事件。

这个属性能使用的鼠标形状还有:

crosshair:十字;

hand:手形;

text:文本光标;

wait:沙漏;

help:问号;

e-resize:右箭头;

ne-resize:右上向箭头;

n-resize:向上箭头;

nw-resize:左上箭头;

w-resize:向左箭头;

sw-resize:左下箭头;

s-resize:向下箭头;

se-resize:右下箭头。

  好了,关于css的一些技巧性的东西就为大家介绍到这里