Decorative underline CSS elements

The technology of style sheets performs two functionsat registration of HTML-pages. Firstly, with its help, the position of the individual elements of the site is formed. Secondly, it makes the blocks visually attractive to the user. The second function is implemented in different ways. One of them is underlining. CSS provides for this attribute text-decoration.

Specification of the attribute record

Take advantage of the property text-decoration just. It is enough to write the following line for the element in the code of the style file:

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 passes from the top of the text;
• none - removal of all decorative effects;
• inherit - adopts the value of the parent element.

The above are not all possible forms of the record, since this attribute specifies not only CSS underlining, but also other effects, for example, "blinking" the text or its interlacing.

Examples of hyperlink design

Beginners in Web Design and Programmingthe question arises: why make the bottom line of the text? At the dawn of the Internet technology era, this way of highlighting indicated to the user that there is a hyperlink in front of it - a text that will be clicked to a new page.

By default, hyperlinks have a property set underline. In practice, the problem arises to remove the line from inactive elements and make it visible when the user hovers the mouse pointer. Here is an example code that disables CSS underlining:

a {text-decoration: none;}

The following entry is used for active links:

a: hover {text-decoration: underline;}

Decorative underline for advanced

Standard Attribute text-decoration has several limitations:

• The color of the line does not differ from the color of the text of the link, it is impossible to distinguish their "coloring";
• Only a solid line is used as an underscore. CSS does not imply the use of other styles of inscription.

But special techniques help to bypass the classical design of the text. In the first case, an additional <span>.

For example:

<a href="#" style="text-decoration: underline; color: red">

<span style = "color: blue"> hyperlinks</ span>

</a>. </p>

As a result, on the page the word hyperlink will be written in blue, and the line color will be red.

Another advanced method that allows you to implement CSS underlining, - border-bottom. The example below explains its use:

a {border-bottom: 1px solid red;}

The result will be the same as in the example above. But this method has an important advantage. In addition to changing the color of the line (now set to red - red), it is possible to transform the way it is drawn:

• dotted - Does a dot underline;
• dashed - the line consists of strokes;
• double Draws a double line.

So, the attribute border-bottom more functional. In addition to displaying a decorative line under the text, it allows you to customize its appearance.