CSS文本属性
字间距
- letter-spacing
- 需要为合法的尺寸单位
- 可以设置为负值，此时字间间距会比正常值小并重叠起来
- 可以为10px、-4px、normal（正常字间距）
div{
letter-spacing: 10px;
}
行高
- 指的是行与行之间的间距，是一行的高度，不是行间距
- line-height：40px font-size：20px
- line-height: 值
- 尺寸单位，固定的行高，px为单位
- 合理的行高，normal
- 数字 line-height：2 ===2*20px=40px（即当前字体的倍数作为行高）
- 百分比，以当前字体的尺寸的百分比作为行高line-height：200%
- 通常用来设置使单行文本垂直居中
div{
lwidth: 300px;
height: 100px;
line-height: 100px;
background-color: antiquewhite;
}
首行缩进
text-indecent：值（首行缩进n字符，只对首行有效）
- 默认值为0
- 尺寸单位：如：40px（）
div{
font-size: 20px;
//两字符大小缩进
text-indent: 40px;
}
- 用em作为单位：1em代表当前汉字的尺寸，2em代表两个汉字的尺寸
- 允许使用负值，此时首行会往左边缩进
- 使用百分比，基于父元素宽度百分比进行缩进，但不建议使用
div{
font-size: 20px;
//两字符大小缩进
text-indent: 50%;
}
水平排列方式
text-align: 值
- 默认为left，文本排列到左边
- right，右边
- center，中间
- justify，两端对齐，对单行文本无效，且不建议使用
<head>
<style>
div{
letter-spacing: normal;
background-color: antiquewhite;
font-size: 20px;
text-align: right;
}
</style>
</head>
<body>
<div>
//转换为行内块级元素可以设置宽高
<p style="display: inline-block; width: 100%;">我们我们我
们我们我们我们我们我们</p>
</div>
</body>
垂直对齐方式
// 使用标签完成上下标任务
<p>30.00<sub>下标</sub></p>
<p>20.00<sup>上标</sup></p>
使用CSS属性完成： vertical-align: 值
对行块元素、行内块级元素、表格元素有效
- baseline 默认，对齐父元素基线
- sub 对齐下标
- super 对齐上标
- top 顶部对齐
- bottom 底部对齐
- middle 垂直居中
- text-top
- text-bottom
<style>
div{
letter-spacing: normal;
background-color: antiquewhite;
font-size: 40px;
text-align: left;
}
.b{
font-size:20px;
vertical-align: bottom;
}
</style>
</head>
<body>
<div>
<span>19.9</span>
<span class="b">元</span>
</div>
</body>
文本修饰
//使用标签完成
<ins>women</ins>
<del>women</del>
使用CSS属性完成
text-decoration: 值
- none 默认值，无装饰
- underline 下划线
- overline 上划线
- line-through 删除线
- blink 闪烁的文字效果（浏览器有的不支持，不推荐使用）
文本阴影
使文字有阴影效果
text-shadow：值1 值2 值3 值4
- 值1：水平阴影的位置，是必须值，正值时，阴影往右，负值时，阴影往左
- 值2：垂直阴影位置，必须值，正值往下，负值往上
- 值3：阴影向四周扩散的模糊距离（可选）
- 阴影的颜色值，需为合法的颜色值，默认和文字的颜色相同（可选）
div{
background-color: antiquewhite;
font-size: 30px;
font-weight: 700;
text-shadow: 2px 3px;
}
创建一个黑色文字四周都有红色的阴影
text-shadow: 0px 0px 4px red;
文本属性重置
文本不同于文字，可以简单理解为包含行级元素、行内块级元素
只有a元素需要重置
a, a:hover, a:active{
text-decoration: none;
color: aqua;
}
原文地址：https://blog.csdn.net/qq_56807425/article/details/144385269
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！