Html двойное подчеркивание: Нестандартное подчёркивание текста на чистом CSS. Свойство text-decoration — журнал «Доктайп»
28.06.2023
Разное
Оформление подчеркиваний в CSS | 8HOST.COM
30 апреля, 2022 12:05 пп 105 views | Комментариев нетDevelopment | Amber | Комментировать запись
CSS Text Decoration Module Level 3 предоставляет нам несколько новых замечательных способов оформления текста, – и браузеры, наконец, начинают их поддерживать. Времена, когда для изменения цвета подчеркивания приходилось использовать border-bottom, скоро останутся позади.
Примечание: Результаты в разных браузерах могут отличаться. Поддержка данного модуля по-прежнему ограничена, поэтому примеры в этом посте могут отображаться некорректно в зависимости от используемого вами браузера.
Свойство text-decoration
Свойство text-decoration раньше поддерживало только значения none, underline, overline и line-through, но сейчас оно становится сокращением для новых свойств text-decoration-color, text-decoration-style и text-decoration-line и поддерживает их значения.
.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
Tags: CSSНижнее подчёркивание html или все хитрости оформления текста
Приветствую всех, кто жаждет новых знаний и читает мой блог. Публикацию сегодняшнего дня я хочу посвятить весьма легкой теме, которая тем не менее регулярно вызывает ряд вопросов у новичков: «Как убрать или добавить нижнее подчеркивание html».
Насколько вы уже знаете, само нижнее подчеркивание можно задавать вручную, однако у ссылок они установлены по умолчанию. Именно поэтому в статье я напомню вам, как задавать подчеркивание заголовкам, расскажу, как устанавливать нижнюю линию на всю ширину блока, а также как бороться со стандартным форматированием ссылок. Ну что ж, начнем!
А давай-ка вот этим подчеркнем!
В языке html существуют специальный парный тег для подчеркивания текста: <u>слово</u>.
Однако профессиональные верстальщики пользуются механизмами стилевых каскадных таблиц, т.е. css, для оформления внешнего вида всего сайта. И это правильно. Такой подход разделяет разметку от стилизации, делает форматирование гибким и удобным. К тому же так легче отловить баги (ошибки) в коде.
Для подчеркивания текстового контента в основном используются такие свойства: border и text-decoration.
Элемент border отвечает за установку рамки вокруг указанного блока, а также позволяет задать толщину линии и ее стиль.
Данная единица языка достаточно гибкая, так как можно указать форматирование для отдельных сторон границы. Достигается это при помощи свойств:
- border- right (справа)
- border- top (сверху)
- border- left (слева)
- border- bottom (снизу)
Также при помощи border можно задать:
- точечное (dotted)
- пунктирное (dashed)
- линейное (solid)
- двойное (double)
- объемное обрамление блокам (groove, inset, ridge и outset)
Не забывайте, что всегда можно повторить стилевые настройки блока-родителя при помощи ключевого слова inherit.
Теперь обсудим свойство языка css text-decoration. Данный элемент отвечает за дополнительные украшения текста.
К ним относятся:
- мигание (blink)
- линия над текстом (overline)
- зачеркнутые объекты (line-through)
- наследование стилизации (inherit)
- отмена всех дополнительных декораций (none)
- необходимое нам подчеркивание (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; } . |
На этой ноте я заканчиваю обучающую публикацию. В ней рассмотрены все необходимые инструменты для подчеркивания текстового контента, зная которые вы можете создавать свои варианты оформления страниц веб-сайтов.
Еще интересную статью можете почитать про вертикальные линии, где я подробно рассказал про интересные моменты и некоторые секретные украшательства.
Не забывайте вступать в ряды моих подписчиков, ведь впереди еще множество интересных и полезных тем, а также делитесь ссылкой блога с друзьями. Пока-пока!
С уважением, Роман Чуешов
Прочитано: 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 пиксель между ними).
Детали зависят от разметки, желаемой ширины и цвета двойной линии, а также от того, должна ли она проходить по доступной ширине. Разметка как веб-сайт
, вероятно, не является серьезным. С простой разметкой
способ получить минимальную двойную рамку на странице — использоватьfoobar
h2 { нижняя граница: двойная 3px; }
Если вы хотите, чтобы только текст заголовка был «подчеркнут», самый простой способ — использовать внутреннюю разметку, например foobar
, и код CSS
диапазон 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?
спросил
Изменено 4 года, 5 месяцев назад
Просмотрено 9к раз
Оба подчеркивания должны иметь длину, соответствующую содержимому текста. Я столкнулся с другим подобным вопросом, где принятым решением было использование
.doubleUnderline { украшение текста: подчеркивание; нижняя граница: 1px сплошная #000; }
Но это не то, чего я хотел. Я хочу, чтобы длина двойного подчеркивания была равна длине текстового содержимого.
- HTML
- CSS
- HTML-таблица
17
Я взбил два примера.
С блочными элементами (например, p
) вы можете использовать встроенный блок
, чтобы он не занимал всю длину страницы, а только текст.
диапазон{ нижняя граница: 1px сплошная # 000; украшение текста: подчеркивание; } п{ нижняя граница: 1px сплошная # 000; украшение текста: подчеркивание; дисплей: встроенный блок; }
Это вам текст
Это тоже текст для вас
Попробуйте это:
<диапазон> Общий итог: ###,###,###. Comments
Leave a Comment