目录
一、字间距
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>