CSS的三个选择器加超链接测试实例 - web开发 - ITeye博客

`

piperzero

浏览: 3472922 次
性别:
来自: 杭州

最近访客更多访客>>

handsome1234

u012363178

zhangketuan

wangyy

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

全部博客 (3796)

社区版块

存档分类

最新评论

cning_cn：守护线程的方式是在线程对象创建之前用线程对象的setDa ...
Thread.setDaemon设置说明
qq250782929： [b][/b]
推荐两款富文本编辑器：NicEdit和Kindeditor
vickypig： js循环判断有错误。第一次批量加了几个，后面在单独加几个，有可 ...
新鲜出炉：基于HTML5的jquery文件上传插件（多文件选择、带进度条、完整可用）
黑山老鹞： ...
如何用Java操作MongoDB？
山川尽美： FileChannel inChannel = new Fil ...
JAVA功能代码《12》----使用NIO快速复制文件

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; }
这样就可以实现所需要的效果了。

分享到：

HTML5实现圣诞树效果 | 内部CSS统一定色和滤镜技术实例

2012-03-03 12:49
浏览 770
评论(0)
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

CSS字样标记浏览后的超链接: CSS字样标记浏览后的超链接，不用再烦恼重复浏览看过的连接

CSS改变超链接属性: CSS改变超链接属性 .doc

在CSS中，选择器有哪些类型和作用: 选择器在CSS中，选择器有哪些类型和作用在CSS中，选择器有哪些类型和作用在CSS中，选择器有哪些类型和作用在CSS中，选择器有哪些类型和作用在CSS中，选择器有哪些类型和作用在CSS中，选择器有哪些类型和作用在CSS中...

HTML5&CSS3网页制作：CSS基础选择器.pptx: CSS核心基础--CSS基础选择器 CSS选择器什么是CSS选择器？ CSS基础选择器 01 CSS基础选择器要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器。 CSS...

css伪类（超链接）: css伪类超链接连接的用法描述 link的样式说明

jQuery+CSS实现淡入效果的超链接样式: jQuery+CSS实现淡入效果的超链接样式,代码简单,容易使用!

利用css＋javascript实现的一个日期选择器代码: 通过css、javascritp实现一个日期选择器的源代码实用方便

Css——超链接样式: css中关于超链接的四个属性一般正常顺序为：link，visited，hover，active，即: a:link 链接平常的状态 a:visited 链接被访问过之后 a:hover 鼠标放到链接上的时候 a:active 链接被按下的时候

21种html5+css3鼠标悬停hover超链接导航条动画效果: 利用css3 transition属性制作的21种不同的鼠标悬停效果。当鼠标hover或悬停在超链接上时，会触发各种动画效果。每种动画效果都十分独特，可用于网站导航。

HTML5&CSS3网页制作：创建超链接.pptx: HTML5&CSS3网页制作：创建超链接.pptx

7款CSS3鼠标滑过超链接动画特效.zip: 7款CSS3鼠标滑过超链接动画特效是一款使用伪元素来制作超链接的下划线，并使用CSS3 animation来制作各种动画效果。

CSS3层次选择器实例: wrote based on a book

css 浮雕式超链接: css 浮雕式超链接简单实用还好看呢

react-React组件的css选择器: React组件的css选择器

js和CSS3鼠标悬停超链接展示图片特效: 这是一款js和CSS3鼠标悬停超链接展示图片特效。该特效中，当鼠标悬停到超链接上面时，会在超链接下面显示一张设定好的图片。该特效中提供了10种打开图片时的炫酷动画效果。

css通过伪类来设置超链接样式附示例: css中关于超链接的四个属性正确顺序为：复制代码代码如下: a:link {} a:visited {} a:hover {} a:active {} 伪类名字对大小写不敏感，但在定义顺序上有要求。:hover必须被置于:link和:visited之后才

css颜色选择器: CSS 颜色选取器允许您将 CSS 颜色值插入 CSS 颜色属性。它包括标准的调色板的颜色和使用标准颜色的名称、哈希代码、RGB、RGBA、HSL 和 HSLA 颜色值，并显示最近使用的颜色的列表。默认情况下，颜色选取器将输入...

前端必须掌握30个CSS3选择器: 前端必须掌握30个CSS3选择器.

30个最常用css选择器解析: 30个最常用css选择器解析 CSS

Global site tag (gtag.js) - Google Analytics