css入门（七）—— 超链接样式

超链接a常用的样式控制包括超链接伪类和CSS鼠标样式。
1. 超链接伪类
    A. 超链接伪类可以定义链接在不同时期的样式，使用方法为：
        选择器:link{CSS样式}，元素未访问时的样式
        选择器:visited{CSS样式}，元素访问后的样式
        选择器:hover{CSS样式}，鼠标经过元素的样式
        选择器:actived{CSS样式}，鼠标点击激活时的样子（瞬间）
    e.g. <head>
            <title>超链接伪类</title>
            <style type="text/css">
                #div1 {
                    width: 100px;
                    height: 30px;
                    line-height: 30px;
                    border: 1px solid #CCCCCC;
                    text-align: center;
                }

a {
                    text-decoration: none;
                    font-size: 18px;
                }

#x:link {
color: red
}

#x:visited {
color: purple;
}

#x:hover {
                    color: yellow;
                    text-decoration: underline;
                }

#x:active {
                    color: green;
                }
            </style>
        </head>

<body>
            <div id="div1">
                <a id="x" href="http://www.baidu.com">百度一下</a>
            </div>
        </body>
    B. 一般情况下，超链接只需要设置为访问时和鼠标经过时的状态就行，而未访问时的样式可以直接对标签a设置样式，所以超链接伪类一般只用到hover。
    e.g. <head>
            <title>超链接伪类</title>
            <style type="text/css">
                #div1 {
                    width: 100px;
                    height: 30px;
                    line-height: 30px;
                    border: 1px solid #CCCCCC;
                    text-align: center;
                }

/*text-decoration:none可以取消a标签自带的下划线样式*/
                a {
                    text-decoration: none;
                    color: purple
                }

a:hover {
                    color: white
                }
            </style>
        </head>

<body>
            <div id="div1">
                <a href="http://www.baidu.com">百度一下</a>
            </div>
        </body>
2. hover伪类
    A. hover不仅仅适用于标签a，它可以用在任意元素，即”元素:hover{样式}“

css入门（七）—— 超链接样式相关推荐

CSS入门七、CSS3新特性
零.文章目录 CSS入门七.CSS3新特性 1.CSS3 的现状新增的CSS3特性有兼容性问题,ie9+才支持移动端支持优于 PC 端不断改进中应用相对广泛 2.CSS3 新增选择器 CSS3 ...
CSS之设置超链接样式以及设置鼠标形状
超链接在任意一个网页上都是最基本的元素之一,通过超链接可以实现页面的跳转.功能的激活等,我们来学习如何使用CSS设置超链接的样式定义超链接是使用**标签,用于从一个页面链接到另一个页面, 元素最重要 ...
php超链接样式,html和css中设置超链接样式方法的总结
在之前的文章中我们介绍了关于html中超链接的颜色设置,我们都也知道超链接在网站中都是无处不在的,超链接是跳转到另一个页面的入口,当你把鼠标移动到超链接上,会有颜色或者样式的改变,那么我们今天就给大家 ...
css如何设置超链接样式
css设置超链接样式是通过伪类来实现的 (1) :link:设置a对象在未被访问前的样式表属性. (2) :visited:设置a对象在其链接地址已被访问过时的样式表属性. (3) :hover:设置 ...
CSS入门基础（样式，css文件，选择器）
CSS入门学习 CSS的简介基本语法结构基本用法给元素添加样式行内样式内部样式外部样式定义样式css文件在html中引入css文档选择器标签选择类选择 id选择 CSS的简介层 ...
CSS入门七：列表样式（主要是列表前面序号的样式，圆圈、方框，罗马序号，图片等等）
目录 1.列表样式的属性: ● 1.list-style-type:序号变成,空心圆.方框.数字,拉丁字母等等 ● 2.list-style-position:列表位置的"看起来像缩进的&q ...
CSS基础笔记——超链接样式
在浏览器中,超链接默认情况下字体为蓝色,带有下划线,鼠标单击时字体为红色,单击后为紫色而在CSS中,我们可以使用超链接伪类来定义超链接在鼠标单击的不同时期的样式 a:link{...} a:visi ...
【经验】在CSS中定义超链接样式a:link、a:visited、a:hover、a:active的顺序
以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面.出现一些问题,搜索引擎查了一些网站和资料,发现很多人问到这个问题,给出的结果我试了试,大部分都不正确. 给出我试的顺序,可能会对大 ...
CSS 入门2（样式属性+元素溢出+显示特性+盒子模型）
css样式属性常用布局样式属性常用文本样式属性元素溢出显示特性盒子模型常用布局样式属性 <!DOCTYPE html> <html lang="en" ...
CSS入门 0x3 链接样式
链接的伪类选择器注意使用次序 a:link a:visited a:hover a:focus a:active 未访问链接已访问链接鼠标悬停键盘选中被激活的,发生在单击时 <!DOC ...

css入门（七）—— 超链接样式

css入门（七）—— 超链接样式相关推荐

最新文章

热门文章