css来实现HTML中装饰性标签的作用，即css实现上标、下标、加粗、倾斜、下划线、高亮、缩略词

1.实现上标（某个字符缩小在右上角）

HTML中：

<sup>上标</sup>

显示：

css中：

.font span{
   
    /* vertical-align属性用来设置元素的垂直对齐方式，text-top和super属性值都可以实现上标样式 */
    /* vertical-align: text-top; */
    vertical-align: super;
    font-size: 10px;
    color: red;
}
<div class="font">测试字体样式的设置<span>上标</span></div>

显示：

2.实现下标（