Link text underline, underline, delete line (through line), flashing, etc. can be achieved through the CSS text-decoration properties. The relationship between the property value and the effect is as follows:
Text-decoration:
None: No decoration
Blink: Flashing
Underline: Underline
Line-through: Strikethrough (through line)
Overline: Underline
Learn some of the use of this property, we can see that the link text underlined, underlined at the same time to appear through: Text-decoration:underline overline, that can be achieved. Perhaps you have a question about whether these two attribute values can be present at the same time? The answer is yes, it can be achieved, we look at the following operating effect:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< HTML xmlns= "http://www.w3.org/1999/xhtml" ><pead><meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/><title>www.webjx.com</title><style type=" text/css "><!--A.TEXTB { Text-decoration:none; Color: #c00;} a.textb:hover {text-decoration:underline overline; color: #00f;} --></style></pead><body><a href= "http://www.webjx.com/" class= "TEXTB" >www.webjx.com </a></p></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
See the effect of it, although we achieved the link text underlined, underlined at the same time appear. But there are many details that we are not satisfied with. One, single line, just solid line; second, the color can not be changed (the default line color is the color of linked text); three, the distance text margin is not controllable, feeling from the text too close.
We thought of a better way to get rid of the text-decoration attribute, and to add and lower border lines to the link, as well as to make the underline and underline appear simultaneously. Let's look at the running effect below.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< HTML xmlns= "http://www.w3.org/1999/xhtml" ><pead><meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/><title>www.webjx.com</title><style type=" text/css "><!--a.texta {display: Block Text-decoration:none; Color: #c00; border-bottom:1px dashed #fff; border-top:1px dashed #fff;} A.texta:hover {border-bottom:1px dashed #c00; border-top:1px dashed #c00; color: #666;} --></style></pead><body><a href= "http://www.webjx.com/" class= "Texta" >www.webjx.com </a><a href= "http://www.webjx.com/" class= "texta" >www.webjx.com</a><a href= "http://" www.webjx.com/"class=" texta >www.webjx.com</a></p></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
By default, the default width of a block-level element is the width of the parent element and occupies a whole line of page space. So we look at the effect above, there is a whole line of the link occupied, we can make some adjustments, set the link element to the left float, and set the left margin of 30px. Let's look at the effect.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< HTML xmlns= "http://www.w3.org/1999/xhtml" ><pead><meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/><title>www.webjx.com</title><style type=" text/css "><!--a.texta {display: Block Float:left; margin-left:30px; Text-decoration:none; Color: #c00; border-bottom:1px dashed #fff; border-top:1px dashed #fff;} A.texta:hover {border-bottom:1px dashed #c00; border-top:1px dashed #c00; color: #666;} --></style></pead><body><a href= "http://www.webjx.com/" class= "Texta" >www.webjx.com </a><a href= "http://www.webjx.com/" class= "texta" >www.webjx.com</a><a href= "http://" www.webjx.com/"class=" texta >www.webjx.com</a></p></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
You can change the above running code for some debugging, more hands-on, more thinking is a good way to learn CSS. ：）
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
