萬盛學電腦網

浏覽器 windows 10 wps office 殺毒軟件 數據庫 excel教程 文件管理 word教程 網頁制作 裝機必備軟件 linux教程

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS文字顏色不變下劃線變顏色的實現

CSS文字顏色不變下劃線變顏色的實現

這裡我們對3組文字設置三種不同顏色下劃線，分別css命名為“.divcss5-F00”、“.divcss5-00F”、“.divcss5-333”

二、使用css border實現字體下劃線為實線還是虛線 - TOP

1、字體下劃線顏色不同實現完整HTML源代碼：

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>無標題文檔</title> 
  6. <style> 
  7. .divcss5-F00{ border-bottom:1px solid #F00} 
  8. /* CSS注釋說明：.divcss5-F00 設置對象下邊框為紅色 */ 
  9. .divcss5-00F{ border-bottom:1px solid #00F; color:#090} 
  10. /* CSS注釋說明：.divcss5-00F 設置對象下邊框為藍色 文字為綠色 */ 
  11. .divcss5-333{ border-bottom:1px solid #333} 
  12. /* CSS注釋說明：.divcss5-333 設置對象下邊框為黑色 */ 
  13. </style> 
  14. </head> 
  15. <body> 
  16. <p> 
  17. DIVCSS5實踐之文字下劃線顏色-<span class="divcss5-F00">我的下劃線實現為紅色</span> 
  18. </p> 
  19. <p> 
  20. DIVCSS5實踐之文字下劃線顏色-<span class="divcss5-00F">我的下劃線實現為藍色，文字為綠色</span> 
  21. </p> 
  22. <p> 
  23. DIVCSS5實踐之文字下劃線顏色-<span class="divcss5-333">我的下劃線實現為黑色</span> 
  24. </p> 
  25. </body> 
  26. </html> 

通過以上DIV+CSS實例，我們可以學會使用border-bottom樣式對文字字體設置下邊框顏色實現對下邊框顏色樣式改變，從而達到下劃線顏色控制效果。我們要認識到text-decoration下劃線顏色是隨文字顏色改變而改變，換句話說，使用text-decoration屬性實現下劃線的顏色與文字顏色是同步的，文字什麼顏色，文字下劃線就是什麼顏色，要改變其文字與下劃線文字顏色不同，我們可以使用border-bottom邊框樣式。

2、使用css border實現字體下劃線為實線還是虛線   -   TOP

除了使用border-bottom下邊框樣式改變對象下邊框顏色到達下劃線千變萬化的顏色效果，還可以通過對css下邊框樣式設置實線（solid）或虛線（dashed），達成下劃線實線或虛線效果。

接下來我們CSS+DIV實例實踐使用border-bottom實現文字下劃線顏色和虛線實線改變。

1、CSS div實例完整html源代碼如下

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>下劃線各樣式 在線演示 www.divcss5.com</title> 
  6. <style> 
  7. .divcss-aa{ border-bottom:1px dashed #F00; color:#0FF} 
  8. /* 設置對象.divcss-aa下邊框為虛線紅色，css字體顏色為天藍色 */ 
  9. .divcss-bb{ border-bottom:1px solid #00F; color:#090} 
  10. /* 設置對象.divcss-bb下邊框為實線藍色，對象DIV字體顏色為綠色 */ 
  11. </style> 
  12. </head> 
  13. <body> 
  14. <p> 
  15. 使用下邊框實現字體下劃線各種樣式效果，<span class="divcss-aa">我下劃線為虛線紅色，字體為天藍色</span> 
  16. <!-- html注釋說明：實現文字字體下劃線為紅色虛線，字體為天藍色 --> 
  17. </p> 
  18. <p> 
  19. 使用下邊框實現字體下劃線各種樣式效果，<span class="divcss-bb">我下劃線為實線藍色，字體為綠色</span> 
  20. <!-- 實現文字字體下劃線為藍色實線，字體為綠色 --> 
  21. </p> 
  22. </body> 
  23. </html> 

為什麼使用span標簽而不用div標簽設置文字對象CSS樣式，可以進入div與span區別去了解。

小結：通過使用邊框樣式達到下劃線多樣化。

DivCSS教程排行

程序編程推薦

熱門文章

 [Linux教程]Web開發員需要Linux認證嗎
 [電腦基本常識]老毛桃winpe怎麼用？
 [安全資訊防護]10個系統安全應注意的事項
 [電腦基本常識]Mac省電模式後WiFi 自動斷網的…
 [ps合成圖片教程]PhotoShop合成城市上空的女神…
 [安卓教程]那些年 我們一起追的安卓手機桌面

相關文章

圖片文章

linux系統安裝圖解教程及卸載修復

 　　很多朋友問筆者如何安裝linux系統，linux安裝需要注意哪些問題，如何正確卸載linux系統…

如何運行PowerShell腳本

 　　新版本的PowerShell隨著Windows Server 2012 R2到來。現在，使用Po…

UI設計教程:界面圖標創意設計

在網上看過很多設計師的圖標制作過程,基本都是偏向技法的介紹.其實在圖標設計過程中除了技法之外最重要的就是圖標創意…

html文件打開出錯解決辦法

 　　每次我打開時都出現找不到該文件,我的是IE6的,文件的打開方式中沒有IE的選項,望好心人解答　　…

萬盛學電腦網 | 設為首頁 | 加入收藏

copyright © 萬盛學電腦網 all rights reserved