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

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

Свойство CSS text-decoration отвечает за оформление текста в плане подчеркиваний. Можно сделать нижнее, верхнее подчеркивание. Также можно зачеркнуть текст или применить все подчеркивания сразу.

Синтаксис CSS text-decoration

  • none — текст без оформления
  • underline — нижнее подчеркивание
  • overline — верхнее подчеркивание
  • line-through — зачеркивание текста
  • blink — мерцающий текст (рекомендуется не применять это значение)

Можно указать несколько значений. Например

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

Для изменения стиля подчеркивания есть специальное свойство text-decoration-style :

  • solid — сплошное подчеркивание
  • double — двойная линия
  • dotted — пунктирная линия
  • dashed — штриховая линия
  • wavy — волнистая линия

Для изменения цвета подчеркивания служит свойство text-decoration-color :

color может принимать значения в виде RGB, названия цвета (см. коды и названия html цветов для сайта)

К сожалению, свойство text-decoration-style и text-decoration-color не поддерживается почти всеми браузерами (идет уже 2016 год).

Примеры с подчеркиваниями

Пример 1. Простое подчеркивание

Вот как это выглядит на странице:

Верхнее и нижнее подчеркивание

Пример 2. Зачеркнутый текст

Вот как это выглядит на странице:

Пример 3. Меняем цвет и тип подчеркивания

Вот как это выглядит на странице:

Если вы не видите каких-то изменений в последнем примере, то можно попробовать использовать проверенный способ с помощью свойства border-bottom :

Для обращения к text-decoration из JavaScript нужно писать следующую конструкцию:

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

Существует сразу несколько различных способов подчеркнуть текстовый фрагмент. Я остановился на методе, который удовлетворяет всем критериям, и использует CSS свойство background-image. Фон background-image можно залить сплошным цветом, применяя функцию linear-gradient так, чтобы первый цвет перетекал во второй такой же.

Зачем использовать background-image, а не background-color, если предполагается заливка сплошным цветом? Дело в том, что background-image предоставляет больше свойств для манипуляций с фоном.

Размер фона ограничен по высоте и ширине и полностью заполняет ширину элемента ссылки — с помощью указания параметров background-size 2px и 100% соответственно. Это приводит к сплошному заполнению фона, поэтому я установил no-repeat для background-repeat.

Подчеркивание окажется сверху ссылки. Расположение линии меняем на нижнюю левую границу, устанавливая 0 100% для background-position — тогда она окажется внизу, под текстом ссылки.

CSS Properties

Два фона

Для использования нескольких фоновых изображений и манипулирования их свойствами, установите для background-* несколько значений, разделенных запятыми. Первая запись из списка окажется верхним слоем, последующие будут нижними слоями. Фон элемента анкора будет сплошным черным (#000000). Белый (#FFFFFF) фон скрыт под ним:

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

Декоративное подчёркивание ссылок

Подчёркивание у ссылок можно задать не просто сплошной линией, а, например, пунктирной. Для этого надо воспользоваться свойством border-bottom, которое создаёт линию внизу элемента. Указав один из аргументов этого свойства dashed, получим пунктирное подчёркивание. В примере 3 показано задание синего пунктира у ссылок красного цвета при наведении на них курсора мыши.

Пример 3. Пунктирное подчёркивание для ссылок

<!DOCTYPE html>
<html>
<head>
<meta charset=&#187;utf-8&#8243;>
<title>Ссылки</title>
<style>
a <
color: blue; /* Цвет ссылок */
text-decoration: none; /* Убираем подчёркивание */
>
a:hover <
border-bottom: 1px dashed blue; /* Добавляем синее пунктирное подчёркивание */
>
</style>
</head>
<body>
<p><a href=&#187;link.html»>Ссылка без подчёркивания</a>
</body>
</html>

При использовании приведённого способа пунктирная линия появляется чуть ниже обычного подчёркивания текста. Поэтому к стилю ссылки следует добавить text-decoration со значением none, чтобы одновременно не получилось две линии (рис. 1).

Рис. 1. Использование пунктира для выделения ссылки

Не обязательно использовать пунктир, например, для создания двойной линии следует указать значение, как показано в примере 4.

Пример 4. Двойное подчёркивание ссылок

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

Свойства font-weight, font-style, text-decoration и другие

С помощью свойства стилей font-weight задают «жирность» шрифта. Синтаксис:

В качестве значения свойства может использоваться одно из семи числовых значений от 100 до 900, либо одно из именованных normal, bold, bolder, lighter. Значение normal соответствует 400, а bold — 7000. Но на практике большинство браузеров не поддерживают атрибут font-weight в полной мере. Поэтому все значения, которые меньше 400 будут соответствовать normal, а все, что больше bold. Причем значения bolder и lighter не работают.

Свойство CSS font-style задает начертание шрифта. Для него доступны три значения: normal, italic и oblique. Но на практике используют только первые два, где «normal» устанавливает нормальное начертание шрифта, а значение «italic» заставляет браузер выводить текст курсивным начертанием.

С помощью свойства text-decoration можно задавать различные украшательства тексту, такие как подчеркивание текста или зачеркивание:

Для этого атрибута доступны пять значений:

  • none — отменяет все эффекты, в том числе отменяет подчеркивание у ссылок, которое задано по умолчанию;
  • underline — устанавливает подчеркнутые текст;
  • overline — «надчеркивает» текст, то есть проводит линию над текстом;
  • line-through — зачеркивает текст;
  • blink — устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3.

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

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

Нюансом свойства text-decoration является то, что для него можно указать сразу несколько значений:

text-decoration:underline overline line-through;

Результат будет такой:

перечеркнутый подчеркнутый и надчеркнутый текст!

Свойство стиля text-transform позволяет задавать регистр символов текста:

Свойство может иметь одно из четырех значений:

  • capitalize — преобразовывает к верхнему регистру первую букву каждого слова;
  • uppercase — текст в верхнем регистре;
  • lowercase — текст в нижнем регистре;
  • none — не меняет регистр символов.

Для увеличения и уменьшения расстояния между строками текста используется атрибут line-height. В качестве значения можно задавать как абсолютную так и относительную величину расстояния, указав соответствующую единицу измерения (px, pt, em и др.). В случае отсутствия единицы измерения указанное значение воспринимается браузером как множитель. Например, значение 1.5 устанавливает полуторный междустрочный интервал:

Для управления расстоянием между символами текста существует свойство letter-spacing. Оно позволяет задавать дополнительное расстояние между буквами, которое будет прибавляться к изначальному. В качестве значений принимаются любые единицы длины, принятые в CSS — пиксели (px), пункты (pt) и др. Допустимо использовать отрицательные значения. В этом случае расстояние между символами уменьшится:

Аналогичный атрибут word-spacing задает дополнительное расстояние между словами текста:

Ну и напоследок необходимо рассмотреть свойство стиля font, позволяющее задавать сразу несколько параметров для шрифта. Синтаксис:

font: font-size font-family

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

Например, чтобы задать для текста абзацев шрифт «Times New Roman» размером 10 пунктов, достаточно написать следующее правило CSS:

А если мы захотим выводить текст заголовков первого уровня рубленым шрифтом размером 15 пикселей и курсивным начертанием, то подойдет такое правило:

Куда вставлять весь этот код?

CSS код со всеми прописанными свойствами нужно вставить в CSS файл вашего сайта или вашей темы (если сайт работает на CMS)

Для WordPress этот файл будет находиться по адресу:

Для Opencart этот файл находится по адресу:

Данный CSS код нужно вносить в самый конец CSS файла.

Надеюсь, что вам понравилась данная статья! Если это так, то я буду очень вам очень признательна, если вы поделитесь ссылкой на неё в соцсетях. Для вам просто нужно нажать на одну из кнопок соцсетей, которые находятся под этой статьей. Так вы поможете мне в развитии моего блога.
На этом у меня всё! Желаю вам успешной реализации данного эффекта у себя на сайте! До встречи в следующих статьях!

С уважением Юлия Гусарь

Определение и использование

Свойство задает тип оформления текста для использования (like underline, overline, line-through).

Совет: Также посмотрите на свойство text-decoration,
который является сокращенным свойством для text-decoration-line, text-decoration-style, и text-decoration-color.

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

Значение по умолчанию: none
Унаследованный: нет
Анимируемый: нет Прочитайте о animatable
Версия: CSS3
JavaScript синтаксис: object.style.textDecorationLine=&#187;overline&#187;
Попробовать

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as for Safari, Google Chrome, and Opera (newer versions), for Internet Explorer, for Firefox, for older versions of Opera etc. As with any CSS property, if a browser doesn&#8217;t support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don&#8217;t need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.

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

text-decoration

Если вам нужно оформить текст подчеркиванием, перечеркиванием, линиями над текстом, то можно применить правило text-decoration.

text-decoration: none | underline | overline | line | blink | inherit

none &#8212; отсутствие элементов оформления (по умолчанию).underline &#8212; подчеркивание.overline &#8212; линия над текстом.line-through &#8212; перечеркивание.blink &#8212; мерцание.inherit &#8212; применяется значение родительского элемента.

text-indent

Если вам нужно установить величину отступа первой строки блока текста (красная строка), создайте правило text-indent.

Отступ первой строки в тексте будет 18px.

text-transform

Бывают случаи, когда нам необходимо изменить в тексте регистр букв. Воспользуйтесь правилом text-transform.

text-transform: none | capitalize | uppercase | lowercase

none &#8212; значение по умолчаниюcapitalize &#8212; Все Первые Буквы Слов Заглавныеuppercase &#8212; ВСЕ БУКВЫ ЗАГЛАВНЫЕlowercase &#8212; все буквы строчными

Все Первые Буквы В Тексте Будут Заглавными.

letter-spacing

Letter-spacing можно задать отступ между буквами.

В т е к с т е м е ж д у б у к в а м и б у д е т о т с т у п 1 0 p x .

word-spacing

Можно задать расстояние между словами.

Расстояние между словами будет 20px.

CSS Свойства

Выравнивание текста в CSS

Выравнивание текста по горизонтали задаётся свойством text-align, которое может принимать следующие значения:

  • left — выравнивание по левому краю;
  • right — выравнивание по правому краю;
  • center — выравнивание по центру;
  • justify — выравнивание по всей ширине.

С помощью свойства vertical-align выполняется выравнивание текста по вертикали.

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

  • baseline — выравнивание линии элемента по базовой линии родительского элемента;
  • middle — выравнивание средней элементной точки по базовой линии родительского элемента;
  • text-top — выравнивание верхней части элемента по верху шрифта родительского элемента;
  • top — выравнивание верха элемента по верхней части самого высокого элемента строки;
  • sub, super — отображение элемента в виде нижнего и верхнего индексов соответственно.

Example Code

Basic CSS

Here&#8217;s an example of a basic declaration. A declaration consists of the property and its values for the various longhand properties.

text-decoration: orange dotted underline;

Any omitted values are set to their initial value. So the following is also valid.

In fact, this is the only syntax recognized by CSS1 and CSS2 (as they don&#8217;t support the longhand properties).

So, you could use the following code to provide CSS3 features, while still providing backwards compatibility for CSS1 and CSS2 browsers:

:link <
color: orange;
text-decoration: underline; /* Used by CSS1 and CSS2 browsers */
text-decoration: green dotted underline; /* Used by CSS3 browsers */
>

In CSS1 and CSS2 browsers, both the link text and its underline will be orange. Its underline will be solid (this is the only option prior to CSS3).

In CSS3 browsers, the link text will be orange and its underline will be green. Its underline will also be dotted.

Working Example within an HTML Document

<!DOCTYPE html>
<title>Example</title>
<style>
h1 <
font: 100 3em sans-serif;
color: gold;
text-decoration: overline wavy yellowgreen;
>
</style>

Использование ::after и content

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

Рис. 3. Линия, созданная через ::after

Положение такой линии относительно текста задается через свойство bottom с отрицательным значением, цвет линии через свойство background. На деле это получается не линия, а прямоугольный блок, поэтому используем фоновую заливку (пример 3).

Пример 3. Использование ::after

<!DOCTYPE html>
<html>
<head>
<meta charset=&#187;utf-8&#8243;>
<title>Подчёркивание</title>
<style>
h2 <
position: relative; /* Относительное позиционирование */
display: inline-block; /* Линия на ширину текста */
>
h2::after <
content: &#8216;; /* Выводим пустое содержимое */
position: absolute; /* Абсолютное позиционирование */
background: red; /* Цвет линии */
left: 0; /* Положение линии слева */
bottom: -5px; /* Положение линии */
width: 100%; /* Линия на ширину текста */
height: 2px; /* Высота линии */
>
</style>
</head>
<body>
<section>
<h2>Культурный речевой акт в XXI веке</h2>
<p>Действительно, мифопорождающее текстовое устройство
иллюстрирует дискурс, и это придает ему свое звучание,
свой характер.</p>
</section>
</body>
</html>

CSS Properties

Другие способы подчеркивания в CSS

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

border-bottom

Это старое свойство, позволяющее изменять нижнюю границу текста. Это свойство css подчеркивает текст пунктиром, сплошной линией и как душе угодно. Также метод позволяет регулировать толщину подчеркивания. Пример кода с использованием свойства border-bottom у строчных элементов.

Результат интерпретации браузером этого кода.

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

box-shadow

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

  1. Возможность позиционировать подчеркивание ниже базовой линии.
  2. Возможность изменять цвет и толщину линии.
  3. Можно использовать вместе с многострочным текстом.

Но у этого способа есть недостатки. Прежде всего, ограниченность в фоне. Также невозможно регулировать стиль подчеркивания.
Пример кода:

background-image

Этот метод почти не имеет недостатков, а его потенциал воистину огромен. Идея проста – создание радиального градиента совместно со свойством background-position. Это позволит создать изображение, которое будет находиться под текстом и повторяться по всей длине строчки.
Чтобы реализовать работу данного подхода, необходимо прописать режим отображения display: inline;
Выглядит это так.

Этот код, примененный к элементу, реализует подчеркивание длинным пунктиром. Если же точки остановки градиента установить в 50%, а не 75, то подчеркивание будет квадратиками. Свойство background-position в этом случае размещает фон под текстом, а background-repeat заставляет его повторяться.
Вместо градиента можно использовать готовое фоновое изображение и реализовать, например, подчеркивание звездочками.

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

Выводы

Так какой же способ подчеркивания лучший?

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

Для основного текста имеет смысл использовать . Этот подход работает, выглядит замечательно и для него есть миксины Sass. Вы, в принципе, можете пропустить , если подчеркивание тонкое или отличается цветом от текста.

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

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

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

Также рекомендую обратить внимание на статью Бенджамина Вудроффа CSS Underlines Suck, в которой рассматриваются те же вопросы

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

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

Подчеркивание текста у ссылок настолько устоялось, что любое другое применение такого оформления будет с ними ассоциироваться. Чтобы не вводить посетителей сайта в заблуждение, никогда не используйте подчеркивание для обычного текста, только для ссылок. Но подчеркивание можно использовать разное, например, в виде пунктирной линии. Для этого создадим новый стиль в котором будем использовать параметр border-bottom , он создает линию под текстом (пример 1).

Пример 1. Создание пунктирного подчеркивания для ссылок
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
A <
color: #f00 /* Цвет ссылок */
>

A:visited <
color: #666 /* Цвет посещенных ссылок */
>

A:hover <
text-decoration: none; /* Убираем обычное подчеркивание */
border-bottom: 1px dashed blue /* Добавляем пунктирную линию под текстом */
>
</style>
</head>
<body>

<a href="1.html">Подчеркнутая ссылка</a>

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

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

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

Пример 2. Создание пунктирного подчеркивания для текста
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
.underline <
border-bottom: 1px dashed blue /* Добавляем пунктирную линию под текстом */
>
</style>
</head>
<body>

<span >Динамический HTML</span> — способ управления свойствами объектов на веб-странице, такие как, графика, текст, элементы форм и другое, без необходимости обновления всей страницы.

Динамический HTML — способ управления свойствами объектов на веб-странице, такие как, графика, текст, элементы форм и другое, без необходимости обновления всей страницы.
Примечание
Браузер Internet Explorer 5 содержит ошибку и не показывает стили для встроенных элементов вроде тега <SPAN> . Поэтому пример 2 в нем работать должным образом не будет.

Подчеркивание текста через стили можно установить для определенного тега и применять этот тег там, где требуется подчеркивание. В примере 3 в качестве такого тега выступает <ACRONYM> .

Пример 3. Подчеркивание текста для тега <ACRONYM>

<p>Популярность языка JavaScript порождена его широкими возможностями по взаимодействию с элементами веб-страницы через <acronym title="Document Object Model, Объектная модель документа">DOM</acronym>.</p>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *