Серёжа СыроежкинСерёжа СыроежкинКопирайтер

Подчеркнутый текст HTML

теги: html, css, шрифты

Подчеркнутый текст в HTML выделяется с помощью тега u HTML (от слова underline). Применяется он следующим образом (нужная часть текста помещается между тегами <u></u>):

Конструктор сайтов <u>"Нубекс"</u>

Но данный код считается невалидным, поэтому значительно эффективнее и правильнее использовать CSS-стили для декорации текста.

Подчеркнуть текст - CSS

Как мы уже говорили в статье Зачеркнутый текст, декорации текста задаются при помощи свойства text-decoration. Подчеркнутый текст задается параметром underline:

<!DOCTYPE html>
<html>
 <head>
    <title>Подчеркнутый текст с помощью CSS - "Нубекс"</title>
	<meta charset="utf-8">
	<style>
	   .underline {
	   text-decoration: underline;
	   }
	</style>
 </head>
  <body>
	 <p>Конструктор сайтов <span class="underline">Нубекс"</span></p>
  </body>
</html>

Подчеркнуть текст с помощью CSS можно не только сплошной линией. Посмотрим, какими вариантами можно подчеркнуть текст:

  • Подчеркнуть текст пунктиром CSS:
    <!DOCTYPE html>
    <html>
     <head>
        <title>Подчеркнутый пунктиром текст - "Нубекс"</title>
    	<meta charset="utf-8">
    	<style>
    	   .dashed {
    	   border-bottom: 1px dashed blue;
    	   }
    	</style>
     </head>
      <body>
    	 <p>Конструктор сайтов <span class="dashed">Нубекс"</span></p>
      </body>
    </html>
  • Подчеркивание точками:
    <!DOCTYPE html>
    <html>
     <head>
        <title>Подчеркнутый точками текст - "Нубекс"</title>
    	<meta charset="utf-8">
    	<style>
    	   .dotted {
    	   border-bottom: 2px dotted blue;
    	   }
    	</style>
     </head>
      <body>
    	 <p>Конструктор сайтов <span class="dotted">Нубекс"</span></p>
      </body>
    </html>
  • Двойная черта:
    <!DOCTYPE html>
    <html>
     <head>
        <title>Подчеркнутый двумя линиями текст - "Нубекс"</title>
    	<meta charset="utf-8">
    	<style>
    	   .double {
    	   border-bottom: double blue;
    	   }
    	</style>
     </head>
      <body>
    	 <p>Конструктор сайтов <span class="double">Нубекс"</span></p>
      </body>
    </html>

Как видно из приведенных примеров, управлять стилем подчеркивания можно при помощи свойства border-bottom (нижняя граница). С помощью этого параметра можно задать тип подчеркивания, цвет, толщину.

Комментарии 0