CSS的三个选择器加超链接测试实例

CSS一共有三中选择器,进行指定的CSS 样式的修饰,下面来介绍一下CSS的三种类选择器。他们分别是类选择

器,id选择器,html选择器。

然后 默认超链接是蓝色带一个下划线的样式,如果我希望超链接是黑色然后不带下划线,然后当鼠标移动到上面

去的时候出现下划线,点击以后超链接编程红色,这样的效果该如何设计呢,下面请看实例。

首先建立一个HTML文件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>test2.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="../css/1.css" type="text/css"/> </head> <body> 你好北京! <span class="style1">新闻一</span> <span class="style1">新闻二</span> <span class="style1">新闻三</span> <span class="style1">新闻四</span> <span class="style1">新闻五</span><br/><br/><br/> <span id="style2">这是一则非常重要的新闻</span><br/><br/><br/> <a href="#">连接测试</a><br/><br/><br/> <a href="#">测试连接</a> </body> </html>
然后对应的css文件如下

/*类选择器*/ .style1{ font-weight: bold; font-size: 20px; background-color: pink; } /*id选择器*/ #style2{ font-size: 30px; background-color: silver; } /*html选择器*/ body{ color: black; } a:link{ color: black; text-decoration: none; } a:hover{ text-decoration: underline; } a:visited{ color: red; }
这样就可以实现所需要的效果了。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值