声明:本例转自 《精通JavaScript+JQuery》
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> CSS 伪类 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
<!--
a{ /* 统一设置所有样式 */
font-family:Arial;
font-size:.8em;
text-align:center;
margin:3px;
}
a:link,a:visited{ /* 超链接正常状态、被访问过的样式 */
color:#A62020;
padding:4px 10px 4px 10px;
background-color:#ecd8db;
text-decoration:none;
border-top:1px solid #EEEEEE; /* 边框实现阴影效果 */
border-left:1px solid #EEEEEE;
border-bottom:1px solid #717171;
border-right:1px solid #717171;
}
a:hover{ /* 鼠标指针经过时的超链接 */
color:#821818; /* 改变文字颜色 */
padding:5px 8px 3px 12px; /* 改变文字位置 */
background-color:#e2c4c9; /* 改变背景颜色 */
border-top:1px solid #717171; /* 边框变换,实现"按下去"的效果 */
border-left:1px solid #717171;
border-bottom:1px solid #EEEEEE;
border-right:1px solid #EEEEEE;
}
-->
</style>
</head>
<body>
<a href="#">我是</a>
<a href="#">可爱的</a>
<a href="#">无敌的</a>
<a href="#">牛B的</a>
<a href="#">————</a>
<a href="#">分割线</a>
</body>
</html>
分享到:
相关推荐
### CSS伪类集合详解 #### 一、概述 CSS伪类是CSS中一种特殊的选择器类型,它们由CSS规范定义并被支持CSS的浏览器自动识别。通过使用这些伪类,开发者能够针对元素的不同状态或者上下文环境应用特定的样式规则。...
css伪类 超链接 连接的用法 描述 link的样式说明
CSS伪类是CSS(层叠样式表)中一种强大的工具,用于向特定状态或条件下的元素添加样式。这些伪类不需要额外的HTML标记,而是基于元素的状态或它们在文档中的位置来选择元素。在给定的文件中,我们讨论了几个关键的...
CSS伪类是CSS(层叠样式表)中一种强大的功能,允许我们针对元素的不同状态或位置应用特定的样式。在给定的文件中,重点介绍了几种常见的CSS伪类及其用法,例如超链接伪类、`:first-child`伪类以及`:lang`伪类。 ...
在这个名为"穿搭速递"的项目中,我们将深入探讨如何利用CSS(层叠样式表)来美化和增强列表链接的效果,特别是通过使用CSS伪类。本文将详细阐述相关知识点,包括CSS的基础、前端开发的重要性以及如何运用CSS伪类来...
CSS伪类是实现这一目标的关键工具,它们允许我们根据元素的不同状态来应用特定的样式。下面,我们将详细阐述这个主题,并提供丰富的实例来帮助你理解和应用这些知识。 首先,了解CSS伪类的基本概念。伪类是用于选择...
CSS:CSS伪类与伪元素教程.docx
CSS日常总结--CSS伪类
CSS伪类是用来添加一些选择器的特殊效果。 语法 伪类的语法: selector:pseudo-class {property:value;} CSS类也可以使用伪类: selector.class:pseudo-class {property:value;} anchor伪类 在支持 CSS 的浏览器中...
通过上述介绍可以看出,CSS伪类提供了强大的选择器功能,可以帮助我们更加灵活地控制网页的样式和动态效果。掌握好这些伪类的选择器,能够显著提升我们的网页设计水平,使网站更加美观且易于维护。
CSS中的伪类 CSS 中的伪类是已经系统定义好的,它们可以用来设置 HTML 元素在不同的状态下的样式。下面是常见的伪类: 1. link 伪类:设置 a 对象在未被访问前的样式。例如:alink { font-size: 14pt; text-...
特别地,CSS伪类中的`:before`和`:after`是生成内容的伪元素,它们能够在元素内容的前面或后面动态地添加额外的元素,让网页表现更加丰富和灵活。 ### CSS伪类:before和:after的基本概念 `:before`和`:after`被...
以前我还是比较忽视这两个家伙的,今天第一次见到原来伪类的好处这么多,以后会多多推荐CSS3伪类实现的效果 使用方法: 1、将head中的CSS样式引入到你的网页中 2、在你需要变成标签的html处增加class = ...
本文将详细介绍如何使用CSS伪类来实现鼠标滑动时的图片链接效果,这是一种常见的导航栏设计,可以提升用户体验。 首先,我们需要了解CSS中的几个关键伪类: 1. `:hover`:当鼠标指针悬停在元素上时,这个伪类会被...
书写css伪类时冒号后多个空格导致该规则失效</title> <meta http-equiv=”Content-Type” content=”text/html;charset=gbk”/> <style type=”text/css”> a:link{color : gray;} a:visited{...
其中,CSS伪类是一种特别有用的特性,允许我们根据元素的不同状态应用不同的样式。在本主题中,我们将深入探讨如何使用CSS伪类来控制链接的显示状态。 首先,链接在网页中的四个基本状态是: 1. `:link` - 未访问...
纯CSS3伪类实现icon标签效果.zip这个压缩包文件包含了一种使用纯CSS3来创建图标标签的方法。这种方法的优点在于,无需依赖JavaScript或者外部图像文件,仅通过CSS就能实现图标展示,从而提高网页加载速度并简化代码...
尽管`:click`不是标准的CSS伪类,理解如何在JavaScript中处理点击事件以及如何利用CSS伪类模拟交互效果对于前端开发者来说至关重要。通过结合使用CSS和JavaScript,我们可以创建更丰富的用户体验和交互设计。在实际...
伪类选择器:CSS中已经定义好的选择器,不能随便取名 :link 伪类将应用于未被访问过的链接,与:visited互斥。 :hover 伪类将应用于有鼠标指针悬停于其上的元素。 :active 伪类将应用于被激活的元素,如被点击的链接、...