Menu
Is free
registration
home  /  Navigators/ Css underlined font. Underlined text in CSS

Css underlined font. Underlined text in CSS

Description

Adds text decoration in the form of underlining, strikethrough, line above the text, and blinking. More than one style can be applied at the same time by listing values ​​separated by spaces.

Syntax

text-decoration: [blink || line-through || overline || underline] | none | inherit

The values

blink Sets blinking text. Such text periodically, about once a second, disappears, then reappears in the same place. This value is currently deprecated by browsers and is deprecated in CSS3; animation is recommended instead. line-through Creates strikethrough text (example). overline The line goes over the text (example). underline Sets underline text (example). none Cancels all effects, including the default underline for links. inherit The value is inherited from the parent.

HTML5 CSS2.1 IE Cr Op Sa Fx

text-decoration

Strategic attack

Object Model

document.getElementById ("elementID") .style.textDecoration

document.getElementById ("elementID") .style.textDecorationBlink

document.getElementById ("elementID") .style.textDecorationLineThrough

document.getElementById ("elementID") .style.textDecorationNone

document.getElementById ("elementID") .style.textDecorationOverLine

document.getElementById ("elementID") .style.textDecorationUnderline

Browsers

Internet Explorer up to and including version 7.0 does not support the inherit value. The line obtained using the line-through value is higher in IE7 than in other browsers; IE8 has fixed this bug.

Task

Solution

Dotted underlining for links has recently become the standard for link design, clicking on which does not open the link, but performs some action in the current document. The active use of AJAX technology, when the page is refreshed without reloading it, has led to a new kind of links that differ from normal links with a dotted line.

To create the line, use the border-bottom property with a dashed value, adding it to the A selector. To prevent underlining from being applied to all links, you must specify a unique class, let's call it, for example, dot. You also need to remove the original underline from links using the text-decoration property set to none (example 1).

Example 1. Dotted underline

HTML5 CSS 2.1 IE Cr Op Sa Fx

Dotted underline

The result of the example is shown in Fig. one.

The line width and underline color of links are also set via the border-bottom property.

The layout of any informative text implies the inclusion of semantic hyperlinks or anchors. These elements are added using the "a" (anchor) tag. Modern browsers display such an element by default. Often layout designers or web designers prefer to either change this style or remove it altogether.

In some cases, this is really necessary. For example, in a dense link block, where unnecessary design will only overload the perception, and make it difficult to read the document. However, in some cases it is advisable to keep the distinction between text and links. If the site design completely excludes such formatting, then any other type of highlighting of such elements should be applied. The most common type of differentiation today is the color contrast of anchors in the text. It's effective. The only small drawback of this option will be the problem of text selection by people who cannot perceive different colors (color blindness). But this is such a low percentage of users that it can be neglected.

If, nevertheless, it was decided to remove the underlining of links, then some knowledge of the structure of the formation of the Internet page, namely CSS, will be needed.

Remove underlining from links throughout the site

For someone who is well versed in web design and in particular in CSS, removing the underlining of links will not be difficult. To do this, you just need to find and open the file responsible for the styling in the site files. It usually lies in the root directory and has the extension .css. You can remove the underlining of links using a simple code:

text-decoration: none;

This small line will completely remove the underlining of all elements written with the "a" tag on the entire site.

But what if you don't have access to the CSS file?

In this case, it is advisable to use the Style tag at the beginning of the document. Works the same as a CSS file. In order to apply styles, it is necessary at the very beginning of the document (or HTML pages) add a structure in which the usual CSS style rules apply.

These styles only apply to a specific page. They will not work in other sections or documents of the site.

Remove underline links on hover

But what if you need to remove the underline of a link on hover? CSS can help us in this case too. The code will look like this:

text-decoration: none;

It is the ": hover" pseudo-class that is responsible for decorating elements on hover.

By composing the two, we can make the link's underline only appear on hover, otherwise everything will look like plain text:

text-decoration: none;

text-decoration: underline;

Using identifiers and classes

As you can see from the above, it is quite easy to change the styling of an element on a website or html document. The disadvantages of such options are the impossibility of selectively applying styles: not to the entire site or document, but to a specific link.

There are several solutions to this problem.

You can remove the underlining of links inline. Although this is strongly discouraged from the point of view of optimizing the site.

To do this, you need to specify the Style parameter directly in the link tag:

The second option is more acceptable.

We introduce an additional class or id into the element and assign the styles we need to these selectors:

The class is written with a period in front of its name:

None_ decoration (

text-decoration: none;

The identifier is denoted with a # sign:

#none_ decoration (

text-decoration: none;

This rule applies to both the CSS file and the Style tag.

Change the display style of links in text

In addition to the possibility, it allows you to apply other types of styling. Often web designers or layout designers use changing its color relative to the main text to highlight reference text.

This is also quite simple to do:

color : * specify the desired color in any format (* red, # c2c2c2, rgb (132, 33, 65) *) *;

A similar styling is applied according to the same rules as described for canceling the underline of a link. The CSS rules are identical in this case. Changing the color of the link and canceling the underline can be applied as a separate styling (then the link will remain underlined, but will change the color from the standard blue to your desired color).

Replacing standard styling

One more remark in the end. Instead of canceling the underline CSS links makes it possible to replace standard values clearance. To do this, it is enough to substitute the following values ​​into the text-decoration construction:

text-decoration-style:

  • If you need a solid line, specify the value solid.
  • For a wavy line, wavy.
  • Double line - respectively double.
  • The line can be replaced with a sequence of dots - dotted.
  • Underline a word with a dotted line - dashed

You can also change the position of the line relative to the text:

The line-text-decoration-line construction can take the following values:


And color (not to be confused with text color!):

text-decoration-line: (any color in any format * red, # c2c2c2, rgb (132, 33, 65) *).

For convenience, all three positions can be written together in a construction:

text-decoration: red, line-through, wavy.

or exploring tags that format HTML text

Your attention is presented to one of the key and simplest lessons of the tutorial.

  • HTML text is the main component of most of the Internet pages.
  • By key phrases in the body of the HTML page users can find your site.
  • HTML text can be of any size and color at your discretion. You can also define the type of font and its volume.
  • HTML size font usually set in pixels.
  • HTML formatting text widespread, formatting tags are used.

See below tags that format HTML text:

  • Tags → bold HTML text(bold font).
  • Tags → bold HTML text(bold font).
  • Tags → monospaced HTML text(monospaced font).
  • Tags → monospaced HTML text(monospaced font).
  • Tags → monospaced HTML text(monospaced font).
  • Tags → HTML text, the size is larger than usual (large print).
  • Tags → HTML text, the size is smaller than usual (small print).
  • Tags → oblique HTML text(italic font).
  • Tags → oblique HTML text(italic font).
  • Tags → oblique HTML text(italic font).
  • Tags → underlined HTML text(underlined font).
  • Tags → strikethrough HTML text(strikethrough font).
  • Tags → HTML text(font) in subscript.
  • Tags → HTML text(font) superscript.

HTML text formatting: strikethrough, underlined text

Result: ... monospaced font

Result: ... font size larger than normal

Result: ... italic font

Result: strikethrough text (strikethrough font)

Result: superscript

C The formatting given above should only be applied to small sections of text. Use CSS if you want to set a specific font for the whole page, or for several lines, for example.

With the help of html, the text can be given a beautiful design. The underline element is very popular, but not all regular users know how to use it.

Underline in HTML

So how do you make an underline? in html it is formatted using the tag ... It is used in all html and xhtml specs, but only under the condition of a transient as the browser version of the markup must be specified. In this case, the document successfully passes the validation. The element must be specified in a standard way, that is, at the very top of the page.

Tag closing, it must be accompanied by... It must be added to the markup in this way:

  1. Headline number one

    2. Our text in paragraph

The word "text" will be underlined.

You can also underline a single letter in a word:

  1. Heading number two

    2. Our those To article in paragraph

Traditionally in html markup underlined links are displayed when hovering with the mouse or even stationary, and this is the case by default in all browsers. Therefore, put the tag on an ongoing basis is highly discouraged.

In addition, writing styles in css makes the code more compact, which means that the page will load faster.

Most often, layout designers apply styles by adding borders or underlines in html, or moving them out into a separate css file.

Underline in CSS

Decorating text with css is a convenient and practical way. The most simple ways such a highlight: using text-decoration or border-bottom.

To underline text with text-decoration, the property must be added to the desired class.

  • desired-class (
  • text-decoration: underline;

It should be remembered that class names are always written in Latin.

Decorating can be done with borders as well. Borders allow you to make both a regular (solid) underline and a dotted one. For this, the necessary border properties are prescribed, but the text decoration property is removed.

  • desired-class (
  • text-decoration: none;

Then the text is decorated with the following property:

  • .required-class (
  • text-decoration: none;
  • border-bottom: 2px dashed black;

This is how decorating comes out with. To make it solid, instead of "dashed" use "solid". For those who like to decorate text with underlining with dots, you can try using "dotted".

Frame styles are written on one line. In addition to the type of underline, you also need to specify the thickness of the underline and the color. You can experiment to determine the size, but usually 1 or 2 pixels are sufficient. The text color can also be set to the underline color:

  • desired-class (
  • text-decoration: none;
  • border-bottom: 1px dotted blue;
  • color: blue;

This will create blue text with blue typography. To attach a style to html, you need to add a class to the markup.

  • Third heading

    • Our text in a paragraph

That's it, these are the basics of underlining in html.