Содержание

Как добавить подчеркивание к заголовку?

Подчеркивание для блочных элементов вроде тега <h2> можно проводить двояко. Например, линию под текстом устанавливать на всю ширину блока, независимо от объема текста. А также подчеркивание делать только у текста. Далее рассмотрим оба варианта.

Линия под текстом на всю ширину блока

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

Пример 1. Линия на всю ширину

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Линия под заголовком</title>
  <style>
   h2 {
    font-size: 200%; /* Размер шрифта */
    border-bottom: 2px solid maroon; /* Параметры линии под текстом */
    font-weight: normal; /* Убираем жирное начертание */
    padding-bottom: 5px; /* Расстояние от текста до линии */
   }
  </style>
 </head>
 <body>
  <h2>Пример текста</h2>
  <p>Черный заголовок привлекает к себе внимание, 
   несмотря на то, что он черный, а не белый.
 
 </p>
 </body>
</html>

Расстояние от линии до текста можно регулировать свойством padding-bottom, добавляя его к селектору h2. Результат данного примера показан на рис. 1.

Рис. 1. Линия под заголовком

Подчеркивание текста

Чтобы подчеркнуть только текст, необходимо воспользоваться свойством text-decoration со значением underline, опять же, добавляя его к селектору h2 (пример 2).

Пример 2. Линия на ширину текста

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Подчеркивание заголовка</title>
  <style>
   h2 {
   text-decoration: underline; /* Подчеркивание заголовка */
   }
  </style>
 </head>
 <body>
  <h2>Пример текста</h2>
  <p>Черный заголовок привлекает к себе внимание, 
   несмотря на то, что он черный, а не белый.</p>
 </body>
</html>

Результат данного примера показан на рис.  2.

Рис. 2. Подчеркивание заголовка

В случае использования свойства text-decoration линия жестко привязана к тексту, поэтому определить ее положение и стиль не удастся.

Как добавить пунктирное подчеркивание к ссылкам?

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+4.0+1.0+1.0+1.0+1.0+

Задача

Добавить к ссылкам вместо сплошного подчёркивания пунктирное.

Решение

Пунктирное подчеркивание у ссылок в последнее время стало стандартом оформления ссылок, щелчок по которым не открывает ссылку, а выполняет некоторое действие в текущем документе. Активное использование технологии AJAX, когда страница обновляется без её перезагрузки, привело к новому виду ссылок, которые отличаются от обычных ссылок пунктирной линией.

Для создания линии следует использовать свойство border-bottom со значением dashed, добавляя его к селектору A. Чтобы подчеркивание применялось не ко всем ссылкам, следует указать уникальный класс, назовем его, например dot. Также необходимо убрать исходное подчёркивание у ссылок с помощью свойства text-decoration со значением none (пример 1).

Пример 1. Пунктирное подчеркивание

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Пунктирное подчеркивание</title>
  <style>
   A.dot {
    text-decoration: none; /* Убираем подчеркивание */
    border-bottom: 1px dashed #000080; /* Добавляем свою линию */ 
   }
   A.dot:hover {
    color: #f00000; /* Цвет ссылки при наведении на нее курсора */
   }
  </style>
 </head>
 <body> 
  <p><a href="link.html">Обычная ссылка</a> на другую страницу.</p>
  <p><a href="#">Ссылка с пунктирным подчеркиванием</a>.
 
 </p>
 </body>
</html>

Результат примера показан на рис. 1.

Рис. 1. Вид обычной ссылки и ссылки с пунктирным подчеркиванием

Толщина линии и цвет подчеркивания у ссылок также задаются через свойство border-bottom.

Двойной тег подчеркивания? — CodeRoad



Я хочу сделать некоторый текст дважды подчеркнутым в HTML.

<h2><u><i> website </i></u></h2>

У меня внизу две строчки вместо одной. Есть ли для этого определенный тег или мне придется сделать это в css?

html css
Поделиться Источник Kevril    
26 марта 2013 в 17:26

9 ответов

  • Подчеркивания в литералах не поддерживаются на этом уровне языка

    Я получил эту ошибку при создании окончательного двойника, используя подчеркивания, чтобы сделать его более читаемым. Он был объявлен в методе run() . public void run() { final double nanoSeconds = 1_000_000_000.0 / 60.0; } Я использую IntelliJ идею 12.

  • wysihtml5 — как отключить тег подчеркивания

    У меня есть небольшая проблема с wysihtml5 на моем сайте. Я хочу разрешить только несколько тегов html, и если я удалю подчеркивание из правил парсера и даже команду подчеркивания из библиотеки wysihtml5, я все равно смогу нажать CTRL(command)+U, чтобы сделать выделенный текст подчеркнутым. Что я…


40

Вы можете попробовать добавить это:

h2.dblUnderlined { border-bottom: 3px double; }

Примечание: ширина должна быть 3px или больше, поскольку она представляет собой общую ширину, а не ширину каждой границы. Когда вы увеличиваете измерение, ширина линий и пространство могут быть равны или не равны в зависимости от делимости определенного измерения на 3.

Остаток от 1 и 1 добавляется к ширине пространства; остаток от 2 приведет к тому, что 1 будет добавлен к каждой строке.

Поделиться roman     26 марта 2013 в 17:29


25

Используйте границу и подчеркивание:

.doubleUnderline {
    text-decoration:underline;
    border-bottom: 1px solid #000;
}

<span>Test</span>

Вот рабочий fiddle .

Поделиться James Hill     26 марта 2013 в 17:29


4

Самый простой способ-установить нижнюю границу типа double в CSS. Он должен быть шириной не менее 3 пикселей, чтобы создать минимальную двойную границу (две границы 1px с расстоянием между ними 1px).

Детали зависят от markup, от желаемой ширины и цвета двойной линии, а также от того, должна ли она пересекать доступную ширину.

Markup, как и <h2><u><i> website </i></u></h2> , вероятно, не должно быть серьезным. С помощью простого markup <h2>foobar</h2> можно получить минимальную двойную границу поперек страницы , используя

h2 {
  border-bottom: double 3px;
}

Если вы хотите иметь только текст заголовка “underlined”, самый простой способ-иметь внутренний код markup, например <h2><span>foobar</span></h2> и CSS

h2 span {
  border-bottom: double 3px;
}

Поделиться Jukka K. Korpela     26 марта 2013 в 18:33

  • Длинный тег подчеркивания, а не <u>

    Как мне добиться серого подчеркивания в приветственной части сайта? Я забыл тег, он в основном создает линию на всем протяжении page/div/table, что бы вы ни хотели. Сайт(где написано Добро пожаловать в CLAN ):

  • JavaFX Текст Двойной Интервал Подчеркивания

    У меня есть метка в приложении JavaFX, к которой мне тоже нужно применить двойное подчеркивание. Я знаю, что это невозможно сделать с базовым свойством, но вместо этого я применил к метке следующий css, который дает ей effect двойного подчеркивания .double-underline { -fx-border-color: #FFFFFF;…


2

К вашему сведению, на данный момент следующее возможно в Firefox или в Safari с использованием префикса поставщика:

text-decoration: underline double;
-webkit-text-decoration: underline double;

Увидеть text-decoration-line .

Поделиться Fabien Snauwaert     30 марта 2015 в 18:16


2

guys/gals, это тоже работает, но больше похоже на традиционное двойное подчеркивание.

.doubleUnderline {
     text-decoration-line: underline;
     text-decoration-style: double;
}

Поделиться Tyler Wright student     09 октября 2018 в 13:48


1

Почему бы просто не сделать свой собственный «tag»?

<style>
du
{
    text-decoration-line: underline;
    text-decoration-style: double;
}
</style>
<p> I want <du>this stuff</du> double underlined. </p>

http://jsfiddle.net/eoba541g/2/

Поделиться Kim Jensen     12 сентября 2018 в 10:21


0

используйте следующие http://jsfiddle.net/cKNP4/

или

Придайте следующий стиль любому контейнеру HTML:
border-top-style:none;border-right-style:none;border-bottom-style:double;border-left-style:none;border-width: 2px solid black;

Поделиться Unknown     03 февраля 2014 в 14:26


0

Вот мое решение (стилус):

$borderWidth 1px
$textColour black

$double-borders
    &:after
        content ""
        position absolute
        top 100%
        width 5.7em
        right 0
        border-top ($borderWidth * 3) double $textColour

.double-underlined
    @extend $double-borders

Обратите внимание, что ширина должна быть жестко закодирована (в данном случае 5. 7em . Если это не является желаемым результатом, вы также можете использовать метод border-bottom , упомянутый выше.

Поделиться user1429980     19 сентября 2014 в 20:39


-1

<h2><u>About Us</u></h2>

Это сработает, только если вы хотите дважды подчеркнуть его в HTML.

Поделиться Aqsa Shahzadi     17 октября 2019 в 09:21

Похожие вопросы:


Как удалить двойной тег html <strong> из строки в C#

Я хочу сделать поиск на моем сайте ASP.NET MVC 3, поэтому для поиска я должен найти совпадающие шаблоны и в этих словах заменить совпадающую часть на ту же часть жирным шрифтом(я использую этот тег…


Возвышенный текст и дефисы против подчеркиваний

У меня возникла проблема с дефисами в sublime text 3, и я искал какую-то помощь. Я бы хотел, чтобы они работали так же, как подчеркивания. С подчеркиванием двойной щелчок по word_one выделяет все…


Где включить Шаблоны подчеркивания?

Какое самое лучшее место в документе для включения шаблонов подчеркивания Javascript? До сих пор я видел шаблоны, включенные в тег <head> или <body> . Что более уместно? Есть ли…


Подчеркивания в литералах не поддерживаются на этом уровне языка

Я получил эту ошибку при создании окончательного двойника, используя подчеркивания, чтобы сделать его более читаемым. Он был объявлен в методе run() . public void run() { final double nanoSeconds =…


wysihtml5 — как отключить тег подчеркивания

У меня есть небольшая проблема с wysihtml5 на моем сайте. Я хочу разрешить только несколько тегов html, и если я удалю подчеркивание из правил парсера и даже команду подчеркивания из библиотеки…


Длинный тег подчеркивания, а не <u>

Как мне добиться серого подчеркивания в приветственной части сайта? Я забыл тег, он в основном создает линию на всем протяжении page/div/table, что бы вы ни хотели. Сайт(где написано Добро…


JavaFX Текст Двойной Интервал Подчеркивания

У меня есть метка в приложении JavaFX, к которой мне тоже нужно применить двойное подчеркивание. Я знаю, что это невозможно сделать с базовым свойством, но вместо этого я применил к метке следующий…


<a> тег работает только при двойном щелчке, а не при одиночном щелчке

Привет, у меня есть тег <a> , который работает на двойной щелчок, но не на один клик. У меня есть функция javascript, вызываемая на теге. Может кто-нибудь помочь на том же. Ниже приведен тег и…


Как сделать тег подчеркивания совместимым со всеми браузерами

Я использую атрибуты управления html в файле xml, как показано ниже <p> The quick <u><a href=http://querty.com/ target=_blank></a>brown fox jumps </u> over the lazy…


VBS Regex получение подчеркивания из строки

У меня есть простой результат для обнаружения части имени файла. Мои файлы имеют свое общее имя (FILENAME), второе имя (SECONDNAME#) и последний тег, все ссылки подчеркнуты. Я ищу второе имя,…

способы. text-decoration-skip — убираем подчеркивание для элементов

Рассмотрим все способы как можно сделать подчеркнутый текст через html и CSS. Всего существует три варианта:

  • Через html тег и
  • Через свойство CSS text-decoration
  • Через свойство CSS border-bottom

Подчеркнутый текст через html тег

и

Весь текст заключенные в теги и становится подчеркнутым.

Название пришло от английского слова «underline». Html тег считается более новым.

Например

Обычный текст.

Обычный текст. Подчеркнутый текст через тег ins

Преобразуется на странице в

Обычный текст. Подчеркнутый текст через тег u

Обычный текст.

Подчеркнутый текст через свойство CSS text-decoration

В CSS есть свойство text-decoration , которое отвечает за форматирование текста html для создания подчеркивания.

Синтаксис CSS text-decoration

text-decoration : none|underline|overline|line-through|inherit ;
  • none — текст без оформления
  • underline — нижнее подчеркивание
  • overline — верхнее подчеркивание
  • line-through — зачеркивание текста
  • blink — мерцающий текст (рекомендуется не применять это значение)

Нас интересует значение underline

Например:

Текст со свойством text-decoration: underline

Преобразуется на странице в

Текст со свойством text-decoration: underline

Подчеркнутый текст через свойство CSS border-bottom

Свойство CSS border-bottom создано для создании рамок (границ) объекта снизу. Естественно таким образом можно задавать и подчеркивание тексту.

Рассмотрим пример

Преобразуется на странице в

Текст со свойством border-bottom (красное подчеркивание)
Текст со свойством border-bottom (пунктирное подчеркивание)

Задача

Решение

Пунктирное подчеркивание у ссылок в последнее время стало стандартом оформления ссылок, щелчок по которым не открывает ссылку, а выполняет некоторое действие в текущем документе. Активное использование технологии AJAX, когда страница обновляется без её перезагрузки, привело к новому виду ссылок, которые отличаются от обычных ссылок пунктирной линией.

Для создания линии следует использовать свойство border-bottom со значением dashed , добавляя его к селектору A . Чтобы подчеркивание применялось не ко всем ссылкам, следует указать уникальный класс, назовем его, например dot . Также необходимо убрать исходное подчёркивание у ссылок с помощью свойства text-decoration со значением none (пример 1).

Пример 1. Пунктирное подчеркивание

HTML5 CSS 2.1 IE Cr Op Sa Fx

Пунктирное подчеркивание

Результат примера показан на рис. 1.

Толщина линии и цвет подчеркивания у ссылок также задаются через свойство border-bottom .

Наверняка вы замечали на многих ресурсах анимационное подчеркивание ссылок и хотели узнать, как это воплотить на своем сайте. Чтобы сделать красивое css подчеркивание элементов нам не понадобятся большие познания, либо подключение дополнительных скриптов, все, что нам нужно – это стандартный HTML и CSS.

Вариации подчеркивания

Подчеркивание ссылок или любых других элементов, можно придумать какое угодно. Подчеркивание может всплывать снизу, выезжать слева или справа и т.д. Мы рассмотрим более интересный пример, в котором подчеркивание будет разъезжаться от центра к краям, как на демонстрации ниже.

демонстрация подчеркивания

HTML

Для начала создадим какой либо элемент, к примеру, возьмем тег A . Атрибут его нам не важен, потому как большая часть работы будет отведена стилям.

CSS

Реализация будет заключаться в двух линиях, которые будут разъезжаться от середины нижней части элемента к его краям.

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

A{ display: inline-block; position: relative; text-decoration: none; }

Таким образом мы задали блочную обтекаемость и позиционирование относительно исходного места. Все это делается для того, чтобы подчеркивание не вылезало за пределы элемента, когда мы псевдоэлементу::before назначим абсолютное позиционирование. После этого нам необходимо задать его четкое расположение и размер. И тут мы сразу же создаем первую половину подчеркивания.

A::before{ display: block; position: absolute; content: «»; height: 2px; width: 0; background-color: red; transition: width .5s ease-in-out, left .5s ease-in-out; left: 50%; bottom: 0; }

Т.е. высота линии подчеркивания будет 2px, длина 0, красного цвета, а за анимацию отвечает свойство transition . Ну и конечно же, отступ слева на 50%, т.е. центральная точка. Практически те же действия производим и с псевдоэлементом::after:

A::after{ display: block; position: absolute; content: «»; height: 2px; width: 0; background-color: red; transition: width .5s ease-in-out; left: 50%; bottom: 0; }

A:hover::before{ width: 50%; left: 0; } a:hover::after{ width: 50%; }

Стоит отметить, что это лишь один из способов реализации данной идеи. Можно то же самое сделать и при помощи только одного псевдоэлемента::before . Подписывайтесь на материалы и предлагайте темы для статей.

Подчеркивание для блочных элементов вроде тега

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

Пример 1. Линия на всю ширину

HTML5 CSS 2.1 IE Cr Op Sa Fx

Линия под заголовком

Расстояние от линии до текста можно регулировать свойством padding-bottom , добавляя его к селектору h2 . Результат данного примера показан на рис. 1.

Подчеркивание текста

Чтобы подчеркнуть только текст, необходимо воспользоваться свойством text-decoration со значением underline , опять же, добавляя его к селектору h2 (пример 2).

Пример 2. Линия на ширину текста

HTML5 CSS 2.1 IE Cr Op Sa Fx

Подчеркивание заголовка

Черный заголовок привлекает к себе внимание, несмотря на то, что он черный, а не белый.

Результат данного примера показан на рис. 2.

В случае использования свойства text-decoration линия жестко привязана к тексту, поэтому определить ее положение и стиль не удастся.

или изучаем теги, форматирующие HTML текст

Вашему вниманию представлен один из ключевых и самых простых уроков самоучителя.

  • HTML текст является основной составляющей большинства страниц интернета.
  • По ключевым фразам в тексте HTML-страницы пользователи могут найти ваш сайт.
  • HTML текст может быть любого размера и цвета, по вашему усмотрению. Вы также можете определить вид шрифта и его объемность.
  • HTML размер шрифта обыкновенно устанавливается в пикселях.
  • HTML форматирование текста широко распространено, применяются форматирующие теги.

Смотрите ниже теги, форматирующие HTML текст :

  • Теги → жирный HTML текст (жирный шрифт).
  • Теги → жирный HTML текст (жирный шрифт).
  • Теги → моноширинный HTML текст (моноширинный шрифт).
  • Теги → моноширинный HTML текст (моноширинный шрифт).
  • Теги → моноширинный HTML текст (моноширинный шрифт).
  • Теги → HTML текст , размер больше обычного (крупный шрифт).
  • Теги → HTML текст , размер меньше обычного (мелкий шрифт).
  • Теги → наклонный HTML текст (наклонный шрифт).
  • Теги → наклонный HTML текст (наклонный шрифт).
  • Теги → наклонный HTML текст (наклонный шрифт).
  • Теги → подчеркнутый HTML текст (подчеркнутый шрифт).
  • Теги → зачеркнутый HTML текст (зачеркнутый шрифт).
  • Теги → HTML текст (шрифт) в нижнем индексе.
  • Теги → HTML текст (шрифт) в верхнем индексе.

HTML форматирование текста: зачеркнутый, подчеркнутый текст

Результат: . .. моноширинный шрифт

Результат: … размер шрифта больше обычного

Результат: … наклонный шрифт

Результат: зачеркнутый текст (зачеркнутый шрифт)

Результат: верхний индекс

C пособы форматирования, представленные выше, должны применяться только для небольших участков текста. Пользуйтесь CSS если хотите установить определенный шрифт для всей страницы, или для нескольких строк, например.

html тег подчеркивание текста | Все о Windows 10

На чтение 4 мин. Просмотров 15 Опубликовано

Название пришло от английского слова «underline». Html тег считается более новым.

Преобразуется на странице в

Обычный текст. Подчеркнутый текст через тег u

Подчеркнутый текст через свойство CSS text-decoration

В CSS есть свойство text-decoration , которое отвечает за форматирование текста html для создания подчеркивания.

Синтаксис CSS text-decoration

  • none — текст без оформления
  • underline — нижнее подчеркивание
  • overline — верхнее подчеркивание
  • line-through — зачеркивание текста
  • blink — мерцающий текст (рекомендуется не применять это значение)

Нас интересует значение underline

Преобразуется на странице в

Можно также задавать стиль линии и цвет. Более подробно про эту возможность читайте в статье: CSS text-decoration

Подчеркнутый текст через свойство CSS border-bottom

Свойство CSS border-bottom создано для создании рамок (границ) объекта снизу. Естественно таким образом можно задавать и подчеркивание тексту.

Преобразуется на странице в

Текст со свойством border-bottom (красное подчеркивание)
Текст со свойством border-bottom (пунктирное подчеркивание)


Существует несколько способов реализовать подчеркивание в CSS. Форматирование текста в CSS реализуется с помощью свойства text-decoration. Оно позволяет реализовать подчеркнутый текст в CSS. Для этого необходимо установить значение underline. Если текст родительского элемента уже подчеркнут, можно также использовать значение inherit.
Например, этот код сначала убирает подчеркивание (с помощю значения none) ссылки, а потом – добавляет, если посетитель сайта наводит на нее мышью.

Плюсы стандартного метода следующие:

  1. Простота.
  2. Может подчеркивать многострочный текст.
  3. Используется на любом фоне.

Для примитивной реализации подчеркивания этого способа достаточно, но есть еще некоторые методы.

Другие способы подчеркивания в CSS

Стандартный метод хорош, но лишь для ограниченного количества возможностей. Так, с помощью этого метода невозможно изменять стиль линии. Также такое подчеркивание плохо выглядит на большом размере шрифта. Кроме этого, он не пропускает нижние выносные элементы почти в любом браузере (исключение – Safari для Mac и iOS).

border-bottom

Это старое свойство, позволяющее изменять нижнюю границу текста. Это свойство css подчеркивает текст пунктиром, сплошной линией и как душе угодно. Также метод позволяет регулировать толщину подчеркивания. Пример кода с использованием свойства border-bottom у строчных элементов.

Результат интерпретации браузером этого кода.

Недостаток способа – подчеркивание осуществляется слишком низко по сравнению с текстом, поэтому линия (или пунктир) появляются уже под выносными элементами. Чтобы исправить это, можно использовать свойство text-shadow, использовав цвет фона в качестве цвета тени. Но выделение будет очень уродливым.
Также верстальщик имеет возможность применять переходы и анимации к подстрочной линии. Например, можно реализовать изменение цвета в течение какого-то времени. Если не использовать для пропуска выносных элементов свойство text-shadow, свойство может работать на любом фоне.

box-shadow

Это свойство использует две внутренние тени: первая рисует прямоугольник, а вторая прячет его часть. Метод может использоваться только на однотонном фоне. К этому свойству также можно добавить text-shadow для пропуска выносных элементов. Плюсы метода:

  1. Возможность позиционировать подчеркивание ниже базовой линии.
  2. Возможность изменять цвет и толщину линии.
  3. Можно использовать вместе с многострочным текстом.

Но у этого способа есть недостатки. Прежде всего, ограниченность в фоне. Также невозможно регулировать стиль подчеркивания.
Пример кода:

background-image

Этот метод почти не имеет недостатков, а его потенциал воистину огромен. Идея проста – создание радиального градиента совместно со свойством background-position. Это позволит создать изображение, которое будет находиться под текстом и повторяться по всей длине строчки.
Чтобы реализовать работу данного подхода, необходимо прописать режим отображения display: inline;
Выглядит это так.

Этот код, примененный к элементу, реализует подчеркивание длинным пунктиром. Если же точки остановки градиента установить в 50%, а не 75, то подчеркивание будет квадратиками. Свойство background-position в этом случае размещает фон под текстом, а background-repeat заставляет его повторяться.
Вместо градиента можно использовать готовое фоновое изображение и реализовать, например, подчеркивание звездочками.


Единственный недостаток – размер подчеркивания может отличаться в зависимости от используемого браузера, разрешения экрана и масштабирования.

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

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

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

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

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

  • Подчеркнуть текст пунктиром CSS:
  • Подчеркивание точками:
  • Двойная черта:

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

Как сделать ссылку в HTML. Как убрать подчёркивание ссылки

В интернете размещены миллионы электронных документов часто схожих по тематике и ориентированных на одну и ту же пользовательскую аудиторию. Переход на другие документы казался бы делом трудным и утомительным, если бы не было возможности связывания HTML-документов между собой с помощью гипертекстовых ссылок.

По сути, любая гипертекстовая ссылка является указателем адреса в глобальной сети, по которому можно моментально перейти в окне браузера. Успешный переход по ссылке возможен в двух случаях: если документ, на который ссылается документ, существует, и если синтаксис гиперссылки верен с точки зрения HTML.

Тег <a>

Для создания ссылок в HTML-документах используется тег <a>, его содержимое выступает в качестве метки, с помощью которой и будет производится переход. Для того, чтобы из элемента <a> сделать активную гиперссылку, нужно добавить к нему атрибут href.

Атрибут href в качестве своего значения содержит адрес (относительный или абсолютный), на который будет вести ссылка. При щелчке на ссылку браузер получает и отображает документ, адрес которого указан в атрибуте href:


<html>
  <body>

    <p><a href="page.html">Ссылка</a></p>
    <p><a href="httр://www.puzzleweb.ru">Ссылка</a> на страничку в и-нете.</p>

  </body>
</html>

Результат данного примера в окне браузера:

Как убрать подчёркивание ссылки

Все HTML ссылки отображаются подчёркнутыми. Такой вид для ссылок задан в стилях, используемых браузерами по умолчанию. Чтобы убрать нижнее подчёркивание у ссылки надо изменить для неё стиль, это можно сделать двумя способами.

Первый способ: к ссылке, у которой надо отключить подчёркивание, добавляется атрибут style со значением text-decoration: none;:


<a href="page.html">Ссылка без подчёркивания</a>

Второй способ подойдёт в том случае, когда надо убрать подчёркивание сразу у всех ссылок в HTML документе. В CSS стилях прописываем для всех элементов <a> свойство text-decoration со значением none:


a { text-decoration: none; }

С этой темой смотрят:

| Справочник HTML

Элемент <u> (от англ. «underline» ‒ «подчёркивание») содержит в себе текст, который должен стилистически отличаться от обычного текста, например, слова с орфографическими ошибками или текст на другом языке. В некоторых случаях подчеркивание имеет смысловое значение, например, подчеркивание собственных имён в китайском языке, или указание неправильно написанного слова при проверке орфографии.

Примечание: Подчеркнутый текст легко спутать со ссылкой, и поэтому в целом следует избегать его использования, за исключением некоторых случаев.

Внимание: Этот тег был устаревшим в HTML 4 и XHTML 1, но затем вновь введен в HTML5 с другой семантикой. Если вы хотите подчеркнуть текст несемантическим образом, используйте соответствующие стили CSS.

Синтаксис

<u>Текст</u>

Закрывающий тег

Обязателен.

Атрибуты

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <u> со следующими значениями CSS по умолчанию:

u {
    text-decoration: underline;
}

Различия между HTML 4.

01 и HTML5

В HTML 4.01 тег <u> считается устаревшим (определяет подчеркнутый текст).
В спецификацию HTML5 он был опять добавлен, но теперь тег <u> предназначен для определения текста, который должен стилистически отличаться от обычного текста, например, для определения слов с ошибками или собственные имена на китайском языке.

Пример использования:

Пример HTML: Попробуй сам
<u>Специальный репортаж </u>: Телеканал «Звезда»<br>
<span>Специальный репортаж</span>: Телеканал «Звезда»

Спецификации

Поддержка браузерами

Элемент
<u> 3+ 1+ 4+ 1+ 1+ 1+
Элемент
<u> 1+ 1+ 6+ 1+

Попробуйте сами — Примеры

Как сделать текст жирным и привлечь к нему внимание:
Важный и жирный текст

Как сделать акцент на фрагменте текста:
Акцент и курсив

Как отобразить текст в нижнем или верхнем индексе:
Форматирование текста

Учебник HTML

HTML уроки: HTML Форматирование

HTML Элементы


CSS свойство оформления текста


Пример

Установить различное оформление текста для элементов

,

и

:

h2 {
оформление текста: поверх;
}

h3 {
оформление текста: сквозное;
}

h4 {
оформление текста: подчеркивание;
}

h5 {
оформление текста: подчеркивание над чертой;
}

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

Свойство text-decoration определяет украшение, добавленное к тексту, и это сокращение недвижимость по адресу:

  • текст-украшение-строка (обязательно)
  • текст-украшение-цвет
  • стиль оформления текста
Значение по умолчанию: нет текущий цвет сплошной
Унаследовано: нет
Анимируемый: нет, см. Отдельные свойства .Прочитать о animatable
Версия: CSS1, обновленный в CSS3
Синтаксис JavaScript: объект .style.textDecoration = «подчеркивание» Попытайся

Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Объект
текст-оформление 1. 0 3,0 1,0 1,0 3,5

Синтаксис CSS

текст-украшение: текст-украшение-строка текст-украшение-цвет стиль оформления текста | начальный | наследование;

Стоимость недвижимости

Другие примеры

Пример

Добавьте дополнительное украшение текста:

h2 {
text-decoration: подчеркивание поверх линии красным пунктиром;
}

h3 {
оформление текста: подчеркивание поверх волнистой линии синий;
}

Попробуй сам »

Связанные страницы

Учебник

CSS: Текст CSS

Ссылка на HTML DOM: свойство textDecoration



HTML Tag »

Раскрытие информации: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице.Подробнее
Элемент
Узнайте, как шрифты и веб-типографика работают в HTML: руководство для начинающих
Что делает HTML Tag ?
Элемент изначально использовался для обозначения текста, который должен быть подчеркнут. Этот элемент устарел в HTML 4.01, но в HTML5 он был переопределен для представления текста, который должен отображаться в виде неартикулированного , но стилистически отличного от окружающего текста. Например, одним из правильных способов использования элемента является определение терминов с ошибками.
Дисплей
встроенный
Использование
семантика

Пример кода 

  
 Вот слово, которое  подчеркнуто   & lt; u & gt;  элемент. 


 Вот слово, которое  подчеркнуто  с помощью CSS. 


 Вот слова, окруженные тегами  & lt; u & gt;  со стилем  без артикуляции, но с явным отображением .

<стиль>
  .underline {
    текст-оформление: подчеркивание;
  }
  u.unarticulated {
    текстовое оформление: нет;
    цвет: # 000080;
    стиль шрифта: курсив;
  }

Вот слово , подчеркнутое элементом .

Вот слово, подчеркнутое с помощью CSS.

Вот слова, окруженные тегами с неартикулированными, но явно отображенными стилями .

Когда использовать элемент

Когда изначально задумывался элемент , его предполагалось использовать для идентификации текста, который должен быть подчеркнут.Однако использование HTML для добавления стилистических эффектов больше не считается хорошей практикой. Вместо этого следует использовать HTML для добавления структуры и семантического значения к содержимому веб-страницы, а CSS следует использовать для добавления стилей и макета страницы управления.

Это означает, что старые теги, такие как , которые изначально были задуманы с учетом представления, должны быть переделаны с семантическим значением или исключены и удалены из спецификации HTML.

Итак, какое семантическое значение этот элемент передает в современном HTML? В соответствии со спецификацией HTML5, опубликованной W3C:

Элемент u представляет собой отрезок текста с неартикулированной, но явно визуализированной нетекстовой аннотацией…

Вы сожалеете, что даже спросили, не так ли? Давайте немного поясним это определение.

Во-первых, что такое нетекстовая аннотация? Что ж, добавить аннотацию — значит добавить пояснение или примечание. Однако в этом случае аннотация не является текстовой, что означает, что аннотация не имеет ничего общего с содержанием текста.

Во-вторых, аннотация — это неартикулированная , но явно отрисованная. Другими словами, браузер и веб-разработчик могут выбрать отображение аннотации любым способом. По умолчанию браузеры будут отображать текст, окруженный тегами и , как подчеркнуто, но это не обязательно и не является частью спецификации HTML.Аннотации должны выглядеть так: unariculated , покажите как хотите. Просто убедитесь, что аннотацию легко обнаружить, другими словами: явно отрисован .

Давайте сложим по кусочкам. Элемент и используется для:

  • Добавить аннотацию, которая сообщает нам что-то о самом выделенном тексте, а не о содержании или сообщении текста.
  • Способ добавления аннотации не артикулирован. Слова между тегами и не должны быть подчеркнуты, любой метод аннотации приемлем до тех пор, пока…
  • Аннотации должны быть явно отображены, то есть легко заметны.

Итак, какие варианты использования существуют для такого нишевого тега? Чаще всего используется для определения слов с ошибками. Предположим, вы представляете текст, который включает слова с намеренными ошибками, которые должны броситься в глаза читателю. Элемент будет отличным выбором для идентификации этих слов.

Адам — ​​технический писатель, специализирующийся на документации и учебных пособиях для разработчиков.

HTML — полужирный, курсив и подчеркивание

Пример

Полужирный текст

Чтобы выделить полужирный текст, используйте теги или :

   Здесь полужирный текст

или

   здесь полужирный текст

В чем разница? Семантика. используется, чтобы указать, что текст фундаментально или семантически важен для окружающего текста, тогда как указывает на отсутствие такой важности и просто представляет текст, который должен быть выделен жирным шрифтом.

Если бы вы использовали , программа преобразования текста в речь не произносила бы слово (а) иначе, чем любое другое слово вокруг него — вы просто привлекаете к ним внимание, не добавляя никакого дополнительного значения.Однако, используя , та же программа может захотеть произнести это слово (слова) другим тоном, чтобы передать, что текст в некотором роде важен.

Курсив

Чтобы выделить текст курсивом, используйте теги или :

   Текст, выделенный курсивом

или

   Текст, выделенный курсивом

В чем разница? Семантика. используется, чтобы указать, что текст должен иметь дополнительный акцент, который должен быть подчеркнут, а просто представляет текст, который должен быть отделен от обычного текста вокруг него.

Например, если вы хотите выделить действие внутри предложения, это можно сделать, выделив его курсивом с помощью : «Не могли бы вы уже отправить редактирование?»

Но если бы вы определяли книгу или газету, которую обычно стилистически выделяли бы курсивом, вы бы просто использовали : «Я был вынужден прочитать Ромео и Джульетта в старшей школе.

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

Хотя сам элемент объявлен устаревшим в HTMl 4, он был повторно представлен с альтернативным семантическим значением в HTML 5 — для представления неартикулированной нетекстовой аннотации. Вы можете использовать такую ​​визуализацию для обозначения текста с ошибками на странице или для обозначения собственного имени на китайском языке.

  
 В этом абзаце содержится  неверный  текст.



HTML | Тег — GeeksforGeeks

< html >

< Головка >

< название > u Тег название >

< стиль >

корпус {

выравнивание текста: по центру;

}

.gfg {

размер шрифта: 40 пикселей;

font-weight: жирный;

цвет: зеленый;

}

. geeks {

размер шрифта: 25 пикселей;

font-weight: жирный;

}

п {

размер шрифта: 20 пикселей;

}

пролет {

оформление текста: подчеркивание;

}

стиль >

Головка >

< корпус >

< div class = "gfg" > GeeksforGeeks div >

< div class = «гики» > < u > Tag div >

< p > GeeksforGeeks: A < span > информатика span >

портал для гиков p >

корпус >

html >

Как удалить подчеркивание в гиперссылках, использующих FrontPage 2003

Версия данной статьи для Microsoft FrontPage 2002: 293172.

Версия данной статьи для Microsoft FrontPage 2000: 240972.

В ЭТОЙ ЗАДАЧЕ

Сводка

В этой статье описывается предпочтительный метод удаления подчеркивания из гиперссылки в FrontPage 2003.

Microsoft предоставляет примеры программирования только для иллюстрации, без явных или подразумеваемых гарантий. Это включает в себя, но не ограничивается, подразумеваемые гарантии товарной пригодности или пригодности для определенной цели.В этой статье предполагается, что вы знакомы с демонстрируемым языком программирования и инструментами, которые используются для создания и отладки процедур. Инженеры службы поддержки Майкрософт могут помочь объяснить функциональность конкретной процедуры, но они не будут изменять эти примеры для обеспечения дополнительных функций или построения процедур в соответствии с вашими конкретными требованиями. вернуться к началу

Как удалить подчеркивание в отдельной гиперссылке

Есть два способа удалить подчеркивание одной гиперссылки:

вернуться наверх

Как удалить подчеркивание во всех гиперссылках

Вы можете удалить подчеркивание со всех гиперссылок на странице, добавив на страницу раздел <СТИЛЬ>.

Чтобы удалить подчеркивание со всех гиперссылок на странице, выполните следующие действия:

  1. Откройте страницу, которую вы хотите изменить.

  2. Щелкните вкладку Код .

  3. Поместите следующий HTML-код перед тегом:

  4. Щелкните вкладку Design .

    Ваши гиперссылки больше не содержат подчеркивания.

вернуться наверх

HTML: тег

В этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом , с синтаксисом и примерами.

Описание

HTML тег определяет текст, который должен иметь другой стиль или иметь нетекстовую аннотацию. Браузеры обычно отображают текст в теге как подчеркнутый текст. Этот тег также обычно называют элементом .

СОВЕТ: Если вы хотите подчеркнуть текст, вы должны использовать CSS, например свойство text-decoration вместо тега. Будьте внимательны и убедитесь, что подчеркнутый текст не перепутали с гиперссылкой.

Синтаксис

В HTML синтаксис тега :

  

  Другой стилизованный текст находится здесь , а не здесь

Пример вывода

Атрибуты

К тегу применяются только глобальные атрибуты.Атрибутов, специфичных для тега , нет.

Примечание

  • Элемент HTML находится внутри тега.
  • Тег используется для отличного от обычного текста стиля текста. Браузеры традиционно форматируют текст в теге с подчеркиванием. Вы можете изменить это поведение с помощью CSS.

Совместимость с браузером

Тег имеет базовую поддержку в следующих браузерах:

  • Хром
  • Android
  • Firefox (Gecko)
  • Firefox мобильный (Gecko)
  • Internet Explorer (IE)
  • Edge Mobile
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Мобильный Safari

Пример

Мы обсудим тег ниже, исследуя примеры использования тега в HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict и XHTML 1.1.

HTML5 Документ

Если вы создали новую веб-страницу в HTML5, ваш тег может выглядеть так:

  




 Пример HTML5 от www.techonthenet.com 



 
 Заголовок 1 
 

 Мы хотим аннотировать  этот текст .

В этом примере документа HTML5 мы создали тег для обозначения нетекстового аннотированного текста. По умолчанию ваш браузер отображает «этот текст» в виде подчеркнутого текста. Вы можете перезаписать это поведение с помощью CSS.

HTML 4.01 Переходный документ

Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег может выглядеть так:

  




 HTML 4.01 Переходный пример от www.techonthenet.com 



 
 Заголовок 1 
 

 Мы хотим аннотировать  этот текст .

В этом примере переходного документа HTML 4.01 мы создали тег для обозначения нетекстового аннотированного текста. По умолчанию ваш браузер отображает «этот текст» в виде подчеркнутого текста. Вы можете перезаписать это поведение с помощью CSS.

Переходный документ XHTML 1.0

Если вы создали новую веб-страницу в XHTML 1. 0 Переходный, ваш тег может выглядеть так:

  




 Переходный пример XHMTL 1.0 от www.techonthenet.com 



 
 Заголовок 1 
 

 Мы хотим аннотировать  этот текст .

В этом примере переходного документа XHTML 1.0 мы создали тег для обозначения нетекстового аннотированного текста. По умолчанию ваш браузер отображает «этот текст» в виде подчеркнутого текста. Вы можете перезаписать это поведение с помощью CSS.

Строгий документ XHTML 1.0

Для документов XHTML 1.0 Strict нельзя использовать тег .

XHTML 1.1, документ

Для документов XHTML 1.1 нельзя использовать тег .

Как создать ссылку без подчеркивания в HTML

Обновлено: 30 декабря 2019 г. , компания Computer Hope

Используя CSS, вы можете изменить стиль ваших HTML-ссылок, чтобы они не имели подчеркивания, используя любую из следующих рекомендаций.

Примечание

Не создавайте невидимые для людей ссылки с намерением, чтобы по ним продолжали переходить поисковые системы, сканирующие ваш сайт. Современные поисковые системы обнаруживают это действие и считают это практикой обмана. Если они обнаруживают на вашем сайте невидимые для человека ссылки, поисковые системы могут понизить ваш рейтинг в результатах поиска или полностью исключить ваш сайт из списка.

Примечание

Большинство пользователей Интернета понимают концепцию подчеркнутых ссылок и могут не ожидать, что это изменится. Эти пользователи могут подумать, что любой текст, не подчеркнутый, не является ссылкой. По этой причине, если вы удалите подчеркивание, обязательно измените цвет ссылки, чтобы она четко выделялась для пользователя.

Сделать все ссылки не подчеркнутыми

Чтобы все ссылки на вашей веб-странице не имели подчеркивания, настройте стиль text-decoration для элемента a (anchor). Например, вы можете добавить следующий код CSS между тегами HTML-кода вашей веб-страницы. Здесь элемент ...

Приведенный выше код сообщает браузеру, что в каких-либо тегах (ссылках) не должно быть подчеркивания (текстовое оформление).

Кончик

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

Сделать отдельную ссылку без подчеркивания

Если вы хотите, чтобы на вашей веб-странице не подчеркивалась только одна ссылка, вы можете создать ссылку, подобную приведенному ниже коду. Вы можете сделать это в любом месте тега, чтобы ссылка не имела подчеркивания.

  style = "text-decoration: none "> Computer Hope.
No related posts.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *