CSS——行高和超链接

最新推荐文章于 2022-11-03 11:05:01 发布

mintsolace

最新推荐文章于 2022-11-03 11:05:01 发布

阅读量589

点赞数

分类专栏：学习笔记 css 文章标签： css

本文链接：https://blog.csdn.net/mintsolace/article/details/78388881

版权

学习笔记同时被 2 个专栏收录

128 篇文章 2 订阅

订阅专栏

css

32 篇文章 1 订阅

订阅专栏

本文介绍了CSS中的行高概念，如何通过行高实现单行文本垂直居中，以及行高与字号的关系。同时详细讲解了超链接的伪类（:link, :visited, :hover, :active）及其在CSS中的应用，强调了伪类顺序的重要性，并提供了美化a标签的实践建议。" 90179414,7863904,理解Linux平均负载与CPU使用率,"['Linux', '系统监控', '性能优化', '命令行工具', '系统管理']

摘要由CSDN通过智能技术生成

行高：
CSS中所有的行，都有行高。盒模型padding不是直接作用在文字上的，而是作用在行上的。
文字是在自己的行里面居中的，比如文字字号是14px，行高是24px，那么文字上下的距离各为5px。
为了严格保证字在行里面居中，行高和字号一般都是偶数。这样它们的差就是偶数，能被2整除。

行间距：
line-height，行与行之间的距离，即字符之间的垂直间距，一般称为行高。常用的属性单位有三种，分别为像素px，相对值em和百分比%。

单行文本垂直居中：
文本在行里面居中
公式：行高=盒子高，所以这行文本就在盒子里面垂直居中

		p{
			width: 600px;
			height: 60px;
			background-color: yellow;
			margin: 100px;
			line-height: 60px;
			text-align: center;
		}

但是这个小技巧只适用于单行文本垂直居中，不适用于多行。

如果想让多行文本垂直居中，需要设置盒子的padding：

		p{
			width: 600px;
			height: 46px;
			background-color: yellow;
			margin: 100px;
			font-size: 16px;
			padding-top: 14px;
		}

		p{
			width: 600px;
			height: 140px;
			background-color: yellow;
			margin: 100px;
			font-size: 16px;
			line-height: 20px;
			padding-top: 60px;
		}

超级链接的美化： 即a标签

伪类
同一个标签，根据用户的某种状态不同，有不同的样式，这就叫做伪类。
类是工程师加的，比如div属于box类，是明确的类。但是a属于什么类要看用户有没有点击，有没有触碰，所以叫做伪类。用冒号来表示。
a标签有4种伪类

    <style type="text/css">
		a:link{
			color:red;
		}
		a:visited{
			color:orange;
		}
		a:hover{
			color:green;
		}
		a:active{
			color:black;
		}
    </style>

:link表示用户没有点击过这个链接的样式
:visited表示用户访问过了这个链接的样式
:hover表示用户鼠标悬停时候的样式
:active表示用户用鼠标点击过这个链接，但是未松开鼠标时的样子。
这四种状态在css中必须按照固定的顺序（如上）来写，如果不按照顺序将会失效。

2.超级链接的美化
a标签在使用时非常难，因为不仅要控制a这个盒子，也要控制它的伪类。
在使用时要将a标签写在前面，:link、:visited、:hover、:active这些伪类写在后面。
a标签中描述盒子；伪类中描述文字的样式、背景。

	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.nav{
			width: 960px;
			height: 40px;
			border: 1px solid #000;
			margin: 100px auto;
		}
		.nav ul{
			list-style: none;
		}
		.nav ul li{
			float: left;
			width: 120px;
			height: 40px;
			background-color: lightpink;
			text-align: center;
			line-height: 40px;
		}
		.nav ul li a{
			display: block;
			width: 120px;
			height: 40px;
		}
		.nav ul li a:link,.nav ul li a:visited{
			text-decoration: none;
			background-color: yellowgreen;
			color:white;
		}
		.nav ul li a:hover{
			background-color:red;
			font-weight:bold;
			color:yellow;
		}
	</style>
</head>
<body>
	<div class="nav">
		<ul>
			<li><a href="#">网站</a></li>
			<li><a href="#">网站</a></li>
			<li><a href="#">网站</a></li>
			<li><a href="#">网站</a></li>
			<li><a href="#">网站</a></li>
			<li><a href="#">网站</a></li>
			<li><a href="#">网站</a></li>
			<li><a href="#">网站</a></li>
			<li><a href="#">网站</a></li>
		</ul>
	</div>
</body>

所有的a不继承text、font，因为a自己有一个伪类的权重。
最标准的就是link、visited、hover都要写，但是前端工程师在大量实践中发现不写link、visited浏览器也能兼容，所以a标签也可以简化：
a:link、a:visited都是可以省略的，简写在a标签里面，也就是说a标签涵盖了link、visited状态。

		.nav ul li a{
			display: block;
			width: 120px;
			height: 40px;
			text-decoration: none;
			background-color: yellowgreen;
			color:white;
		}
		.nav ul li a:hover{
			background-color:red;
		}