DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> 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區別去了解。

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved