html5css字体下划线,如何利用css样式做出文字的下划线？

如何利用css样式做出文字的下划线？

在将网页设计完成后，接下来就需要前端和后端工程师的配合，来将网页正式上线了。但是身为网页设计师，还是有必要掌握一些前段知识的，主要指html5和css3，在招聘网站上也有很多人城之外div+css，所以有关于css和html的知识还是有必要介绍一下的。

这篇文章主要介绍的是如何利用css样式做出文字的下划线，效果如下图所示。

这就要用到text-decoration属性了，直接翻译的话，大概是文本装饰的意思，有underline、overline等属性，如果想要设置下划线的话就是用underline，那么在代码层面应该如何编写呢？

首先要用div做一个元素包裹的容器，然后在div中引入h2标签，并在h2标签中输入文字，这样的话html5的工作就做完了。在浏览器中运行，你会发现，字已经可以正常显示了，不过没有下划线，也没有居中，那么怎么办呢？

用css样式。新建一个css文件，并在html文件中用link标签引入外部样式表，这样子html文件和css文件就链接到一起了。在css文件中，用元素选择器设置div的text-align属性的属性值为center，这样文本在显示的时候就会自动居中对齐了。然后在h2的text-decoration属性的属性值设置为underline，按下ctrl+s保存css和html文件，再打开浏览器进行刷新，你会发现，文字的下划线效果已经做出来了。

这样的效果就是我们经常看到超链接上所带有的效果，比如咸鱼成长记这个网站里的超链接自带下划线效果，可是这样的下划线并不好看，因为下划线距离文字太近了，看起来过于紧凑，而且在设计的时候，下划线一般会距离文字有一定的距离，可能是1品相，也可能是10px，那么有间隔的下划线效果如何显示呢？请看下一篇文章：如何利用css做出距离文本有一定距离的下划线？