CSS的三个选择器加超链接测试实例

最新推荐文章于 2023-07-26 09:12:56 发布

Bird

最新推荐文章于 2023-07-26 09:12:56 发布

阅读量1.9k

点赞数 2

分类专栏： HTML 文章标签： css 测试 stylesheet class html 编程

本文链接：https://blog.csdn.net/a352193394/article/details/7314752

版权

HTML 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

CSS一共有三中选择器，进行指定的CSS 样式的修饰，下面来介绍一下CSS的三种类选择器。他们分别是类选择

器，id选择器，html选择器。

然后默认超链接是蓝色带一个下划线的样式，如果我希望超链接是黑色然后不带下划线，然后当鼠标移动到上面

去的时候出现下划线，点击以后超链接编程红色，这样的效果该如何设计呢，下面请看实例。

首先建立一个HTML文件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test2.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
   
  	<link rel="stylesheet" href="../css/1.css" type="text/css"/>
  </head>
  
  <body>
  	你好北京!
   <span class="style1">新闻一</span>
   <span class="style1">新闻二</span>
   <span class="style1">新闻三</span>
   <span class="style1">新闻四</span>
   <span class="style1">新闻五</span><br/><br/><br/>
   
   
   	<span id="style2">这是一则非常重要的新闻</span><br/><br/><br/>
   	
   	<a href="#">连接测试</a><br/><br/><br/>
   	<a href="#">测试连接</a>
  </body>
</html>

然后对应的css文件如下

/*类选择器*/
.style1{
	font-weight: bold;
	font-size: 20px;
	background-color: pink;
}

/*id选择器*/
#style2{
	font-size: 30px;
	background-color: silver;
}

/*html选择器*/
body{
	color: black;
}

a:link{
	color: black;
	text-decoration: none;
}

a:hover{
	text-decoration: underline;
}

a:visited{
	color: red;
}

这样就可以实现所需要的效果了。

Bird

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的三个选择器加超链接测试实例

CSS一共有三中选择器，进行指定的CSS 样式的修饰，下面来介绍一下CSS的三种类选择器。他们分别是类选择器，id选择器，html选择器。然后默认超链接是蓝色带一个下划线的样式，如果我希望超链接是黑色然后不带下划线，然后当鼠标移动到上面去的时候出现下划线，点击以后超链接编程红色，这样的效果该如何设计呢，下面请看实例。首先建立一个HTML文件 test2.ht
复制链接

扫一扫

专栏目录