Underline css: text-decoration-style | htmlbook.ru

Выход

Настроить подчеркивание с помощью оформления текста в CSS

Хотя в этом руководстве содержится контент, который, по нашему мнению, принесет большую пользу нашему сообществу, мы еще не тестировали или отредактировал его, чтобы обеспечить безошибочное обучение.Это в нашем списке, и мы над этим работаем! Вы можете помочь нам, нажав кнопку «сообщить о проблеме» в нижней части руководства.

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

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

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

Свойство text-decoration раньше предназначалось только для выбора между значениями none, underline, overline и line-through, но с новой рекомендацией оно становится сокращением для новых text-decoration-color, text-decoration-style и свойства text-decoration-line. Например, вот цветное двойное подчеркивание:

 .изысканный {
  -webkit-text-decoration: двойное подчеркивание горячим розовым цветом;
  оформление текста: двойное подчеркивание горячим розовым цветом;
}
  

Необычный подчеркивание

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

Работает так, как вы можете себе представить. Наконец-то появился способ изменить цвет оформления текста!

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

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

  .wavy {
  оформление текста: подчеркивание;
  -webkit-text-decoration-color: лосось;
  текст-украшение-цвет: лосось;
  -webkit-text-decoration-style: волнистый;
  стиль оформления текста: волнистый;
}
  

Волнистое украшение

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

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

 .наносить удар {
  -webkit-текст-украшение-цвет: красный;
  цвет оформления текста: красный;
  -webkit-text-decoration-line: сквозная строка;
  текст-украшение-строка: сквозная строка;
}
  

Ударьте

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

С помощью text-decoration-skip мы можем избежать того, чтобы украшение перешагнуло через части элемента, к которому оно применяется. Возможные значения: объекты, пробелы, чернила, края и украшение коробки.

• ink: Наконец, способ предотвратить наложение элементов текста глифов при декорировании текста:

 .чернила {
  -webkit-text-decoration: темно-бирюзовое сплошное подчеркивание;
  оформление текста: темно-бирюзовое однотонное подчеркивание;
  -webkit-text-decoration-skip: чернила;
  текст-украшение-пропуск: чернила;
}
  

Бегемот

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

  

  Становится  очень  модным

  

  .super {
  -webkit-text-decoration: Перу сплошная линия поверх;
  оформление текста: Перу сплошная линия;
  -webkit-text-decoration-skip: объекты;
  текст-украшение-пропуск: объекты;
}
  

Очень необычно

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

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

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

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

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

 .auto {
  -webkit-text-decoration: синее сплошное подчеркивание;
  оформление текста: грифельно-синее сплошное подчеркивание;
  -webkit-текст-подчеркивание-позиция: авто;
  положение подчеркивания текста: авто;
}
  

Бегемот

… и теперь обратите внимание, как нижний элемент оформления помещается после нижних нижних элементов текста:

  .under {
  -webkit-text-decoration: синее сплошное подчеркивание;
  оформление текста: грифельно-синее сплошное подчеркивание;
  -webkit-text-underline-position: под;
  текст-подчеркивание-позиция: под;
}
  

Бегемот

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

А теперь продолжайте и поразите нас необычным оформлением текста!

Поддержка браузера: Могу ли я использовать текстовое оформление с 2020 года? показывает, что 94% браузеров по всему миру хотя бы частично поддерживают это свойство.

Подчеркнуть текст CSS: как подчеркнуть текст в CSS?

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

Хотя снаружи есть новый мир, и старые вещи улучшаются, по крайней мере, в несколько этапов. Элементы ссылки больше не нужно подчеркивать, а строка под текстом сегодня — это не просто идентификация ссылки. Этот краткий курс в основном посвящен опции подчеркивания text-decoration CSS и «связанным» параметрам.

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

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

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

Второе решение — своего рода взлом, подразумевающее использование border-bottom .Свойство display в этом случае должно быть inline . С помощью этого решения мы можем управлять положением линии с помощью свойства padding-bottom , толщины линии с border-bottom-width , стиля с border-bottom-style и цвета с border-bottom- цвет . Border-bottom-style имеет те же параметры, что и text-decoration-style, и некоторые параметры 3D-эффекта. Эта опция предлагает больше опций и переменных, но ее сложнее использовать.

Сделать точечно-волнистое подчеркивание еще невозможно. Жду его 🙁

Этот пост изначально был опубликован в блоге Kolosek.

CSS: Как сделать ссылки не подчеркнутыми .. — Статьи

В этом руководстве показано, как удалить подчеркивание в ссылках с помощью Dreamweaver MX.

1. Открыть окно -> Стили CSS (сдвиг F11)
2. Выбрать новый стиль (страница со значком плюса в нижней части панели)
3. Затем в типе выберите «Использовать селектор CSS.»
4. Затем определить только в этом документе.
5. Вернитесь наверх, выберите ссылку: и нажмите ОК
6. Теперь откроется окно определения стиля и введите текст, если вы хотите указать шрифт и цвет. Внизу установите флажок «Нет» для украшения.
7. Вы должны увидеть это в заголовке документа

8. Вернитесь к шагу 2 и на этот раз выберите: посещенный.Это означает, как будет выглядеть ссылка после посещения. Используйте любые свойства, которые вам нужны для посещенных ссылок. Я обычно использую то же самое, что и ссылка: таким образом они выглядят одинаково.
9. Повторите шаг 2 еще раз с: hover. Вот как будет выглядеть ссылка при наведении на нее мыши. На нем выберите подчеркивание для украшения, чтобы ваши ссылки были подчеркнуты.
10. Повторите шаг 2 еще раз. На этот раз с: active. Как вы, наверное, догадались, это форматирует то, как будет выглядеть текст при нажатии на ссылку.
11. Теперь сделайте ссылку на своей странице. Просто убедитесь, что ссылки в вашем стиле расположены в следующем порядке:

    
    
    
    
    

    
    

    Моя ссылка без подчеркивания

    
    
    

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

В веб-дизайне каждая деталь имеет значение — включая ваши ссылки.

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

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

a: ссылка — когда пользователь не посещал, не зависал или не нажимал на ссылку

a: посетил — после того, как пользователь перешел по ссылке

a: hover — когда пользователь наводит указатель мыши на ссылку

a: активный — когда пользователь нажимает на ссылку

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

Чтобы удалить подчеркивание из ссылок, вы можете использовать свойство CSS text-decoration . Ниже мы рассмотрим, как определить это свойство, чтобы полностью удалить подчеркивание со ссылок на вашем HTML-сайте или сайте Bootstrap.

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

1. Добавьте HTML-код в раздел своей веб-страницы.
2. Определите четыре псевдокласса ссылок с помощью свойства text-decoration в разделе.
3. Убедитесь, что ссылки: link и: visit идут перед: hover, а: active — последним. Это важно для каскадирования таблицы стилей.
4. Установите для каждого свойства значение «нет».

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

Вот код CSS:

 
 
 a: ссылка {украшение текста: нет; } 
 
 a: посетил {text-decoration: none; } 
 
 a: hover {украшение текста: нет; } 
 
 a: активный {text-decoration: none; } 
  

— сначала должны идти a: link и a: loaded , затем a: hover , затем a: active .

Вот HTML:

 
 
 
   Это ссылка  , которая появляется внутри абзаца. 
 

  

Вот результат:

См. Ручка «Удаление подчеркивания из ссылки с помощью CSS 1» от Джейми (@websitejamie) на CodePen.

Также можно переключить подчеркивание так, чтобы оно отображалось только при наведении курсора и нажатии. Сделайте это с помощью правила text-decoration: underline; вот так:

См. Ручка «Удаление подчеркивания из ссылки с помощью CSS 2» от Джейми (@websitejamie) на CodePen.

Как удалить подчеркивание из ссылок в CSS в Bootstrap

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

По умолчанию в Bootstrap ссылки показывают подчеркивание, только когда они находятся в состоянии hover или active . Это означает, что когда посетитель наводит курсор на ссылку или нажимает на нее, отображается подчеркивание. В противном случае подчеркивание не будет отображаться в ссылках, даже если они были посещены.Кроме того, ссылки, определенные классом кнопки Bootstrap, никогда не имеют подчеркивания.

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

Вот код CSS:

 
 
 a: hover {украшение текста: нет; } 
 
 a: активный {text-decoration: none; } 
  

Вот HTML:

 
 
 
   Это ссылка  , которая появляется внутри абзаца.Ниже приведена ссылка, определенная классом кнопок Bootstrap. 
 

 
  Ссылка  
  

Вот результат:

См. Перо Удаление подчеркивания из ссылки с помощью CSS — Bootstrap от Джейми (@websitejamie) на CodePen.

Стилизация ссылок с помощью CSS

Удаление подчеркивания в ссылках — один из самых распространенных вопросов начинающих программистов. Хорошая новость заключается в том, что этот процесс прост благодаря свойству text-decoratio n.Для этого вам просто нужно немного знать HTML и CSS.

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

CSS {В реальной жизни}

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

См. Перо Анимация с псевдоэлементами Мишель Баркер (@michellebarker) на CodePen.

Они отлично подходят для одиночных коротких строк текста (например, навигационных ссылок), но не для многострочного текста. Мы можем анимировать подчеркивание в многострочном тексте с умным использованием линейных градиентов, а также background-size и background-position .Вот пример и отличная статья о том, как реализовать эту технику.

См. Перо Анимированное подчеркивание с фоном от Мишель Баркер (@michellebarker) на CodePen.

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

«Реал» подчеркивает

С некоторыми из новых свойств text-decoration- мы можем анимировать фактических подчеркиваний — намного лучше, чем просто позволить нашим подчеркиваниям мигать и исчезать при наведении курсора. Любое, анимировав настоящие подчеркивания, мы можем сохранить приятную функцию, которую предоставляет нам большинство браузеров, когда подчеркивание пропускает нижние элементы текста (по умолчанию для свойства text-decoration-skip-ink ).

Для самого простого примера мы можем реализовать эффект плавного появления.Мы не можем анимировать непрозрачность подчеркивания текста, но мы можем анимировать его от прозрачного до желаемого цвета. Сначала мы устанавливаем свойство text-decoration-style на underline . Здесь я использую сокращенное обозначение text-decoration , чтобы одновременно указать text-decoration-Thickness и text-decoration-color . Мы можем установить цвет на прозрачное значение. Затем при наведении курсора мы можем перевести его в непрозрачное значение:

  a {
 оформление текста: подчеркивание 0.15em rgba (0, 0, 0, 0); 
 переход: текст-оформление-цвет 300 мс; 
} 
 a: hover {
 text-decoration-color: rgba (0, 0, 0, 1); 
} 
  

См. Перо Простая анимация с исчезновением подчеркивания от Мишель Баркер (@michellebarker) на CodePen.

Это лучше, чем по умолчанию, но довольно просто. Более того, мы можем перенести свойство text-underline-offset , которое является относительно новым, но широко поддерживается браузерами. Вот как я использую его на своем сайте:

  a {
 оформление текста: подчеркивание 0.15em rgba (0, 0, 0, 1); 
 смещение подчеркивания текста: 0,2em; 
 переход: цвет текста-декорации 300 мс, смещение подчеркивания текста 300 мс; 
} 
 a: hover {
 text-decoration-color: rgba (0, 0, 255, 1); 
 смещение подчеркивания текста: 0,4 эм; 
} 
  

Единицы

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

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

Вышеупомянутое отлично работает … в Firefox. Прямо сейчас никакие другие браузеры не поддерживают переход или анимацию text-underline-offset . (То же самое относится к text-decoration-Thickness , что также может допускать некоторые интересные эффекты.) Но, к счастью, есть альтернативный подход к анимации этих свойств …

Houdini спешит на помощь

Не вдаваясь в тонкие технические детали, CSS Houdini — это набор низкоуровневых API, которые предоставляют разработчикам доступ к частям механизма рендеринга CSS браузера.Это позволяет нам зарегистрировать настраиваемое свойство и анимировать его с помощью CSS. Раньше разработчикам нужно было зарегистрировать свойство в Javascript, но теперь возможно сделать это полностью с помощью CSS, используя @property . У Una есть отличная статья, в которой объясняется, как именно ее использовать, и некоторые из возможных вещей.

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

  @property --offset {
 синтаксис: '<длина>'; 
 наследует: false; 
 начальное значение: 0 пикселей; 
}  

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

Затем вместо перехода text-underline-offset мы переносим само настраиваемое свойство:

  a {
 transition: --offset 300ms, text-decoration-color 300ms; 
} 
 a: hover, 
 a: focus {
 --offset: 0.4em; 
 цвет-украшения-текста: rgba (0, 0, 255, 1); 
} 
  

Тестирование на поддержку

К сожалению, перенос настраиваемых свойств с помощью Houdini не поддерживается в Firefox или Safari, поэтому мы возвращаемся к предыдущей проблеме, заключающейся в решении с ограниченной поддержкой браузера! Но не бойтесь, мы можем реализовать кросс-браузерное решение — с поясом и скобами!

Мы можем использовать функциональный запрос, чтобы определить, поддерживает ли браузер Houdini (этот запрос относится к Paint API).Для браузеров, не поддерживающих Houdini, вместо этого мы перенесем свойство text-underline-offset , которое, к счастью, работает в Firefox и Safari!

  @supports not (background: paint (something)) {
 a {
 transition: text-underline-offset 400ms, text-decoration-color 400ms; 
} 
 a: hover, 
 a: focus {
 text-underline-offset: 0.4em; 
} 
} 
  

Вот полное решение:

См. Перо Подчеркивания (решение Chrome с Houdini) от Мишель Баркер (@michellebarker) на CodePen.