CSS入门 0x3 链接样式

链接的伪类选择器

注意使用次序
a:link	a:visited	a:hover	a:focus	a:active
未访问链接	已访问链接	鼠标悬停	键盘选中	被激活的，发生在单击时

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>link</title><style>a:link,a:visited {text-decoration: none;/*取消下划线*/font-weight: bold;/*用加粗代替下划线*/color: blue;}a:hover,a:focus,a:active {color: red;text-decoration: none;border-bottom: 1px solid #000;/*利用边框自定义下划线*/}a[href^="http:"],a[href^="https:"] {/*利用属性选择器设置外部链接的样式*//*如果站内有http开头，需要自定义重新设置*/background: url(./images/externalLink.gif) no-repeat right top;padding-right: 10px;}</style></head><body><a href="#" target="_blank">未访问过</a><a href="#" target="_blank">访问过的</a><a href="#" target="_blank">鼠标悬停</a><a href="#" target="_blank">自定义下划线</a><a href="https://blog.csdn.net/funkstill" target="_blank">外部链接</a></body>
</html>

创建类似按钮的链接

简单翻转

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Link button</title><style>a {display: block;width: 7em;line-height: 1.4;text-align: center;text-decoration: none;border:1px solid #66a300;background-color: #8cca12;color: #fff;}/*使用伪类实现翻转*/a:hover,a:focus {background-color: #f7a300;border-color: #ff7400;}</style></head><body><a href="#">假装这是按钮</a><br><a href="#">悬停在按钮</a></body>
</html>

图像翻转

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>图像翻转</title><style>a:link,a:visited {display: block;width: 203px;height: 72px;text-indent: -1000em;background:url(./images/button.png) left top no-repeat;}a:hover,a:focus {background-image: url(./images/button-over.png);}a:active {background-image: url(./images/button-active.png);}</style></head><body><a href="#"></a><br><a href="#"></a></body>
</html>

Pixy样式翻转

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>图像翻转</title><style>/*通过改变对齐方式设置按钮背景*/a:link,a:visited {display: block;width: 203px;height: 72px;text-indent: -1000em;background:url(./images/buttons.png) -203px no-repeat;}a:hover,a:focus {background-position: right top;}a:active {background-position: left top;}</style></head><body><a href="#"></a><br><a href="#"></a><br><a href="#"></a></body>
</html>

CSS精灵

把许多图标包含到一个图像中减少服务器调用。

CSS入门 0x3 链接样式相关推荐

css链接样式_如何在CSS中设置链接样式
css链接样式样式链接 (Styling Links) Links can be styled with any CSS property, such as color, font-family, ...
CSS入门基础（样式，css文件，选择器）
CSS入门学习 CSS的简介基本语法结构基本用法给元素添加样式行内样式内部样式外部样式定义样式css文件在html中引入css文档选择器标签选择类选择 id选择 CSS的简介层 ...
css中超级链接样式的设置顺序
a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF ...
CSS 入门2（样式属性+元素溢出+显示特性+盒子模型）
css样式属性常用布局样式属性常用文本样式属性元素溢出显示特性盒子模型常用布局样式属性 <!DOCTYPE html> <html lang="en" ...
css链接样式_CSS中的样式链接
css链接样式 CSS样式链接 (CSS Styling Links) The links in CSS can be styled in various ways to make our websi ...
html 仿word页面,HTML+CSS入门 HTML页面仿WORD样式详解
本篇教程介绍了HTML+CSS入门 HTML页面仿WORD样式详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 要求不再浏览器中添加office插件的前提下.展示WOR ...
CSS入门五：文本样式；字体颜色：英文字母，十六进制，RGB；文本颜色，字间距，行间距，对齐方式；下划线、上划线…，文本阴影，字母大小写，首行缩进
CSS入门部分已经了解了:CSS简介.样式表分类,内部样式表简单使用:选择器和类选择器简单使用:背景色.背景图:以及外部样式表的简单使用: 本篇博客主要介绍,如何对文本设置,包括字体颜色:字间距,行间 ...
html实现点赞效果,HTML+CSS入门点赞功能实现 $(tag).css('属性', '样式')
本篇教程介绍了HTML+CSS入门点赞功能实现 $(tag).css('属性', '样式'),希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 1. 创建标签 docume ...
CSS(列表+表格+链接+自定义鼠标光标）样式
1.CSS列表样式 1.1 list-style-type属性 (值可取none.circle.square.decimal.disc.lower-alpha) 有序列表:列表项目用数字或者字母来表示 ...

CSS入门 0x3 链接样式

链接的伪类选择器

创建类似按钮的链接

CSS入门 0x3 链接样式相关推荐

最新文章

热门文章