The style sheet technology performs two functions in the design of HTML pages. Firstly, with its help, the position of individual elements of the site is formed. Secondly, it makes the blocks visually appealing to the user. The second function is implemented in various ways. One of them is underlining. CSS provides for this attribute text- decoration .
Attribute record specification
Using the text- decoration property is simple. It is enough to write the following line for the element in the code of the stylesheet:
text- decoration: attribute_value ;
Instead of attribute_value , the CSS specification offers a number of options:
- underline - the line is located strictly under the text;
- overline - the line runs above the text;
- none - removal of all decorative effects;
- inherit - takes over the value of the parent element.
Not all possible recording forms are given above, since this attribute defines not only CSS underlining, but also other effects, for example, “blinking” of a text or its crossing out.
Hyperlink Design Examples
Beginners in web design and programming have a question: why draw the bottom line of the text? At the dawn of the era of Internet technologies, this method of highlighting indicated to the user that there is a hyperlink in front of him - a text that, when clicked, will switch to a new page.
By default, hyperlinks have the underline property set. In practice, the task arises of removing the line from inactive elements and making it visible when the user hovers the mouse pointer. Here is an example of code that disables CSS link underlining :
a {text-decoration: none;}
For active links, the following entry is used:
a: hover {text-decoration: underline;}
Decorative underline for advanced
The standard text- decoration attribute has several limitations:
- the color of the line does not differ from the color of the text of the link; you cannot distinguish between their "coloring";
- only a solid line is used as an underline. CSS does not imply the use of other styles of drawing.
But special techniques help circumvent the classic design of the text. In the first case, an additional < span > tag is used to specify a hyperlink.
For instance:
<a href="#" style="text-decoration: underline; color: red">
<span style = "color: blue"> hyperlinks </span>
</ a>. </ p>
As a result, the hyperlink word will be written in blue on the page, and the line color will be red.
Another advanced way to implement CSS underlining is - border-bottom . The example below explains its use:
a {border-bottom: 1px solid red;}
The result will be the same as in the example earlier. But this method has an important advantage. In addition to changing the color of the line (red is now set to red ), a transformation of the way it is drawn is possible:
- dotted - makes a dotted underline ;
- dashed - the line consists of strokes;
- double - draws a double line.
So, the border- bottom attribute is more functional. In addition to displaying a decorative line under the text, it makes it possible to customize its appearance.