<html>
<head>
<title>CSS制作多种链接样式实例</title>
<style type="text/css">
<!--
a:link { color: #CC3399; text-decoration: none}
a:visited { color: #FF3399; text-decoration: none}
a:hover { color: #800080; text-decoration: underline}
a:active { color: #800080; text-decoration: underline}
a.red:link { color: #FF0000; text-decoration: none}
a.red:visited { color: #FF0000; text-decoration: none}
a.red:hover { color: #606060; text-decoration: underline}
a.red:active { color: #606060; text-decoration: underline}
a.ameth:link { color: #400040; text-decoration: none}
a.ameth:visited { color: #400040; text-decoration: none}
a.ameth:hover { color: #FF3399; text-decoration: underline}
a.ameth:active { color: #FF3399; text-decoration: underline}
div.other a:link { color: #004000; text-decoration: none}
div.other a:visited { color: #004000; text-decoration: none}
div.other a:hover { color: #008000; text-decoration: underline}
div.other a:active { color: #008000; text-decoration: underline}
-->
</style>
<!-- 链接样式表 -->
</head>
<body>
第一种样式(默认的) <a href="http://www.dayanmei.com">个人日志</a> <br>
第二种样式 <a class="red" href="http://www.dayanmei.com">个人日志</a><br>
另外一种实现链接样式的方法 <a class="ameth" href="http://www.dayanmei.com">个人日志</a><br>
<div class="other">DIV容器实现链接样式的方法 <a class="other" href="http://www.dayanmei.com">个人日志</a></div><br>
</body>
</html>
当然,你完全可以将CSS代码写入一个CSS文件,这样做的好处,不仅是你的网页HTML代码简洁了,而且你会发现速度也跟着提升了,因为浏览器会缓存你的CSS文件,更重要的是你要改变样式时只需要改变CSS样式表文件就可以了
这样写
css样式文件 default.css
a:link { color: #CC3399; text-decoration: none}
a:visited { color: #FF3399; text-decoration: none}
a:hover { color: #800080; text-decoration: underline}
a:active { color: #800080; text-decoration: underline}
a.red:link { color: #FF0000; text-decoration: none}
a.red:visited { color: #FF0000; text-decoration: none}
a.red:hover { color: #606060; text-decoration: underline}
a.red:active { color: #606060; text-decoration: underline}
a.ameth:link { color: #400040; text-decoration: none}
a.ameth:visited { color: #400040; text-decoration: none}
a.ameth:hover { color: #FF3399; text-decoration: underline}
a.ameth:active { color: #FF3399; text-decoration: underline}
div.other a:link { color: #004000; text-decoration: none}
div.other a:visited { color: #004000; text-decoration: none}
div.other a:hover { color: #008000; text-decoration: underline}
div.other a:active { color: #008000; text-decoration: underline}
现在,你只需要将CSS包含进你的HTML文件就可以了
index.htm
<html>
<head>
<title>CSS制作多种链接样式实例</title>
<link rel="stylesheet" type="text/css" href="default.css">
<!-- 链接样式表 -->
</head>
<body>
第一种样式(默认的) <a href="http://www.dayanmei.com">个人日志</a> <br>
第二种样式 <a class="red" href="http://www.dayanmei.com">个人日志</a><br>
另外一种实现链接样式的方法 <a class="ameth" href="http://www.dayanmei.com">个人日志</a><br>
<div class="other">DIV容器实现链接样式的方法 <a class="other" href="http://www.dayanmei.com">个人日志</a></div><br>
</body>
</html>
分享到：
相关推荐
你可以用内嵌的Internet Explorer和Mozilla Gecko来预览你的式样表，或者分开使用。此外，TopStyle的设计对系统十分友善。它不会安装任何DLL、ActiveX controls或其它系统文件。功能相当多，附有CSS码检查功能，减少...
CSS2.0是CSS的一个重要版本，引入了许多关键功能，为网页设计者提供了更多的控制力。 **二、选择器与声明** CSS的核心在于选择器和声明。选择器是用来定位文档中的元素，如`p`选择器用于定位所有段落，而声明则定义...
通过以上步骤，我们可以实现一个页面加载多个CSS样式表的功能，让用户可以根据自己的偏好选择不同的界面风格。这种方法不仅适用于字体大小的调整，还可以应用于颜色主题、布局模式等多种场景，提高网站的可用性和可...
这一原则决定了当多个样式规则应用于同一元素时，如何决定最终显示的样式。此外，还会介绍CSS的继承特性，以及如何利用优先级来控制样式的应用顺序。 布局是CSS中的重要话题，书中会详细阐述盒模型，包括内容、内...
文件"login"可能包含多个HTML文件，每个文件代表一种不同的登录页面样式，以及对应的CSS和jQuery代码。开发者可以通过查看和分析这些示例，学习如何结合使用这两种技术来创建自己的登录界面。此外，可以结合...
- **定义内部式样**: 在HTML文档头部使用`<style>`标签来定义内联样式，如`<style type="text/css">...</style>`。 ### 2. class与ID的区别 - **id**: 具有唯一性，一个HTML文档中每个元素的id只能出现一次，用于...
你可以用内嵌的Internet Explorer和Mozilla Gecko来预览你的式样表，或者分开使用。此外，TopStyle的设计对系统十分友善。它不会安装任何DLL、ActiveX controls或其它系统文件。功能相当多，附有CSS码检查功能，减少...
标题所指知识点为“利用CSS实现书签效果”，这是一门前端开发中使用的技能，涉及到网页设计和样式定义。在网页设计中，利用CSS（层叠样式表）的样式属性来模拟书签的视觉效果是网页设计师经常会用到的技巧。通过CSS...
大部分基础的注释会提示为什么这个规则会用在这里。提示和注意添加注释可以帮助你或者以后的开发者避免出现不必要的混乱。 例如，/* Turn off borders for linked images */ img { border: 0; } 这样的注释可以提供...
你可以用内嵌的Internet Explorer和Mozilla Gecko来预览你的式样表，或者分开使用。此外，TopStyle的设计对系统十分友善。它不会安装任何DLL、ActiveX controls或其它系统文件。功能相当多，附有CSS码检查功能，减少...
你可以用内嵌的Internet Explorer和Mozilla Gecko来预览你的式样表，或者分开使用。此外，TopStyle的设计对系统十分友善。它不会安装任何DLL、ActiveX controls或其它系统文件。功能相当多，附有CSS码检查功能，减少...
你可以用内嵌的Internet Explorer和Mozilla Gecko来预览你的式样表，或者分开使用。此外，TopStyle的设计对系统十分友善。它不会安装任何DLL、ActiveX controls或其它系统文件。功能相当多，附有CSS码检查功能，减少...
1. **多面板布局**：Outlook界面通常包含多个并排显示的面板，如邮件、日历、联系人和任务等。这些面板可以根据用户的需要进行切换和隐藏，以优化工作空间。 2. **导航栏和菜单**：顶部的菜单栏提供核心功能，如...
- 内含多个子文件夹，每个子文件夹代表一个不同的主题，例如 `bizznesstime`。 2. **结构**： - **Data 文件夹**: 包含该主题的相关配置文件，如 `BizznessTimeThemeData.xml`，此文件定义了该主题所有资源的路径...
11.2.3 嵌入多个不可析实体... 317 11.3 处理指令... 319 11.4 DTD的条件部分... 322 11.5 本章小结... 324 第三部分 样式语言... 325 第12章 级联样式单级别1. 325 12.1 什么是CSS？... 325 12.2 样式单与...
在多个项目中，工程师使用了Java、JavaScript、HTML、CSS、Ajax、VB、VB.NET、C#.NET、WebService、Oracle和SQLServer等技术，以及Eclipse、Tomcat、Visual Studio和SQL Server等开发工具，显示了他在多平台和多语言...
14.5 使用xsl:for-each处理多个元素 442 14.6 匹配节点的模式 444 14.6.1 匹配根节点 444 14.6.2 匹配元素名 445 14.6.3 使用/字符匹配子节点 447 14.6.4 使用//符号匹配子代 448 14.6.5 通过ID匹配 449 14.6.6 使用...
Animate Images 它可以使用JPG的格式也可以用动态的形式表现出来，并且您可以定义触发动作，获得最大的主动！ Add Favourite 将网站加入使用者的“收藏夹” AllowDynamicFont 使用动态文字, 就是可以自动载入设定...