html网页文字链接的若干问题
如何使有 超级连接 的文字不出现下划线,如何使鼠标移动到 超连 上产生变色的效果?其实这些通过传统的方法是办不到的。而使用CSS的控制却可以非常轻松地作到,而且,页面的代码也不会臃肿。
★★先看看超连没有下划线的例子http://hi.baidu.com/%D2%B9%D0%D0%B4%AC
是如何作到这一点的呢?在<head>和</head>之间加上如下的CSS语法
控制:
<style type="text/css">
<!--
a:link { text-decoration: none}
a:active { text-decoration: none }
a:visited { text-decoration: none }
-->
</style>
这样浏览器在执行时,就明白:a:link指正常的未被访问过的链接a:active指正在点击的链接a:visited指已经访问过的链接其中,text-decoration是文字修饰效果的意思,none
参数表示使有超级链接的文字不显示下划线。如果讲none替换成underline就表示有下划线,换成overline则给超连文字加上划线,换成line-through给超连文字加上删除线,blink则使文字在闪烁。
★★类似的控制:使粗体文字加上删除线 http://hi.baidu.com/%D2%B9%D0%D0%B4%AC
例子2:闪烁的粗体文字使用的代码是:B { text-decoration: line-through}
★★类似的控制:是粗体文字中所有的字母大写
使用代码:B { text-transform: uppercase }
例子3:产生既大写,又有颜色,又有删除线的效果
以上的代码是:b { text-decoration: line-through; text-transform:
uppercase; color: #66FFFF}
类似的,用lowercase使所有字母小写显示,capitalize使每个单词的首字母大写显示。
★★下面则是产生连接变色效果的内容 http://hi.baidu.com/%D2%B9%D0%D0%B4%AC
在上面的“例子1”中,如果作一点修饰,可以使具有link,active,visited属性的连接显示不同的颜色,但是却不会产生鼠标覆盖变色效果。先看下面的代码,使连接文字显示绿色,正在点击的连接显示黄色,已经反复问过的连接显示红色。算是复习前面的内容(别忘记啊!):
<style type="text/css">
<!--
a:link { text-decoration: none ; color: green }
a:active { text-decoration: none ; color: yellow }
a:visited { text-decoration: none ; color: red }
-->
</style>
如果要产生变色效果,就要用到另一个属性了,这就是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。是不是变色了?而且字体由于大小变化,就有动感了,似乎一下子扩大了。
总之,所有前面讲过的方法,要综合运用才可以呀。http://hi.baidu.com/%D2%B9%D0%D0%B4%AC
★★注意:并不是所有的浏览器都支持所有的选项属性。自己在多个浏览器上测试一下。
html网页文字链接的若干问题相关推荐
- php文字链接下划线怎么取消,css怎么去掉超链接下划线
在网页中难免有若干对文字A超链接锚文本,但是在默认情况下带链接的文字全部都是有下划线效果的,那么如何把这个超链接的下划线效果给去掉呢?那我们就要借助强大的CSS了. 通过CSS设置要想让带超链接锚文本 ...
- 转载自android 开发--抓取网页解析网页内容的若干方法(网络爬虫)(正则表达式)
转载自http://blog.csdn.net/sac761/article/details/48379173 android 开发--抓取网页解析网页内容的若干方法(网络爬虫)(正则表达式) 标签: ...
- html5设置文字不能复制,网页文字不能复制?巧解网页文字不能复制
大家在上网的时候是否曾经遇到过网页文字无法复制的情况呢?为什么网页文字无法复制呢?或者问如何把不能复制的网页文字复制下来呢?其实,网页文字不能复制原因大部分是网页的制作者为了防止网页内容被被人盗用而设 ...
- python怎么查看网页编码格式_怎么用python爬取网页文字?
用Python进行爬取网页文字的代码:#!/usr/bin/python# -*- coding: UTF-8 -*-import requestsimport re# 下载一个网页url = 'ht ...
- 解决网页文字不能复制的方法
解决网页文字不能复制的方法 网页文字不能复制基本都是通过Javascript脚本来实现的,Chrome.Firefox浏览器都有禁用Javascript功能,所以我们只要禁用当前页面Javascrip ...
- 提取网页文字-免费批量自动提取网页文字软件
提取网页文字,怎么才能快速提取网页的文章呢.今天给大家分享一款免费的网页文字提取器,全程可视化提取详细参考图片. 如果说网站关键词排名一直都很稳定,但这段时间发现网站关键词排名波动很大,这种情况一般是 ...
- html文本下划虚线代码,CSS文字链接下划虚线效果
CSS文字链接下划虚线效果_网页代码站(www.webdm.cn) BODY { MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 0px; MARGIN-R ...
- 超链接标签(外部链接、内部链接、空链接、下载链接、网页元素链接、锚点链接)、注释
超链接标签 在HTML中,<a>标签用于定义超链接,作用是从一个页面链接到另一个页面 1.链接的语法格式 <a href="跳转目标" target=" ...
- 复制那些复制不了的屏幕上的网页文字和图片文字
复制那些复制不了的屏幕上的网页文字和图片文字 在平常工作学习中,经常会遇到一些图片上的.网站上的文字不能复制,让人束手无策.我们习惯的做法是一个一个的将字按照屏幕上显示的,一点点重新输入一遍,这既浪费 ...
最新文章
- C++——Lambda函数
- PostgreSQL(从版本9.3至11.2)任意命令执行漏洞 cve-2019-9193
- Windows不同版本的解释
- MATLAB绘图辅助操作
- 他人笑我太疯癫 我笑他人看不穿
- [ZJOI2008]骑士
- Java网络编程介绍
- 华为提出 New IP,欲打破长达半世纪的IP协议重塑互联网
- 37 个 Python Web 开发框架总结
- JavaEE JavaSE JavaME的区别
- 海康服务器找不到网卡驱动,驱动技巧:解决设备管理器中找不到网卡的问题
- 计算机导师问读研计划和后续计划,考研面试,问“研究生时期的规划”怎么回答急...
- 三维全景融合拼接技术
- linux基本防护 /病毒检测
- mfc匹配关键字颜色显示_如何在多台显示器上匹配颜色
- 从0到1,反距离加权IDW(Inverse Distance Weighted Interpolation) 插值变形算法
- EXCEL复制粘贴特别慢
- 什么事数据对象以及属性分为什么类型?
- 通用SSM项目环境搭建详细教程
- docker搭建mysql主从复制