HTML5基础----文字特效

一.文字特效
1. 设置字体样式

font-family:”字体类型”;
注意:直接写对应的英文就不要引号

2. 设置字体大小

font-size:数值px;
常用的单位:px pt em

3. 设置字体风格

font-style:normal/italic(倾斜)/oblique(倾斜);

4. 设置字体粗细

font-weight:100-900/bold/bolder/lighter

5. 设置字体颜色

color:颜色;

6. 复合属性

font:字体风格或粗细 字体大小 字体类型;

二.文本属性
1. 单词间隔

word-spacing:数值px;

2. 字符间隔

letter-spacing:数值px;

3. 文本修饰

text-decoration:none(没有线)/underline(下划线)/overline(上划线)/line-through(删除线)

4.纵向排列

vertical-align:
参数 说明
baseline 使元素和上级元素的基线对齐
sub 下标
super 上标
top 使元素和行中最多的元素向上对齐
text-top 使元素和上级元素的字体向上对齐
bottom 使元素和行中最低的元素向下对齐
middle 纵向对齐元素基线加上级元素的高度的一半的中点
text-bottom 使元素和上级元素的字体向下对齐
百分比 是一个相对于元素行高的百分比,它会在上级基线上增高元素基线的指定的数量。此处允许使用负值,负值表示减少相应的数量

5.文本排列

text-align:left/right/center;

6.文本缩进

text-indent:数值px/em/pt/百分比;

7. 行高

line-height:数值px/em/pt;

8. 空白处理

参数 说明
normal 是默认属性,即将连续的多个空格合并
pre 用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字超出边界时不换行
nowrap 表示强制在同一行内显示所有文本,直到文本结束或遇到br标签
pre-wrap 用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字碰到边界时发生换行
pre-line 保持文本的换行,不保留文字间的空白距离,当文字碰到边界时发生换行

9. 文本反排

unicode-bidi:bidi-override;
direction:ltr/rtl;

发布了32 篇原创文章 · 获赞 96 · 访问量 1583

猜你喜欢

转载自blog.csdn.net/qq_44534541/article/details/105519416