如何利用css樣式做出文字的下劃線？

在將網(wǎng)頁設(shè)計(jì)完成后，接下來就需要前端和后端工程師的配合，來將網(wǎng)頁正式上線了。但是身為網(wǎng)頁設(shè)計(jì)師，還是有必要掌握一些前段知識(shí)的，主要指html5和css3，在招聘網(wǎng)站上也有很多人城之外div+css，所以有關(guān)于css和html的知識(shí)還是有必要介紹一下的。

這篇文章主要介紹的是如何利用css樣式做出文字的下劃線，效果如下圖所示。

這就要用到text-decoration屬性了，直接翻譯的話，大概是文本裝飾的意思，有underline、overline等屬性，如果想要設(shè)置下劃線的話就是用underline，那么在代碼層面應(yīng)該如何編寫呢？

首先要用div做一個(gè)元素包裹的容器，然后在div中引入h2標(biāo)簽，并在h2標(biāo)簽中輸入文字，這樣的話html5的工作就做完了。在瀏覽器中運(yùn)行，你會(huì)發(fā)現(xiàn)，字已經(jīng)可以正常顯示了，不過沒有下劃線，也沒有居中，那么怎么辦呢？

用css樣式。新建一個(gè)css文件，并在html文件中用link標(biāo)簽引入外部樣式表，這樣子html文件和css文件就鏈接到一起了。在css文件中，用元素選擇器設(shè)置div的text-align屬性的屬性值為center，這樣文本在顯示的時(shí)候就會(huì)自動(dòng)居中對(duì)齊了。然后在h2的text-decoration屬性的屬性值設(shè)置為underline，按下ctrl+s保存css和html文件，再打開瀏覽器進(jìn)行刷新，你會(huì)發(fā)現(xiàn)，文字的下劃線效果已經(jīng)做出來了。

這樣的效果就是我們經(jīng)?？吹匠溄由纤鶐в械男Ч?#xff0c;比如咸魚成長(zhǎng)記這個(gè)網(wǎng)站里的超鏈接自帶下劃線效果，可是這樣的下劃線并不好看，因?yàn)橄聞澗€距離文字太近了，看起來過于緊湊，而且在設(shè)計(jì)的時(shí)候，下劃線一般會(huì)距離文字有一定的距離，可能是1品相，也可能是10px，那么有間隔的下劃線效果如何顯示呢？請(qǐng)看下一篇文章：如何利用css做出距離文本有一定距離的下劃線？

總結(jié)

以上是生活随笔為你收集整理的html5css字体下划线,如何利用css样式做出文字的下划线？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。