怎样去掉超连接下划线用3个简易的案例来讲明

2021-03-20 23:01 jianzhan
去掉超连接的下划线,必须用款式表CSS来操纵,假如你临时不想深层次掌握CSS的定义,下面将举3个简易的案例来讲明怎样操纵超连接的下划线。用记事本开启网页页面源码(还可以先用IE开启网页页面,随后点一下IE工具栏的"查询→源文档"),随后弹出记事本对话框。

寻找<head>和</head>这两句,款式表句子就加在它们正中间。以下:

拷贝编码
编码以下:

<html>
<head>
<style>a{TEXT-DECORATION:none}</style>
</head><body>

1、仅仅在head与head正中间添加<style>a{ TEXT-DECORATION:none }</style>
这1句就去掉超连接下划线了,这是个最简易的事例,你试着这样做就会取得成功的。

2、上面的事例只是告知你怎样1次性去掉超连接下划线,假如你的网页页面之中有的超连接必须下划线,有的不必须,应该怎么办呢?首
先你要构思好,你的网页页面中的超连接绝大多数是有下划线的,還是没下划线的?
假如绝大多数超连接不必下划线,便可以添加
<style> a{ TEXT-DECORATION:none }</style>这1句,随后在极少数要下划线的超连接里应用这个方式,它就有下划线了:
<a href=****><u>文本</a>。
·假如绝大多数超连接都要下划线,便可以不必添加前面提到的这句。把它改成:<style>.n{ TEXT-DECORATION:none }</style>,
留意:n前面有个点,它表明类挑选符,随后在网页页面的超连接之中能够数次引入,便可独立去掉某些超连接了,比如:

拷贝编码
编码以下:

<a class=n href=http://www.webshu.com>网页页面树树</a>
<a class=n href=http://www.cctv.com>中间电视机台</a>
<a class=n href=http://www.ziyy.com>随意泳网</a>

3、怎样让超连接去掉下划线,电脑鼠标滞留在上面时有下划线?
能够在head与head之间再加这样1句:<style>a{ TEXT-DECORATION:none}a:hover{TEXT-DECORATION:underline }</style>
表明:a表明超连接,a:hover在款式表中属于伪类,表明电脑鼠标悬停情况下的情况。
明确你的网页页面绝大多数超连接必须哪样实际效果。再举个案例表明1下:

拷贝编码
编码以下:

<style>a{ TEXT-DECORATION:none }a.xh{ TEXT-DECORATION:none }
a:hover.xh{ TEXT-DECORATION:underline }</style>,它等额的于<style>
a,a.xh{ TEXT-DECORATION:none }a:hover.xh{ TEXT-DECORATION:underline }</style>

添加这句以后,网页页面内的超连接都沒有下划线。
由上能够看出,大家又用了1次CSS伪类,它的界定文件格式是:挑选符.类挑选符{ 特性;特性值 },比如前面提到的
a.xh{ TEXT-DECORATION:none }。