【CSS】【16】设置超链接的CSS样式

简介:
超链接是网页上最普通的元素,通过超链接能够实现页面的跳转、功能的激活等,因此超链接也是与用户打交道最多的元素之一。在HTML语言中,超链接是用<a>标记来实现的,例如<a href="www.iteye.com"> JAVA网站 </a>,默认情况下超链接统一为蓝色且有下划线,被点击过的超链接则为紫色并且也有下划线。可以点击本段的“JAVA网站”体验一下。
一、伪类别概念:
      到目前我们已了解标记选择器、类别选择器、ID选择器,其中类别选择器使用.所标记(即div.intro就表示定义类别为intro的块),而类似a:link或a:hover称之为伪类别。
二、超链接的伪类别属性:
a:link 超链接的普通样式,即正常浏览状态的样式
a:visited 超链接被点击过后的样式
a:hover 鼠标经过超链接上时的样式
a:active 在超链接上单击时的样式
三、举例:
1、HTML内容:
<body>
   <a href="">首页</a>
   <a href="">简介</a>
   <a href="">联系方式</a>
</body>
此时由于没有设置任何样式,其展示为HTML的默认样式,效果如下:

221107124.jpg

2、CSS内容:

(1)设置网页背景色为淡蓝色

body
{
    background-color:#6699FF;
}

(2)设置字体为14像素,实边框,背景色为暗红色,去除超链接的下划线,为了美观为其设置相应的间距

a
{
   font-size:14px;
   border:1px;
   background-color:#663333;
   text-decoration:none;
   padding:4px;
   margin:4px;        
}

(3)设置超链接普通样式和超链接被单击过后的样式,使左、上边框颜色比右、下边框颜色深一些,字体设置为白色

a:link, a:visited
{
   color:#FFFFFF;
   border:solid;
   border-color:#330000 #336600 #336600 #330000;
}

(4)设置鼠标在超链接上和单击时的样式,使左、上边框颜色比右、下边框颜色浅一些,字体设置为红色

a:hover, a:active
{
   color:#FF0000;
   border:solid;
   border-color:#336600 #330000 #330000 #336600;
}

效果如下:

221119574.jpg

前两个是超链接普通状态样式,后一个是鼠标在超链接上的样式。




     本文转自qingkechina 51CTO博客,原文链接:http://blog.51cto.com/qingkechina/1261767,如需转载请自行联系原作者



相关文章
|
4天前
|
编解码 前端开发 UED
【专栏:HTML 与 CSS 移动端开发篇】CSS 媒体查询与移动端特定样式
【4月更文挑战第30天】CSS媒体查询在移动端开发中至关重要,它基于设备特性(如屏幕尺寸、分辨率、方向)应用特定样式,实现响应式设计。通过`@media`规则定义条件,如`(max-width: 600px)`,当屏幕宽度小于或等于600px时应用相应样式。常见条件包括屏幕宽度、高度、方向和分辨率。媒体查询可用于响应式布局、导航菜单优化、图片加载及字体调整。在实践中,需注意保持查询简洁,充分测试,渐进增强,并提前规划。掌握媒体查询能提升移动端用户体验,创造更优秀的网页设计。
|
4天前
|
开发框架 前端开发 搜索推荐
标题:【专栏:CSS进阶篇】CSS样式重置与框架:快速构建统一风格的网页
【4月更文挑战第30天】本文探讨了CSS样式重置和框架在确保网页跨浏览器一致性中的作用。样式重置通过消除默认样式差异实现一致外观,而CSS框架如Bootstrap提供预设样式和组件,加速开发并保证页面一致性。框架还有响应式设计和易于维护的优点,但也可能限制自定义和增加性能开销。选择使用哪种工具应根据项目需求、团队技能和设计复杂度来决定。开发者可结合使用两者以平衡灵活性和控制。
|
4天前
|
前端开发 UED
【专栏:CSS 基础篇】CSS 字体与文本样式:美化你的网页内容
【4月更文挑战第30天】网页设计中,字体和文本样式至关重要,影响视觉效果和用户体验。CSS允许设计师设置字体家族、大小、颜色、加粗、倾斜、行高和对齐方式等。高级特性包括引入外部字体和使用字体变体。响应式设计适应不同设备,确保良好阅读体验。实际案例和最佳实践强调易读性和一致性。掌握这些技巧能提升网页美感和用户交互,创造更多可能。
|
4天前
|
前端开发 UED
【专栏:CSS 基础篇】CSS 入门:给网页添加样式
【4月更文挑战第30天】CSS是网页设计的关键,用于控制网页样式和布局。它通过选择器(如元素、类和ID)来设定颜色、字体、对齐、背景等属性。CSS可内嵌、外部引用或行内设置。布局技巧包括浮动、定位和弹性盒子。响应式设计利用媒体查询适应不同设备。不断实践和学习CSS,能提升网页的吸引力和用户体验。一起探索CSS的魅力吧!
|
4天前
|
前端开发 JavaScript 安全
【亮剑】如何在 React TypeScript 中将 CSS 样式作为道具传递?
【4月更文挑战第30天】本文探讨了在React TypeScript应用中如何通过道具(props)传递CSS样式,以实现模块化、主题化和动态样式。文章分为三部分:首先解释了样式传递的必要性,包括模块化、主题化和动态样式以及TypeScript集成。接着介绍了内联样式的基本用法和最佳实践,展示了一个使用内联样式自定义按钮颜色的例子。最后,讨论了使用CSS模块和TypeScript接口处理复杂样式的方案,强调了它们在组织和重用样式方面的优势。结合TypeScript,确保了样式的正确性和可维护性,为开发者提供了灵活的样式管理策略。
|
5天前
|
前端开发
CSS样式引用方式的区别
CSS样式引用方式的区别
|
5天前
|
前端开发 容器
css样式元素的相对定位,绝对定位,固定定位等元素定位运用技巧详解
css样式元素的相对定位,绝对定位,固定定位等元素定位运用技巧详解
|
5天前
|
前端开发
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
|
5天前
|
XML 前端开发 JavaScript
前端CSS样式零基础教学总结,UI、前端开发都适用
前端CSS样式零基础教学总结,UI、前端开发都适用
|
5天前
|
前端开发 开发者
【Web 前端】CSS 样式覆盖规则?
【4月更文挑战第22天】【Web 前端】CSS 样式覆盖规则?