CSS 超链接

常用超链接css样式

text-decoration文本修饰

 超链接默认都带有下划线，而实际应用中，很多情况都要去除下划线，如下

<a href="#">默认有下划线</a>
<a href="#" style="text-decoration: none"></a>

尝试一下》

link、visited、hover、active

• 如下，超链接有四种伪类，未访问时link，已访问时visited，鼠标移入超链接上方时hover，鼠标按下未抬起时active

<style>
    a:link {color: red}       /* 未访问的链接 */
    a:visited {color: yellow}  /* 已访问的链接 */
    a:hover {color: blue}  /* 鼠标移动到链接上 */
    a:active {color: brown}    /* 选定的链接 */
</style>

尝试一下》

注意：

• 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

• 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

• 伪类名称对大小写不敏感。

display

我们在html中已经讲过，html分行内元素和块元素（默认占独立一行），a属于行内元素，行内元素是不能设置宽高的。

但是我们有时候会想把超链接放大一些，这时，需要先更改a元素的类型，通过display:block ，将其改为块元素，如下.normal并不能改变a的宽高，因为a此时仍属于行内元素

<style>
   .normal{
       width: 300px;
       height: 200px;
       background-color: red;
       color: white;
   }

    .block{
        display: block;
        width: 300px;
        height: 200px;
        background-color: blue;
        color: white;
    }
</style>
<a href="#" class="normal">我是行内元素,宽高对我无效</a>
<a href="#" class="block">我是块元素,我被设置了宽高</a>

尝试 一下》