使用css樣式對(duì)一段文字或一段文字中其中幾個(gè)文字設(shè)置虛線(xiàn)效果的下劃線(xiàn)如何實(shí)現(xiàn)？我們知道css字體下劃線(xiàn)使用text-decoration樣式實(shí)現(xiàn)，而虛線(xiàn)下劃線(xiàn)則不能使用此css樣式屬性。要實(shí)現(xiàn)通過(guò)下邊框border-bottom實(shí)現(xiàn)虛線(xiàn)邊框來(lái)制作出虛線(xiàn)下劃線(xiàn)效果。那么一起來(lái)了解一下。

css下劃線(xiàn)——淺談css自定義下劃線(xiàn)

自定義下劃線(xiàn)。使用:after，首先添加一個(gè)空的內(nèi)容，為了讓它排列到標(biāo)題的下面，需要將其變成塊級(jí)元素，用border-bottom設(shè)置下劃線(xiàn)，可設(shè)置其顏色、粗細(xì)，下劃線(xiàn)的長(zhǎng)度通過(guò)設(shè)置空內(nèi)容的width屬性來(lái)實(shí)現(xiàn)，還可以通過(guò)margin-top調(diào)整下劃線(xiàn)與文字的距離。

css語(yǔ)言特點(diǎn)

css為html標(biāo)記語(yǔ)言提供了一種樣式描述，定義了其中元素的顯示方式。css在web設(shè)計(jì)領(lǐng)域是一個(gè)突破。利用它可以實(shí)現(xiàn)修改一個(gè)小的樣式更新與之相關(guān)的所有頁(yè)面元素。

總體來(lái)說(shuō)，css具有以下特點(diǎn)：

豐富的樣式定義

css提供了豐富的文檔樣式外觀，以及設(shè)置文本和背景屬性的能力；允許為任何元素創(chuàng)建邊框，以及元素邊框與其他元素間的距離，以及元素邊框與元素內(nèi)容間的距離；允許隨意改變文本的大小寫(xiě)方式、修飾方式以及其他頁(yè)面效果。

易于使用和修改

css可以將樣式定義在html元素的style屬性中，也可以將其定義在html文檔的header部分，也可以將樣式聲明在一個(gè)專(zhuān)門(mén)的css文件中，以供html頁(yè)面引用?？傊?，css樣式表可以將所有的樣式聲明統(tǒng)一存放，進(jìn)行統(tǒng)一管理。

另外，可以將相同樣式的元素進(jìn)行歸類(lèi)，使用同一個(gè)樣式進(jìn)行定義，也可以將某個(gè)樣式應(yīng)用到所有同名的html標(biāo)簽中，也可以將一個(gè)css樣式指定到某個(gè)頁(yè)面元素中。如果要修改樣式，我們只需要在樣式列表中找到相應(yīng)的樣式聲明進(jìn)行修改。

css的多頁(yè)面應(yīng)用

css樣式表可以單獨(dú)存放在一個(gè)css文件中，這樣我們就可以在多個(gè)頁(yè)面中使用同一個(gè)css樣式表。css樣式表理論上不屬于任何頁(yè)面文件，在任何頁(yè)面文件中都可以將其引用。這樣就可以實(shí)現(xiàn)多個(gè)頁(yè)面風(fēng)格的統(tǒng)一。

層疊

簡(jiǎn)單的說(shuō)，層疊就是對(duì)一個(gè)元素多次設(shè)置同一個(gè)樣式，這將使用最后一次設(shè)置的屬性值。例如對(duì)一個(gè)站點(diǎn)中的多個(gè)頁(yè)面使用了同一套css樣式表，而某些頁(yè)面中的某些元素想使用其他樣式，就可以針對(duì)這些樣式單獨(dú)定義一個(gè)樣式表應(yīng)用到頁(yè)面中。這些后來(lái)定義的樣式將對(duì)前面的樣式設(shè)置進(jìn)行重寫(xiě)，在瀏覽器中看到的將是最后面設(shè)置的樣式效果。

頁(yè)面壓縮

在使用html定義頁(yè)面效果的網(wǎng)站中，往往需要大量或重復(fù)的表格和font元素形成各種規(guī)格的文字樣式，這樣做的后果就是會(huì)產(chǎn)生大量的html標(biāo)簽，從而使頁(yè)面文件的大小增加。而將樣式的聲明單獨(dú)放到css樣式表中，可以大大的減小頁(yè)面的體積，這樣在加載頁(yè)面時(shí)使用的時(shí)間也會(huì)大大的減少。另外，css樣式表的復(fù)用更大程序的縮減了頁(yè)面的體積，減少的時(shí)間。

對(duì)字體文字實(shí)現(xiàn)虛線(xiàn)的下劃線(xiàn)樣式布局不是采用常規(guī)下劃線(xiàn)屬性text-decoration實(shí)現(xiàn)，而是通過(guò)邊框border樣式的下邊框border-bottom的虛線(xiàn)邊框樣式來(lái)實(shí)現(xiàn)。如果大家還想了解更多與之有關(guān)的信息，歡迎關(guān)注我們文軍營(yíng)銷(xiāo)的官網(wǎng)。

推薦閱讀