中华网通行证
用户名 密码

CSS小技巧
中华网科技 http://tech.china.com 2005-08-03 13:59:03
进入BBS】【进入聊天室】【 推荐给朋友 】【浏览字号: 】【关闭窗口

  经常有朋友问:如何使有超级连接的文字不出现下划线,如何使鼠标移动到超连上产生变色的效果?其实这些通过传统的方法是办不到的。而使用CSS的控制却可以非常轻松地作到,而且,页面的代码也不会臃肿。
  
  ★★先看看超连没有下划线的例子:
  例子1: 这个连接可以去页面底部,但是没有下划线。
  是如何作到这一点的呢?在和之间加上如下的CSS语法控制:
  
  这样浏览器在执行时,就明白:
  a:link 指正常的未被访问过的链接
  a:active 指正在点击的链接
  a:visited 指已经访问过的链接
  其中,text-decoration是文字修饰效果的意思,none参数表示使有超级链接的文字不显示下划线。如果讲none替换成underline就表示有下划线,换成overline则给超连文字加上划线,换成 line-through给超连文字加上删除线,blink则使文字在闪烁。
  ★★类似的控制:使粗体文字加上删除线。
  例子2: 闪烁的粗体文字 使用的代码是:B { text-decoration: line-through }
  ★★类似的控制:是粗体文字中所有的字母大写。
  使用代码: B { text-transform: uppercase }
  例子3:产生既大写,又有颜色,又有删除线的效果 hello welcome and enjoy them !
  以上的代码是:b { text-decoration: line-through; text-transform: uppercase; color: #66FFFF}类似的,用lowercase使所有字母小写显示,capitalize 使每个单词的首字母大写显示。
  ★★下面则是产生连接变色效果的内容:
  在上面的“例子1”中,如果作一点修饰,可以使具有link,active,visited属性的连接显示不同的颜色,但是却不会产生鼠标覆盖变色效果。先看下面的代码,使连接文字显示绿色,正在点击的连接显示黄色,已经反复问过的连接显示红色。算是复习前面的内容(别忘记啊!):
  
  如果要产生变色效果,就要用到另一个属性了,这就是 hover,看下面的代码。
  a:hover { text-decoration: none ; color: yellow } 表示鼠标移动到连接文字上时,文字修饰风格为“无”(即没有下划线),同时显示黄色。
  a:hover { text-decoration: underline; color: green } 表示鼠标移动到连接文字上时,文字修饰风格为“underline”(即下划线),同时显示绿色。
  ★★扩展一下:如果我们同时用下面2种属性,会产生什么效果呢?
  a:link { text-decoration: none ; color: yelloe ; font-size: 9pt }
  a:hover { text-decoration: underline; color: green ; font-size: 12pt }
  连接文字没有下划线,黄色显示,9pt大小。鼠标移动到连接上时出现下划线,颜色为绿色,字符大小12pt。是不是变色了?而且字体由于大小变化,就有动感了,似乎一下子扩大了。
  总之,所有前面讲过的方法,要综合运用才可以呀。
  ★★注意:并不是所有的浏览器都支持所有的选项属性。自己在多个浏览器上测试一下。

 

50款最具性价比数码相机/MP3推荐!
作者:中国论坛网 来源: 

发表言论:
笔  名:
查看评论
﹣相关报道
用CSS格式化Flash文本 (2005-07-07 15:04:29)
在DreamWeaver中应用CSS样式表技巧两则 (2005-06-29 10:38:54)

﹣精彩回顾
·揭秘越南姑娘的“性契约”(组图)
·中国研制成功银河麒麟操作系统
·近处偷拍野狮性爱 野草丛中见柔情(图)
·难得一见“水下分娩”全程跟拍(组图)
·古代性器具及性惩罚工具(组图)
·揭密中外历史上乱伦的名人们(组图)
·探秘世界各地诡异的干尸新娘(组图)
·隋唐两个王朝的九大著名"绿帽子"(组图)
·另类的惨烈:螳螂血战壁虎谁更凶猛(图)
·一分钟平静死去 注射死刑全过程(图)

进入BBS】【进入聊天室】【 推荐给朋友 】【浏览字号: 】【关闭窗口


潮流·时尚
·市场上的天价手机全搜罗
·一周降幅最大手机导购
·FM调频收音功能手机选购
·索尼爱立信三新机曝光
·诺基亚N73音乐版精品赏
·热门便携笔记本搜索导购
·近期最新上市机型大盘点
·矩阵Matrix鼠标垫细评测
·19寸20寸22寸液晶该买谁
·近期几款热卖MP3大推荐
·四大即将退市经典MP3选购
·06年最火七大DC缺点曝光
·六百万像素超值机型推荐
·诺基亚推出随身小音箱
·LG直板巧克力KG99评测
·MOTO新机即将国内上市
·超低价蓝牙手机导购
·130万像素一样拍出好照片
·诺基亚两款蓝牙耳机新品
·索爱纯美折叠机Z558评测

软件下载
·豪杰大眼睛 V2.5
·Foxmail V6.5
·天网防火墙Athena
·极品五笔 V6.8
·PPS网络电视
·超级兔子魔法设置
中华网搜索
站内搜索
全网搜索




热门搜索
耳机 印刷 手机 拖鞋
减速机 钟表 成人用品
减肥 枸杞 T恤 升降机
心理 健康 彩票 招聘
礼品 旅游 猎头 培训

产品服务
·机会!机会不容错过
·中华商机,搜索创新
·准确快捷,搜你所搜
·¥来¥往,尽在中华邮
·中华搜索,贴心搜索




科技频道主编信箱