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.实现下标（某个字符缩小在右下角）

HTML中：

<sub>下标</sub>

显示：

css中：

.font span{/* text-bottom和sub属性值都可以实现下标样式 *//* vertical-align: text-bottom; */vertical-align: sub;font-size: 10px;color: red;}<div class=\"font\">测试字体样式的设置<span>下标</span></div>

显示：

3.加粗

HTML中：

<b>加粗</b><strong>强调加粗</strong>

显示：

css中：

.font{font-weight: bold;}<div class=\"font\">测试字体样式的设置</div>

显示：

4.倾斜

HTML中：

<i>倾斜</i><em>强调倾斜</em><cite>引用倾斜效果</cite>

显示：

css中：

.font{/* oblique和italic都可以实现 *//* font-style:oblique; */font-style: italic;}<div class=\"font\">测试字体样式的设置</div>

显示：

5.下划线

HTML中：

<u>下划线</u>

显示：

css中：

.font{/* 还可对下划线进行颜色和粗细的设置 */text-decoration: underline red 2px;}<div class=\"font\">测试字体样式的设置</div>

显示：

6.高亮显示

HTML中：

<mark>高亮显示</mark>

显示：

css中：

.font{/* 给容器设置背景颜色就可 */background-color: khaki;}<div class=\"font\">测试字体样式的设置</div>

显示：

7.缩略词（鼠标放到一个元素上才会显示出来的类似于解释的样式）

HTML中：

<abbr title=\"HyperText Markup Language\">HTML</abbr>

显示：

css中：

<div class=\"font\" title=\"HyperText Markup Language\">HTML</div>

显示：