html超链接样式，图形热点map，css书写格式，定义css的三种方式

翩翩丫头45

已于 2023-03-15 16:28:13 修改

阅读量963

点赞数

文章标签： html 前端 css

于 2023-01-25 16:27:45 首次发布

本文链接：https://blog.csdn.net/weixin_65544554/article/details/128721566

版权

1、超链接样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
/*使用css设计四种伪类：lvha*/
/*
a是真实存在的标签，但是其状态没有此标签，所以使用伪类来表示，使用格式是，“标签+：+状态单词”
link指默认状态下，visited指访问过的状态，hover指的是鼠标滑过的状态，active指鼠标按住不松手，即激活的状态
*/
a:link {
	color: #F50A0E;
	text-decoration: none;
}
a:visited {
/*	状态为：没有下划线，颜色为灰色*/
	text-decoration: none;
	color: #C2C2C2;
}
a:hover {
	text-decoration: underline;
	color: #2BE829;
}
a:active {
	text-decoration: none;
	color: #E7E328;
}
/*	实际中我们直接用一个a代替4中状态，然后再额外写其中的1个或者2个状态*/
/*
	a{
		color: #F50A0E;
	text-decoration: none;
	}
	a:hover {
	text-decoration: underline;
	color: #2BE829;
}
*/
</style>
</head>

<body>
	<a href="#">安徽</a>

</body>
</html>

结果：

2、图形热点map

<!doctype html>
<html>
<!--
图像热点map也成为图像热区或图像地图；
它表现为，当单击图像的某个区域，就会触发超链接，这种特性常用来设置局部的导航；
形状：rect矩形，circle圆形，poly多边形
-->
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<!--	插入图片-->
<!--usemap 可以让图片和热区发生关系，"#Map" 前面的#号类似于锚链接，指向后面的Map，此时map就可以在图片上呈现-->
<img src="images/1.jpg" alt="" width="1920" height="1280" usemap="#Map"/>
<!--	name="Map" 指明地图的名字-->
<map name="Map">
<!--	area代表地区，后面全部是其属性，coords指明区域的位置，572,17表示中心坐标位置的x，y，800指区域的宽，152指区域的高 alt为规范问题-->
<!--	在写图像热区时，一定要写alt属性，标准化也是对搜索引擎友好-->
<!--	target="_blank" 指的是在哪个窗口将超级链接打开，所以图像热区本质上就是超级链接-->
  <area shape="rect" coords="573,17,801,152" href="小米标题.html" target="_blank" alt="矩形">
</map>
<!--	创建一个空地图，相当于一张空白的纸-->
	<map name="myMap">
	
</map>
	

</body>
</html>

3、css书写格式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<!--
	css语法：
	selector{declartation1;declartation2;....}
-->
<!--	css语法规则由两个主要的部分构成：选择器，以及一条或多条声明，其中选择器或称为规则，即作用于哪些对象，可以是某个标签、所有元素、指定的class或ID-->
	<style type="text/css">
/*		某个标签，div是一个选择器,花括号里面是样式代码*/
		div{
/*			声明*/
			color: purple;
		}
/*		所有元素*/
		*{
			font-family: "微软雅黑"
		}
/*		指定的class*/
		.myDIV{
			color: yellow;
			border: 1px solid #000;
			background-color: #ccc;
		}
/*		指定ID*/
		#outDIV{
			color: blueviolet;
			background: url("../site1/images/1.jpg") no-repeat;
		}
		
	</style>
</head>

<body>
	<div>我是一个DIV</div>
	<div class="myDIV">我是不同的DIV</div>
	<div id="outDIV">这是外部div</div>
</body>
</html>

结果：

注意：

路径：

4、定义css的三种方式

Untitled-1.html文件：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<!--	三种定义css的方式-->
<!--	方式2：内部样式：即定义在文档头部的<style标签>中；只影响某个页面；一般定义在头部-->
<!--	style标签定义在head中(可定义多个)，让css代码早于html代码之前解析，保证文本样式正常显示-->
<!--	type="text/css" 表明这是一个css文本-->
	<!--	方式3：外部样式文件：css代码保存在外部单独的css文件中，在head中使用<link>或者@import命令导入-->
<!--	rel="stylesheet" 表示关联文档类型，stylesheet表示样式表；href表示关联地址-->
<!--	方法3中使用<link>导入-->
	<link rel="stylesheet" href="css/Untitled-1.css"/>
<!--	方法3中使用@import导入-->
	<style rel="text/css">
		@import url("css/Untitled-1-1.css")
	</style>
	<style type="text/css">
		div{
			width: 80%;
/*			auto表示居中显示*/
			margin: 100px auto;
		}
	</style>
	<style type="text/css">
		div{
			background: #ddd;
		}
	</style>
	<style>
		header h1{
			background: #27D96C;
		}
	
	</style>
</head>
<body>
<!--<h1>李瑞镖明知戴璐并非良人</h1>-->
	<header>
		<h1><a href="/" title="logo">春节快乐</a></h1>
		<nav>
			首页 行为 广告
		</nav>
	
	</header>
<div>
<!--		方式1：内联样式：即定义在标签的style中，只影响某个标签，没有将html和css分离，不推荐使用此方式-->
  <p style="color: purple;">戴璐事件现在基本告一段落了，随着时间的推移，她的热度也会慢慢降下去。不过在此之前，有些问题需要我们弄明白，比如戴璐的老公李瑞镖当初为什么要娶戴璐呢。</p>
<!--	内联样式可以在某一段中显示背景图片-->
		<p style="background: url('../site1/images/3.jpg')">第一，看中了戴璐的家庭条件和人脉关系。戴璐住着豪宅，开着奔驰，全身穿戴基本都是一些小奢侈品，这些东西靠她的工资是不可能对付的，说明戴璐家庭条件非常优越。根据网上透露的消息来看，戴璐在圈内风评很不好，先后有过多段恋情，要么是老板，要么是官二代富二代，可最后都没有结婚。直到李瑞镖出现才将戴璐娶过门，据说两人还是闪婚，认识没多久就结婚了。</p>
		<ul>
		  <li> 《满江红》票房逆跌 </li>
<!--			内联样式可以改变列表的某一行-->
		  <li style="color:skyblue">热 2 江西彩礼调查：</li>
		  <li>20万属中等 </li>
		  <li>热 3 春节假期各地消费市场一</li>
		  <li>线观察 4 女婿在丈母娘家喝酒后哭诉半小时 </li>
		  <li>5 骗子被抓屋里撩汉秘籍与床齐高 6</li>
		  <li> 老人没阳过 晚辈零下40℃隔窗</li>
  </ul>
	</div>
</body>
</html>

Untitled-1.css文件：

@charset "utf-8";
/* CSS Document */
*{
	font-family: "微软雅黑";
}

Untitled-1-1.css文件：

@charset "utf-8";
/* CSS Document */
h1{
	font-size: 22px;
	text-align: center;
	margin-bottom: 35px;
}

翩翩丫头45

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html超链接样式，图形热点map，css书写格式，定义css的三种方式

4、定义css的三种方式。
复制链接

扫一扫