学习记录 --【零基础CSS学习】13.文本属性

最新推荐文章于 2024-05-21 21:13:29 发布

钟情于山海

最新推荐文章于 2024-05-21 21:13:29 发布

阅读量127

点赞数

文章标签： css html 学习前端

本文链接：https://blog.csdn.net/m0_37612107/article/details/125615190

版权

一、字间距

1.letter-spacing：合法的尺寸单位；

2.可以设置负值，当设置成负值时，字间距会比正常间距小

3.letter-spacing:normal;设置成正常的字间距

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字间距</title>
    <style type="text/css">
        div{
            letter-spacing: 20px;
            /*letter-spacing: -4px;*/
            /*letter-spacing: normal;*/
        }
    </style>
</head>
<body>
    <div>测试一下字间距</div>
</body>
</html>

二、行高

1.行高：可以控制行与行之间的间距，但不是行间距，只是一行的高度

2.line-height：值;

（1）normal：默认值

（2）尺寸单位：固定的行高

（3）数字：当前字体尺寸的倍数来设置行高

（4）百分比：当前字体尺寸的百分比来设置行高

3.行高经常用来使单行文本垂直居中

例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>行高</title>
	<style type="text/css">
		div{
			line-height: 40px;/*设置行高*/
			font-size: 20px;
		}
		p{
			width: 300px;
			height: 100px;
			background: #00aeff;
			line-height: 100px;/*设置行高*/
		}
	</style>
</head>
<body>
	<div>噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。</div>
	<p>这就是蜀道难</p>
</body>
</html>

三、首行缩进

1. text-indent：尺寸单位;

（1）默认值为0（不设置时就为0）

（2）使用em作为首行缩进的尺寸单位，1em就表示一个汉字的长度

（3）允许使用负值，使用时首行缩进会缩进到左边

（4）使用百分比，基于父元素宽度的比分进行缩进（不建议使用）

例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首行缩进</title>
	<style type="text/css">
		p{
			font-size:20px;
			/*text-indent: 40px;*/
			text-indent: 2em;
		}
	</style>
</head>
<body>
	<p>支付宝小程序正式上线一周年后，还是决定和微信小程序正面硬碰硬。硬碰硬的底气来自于支付宝小程序将与新浪微博在场景、产品以及平台三个层面实现全面互通，这也是继高德、UC、钉钉、饿了么等阿里系应用后，支付宝小程序再次切入新的应用场景。不难看出，支付宝小程序正试图补齐在社交领域的短板。互通后，新浪微博的热点内容会以小程序的形式在支付宝生活号、城市服务等几个主要入口得到显示。</p>
	<p>支付宝小程序正式上线一周年后，还是决定和微信小程序正面硬碰硬。硬碰硬的底气来自于支付宝小程序将与新浪微博在场景、产品以及平台三个层面实现全面互通，这也是继高德、UC、钉钉、饿了么等阿里系应用后，支付宝小程序再次切入新的应用场景。不难看出，支付宝小程序正试图补齐在社交领域的短板。互通后，新浪微博的热点内容会以小程序的形式在支付宝生活号、城市服务等几个主要入口得到显示。</p>
</body>
</html>

四、水平排列方式

1. text-align:值;

(1)left(默认值)，左对齐

(2)right，右对齐

(3)center，居中对齐

(4)justify，两端对齐

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平排列方式</title>
    <style type="text/css">
        div{
                width: 300px;
                height: 40px;
                line-height: 40px;
                background: #9acd56;
                margin: 100 auto;
                /*text-align: left;默认值*//*文本排列到左侧*/
                text-align: right;/*文本排列到右侧*/
                /*text-align: center;*//*文本排列到中间*/
                /*text-align: justify;*//*两端对齐，对多行文本生效*/
            }
    </style>
</head>
<body>
    <div>今天学习了吗？</div>
</body>
</html>

五、垂直对齐方式

1.vertical-align: 值;

(1)baseline(默认值)，对其父元素基线

(2)sub，对齐下标

(3)super，对齐上标

(4)top，顶部对齐

(5)bottom，底部对齐

(6)middle，垂直居中

2.垂直对齐方式：对行块元素，行内块级元素，表格元素有效

六、文本修饰

1.text-decoration: 值;

（1）underline，定义下划线

（2）overline，定义上划线

（3）line-through，定义删除线

（4）blink，闪烁的文字效果，当前所有浏览器都不支持，低版本火狐浏览器支持，但不建议使用

（5）注：默认值 none，表示没有

例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文本修饰</title>
	<style type="text/css">
		p{
			/*text-decoration: underline;*/ /*文本添加下划线*/ 
			/*text-decoration: overline;*/ /*文本添加上划线*/ 
			text-decoration: line-through; /*文本添加中划线*/ 
            /*text-decoration: blink;闪烁的文字效果，只有低版本火狐浏览器支持，不建议使用*/
        } 	
	</style>
</head>
<body>
	<p>演示文本修饰</p>
</body>
</html>

七、文本阴影

1.text-shadow: 值1 值2 值3 值4;

（1）值1：水平阴影位置，必须有的。正值时，阴影在右；负值时，阴影在左。

（2）值2：垂直阴影位置，必须有的。正值时，阴影在下；负值时，阴影在上。

（3）值3：阴影的模糊距离

（4）值4：阴影颜色

例子：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文本阴影</title>
	<style type="text/css">
		p{
			color: red;
			font-size: 60px;
			font-weight: 700;
			text-shadow: 4px 6px 2px black;
		}
	</style>
</head>
<body>
	<p>观察文本阴影</p>
</body>
</html>

八、文本属性重置

1.文本不等同于文字，可以简单理解成包含行级元素，行内块级元素

例子：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文本属性重置</title>
	<style type="text/css">
		a{
            text-decoration: none; /*文本属性重置*/
            color: #222222;
        }
	</style>
</head>
<body>
	<a href="https://www.baidu.com">BAIDU</a>
</body>
</html>