Here we have 3 sets of text set three different color underline, respectively, CSS named ". Divcss5-f00", ". divcss5-00f", ". divcss5-333"
Second, the use of CSS border to achieve font underline is solid line or dashed-top
1, font underline color different implementation of the full HTML source code:
- <! doctype html>
- <meta http-equiv= "Content-type" content= "Text/html; charset=utf-8" &NBSP;/>&NBSP;
- <title> Untitled document </TITLE>&NBSP
- <style>
- . divcss5-f00{ border-bottom:1px solid #F00}
- /* css Note:.divcss5-f00 The bottom border of the Settings object is red */
- . divcss5-00f{ border-bottom:1px solid #00F color: #090}
- /* css Comment Description:. divcss5-00f Set object bottom border is blue text is green */
- .divcss5-333{ border-bottom:1px solid #333}
- /* css Comment Description:.divcss5-333 Settings Object Bottom border is black */
- </style>
- <body>
- <p>
- DIVCSS5 Practice Text underline color-<span class= "divcss5-f00" > My underline is implemented as red </span>
- & Lt;/p>
- <p>
- DIVCSS5 Practice text underline color-<span class= "divcss5-00f" > My underline is blue, text is green </span>
- </p>
- <p>
- DIVCSS5 Practice Text underline color-<span class= "divcss5-333" > My underline is implemented as black </span>
- </p>
- </body>
Through the above Div+css example, we can learn to use the Border-bottom style to the text font set under the border color to achieve the lower border color style changes, so that the underline color control effect. We have to realize that the text-decoration underline color changes with the color of the text, in other words, using the Text-decoration property to achieve the underline color and text color is synchronized, what color text, text underline what color, To change the color of the text and underline text, we can use the Border-bottom border style.
2, the use of CSS border to achieve font underline for solid line or dashed-top
In addition to using the Border-bottom bottom border style to change the color of the bottom border of an object to an ever-changing color effect, you can also achieve an underscore solid or dashed line effect by setting a solid line (solid) or a dash (dashed) on the CSS bottom border style.
Next we css+div instance practice using Border-bottom to implement the text underline color and dotted line changes.
1, CSS div instance complete HTML source code is as follows
- <! doctype html>
- <meta http-equiv= "Content-type" content= "Text/html; charset=utf-8" &NBSP;/>&NBSP;
- <title> Underline each style online demo www.divcss5.com</title>
- <style>
- . divcss-aa{ border-bottom:1px dashed #F00 color: #0FF}
- /* Sets the object. Divcss-aa the bottom border is dashed red, and the CSS font color is sky-blue */
- . divcss-bb{ border-bottom:1px solid # 00f; color: #090}
- /* set object. DIVCSS-BB Bottom border is solid blue, Object div font color is green */
- </ style>
- <body>
- <p>
- use bottom border to implement Font underline various style effects, <span class= "DIVCSS-AA" > I underline is dashed red, the font is sky-blue </span>
- <!-- HTML Annotation Description: Implement text font underline to red dotted line, the font is sky-blue -->
- </p>
- <p> .
- use the bottom border to implement font underline various style effects, <span class= "DIVCSS-BB" > I underline is solid line blue, font is green </span>
- <!-- Implement text font underline is blue solid line, the font is green -->
- </p>
- </body>
Why use the span tag without the DIV tag to set the text object CSS style, you can go into the div and span differences to understand.
Summary: By using border styles to achieve a variety of underscores.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
