11.行高/font

最新推荐文章于 2024-04-16 05:31:41 发布

RushTL

最新推荐文章于 2024-04-16 05:31:41 发布

阅读量627

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/RushTL/article/details/79962443

本文介绍了CSS中关于行高(line-height)的使用技巧，包括如何实现文字在行高中居中显示，以及如何通过padding和line-height实现多行文本的垂直居中。此外，还详细展示了如何利用CSS美化导航栏，包括设置导航项的宽度、高度，实现水平及垂直居中，并通过伪类美化超级链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

行高line-height

文字是在行高里居中的//行高最好大于字号
（在行高撑起父元素高度时）行高-字号为偶数则上下平分，奇数则下面比上面多1，
字号：font-size,行高line-height
多行文本垂直居中：padding-top+padding-bottom+多个line-height
font:14px/24px "宋体","微软雅黑";//font-size,line-height,font-family。24px可用200%来表示

font-family:"Arial","微软雅黑","宋体";//后面为备选字体

超级链接的美化

1.伪类//a不继承font/color,要改变必须选中a
a:link{color:red;}//超链接没点击时样式
a:visited{color:green;}//超链接点击过后样式
a:hover{color:blue;}//鼠标悬浮时样式
a:active{color:yellow;}//左键点击时样式
这四种状态必须按照顺序写（lvha)，否则失效，最后一个可不写，因为一瞬间

美化导航条例子

<style>
		.nav{
			width: 960px;
			height: 40px;
			background-color: yellow;
			margin: 20px auto;//页面水平方向居中
		}
		.nav li{
			float: left;
			list-style: none;
			width: 10%;//这里可以用数字96px;
			line-height: 40px;//文字竖直方向居中
			text-align: center;//文字水平方向居中

		}
		.nav li a{
			display: block;//将a转化为块元素，这样可点击范围扩大
			width: 96px;
		}
		.nav li a:link,.nav li a:visited{
			text-decoration: none;
			color: red;
		}
		.nav li a:hover{
			background-color: purple;
			color: blue;
		}
</style>

<div class="nav">
		<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>
		<li><a href="#">导航条</a></li>
</div>