深入了解有关文本效果的属性

小小潘不放弃

已于 2022-03-01 15:35:55 修改

阅读量130

点赞数

分类专栏： CSS进阶文章标签： css html web开发前端

于 2022-02-27 11:17:28 首次发布

本文链接：https://blog.csdn.net/qq_57220516/article/details/123160461

版权

CSS进阶专栏收录该内容

10 篇文章 0 订阅

订阅专栏

常见的文本效果属性

属性	说明
text-indent	首行缩进
text-align	水平对齐
text-decoration	文本修饰
text-transform	大小写转化
line-height	行高
vertical-align	垂直对齐
letter-spacing	字母间距
word-spacing	词间距

text-indent的妙用

第一次接触这个属性，一定是用来首行缩进的

text-indent:2em;

其实除此之外，这个属性还有一个非常实用的技巧，会在搜索引擎的LOGO部分用到。比如：我们一般把网站的LOGO图片放到h1标签中，但是搜索引擎只能识别文字，不能识别图片，这里我们可以把LOGO设置为背景图片，然后让文字偏移9999px。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
		h1{
			background-image: url(img/0zc6g120008g0hcb587E5.png);
			width:220px;/* 把h1标签的宽度和高度设计成图片的同等大小 */
			height:60px;
			text-indent: -9999px;
		}
  </style>
 </head>
 <body>
	<h1>携程精选网/h1>
 </body>
</html>

在这里插入图片描述

text-align实现水平居中

属性值	说明
left	左对齐
right	右对齐
center	居中对齐

text-align只对文本，inline和inline-block元素起作用。那块元素如何实现水平居中呢？
用margin：0 auto；值得注意的是，text-align的属性值在父元素中设置，而margin在当前元素中设置。
来看以下例子对比了解：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
		.div_father{
			background-color: antiquewhite;
			width:200px;
			height:160px;
		}
		.div_son{
			margin:0 auto;
			background-color: burlywood;
			width:150px;
			height:100px;
		}
		.div_text{
			text-align:center;
			background-color: #1E90FF;
			width:200px;
			height:100px;
		}
		.div_img{
			text-align:center;
			background-color: #1E9000;
			width:200px;
			height:100px;
		}
  </style>
 </head>
 <body>
	 <p>块元素的水平居中</p>
	<div class="div_father">
		<div class="div_son"></div>
	</div>
	<p>文字的水平居中</p>
	<div class="div_text">文字水平居中</div>
	<p>图片的水平居中</p>
	<div class="div_img"><img src="img/roll_in.PNG"style="width:100px"></div>
 </body>
</html>

在这里插入图片描述

line-height详解

line-height定义

line-height是指，两行文字基线之间的距离，那么问题来了，什么是基线？
在这里插入图片描述

line-height取值

line-height可以取三类值：
1 百分比：是相对于当前元素的font-size值来计算的
line-height=（当前元素的font-size) * 百分比
2 em：也是相对于当前元素的font-size值来计算的
line-height=（当前元素的font-size) * em值
3 无单位数字：
line-height=（当前元素的font-size）* 该数子

line-height实现垂直居中

以p标签为例，line-height表示的是一行文字的高度，而height表示整个段落的高度，当我们定义这两个属性值相同时，可以实现单行文字的垂直居中。试试：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
		p{
			line-height: 80px;
			height:80px;
			width:150px;
			border:1px solid red;
		}
		
  </style>
 </head>
 <body>
	 <p>单行文字的垂直居中</p>
 </body>
</html>

在这里插入图片描述

深入vertical-align

vertical-align属性值

属性值	说明
top	顶部对齐
middle	中部对齐
baseline	基线对齐
bottom	底部对齐

这里的基线和text-align的基线是一样的！

vertical-align的取值

负值：vertical-align：-2px；表示相当于基线xian向上偏移2px；当然，正值就表示向下偏移量了；
百分比：相对于当前元素的line-height来说的；
关键字：top，middle，baseline，bottom。

小小潘不放弃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
深入了解有关文本效果的属性

常见的文本效果属性属性说明text-indent首行缩进text-align水平对齐text-decoration文本修饰text-transform大小写转化line-height行高vertical-align垂直对齐letter-spacing字母间距word-spacing词间距text-indent的妙用第一次接触这个属性，一定是用来首行缩进的text-indent:2em;其实除此之外，这个属性还有一个
复制链接

扫一扫