Html двойное подчеркивание: Нестандартное подчёркивание текста на чистом CSS. Свойство text-decoration — журнал «Доктайп»

.fancy {
  -webkit-text-decoration: hotpink double underline;
  text-decoration: hotpink double underline;
}

В результате получится:

Fancy Underline

Свойство text-decoration-color

Это свойство наконец-то дает нам возможность изменить цвет оформления текста!

text-decoration-style

Свойство text-decoration-style используется для определения типа оформления текста, а новые инструкции содержат два значения: double и wavy:

.wavy {
  text-decoration: underline;
  -webkit-text-decoration-color: salmon;
  text-decoration-color: salmon;
  -webkit-text-decoration-style: wavy;
  text-decoration-style: wavy;
}

Wavy Decoration

Свойство text-decoration-line

Свойство text-decoration-line принимает значения underline, overline, line-through и blink (однако blink считается устаревшим):

.strike {
  -webkit-text-decoration-color: red;
  text-decoration-color: red;
  -webkit-text-decoration-line: line-through;
  text-decoration-line: line-through;
}

Вы получите:

Strike This

Свойство text-decoration-skip

С помощью свойства text-decoration-skip мы можем сделать так, чтобы оформление текста не выходило за рамки элемента, к которому оно применяется. Возможные значения: objects, spaces, ink, edges и box-decoration.

Значение ink позволяет предотвратить перекрытие элементов оформления текста:

.ink {
  -webkit-text-decoration: darkturquoise solid underline;
  text-decoration: darkturquoise solid underline;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip: ink;
}

Вы получите:

Hippopotamus

Значение objects пропускает оформление элементов, которые имеют отображение встроенного блока.

<p>
  Getting <span>Very</span> Fancy
</p>

.super {
  -webkit-text-decoration: peru solid overline;
  text-decoration: peru solid overline;
  -webkit-text-decoration-skip: objects;
  text-decoration-skip: objects;
}

В результате будет:

Getting Very Fancy

Остальные значения пока плохо поддерживаются браузерами, а именно:

• spaces: оформление не касается пробелов и знаков препинания.
• edges: создает зазор, если два элемента с текстовым оформлением находятся рядом друг с другом.
• box-decoration: оформление пропускает любое унаследованное поле, отступ или границу.

text-underline-position

Свойство text-underline-position – еще один способ управлять позиционированием оформления текста по отношению к глифам. Возможные значения: auto, under, left и right.

При начальном значении auto браузеры обычно размещают оформление близко к базовой линии текста:

.auto {
  -webkit-text-decoration: slateblue solid underline;
  text-decoration: slateblue solid underline;
  -webkit-text-underline-position: auto;
  text-underline-position: auto;
}

Что выглядит так:

Hippopotamus

… и теперь обратите внимание, как с значение under перемещает оформление текста под выносные элементы:

.under {
  -webkit-text-decoration: slateblue solid underline;
  text-decoration: slateblue solid underline;
  -webkit-text-underline-position: under;
  text-underline-position: under;
}

Hippopotamus

Значения left и right для text-underline-position используются для управления оформлением текста в режимах вертикального письма.

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

Can I Use text-decoration? сообщает, что 94% браузеров по всему миру хотя бы частично поддерживают это свойство.

Читайте также: Настройка полосы прокрутки с помощью CSS

Нижнее подчёркивание html или все хитрости оформления текста

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

Насколько вы уже знаете, само нижнее подчеркивание можно задавать вручную, однако у ссылок они установлены по умолчанию. Именно поэтому в статье я напомню вам, как задавать подчеркивание заголовкам, расскажу, как устанавливать нижнюю линию на всю ширину блока, а также как бороться со стандартным форматированием ссылок. Ну что ж, начнем!

А давай-ка вот этим подчеркнем!

В языке html существуют специальный парный тег для подчеркивания текста: <u>слово</u>.

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

Для подчеркивания текстового контента в основном используются такие свойства: border и text-decoration.

Элемент border отвечает за установку рамки вокруг указанного блока, а также позволяет задать толщину линии и ее стиль.

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

1. border- right (справа)
2. border- top (сверху)
3. border- left (слева)
4. border- bottom (снизу)

Также при помощи border можно задать:

• точечное (dotted)
• пунктирное (dashed)
• линейное (solid)
• двойное (double)
• объемное обрамление блокам (groove, inset, ridge и outset)

Не забывайте, что всегда можно повторить стилевые настройки блока-родителя при помощи ключевого слова inherit.

Теперь обсудим свойство языка css text-decoration. Данный элемент отвечает за дополнительные украшения текста.

К ним относятся:

1. мигание (blink)
2. линия над текстом (overline)
3. зачеркнутые объекты (line-through)
4. наследование стилизации (inherit)
5. отмена всех дополнительных декораций (none)
6. необходимое нам подчеркивание (underline)

Настало время практики

Теперь я хочу, чтоб вы закрепили полученные знания и практически опробовали приведенный мной пример программного кода. Для тех, кто знаком с данной темой, это также будет полезно. Как мы все знаем: «Повторение – мать учения!».

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Подчеркивание</title>
  <style>
   h2 {
   text-align:center;
   border-bottom:3px double green;
   padding-bottom: 4px;
   }
   .
  block {
    border: 5px groove green;
    padding: 40px;
    font-size:21px;
   }
   .one {
    text-decoration: none;
    border-bottom: 2px dashed green; 
     color: green;
   }
    .two {
    text-decoration: none;
    color: green;
    font-weight: 900;
   }
    a.two:hover, a.one:hover  {
    color: blue;
   }
  </style>
 </head> 
 <body>
   <h2>Озаглавим текст подчеркнутым названием</h2>
  <div>
    В этом блоке находится важный текст с некоторым описанием чего-то и ссылкой на первый ресурс с пунктирным подчеркиванием. Теперь мы опишем вторую ссылку, убрав стандартное подчеркивание и цвет.
   </div>
 </body>
</html>

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

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

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

С уважением, Роман Чуешов

Прочитано: 2019 раз

Понравилась статья? Поделись с друзьями:

Этот блог уже читают
читай и ты!

html — Тег двойного подчеркивания?

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

 
 веб-сайт  
 

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

• HTML
• CSS

8

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

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

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

0

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

 .doubleUnderline {
    украшение текста: подчеркивание;
    нижняя граница: 1px сплошная #000;
}
 Тест
 

Вот рабочая скрипка.

4

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

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

 h2 {
  нижняя граница: двойная 3px;
}
 

Если вы хотите, чтобы только текст заголовка был «подчеркнут», самый простой способ — использовать внутреннюю разметку, например

 диапазон h2 {
  нижняя граница: двойная 3px;
}
 

1

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

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

2

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

 text-decoration: underline double;
-webkit-text-decoration: двойное подчеркивание;
 

См. строку оформления текста.

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

 <стиль>
дю
{
    строка оформления текста: подчеркивание;
    стиль оформления текста: двойной;
}

 Я хочу, чтобы этот материал был подчеркнут дважды.
 

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

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

или

Введите следующий стиль в любой контейнер HTML:

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

 $borderWidth 1px
$textЦвет черный
$двойные границы
    &:после
        содержание ""
        абсолютная позиция
        топ 100%
        ширина 5,7 см
        справа 0
        верхняя граница ($borderWidth * 3) двойной $textColour
.двойное подчеркивание
    @extend $двойные границы
 

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

1

  
О нас 
 

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

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

css — Как я могу дважды подчеркнуть текст внутри ячейки таблицы html?

спросил 9 лет, 1 месяц назад

Изменено 4 года, 5 месяцев назад

Просмотрено 9к раз

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

 .doubleUnderline {
украшение текста: подчеркивание;
нижняя граница: 1px сплошная #000;
}
 

Но это не то, чего я хотел. Я хочу, чтобы длина двойного подчеркивания была равна длине текстового содержимого.

• HTML
• CSS
• HTML-таблица

17

Я взбил два примера.

С блочными элементами (например, p ) вы можете использовать встроенный блок , чтобы он не занимал всю длину страницы, а только текст.

 диапазон{
  нижняя граница: 1px сплошная # 000;
  украшение текста: подчеркивание;
}
        
п{
  нижняя граница: 1px сплошная # 000;
  украшение текста: подчеркивание;
  дисплей: встроенный блок;
} 

 Это вам текст


Это тоже текст для вас
 

Попробуйте это:

 <диапазон> Общий итог: ###,###,###.