Css подчеркивание: Подчеркивание в CSS (красивые эффекты с примерами кода)

.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 используются для управления оформлением текста в режимах вертикального письма.

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

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

Несколько советов, как при помощи CSS убрать подчеркивание ссылок в HTML

Верстка любого информативного текста подразумевает включение смысловых гиперссылок или анкоров. Добавляются эти элементы при помощи тега «а» (anchor). Современные браузеры по умолчанию отображают подобный элемент с нижним подчеркиванием. Зачастую верстальщики или веб-дизайнеры предпочитают либо изменять этот стиль, либо удалять его вообще.

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

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

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

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

a {

text-decoration: none;

}

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

Но что делать, если у вас нет доступа к файлу CSS?

В таком случае целесообразным является применения тега Style в начале документа. Работает так же, как и файл CSS. Для того чтобы применить стили, необходимо в самом начале документа (или HTML страницы) дописать конструкцию, в которой действуют обычные правила CSS стилей.

Эти стили применяются только к определенной странице. В других разделах или документах сайта они действовать не будут.

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

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

а: hover {

text-decoration: none;

}

Именно псевдокласс « :hover » отвечает за декорацию элементов при наведении курсора.

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

а {

text-decoration: none;

}

а: hover {

text-decoration: underline;

}

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

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

Есть несколько вариантов решения этой проблемы.

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

Для этого необходимо непосредственно в теге ссылки указать параметр Style:

Второй вариант является более приемлемым.

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

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

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

.none_ decoration{

text-decoration: none;

}

Идентификатор обозначается знаком #:

#none_ decoration{

text-decoration: none;

}

Данное правило применимо как к файлу CSS, так и к тегу Style

Изменение стиля отображения ссылки в тексте

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

Сделать это тоже достаточно просто:

а {

color:*указать нужный цвет в любом формате (*red, #c2c2c2, rgb (132, 33, 65)*)*;

}

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

Замена стандартной стилизации

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

text-decoration-style:

• Если нужна сплошная линия, указываем значение solid.
• Для волнистой линии – wavy.
• Двойная линия – соответственно double.
• Линию можно заменить на последовательность точек – dotted.
• Подчеркнуть слово в виде пунктира – dashed

А также можно изменить положение линии относительно текста:

Конструкция line-text-decoration-line может принимать значения:

• Стандартное (подчеркнуть снизу)- underline .
• Перечеркнуть слово (фразу) – through .
• Линия находится сверху – overline.
• Знакомое нам none – без стилизации.

И цвет (не путать с цветом текста!):

text-decoration-line: (любой цвет в любом формате *red, #c2c2c2, rgb (132, 33, 65)*).

Для удобства все три позиции можно писать вместе в конструкции:

text-decoration: red, line-through, wavy.

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

«Подчеркивание — это то, что мы рисуем под предложением или словом. У нас есть разные цвета этого подчеркивания, доступные в CSS. Мы можем поместить цвета в свойство text-decoration-color в типах «RGB», «RGBA», «HSL» и «HSLA». Когда мы хотим настроить цвет подчеркивания, мы используем свойство text-decoration-color в CSS. Это свойство дает нам возможность изменить цвет подчеркивания. В этом уроке мы будем использовать это свойство и рассмотрим здесь несколько примеров, чтобы понять это свойство text-decoration-color».

Создайте файл HTML для начала этого кода. Мы начнем с создания нового файла, а затем выберем HTML в качестве языка в Visual Studio Code. Наконец, мы добавляем «!» в файл, который мы только что создали. Этот файл содержит все основные теги HTML. Все, что нам нужно сделать сейчас, это ввести тело HTML и ссылку на файл CSS в «голову». В теле мы размещаем заголовок и абзац в этом коде. Мы также создаем жирный текст в этом коде. Теперь мы переходим к созданию файла CSS, в котором мы подчеркиваем заголовок и абзац, а затем меняем цвет этого подчеркивания. Все это будет сделано с использованием свойств CSS.

Мы выравниваем все элементы тела HTML здесь, в «центре», с помощью свойства «text-align». Затем мы используем свойство «text-decoration» и помещаем ключевое слово «underline» в качестве значения этого свойства. Мы используем это свойство здесь для создания подчеркивания заголовка. Мы также устанавливаем цвет этого подчеркивания, используя свойство text-decoration-color.

Здесь мы устанавливаем цвет подчеркивания на «черный». Мы также создаем еще одно подчеркивание, используя то же свойство text-decoration, и на этот раз мы создаем это подчеркивание для абзаца. Мы меняем цвет этого подчеркивания на «зеленый», используя свойство text-decoration-color. У нас также есть жирный текст, поэтому мы создадим подчеркивание для этого полужирного текста с помощью свойства «text-decoration», а также изменим его цвет на «красный» с помощью свойства «text-decoration-color». .

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

Здесь мы используем тот же HTML-код, что и в примере 1. Сначала мы используем свойство «text-align» для всех элементов тела, а «размер шрифта» элемента тела — «24px». Мы «подчеркиваем» все элементы отдельно с помощью «text-decoration», а цвет подчеркивания меняем с помощью «text-decoration-color». Здесь мы используем цвет «RGB» в качестве значения этого свойства «text-decoration-color». Для «h2» мы устанавливаем «rgb (13, 128, 13)», который используется для «зеленого» оттенка. Затем у нас есть «p», в котором мы используем «rgb (40. 40, 184)», который представляет «синий» цвет. Для последнего полужирного текста «b» мы используем «rgb (216, 69, 15)», что означает «оранжевый».

Результат показан ниже, и вы можете видеть, что цвет подчеркивания заголовка — «зеленый», текст абзаца — «синий», а подчеркивание полужирного текста — «оранжевый».

Опять же, мы используем код HTML из примера 1 и связываем данный файл CSS с файлом HTML из примера 1. Весь текст тела HTML выравнивается по «центру» и размера шрифта «24px». Мы подчеркиваем все элементы заголовка, абзаца и жирного текста так же, как мы описали в приведенном выше примере. Здесь мы меняем цвет этих подчеркиваний, используя «text-decoration-color» и присваивая значения цвета в форме «HSL». «HSL (0, 100%, 50%)», который мы используем здесь для подчеркивания заголовка, показывает «красный» цвет. Затем мы используем «HSL (133, 86%, 47%)» для подчеркивания абзаца, которое отображается как «светло-зеленый», а для жирного шрифта мы используем «HSL (327, 85%, 33%)», который для «пурпурного» цвета.

Результат приведен ниже, с цветом «красный» для подчеркивания заголовка, «светло-зеленый» для текста абзаца и «пурпурный» для подчеркивания полужирного текста.

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

Мы создаем подчеркивание заголовка, используя свойство text-decoration и изменяя его цвет на оранжевый с помощью text-decoration-color. После этого мы используем свойство text-decoration для создания жирного подчеркивания текста и text-decoration-color для изменения цвета на «синий». Мы устанавливаем «размер шрифта» абзаца на «22px». Для упоминания ссылки мы используем «а» здесь с «наведением», а затем меняем цвет подчеркивания на «красный», поэтому он изменит цвет подчеркивания ссылки, когда мы наводим указатель мыши на эту ссылку и также изменяет свой «размер шрифта» при наведении на «20px».

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

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

Здесь у нас есть один заголовок и два разных абзаца с именами «p1» и «p2». У нас также есть жирный текст и элемент «div», а также элемент «span». Мы создадим подчеркивание для всего этого, а также изменим цвет этих подчеркиваний.

Мы используем «выравнивание текста», и для значения этого свойства мы устанавливаем здесь «центр» для всех элементов, которые присутствуют внутри тела. Мы также увеличили «размер шрифта» и установили его на «25 пикселей». Мы используем свойство text-decoration для всех элементов, которые мы создали в файле HTML, используя их имена. Затем мы также используем свойство text-decoration-color внутри имен всех этих элементов здесь. Здесь мы используем названия цветов, цвет RGB, а также цвета HSL. Для заголовка и первого абзаца «p1» мы используем цвет подчеркивания «RGB», для второго абзаца «p2» и жирного шрифта «b» мы используем цвет «HSL» для подчеркивания, а для « div» и «span», мы используем имена цветов в свойстве «text-decoration-color». Таким образом мы создаем подчеркивание и меняем цвет подчеркивания всех элементов.

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

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

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

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

💡

Чтобы подчеркнуть текст в CSS, вам нужно установить для свойства «text-decoration» значение «underline».

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

Начнем!

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

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

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

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

Все элементов ‘p’ в вашем HTML-документе теперь будут подчеркнуты.

💡

Чтобы использовать этот стиль форматирования для других элементов, просто замените

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

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

Достаточно просто, правда? ✔️

Вот другие общих стилей , которые вы обычно найдете подчеркнутыми:

Подчеркивание всех ссылок в документе

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

Подчеркнуть определенный элемент с классом

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

Подчеркните определенный элемент с помощью «специального» идентификатора

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

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

 p {
нижняя граница: 1 пиксель сплошной красный;
ширина нижней границы: 2px;
} 

Как удалить подчеркивание из элементов

Удалить подчеркивание из текста или ссылки также очень просто. Просто установите для свойства text-decoration значение «none»

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

Подчеркивание в CSS Распространенные ошибки и решения

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

Ошибка специфичности : убедитесь, что ваш селектор CSS имеет более высокую специфичность, чем любые другие конфликтующие стили.

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

Несовместимый браузер : Некоторые старые браузеры несовместимы со свойством оформления текста.

Неверный синтаксис : Убедитесь, что код CSS правильный, с правильным синтаксисом, орфографией и учетом регистра, так как это влияет на вывод.

Часто задаваемые вопросы

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

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

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

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

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

Можно ли изменить цвет подчеркивания?
Да, вы можете использовать свойство border-bottom для изменения цвета.