Содержание

Safari игнорирование text:decoration:underline; — CodeRoad



Я не могу заставить подчеркивание работать в safari, похоже, он выбирает стиль ссылки по умолчанию underline none, а не css ниже.

Есть какие-нибудь идеи, что может быть причиной этого?

div.header .container .accountPannel .top a.alias { color:#fff; font-size:10px; float:left; text-decoration:underline !important; max-width:108px; overflow:hidden;}

Заранее спасибо.

css safari underline text-decorations
Поделиться Источник treasureireland     21 сентября 2013 в 14:08

2 ответа




1

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

Итак, что, вероятно, произошло, так это то, что у вас есть

text-decoration: none !important;

в вашей пользовательской таблице стилей.

И пользовательские таблицы стилей всегда переопределяют таблицы стилей документов. Таким образом, независимо от того, помещаете ли вы !important в документ или нет, пользовательский стиль всегда будет действовать.

Решение: отредактируйте таблицу стилей пользователя, чтобы просто читать

text-decoration: none;

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

Поделиться Mr Lister     22 сентября 2013 в 08:49



1

Украшения не распространяются на плавающие или абсолютно расположенные потомки, а также на встроенные таблицы или встроенные блоки потомков.

Поделиться tsanchev     31 октября 2013 в 22:18


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


Полная перезагрузка страницы на Post/Redirect/Get игнорирование контроля кэша

У меня есть страница, которая загружает много изображений, css и javascript. Я добавил заголовок far future Expires и установил Cache-Control в public для этих внешних зависимостей, чтобы они были…


Safari: игнорирование многих CSS

Мы начали тестировать наш сайт в разных браузерах, и все они работают нормально, кроме Safari (Mac & windows). Редактировать: Удален url! На нашей страничке. Изображение не плавает правильно, а…


Safari игнорирование tabindex

У меня есть 2 кнопки рядом с textbox и еще одна textbox после 2 кнопок. Tabindex для первого textbox равен 1000, первая кнопка-1001, а вторая-1002. Второй textbox имеет tabindex 1003. Когда я…


Как отменить игнорирование bzr?

Я по ошибке так и сделал bzr ignore Для некоторых файлов, которые я не хочу игнорировать. Как мне отменить игнорирование?


Проблема с открытием URL во всплывающем окне с Safari мобильного телефона на iPhone. Игнорирование параметров

Я создаю веб-приложение (на основе Phonegap), оптимизированное для iPhone. Я должен интегрировать всплывающее окно, которое откроет нашу страницу twitter и не должно помещаться на весь экран (для…


Safari игнорирование типа mime

Следующая выдержка из страницы JSP показывает настройки ‘content-type’ и ‘content-disposition’. Страница должна предоставить пользователю таблицу HTML, которая может быть импортирована в Excel….


Safari игнорирование / удаление якорей (или «hashtags») при нажатии гиперссылок?

Мне нужно указать одну страницу на другую, а затем перейти к определенному разделу. В Chrome и Firefox использование URL как www.example.com#section1 делает свое дело. (#section1 может быть…


IOS 7 safari игнорирование тега видового экрана

Если вы посмотрите на этот сайт в Safari на устройстве IOS7, вы увидите, что содержимое немного увеличено, и страницу можно прокручивать горизонтально. Он не делает этого на других мобильных…


Safari игнорирование html5 атрибут приглушенного видео

Не знаю, что я делаю не так,но я не могу заставить safari отключить мое видео, даже если оно определено. он работает в других браузерах, но не в safari. Поддерживает ли он этот атрибут?? Я бы…


Игнорирование Исключения

Когда я попытаюсь понять приведенный ниже код, мы будем использовать WebDriverWait для ожидания элемента на веб-странице, чтобы избежать NoSuchElementException, но опять же, почему мы используем…

Свойство text-decoration-style — тип линии у текста

Свойство text-decoration-style меняет тип линии над текстом: одиночная линия, двойная, в виде точек, в виде тире, волнистая линия.

Свойство следует использовать совместно со свойствами text-decoration-line и text-decoration-color. Эти свойства расширяют действие свойства text-decoration, являясь более продвинутыми аналогами.

Синтаксис

селектор { text-decoration-line: solid | double | dotted | dashed | wavy; }

Значения

Значение Описание
solid Сплошная линия.
double Двойная линия.
dotted Линия в виде точек.
dashed Линия в виде тире.
wavy Волнистая линия.

Значение по умолчанию: solid.

Пример . Значение wavy

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

<div> Lorem ipsum dolor sit amet. </div> #elem { text-decoration-style: wavy; text-decoration-color: red; text-decoration-line: underline; }

:

Пример . Значение dotted

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

<div> Lorem ipsum dolor sit amet. </div> #elem { text-decoration-style: dotted; text-decoration-color: red; text-decoration-line: underline; }

:

Пример . Значение double

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

<div> Lorem ipsum dolor sit amet. </div> #elem { text-decoration-style: double; text-decoration-color: red; text-decoration-line: line-through; }

:

html — Как сделать text-decoration: underline с отступом 2px?

Мне нравится, когда послушный разработчик Frotend должен создавать подчеркивание с отступом 2px вместо 1px по умолчанию. Есть ли для этого простое решение?

PS Ага, ребята, я знаю про div с черным цветом фона и 1px * Npx и position: relative, но это так медленно …

24

NiLL 7 Ноя 2011 в 18:26

10 ответов

Лучший ответ

Вы можете заключить текст в span и присвоить ему border-bottom с padding-bottom:2px;.

Вот так

span{
    display:inline-block;
    border-bottom:1px solid black;
    padding-bottom:2px;
}

Пример: http://jsfiddle.net/uSMGU/.

45

Jason Gennaro 7 Ноя 2011 в 14:30

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

.yourElement{
border-bottom: 1px solid #000;
line-height: 2;
}

0

Humanoid 27 Авг 2020 в 00:21

Вы можете сделать это с помощью небольшого взлома, используя элементы :: after и позиционируя их вручную. Это означает, что вы должны поддерживать атрибут content элемента after, но вы можете упростить это, используя атрибут данных в теге html и ссылаясь на него. См. Пример ниже —

span:after {
    font-size: 1rem;
    position: absolute;
    content: 'Hello there..';
    width: 100%;
    height: 100%;
    white-space: pre;
    text-decoration-skip-ink: none;
    text-decoration-line: underline;
    left: 0px;
    top: 10px;
    color: white;
    z-index: -1;
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: black;
}

span {
  position: relative;
}
<span>Hello there</span>

0

Johnny 16 Июн 2020 в 18:21

Я использовал решение @jake, но у меня возникли проблемы с горизонтальным выравниванием.

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

Я исправил это следующим образом:

a.nav_link-active {
  color: $e1-red;
  margin-top: 3.7rem;
}
a.nav_link-active:visited {
  color: $e1-red;
}
a.nav_link-active:after {
  content: '';
  margin-top: 3.3rem;      // margin and height should
  height: 0.4rem;          // add up to active link margin
  background: $e1-red;
  display: block;
}

Это сохранит для вас горизонтальное выравнивание.

0

agm1984 3 Ноя 2017 в 06:46

Это мое решение …

HTML

<p>hola dasf  hola dasdsaddasds dsadasdd<span></span></p>

CSS

p {
  color: red;
  text-decoration: none;
  position: absolute;
}
a:hover {
    color: blue;
}
p span {
    display:block;
    border-bottom:3px solid black;
    width: 50%;
    padding-bottom: 4px;
}

0

yvesmancera 21 Авг 2015 в 17:45

#line{ text-decoration-line: underline; text-underline-offset: 1px; }
<div>
Text with line
</div>

Просто используйте

{
    text-decoration-line: underline;
    text-underline-offset: 2px;
}

5

Cem Kaan 27 Авг 2020 в 20:00

Как насчет использования border-bottom:1px; padding:what-you-likepx

7

Alex 7 Ноя 2011 в 14:30

Просто используйте:

text-decoration: underline;
text-underline-position: under;

8

Shree 11 Сен 2020 в 08:49

Для перекрестного просмотра лучше использовать text-underline-offset вместо text-underline-position, потому что text-underline-position не поддерживается iOS Safari

Так что используйте этот ответ: https://stackoverflow.com/a/63607426/1894907

#line{
    text-decoration-line: underline;
    text-underline-offset: 2px;
}

9

Ruslan Korkin 8 Янв 2021 в 13:54

Отличный способ сделать это без добавления дополнительных промежутков и большего контроля — использовать селектор :after.

Особенно полезно для меню навигации:

.active a:after {
    content: '';
    height: 1px;
    background: black; 
    display:block;
}

Если вы хотите, чтобы между текстом и подчеркиванием было больше или меньше места, добавьте margin-top.

Если вы хотите более толстое подчеркивание, добавьте больше height:

.active a:after {
    content: '';
    height: 2px;
    background: black; 
    display:block;
    margin-top: 2px;
}

15

jake 20 Июн 2016 в 11:10

текст-украшение | CSS-уловки

Свойство text-decoration добавляет подчеркивание, наложение, сквозную линию или комбинацию строк к выделенному тексту.

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

Значения

  • нет : линия не рисуется, и все существующие украшения удаляются.
  • подчеркивание : рисует линию в 1 пиксель поперек текста у его базовой линии.
  • сквозной : рисует линию размером 1 пиксель поперек текста в его «средней» точке.
  • overline : рисует линию размером 1 пиксель по тексту непосредственно над его «верхней» точкой.
  • наследовать : наследует украшение родителя.

blink Значение указано в спецификации W3C, но устарело и не будет работать ни в одном текущем браузере. Когда это сработало, он заставил текст «мигать», быстро переключая его непрозрачность между 0% и 100%.

Демо

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

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

  п {
  текст-украшение: подчеркивание подчеркивание через строку;
}  

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

text-decoration как сокращенное свойство

text-decoration может использоваться в сочетании с text-decoration-style и text-decoration-color как сокращенное свойство:

  .fancy-underline {
  текст-украшение-строка: подчеркивание;
  стиль оформления текста: волнистый;
  цвет оформления текста: красный;
 
  / * можно сократить до * /
  текст-украшение: подчеркивание волнистым красным цветом;
}  

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

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

Все браузеры поддерживают свойство CSS2.1 «от руки» text-decoration . Сокращенное свойство и вложенные свойства text-decoration-color , text-decoration-line и text-decoration-style поддерживаются без префикса в Firefox и с префиксом -webkit в Safari.Chrome также распознает эти значения с префиксом -webkit и включенным флагом экспериментальных веб-платформ.

Настольный компьютер
мобильный
Chrome Firefox IE Edge Safari
95 93 Нет 92
Android Chrome Android Firefox Android iOS Safari
92 90 92 14.5-14,7 *

Дополнительная информация

Связанные

подчеркивания стиля в Интернете

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

Существует множество различных способов стилизации подчеркивания. Может быть, вы помните статью «Крафт», в которой подчеркивается ссылка на Medium.Medium не пытался сделать ничего сумасшедшего; они просто хотели создать довольно нормальную линию под текстом.

Тонкая черная линия подчеркивания с пространством вокруг нижних элементов — через Marcin Wichary, ссылка Crafting подчеркивается на Medium

. Это довольно простое подчеркивание, но оно хорошего размера и без нижних элементов. Определенно лучше, чем по умолчанию в большинстве браузеров. Что ж, оказалось, что Medium пришлось пройти через множество трудностей, чтобы этот стиль появился в сети. Два года спустя так же трудно создать красивый подчеркивание.

Голы

Что плохого в использовании text-decoration: underline ? Если мы говорим об идеальном сценарии, подчеркивание должно уметь делать следующее:

  • Расположить себя ниже базовой линии
  • Пропускные устройства
  • Изменить цвет, толщину и стиль
  • Повторить обернутый текст
  • Работа на любом фоне

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

Подходит к

Итак, какими разными способами мы можем подчеркнуть текст в Интернете?

Вот те, о которых я могу думать:

  • текст-оформление
  • край нижний
  • тень коробки
  • фоновое изображение
  • SVG фильтры
  • Underline.js (холст)
  • текст-украшение- *

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

оформление текста

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

См. Демонстрацию.

Самая большая проблема с text-decoration — это отсутствие возможности настройки. Он использует цвет и размер шрифта любого текста, к которому он применяется, и нет возможности кроссбраузерности изменить стиль.Подробнее об этом позже.

Хорошо
  • Простота использования
  • Расположен ниже базовой линии
  • Пропускает дескрипторы по умолчанию в Safari и iOS
  • Обтекание строк
  • Работает на любом фоне
Плохо
  • Не удается пропустить нисходящие элементы в других браузерах
  • Невозможно изменить цвет, толщину или стиль
граница нижняя

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

Так выглядит border-bottom на встроенных элементах:

См. Демонстрацию.

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

См. Демонстрацию.

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

См. Демонстрацию.

На данный момент имеется четырех свойств , стилизованных под одно подчеркивание. Это намного больше, чем text-decoration .

Хорошо
  • Можно пропустить нижние элементы с использованием text-shadow
  • Может изменять цвет, толщину и стиль
  • Может переходить и анимировать цвет и толщину
  • Обертывание по умолчанию, если это не встроенный блок
  • Работает на любом фоне, если не используется text-shadow
Плохо
  • Расположен далеко и трудно переставить
  • Множество несвязанных объектов недвижимости в самый раз
  • Неровное выделение текста при использовании text-shadow
тень коробки

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

См. Подчеркивание пера 5: тень блока от Джона Д. Джеймсона (@johndjameson) на CodePen.

Вы можете использовать тот же трюк text-shadow для имитации промежутков между подчеркиванием и нижними элементами текста. Но если линия отличается по цвету от текста — или даже достаточно тонкая — она ​​на самом деле не конфликтует, как text-decoration .

Хорошо
  • Может располагаться ниже базовой линии
  • Может пропускать дескрипторы с использованием text-shadow
  • Может менять цвет и толщину
  • Обтекание строк
Плохо
  • Невозможно изменить стиль
  • Не работает ни на одном фоне
фоновое изображение

background-image ближе всего ко всему, что мы хотим, и с наименьшим количеством ошибок.Идея состоит в том, что вы используете linear-gradient и background-position для создания изображения, которое повторяется горизонтально по строкам текста.

Вам потребуется display: inline; тоже такой подход.

См. Демонстрацию.

В этом подходе не обязательно использовать linear-gradient . Вы можете принести свое собственное фоновое изображение для некоторых интересных эффектов.

См. Демонстрацию.

Хорошо
  • Может располагаться ниже базовой линии
  • Может пропускать дескрипторы с использованием text-shadow
  • Может изменять цвет, толщину (позволяет половину пикселей) и стиль
  • Работает с пользовательскими изображениями
  • Обертывание по строкам
  • Работает на любом фоне, если не используется text-shadow
Плохо
  • Изображение может изменяться по-разному в зависимости от разрешения, браузера и уровня масштабирования
SVG фильтры

Вот подход, с которым я экспериментировал: фильтры SVG.Вы можете создать встроенный элемент SVG filter , который рисует линию, а затем расширяет текст, чтобы замаскировать части линии, которые мы хотим сделать прозрачными. Затем вы можете присвоить фильтру идентификатор и ссылаться на него в CSS с помощью чего-то вроде фильтра : url (‘# svg-underline’) .

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

См. Демонстрацию.

Вот как это выглядит в Chrome и Firefox:

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

в IE, Edge и Safari проблематична. Трудно проверить поддержку фильтра SVG в CSS. Вы можете использовать @supports с фильтром , но это только проверяет, работает ли ссылка , а не сам примененный фильтр. Мой подход заканчивается довольно грубым обнюхиванием браузера, так что удвойте и это.

Плюсы
  • Расположен ниже базовой линии
  • Пропускные устройства
  • Возможность изменения цвета, толщины и стиля
  • Работает на любом фоне
Минусы
  • Не переносит строки
  • Не работает в IE, Edge или Safari, но вы можете вернуться к text-decoration .Подчеркивания в Safari в любом случае выглядят хорошо.
Underline.js (холст)

Underline.js завораживает. Я думаю, это очень впечатляет, что Вэньдин Чжан смог сделать с JavaScript и с некоторым вниманием к деталям. Если вы раньше не видели техническую демонстрацию Underline.js, определенно перестаньте читать на минуту и ​​посмотрите ее. Есть захватывающий девятиминутный доклад о том, как это работает, но я дам вам короткую версию: он подчеркивает элементов .Это новый подход, который на удивление хорошо работает.

Несмотря на броское название, Underline.js — это техническая демонстрация только . Это означает, что вы не сможете вставить его в какие-либо проекты, не изменив сначала целую кучу.

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

text-decoration- * свойства

Помните часть «об этом позже»? Ну вот и мы.

text-decoration отлично работает сам по себе, но вы можете добавить несколько экспериментальных свойств, чтобы настроить его внешний вид:

  • цвет текстового оформления
  • текст-украшение-пропустить
  • стиль оформления текста

Только не волнуйтесь. Вы знаете, браузер поддерживает .

текст-украшение-цвет

text-decoration-color позволяет изменять цвет подчеркивания отдельно от цвета текста.Это свойство даже имеет лучшую, чем ожидалось, поддержку браузера — оно работает в Firefox и имеет префикс в Safari. Вот в чем загвоздка: если вы не очищаете нижние элементы, Safari помещает строку поверх текста . 🙃

Firefox:

Safari:

текст-украшение-пропустить

text-decoration-skip включает пропуск нижних элементов в подчеркнутом тексте.

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

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

стиль оформления текста

text-decoration-style предлагает те же типы линий, которые вы ожидаете от border-style , но добавляет также волнистых линий .

Вот различные значения, которые вы можете использовать:

  • штриховая
  • пунктир
  • двойной
  • цельный
  • волнистый

Сейчас text-decoration-style работает только в Firefox, поэтому вот скриншот:

Ассортимент однотонных стилей подчеркивания

Знакомо?

Что не хватает?

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

Проведя небольшое исследование, я обнаружил эти два свойства:

  • ширина подчеркивания текста
  • текст-подчеркивание-позиция

Похоже, они были включены в более ранние черновики CSS, но так и не были реализованы из-за отсутствия интереса. Эй, не вини меня.

Еда на вынос

Итак, как лучше всего подчеркнуть текст?

Это зависит от обстоятельств.

Для мелкого текста я рекомендую использовать text-decoration , а затем оптимистично применить text-decoration-skip поверх. В большинстве браузеров это выглядит несколько мягко, но подчеркивание всегда так выглядело, и люди, похоже, не возражают. К тому же всегда есть шанс, что если вы проявите достаточно терпения, все ваши подчеркивания позже будут выглядеть великолепно, и вам не придется ничего менять.

Для основного текста, вероятно, используйте подход background-image .Он работает, выглядит отлично, и для этого есть примеси Sass. Вы, вероятно, можете опустить text-shadow , если подчеркивание тонкое или отличается от цвета текста.

Для отдельных строк текста используйте border-bottom и любые другие свойства, которые вы хотите использовать.

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

В будущем, когда поддержка браузеров улучшится, ответ будет text-decoration- * полностью.


См. Также сообщение Бенджамина Вудраффа «CSS Underlines Suck», которое по совпадению действует аналогичным образом.

Как подчеркнуть текст в CSS

Свойство text-decoration CSS используется для украшения содержимого текста. Он может добавлять строки выше, ниже и сквозь текст. Это свойство CSS украшает текст несколькими видами строк. Это сокращение для text-decoration-line, text-decoration-color и text-decoration-style .

Свойство text-decoration-line используется для подчеркивания текста. Это свойство имеет три значения: надчеркнутый, подчеркнутый, или сквозной . Итак, значение подчеркивания используется для подчеркивания текста в CSS. Это значение рисует подчеркивание под встроенным текстом.

Пример

оформление текста <стиль> h2 { цвет синий; } тело { выравнивание текста: центр; } п{ размер шрифта: 25 пикселей; } # p1 { оформление текста: подчеркивание; цвет оформления текста: синий; }

Добро пожаловать в javaTpoint.com

Привет, добро пожаловать на сайт javaTpoint.com. Этот сайт разработан для того, чтобы студенты могли легко изучать технологии, связанные с информатикой. JavaTpoint.com всегда предоставляет простые и подробные учебники по различным технологиям. Никто не совершенен в этом мире, и ничто не вечно лучше. Но мы можем попытаться стать лучше.

Проверить это сейчас

Выход

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

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

Пример

В этом примере мы также используем свойство text-decoration-style , которое обеспечивает стиль подчеркивания выделенного текста. Мы используем значение double этого свойства. Здесь есть два элемента , которые содержат текст, который необходимо подчеркнуть.

оформление текста <стиль> h2 { красный цвет; } тело { выравнивание текста: центр; } п{ размер шрифта: 25 пикселей; } охватывать { оформление текста: подчеркивание; цвет оформления текста: красный; стиль оформления текста: двойной; }

Добро пожаловать в

javaTpoint.com

Привет, добро пожаловать на сайт javaTpoint.com. Этот сайт разработан для того, чтобы студенты могли легко изучать технологии, связанные с информатикой. На javaTpoint.com всегда есть легкие и подробные учебники по различным технологиям. Никто в этом мире не совершенен, и ничто не может быть лучшим в вечности. Но мы можем попытаться стать лучше.

Проверить это сейчас

Выход


CSS: свойство text-decoration

.

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

Описание

Свойство CSS text-decoration определяет форматирование текста элемента, такое как подчеркивание, надчеркнутый, сквозной штрих и мигание.

Синтаксис

Синтаксис CSS-свойства text-decoration:

.
  текст-украшение: значение;  

Параметры или аргументы

значение

Форматирование текста. Это может быть одно из следующих значений:

Элемент
Значение Описание
подчеркивание Текст с подчеркиванием
div {text-decoration: underline; }
дополнительный Текст имеет строку, отображаемую над ним
div {text-decoration: overline; }
линейный Текст имеет линию посередине
div {text-decoration: line-through; }
мигает Мигает текст
div {украшение текста: мигает; }
нет Текстовое оформление не применяется к тексту
div {text-decoration: none; }
наследовать унаследует оформление текста от своего родительского элемента
div {украшение текста: наследование; }

Примечание

  • Некоторые браузеры могут игнорировать мигание text-decoration.

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

Свойство CSS text-decoration имеет базовую поддержку в следующих браузерах:

  • Хром
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Телефон
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Пример

Мы обсудим свойство text-decoration ниже, исследуя примеры использования этого свойства в CSS.

Использование подчеркивания

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

  a: hover {color: # 4A6593; оформление текста: подчеркивание; }  

В этом примере оформления текста CSS текст будет подчеркиваться при наведении курсора на ссылку.

Использование сквозной линии

Далее, давайте рассмотрим пример оформления текста CSS, в котором применяется оформление текста от строки до .

  span {text-decoration: line-through; }  

В этом примере CSS-оформления текста мы установили для элемента text-decoration значение от строки до в теге .

Не используется

Давайте посмотрим на пример CSS-украшения текста, в котором мы удаляем текстовое оформление.

  a: ссылка, a: активный, a: посещенный {text-decoration: none; }  

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

Подчеркивание с помощью CSS — tempertemper

Если вы не подчеркиваете ссылки, то должны. Есть несколько способов подчеркнуть ссылки; text-decoration: подчеркивание является наиболее очевидным, поскольку именно так оформляются ссылки по умолчанию, а border-bottom предлагает нам немного больше гибкости. Используя границы, можно указать толщину, стиль и цвет, но знаете ли вы, что теперь это можно сделать с помощью text-decoration: underline ?

Зачем беспокоиться, если это уже работает для нас с границами? Что ж, text-decoration: подчеркивание лучше типографически , поскольку подчеркивания хорошо сидят на базовой линии слов, проходя через нисходящие элементы (части букв, которые идут ниже базовой линии в таких буквах, как g , p и y ), тогда как border-bottom подчеркивания располагаются под под нижним нижним элементом , что означает слишком большое расстояние между словами и их подчеркиванием, когда.

Не только это, но браузеры теперь обнаруживают нисходящие элементы, а text-decoration underline аккуратно пропускает их по умолчанию. Это можно отменить с помощью text-decoration-skip-ink (или text-decoration-skip в Safari), но я не вижу, что это даст, поэтому по умолчанию он включен.

Итак, как нам получить этот визуальный эффект с text-decoration: underline , который у нас всегда был через border-bottom ?

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

Здесь мы говорим о подчеркивании, но стоит сделать это заранее с небольшим касательным: text-decoration-line , как и text-decoration , имеет 3 позиции:

  • Под текстом ( подчеркнуть )
  • По тексту ( сквозная )
  • Над текстом ( над текстом )

text-decoration-line также допускает несколько значений, поэтому мы можем иметь строки под, сквозь и над одним и тем же блоком текста.Немного странно, но оно есть:

  оформление текста: подчеркивание; 
text-decoration-line: подчеркивание поверх;

Как выглядит подчеркивание

Вернуться к подчеркиванию. Теперь у нас есть контроль над тем, как они выглядят, с помощью text-decoration-style ; есть 5 вариантов:

  • штриховая
  • двойной
  • пунктир
  • цельный
  • волнистый

Каждый из них выглядит так, как вы ожидаете, с двойной линией, волнистой линией и т. Д.Просто добавьте объявление text-decoration-style :

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

Цвет подчеркивания

Отличный. text-decoration-color позволяет изменить цвет подчеркивания. Он принимает любое нормальное значение цвета CSS, будь то ключевое слово, шестнадцатеричное, RGB, RGBA, HSL и т. Д .:

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

Просто убедитесь, что подчеркивание соответствует желаемой цветовой контрастности!

Утолщение подчеркивания

Наконец, мы можем контролировать толщину подчеркивания с text-decoration-Thickness , например:

  оформление текста: подчеркивание; 
толщина украшения текста: 5 пикселей;

Комбинации

Конечно, мы можем делать лоты одновременно:

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

Или мы можем использовать text-decoration-line вместо text-decoration :

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

стенография

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

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

Обратите внимание, что в этом примере я не добавил свойство text-decoration-Thickness .Для этого есть веская причина: поддержка браузера.

Прогрессивное улучшение

Стиль подчеркивания хорошо поддерживается всеми современными браузерами. Более старые версии (и Internet Explorer 11 и ниже, разумеется) должны получить стандартный, но все же очень удобный для пользователя подчеркивание, если в вашем сбросе CSS нет ничего подобного:

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

Но имейте в виду, поддержка браузером зависит от:

  • имущество, которое вы используете
  • ценности в собственности

Префиксы, необходимые для сокращения

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

  текст-оформление: подчеркивание волнистым красным; 
-webkit-text-decoration: подчеркивание волнистым красным цветом;

Достаточно просто сделать, если вы автоматизируете что-то с помощью Autoprefixer, и не слишком много дополнительной работы, если вы пишете его от руки.Опять же, браузеры, которые не поддерживают сокращение text-decoration , должны просто вернуться к этому подчеркиванию по умолчанию.

text-decoration-Thickness не так хорошо поддерживается, как другие

Браузер поддерживает text-decoration-line , text-decoration-style и text-decoration-color довольно хорошо. Все три браузера реализованы одновременно, но управление толщиной подчеркивания было введено намного позже.Фактически, в настоящее время его поддерживают только Safari и Firefox, поэтому мы все еще ждем Chrome (и, следовательно, Opera и Edge).

Более того, Firefox в настоящее время является браузером only для поддержки толщины в сокращении, поэтому, если вы хотите использовать толщину в сокращении, вам нужно будет сделать классическое двойное объявление, чтобы другие браузеры получили значение, которое они понимают:

  оформление текста: сплошной красный подчеркивание; 
text-decoration: подчеркивание сплошным красным 5px;

текст-украшение-толщина и проценты не играют хорошо

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

Хорошая новость заключается в том, что процентные значения рассчитываются как процент от 1em, поэтому text-decoration-Thickness: 0,1em совпадает с text-decoration-Thickness: 10% , так что вы можете также придерживаться em s, поскольку они фактически делают то же самое.

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

толщина текстового декора беспорядок

Будьте осторожны при объединении text-decoration-style с text-decoration-Thickness . Все, кроме сплошной линии по умолчанию (и, возможно, двойной линии ), может выглядеть неаккуратно, если толщина установлена ​​слишком большой. Эти волнистые , пунктирные и пунктирные почти всегда обычно обрезаются в неопрятных местах, когда они пропускают нижние элементы, и в конце слова.

Рекомендации по удобству использования

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

Значит, у вас все в порядке, если вам нужно:

  • другой цвет подчеркивание
  • прогрессивно увеличивающаяся толстая линия подчеркивания
  • может быть даже двойное подчеркивание

Но будьте осторожны со всем остальным:

  • text-decoration-line: line-through — это в основном то, как выглядят элементы с зачеркиванием
  • text-decoration-line: overline выглядит странно, и текст над ссылкой может выглядеть как ссылка
  • волнистый , пунктир или пунктир подчеркивания может выглядеть как орфографические или грамматические ошибки в текстовом документе, а не как ссылки

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

Что бы я сделал

Shorthand поставляется с префиксами поставщиков и изворотливыми двойными объявлениями, поэтому я бы начал с классического text-decoration: underline; и улучшите его. Я был бы склонен избегать чего-либо, кроме прямого подчеркивания, которое хорошо известно пользователям, поэтому text-decoration-line отсутствует; что оставляет у меня всплеск цвета и приятную толщину на основе для браузеров, отличных от Chromium:

  a {
оформление текста: подчеркивание;
цвет-оформления-текста: красный;
толщина украшения текста: 0.1em;
}

CSS Text Decoration: Пошаговое руководство

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

Найди свой матч на тренировочном лагере