Как убрать курсив в css
Чтобы убрать подчёркивание у ссылки, следует в стилях для селектора a добавить text-decoration со значение none (пример 1). Для псевдоклассов :hover и :visited нет необходимости добавлять text-decoration, они наследуют свойства селектора a.
Как у ссылок убрать подчеркивание?
Но в некоторых случаях подчеркивание допустимо убрать, когда очевидна разница между ссылкой и текстом. Чтобы ссылки не подчер кивались, для селектора A следует добавить свойство text-decoration со значением none, как показано в примере 1.
Как убрать нижнее подчёркивание?
- Выделите фрагмент.
- На главной панели меню найдите букву «Ч» с чёрточкой под ней. Или нажмите Ctrl+U. Избавиться от линии можно этим же сочетанием клавиш.
- Чтобы печатать уже с полосками, кликните на значок «Ч», напишите что-то, и снова кликните на «Ч».
Как сделать подчеркнутый текст в CSS?
Чтобы подчеркнуть только текст, необходимо воспользоваться свойством text-decoration со значением underline, опять же, добавляя его к селектору h2 (пример 2).
Как сделать шрифт жирнее в CSS?
CSS наклонный и жирный шрифт
CSS атрибут со значением style=»font-style:italic» определяет наклонный шрифт. Определим жирный шрифт: CSS ключение style=»font-weight:bold» определяет жирный шрифт.
Как убрать подчеркивание текста в телефоне?
В приложении Заметки текст подчеркивается двумя способами:
- Выделяем необходимы для подчеркивания текст
- Жмем + (плюс)
- Выбираем Аа
- Жмем нижнее подчеркивание — U.
Как избавиться от красного подчеркивания в ворде?
Кликните правой кнопкой мышки по подчеркнутому слову и откройте меню «Орфография». Вам будут предложены два варианта: «Добавить в словарь» и «Пропустить всё». Наконец, вы можете полностью отключить красное подчеркивание в «Ворде». Для этого нужно нажать на кнопку «Файл» и перейти в раздел «Параметры — Правописание».
Как сделать ссылку на сайт в html?
Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку.
Оба действия выполняются с помощью тега , который имеет единственный обязательный атрибут href. В качестве значения используется адрес документа (URL).
Как убрать подчеркивание текста в презентации?
Удаление подчеркивания текста гиперссылки
- Щелкните текст гиперссылки правой кнопкой мыши и выберите команду Удалить гиперссылку.
- На вкладке Вставка в группе Иллюстрации нажмите кнопку Фигуры, а затем в разделе Прямоугольники выберите пункт Прямоугольник.
- Путем перетаскивания создайте прямоугольник, охватывающий текст гиперссылки, который необходимо скрыть.
Как убрать подчеркивание в Microsoft Word?
Чтобы не отвлекаться от работы, можно отключить проверку правописания, а после набора всего текста выполнить ее вручную. Ниже описано, как это сделать. На вкладке Файл выберите пункт Параметры, откройте раздел Правописание, снимите флажок Автоматически проверять орфографию и нажмите кнопку ОК.
Как убрать нижнее подчеркивание на айфоне?
Как включить или выключить подчеркивание элементов меню в «Настройках» iOS.
ОС iOS предоставляет пользователям возможность включить или отключить подчеркивание кнопок на iPhone. Для этого откройте «Настройки» → «Основные» → «Универсальный доступ» → «Формы кнопок». Вот и все.
Как добавить шрифт в CSS?
Как подключить шрифт с помощью различных сервисов
- Находим нужный шрифт или выбираем из уже имеющихся;
- Скачиваем архив и добавляем его в папку fonts;
- Копируем уже готовый CSS-код для файла style.css;
Как убрать подчеркнутый текст?
Чтобы удалить одинарную подчеркивание из слов и пробелов, выделите подчеркнутый текст и нажмите клавиши CTRL + U. Чтобы удалить другие стили подчеркивания, дважды нажмите клавиши CTRL + U.
С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется тег <font> , задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код HTML.
Свойства шрифта
Изменение начертания шрифта и его размера происходит через свойства CSS, которые описаны в табл.
1.
| Свойство | Значение | Описание | Пример |
|---|---|---|---|
| font-family | имя шрифта | Задает список шрифтов | P |
| font-style | normal italic oblique | Нормальный шрифт Курсив Наклонный шрифт | P |
| font-variant | normal small-caps | Капитель (особые прописные буквы) | P |
| font-weight | normal lighter bold bolder 100–900 | Нормальная жирность Светлое начертание Полужирный Жирный 100 — светлый шрифт, 900 — самый жирный | P |
| font-size | normal pt px % | нормальный размер пункты пикселы проценты | font-size: normal font-size: 12pt font-size: 12px font-size: 120% |
В примере 1 показано использование параметров при работе со шрифтами.
Пример 1. Задание свойств шрифта с помощью CSS
Ниже приведен результат данного примера (рис. 1).
Рис. 1. Вид текста после применения стилей
В табл. 2 приведены некоторые стилевые параметры для работы с текстом и результат их применения.
| Пример | Пример | Пример | Пример | Пример |
| font-family: Verdana, sans-serif; font-size: 120%; font-weight: light | font-size: large; font-weight: bold | font-family: Arial, sans-serif; font-size: x-small; font-weight: bold | font-variant: small-caps | font-style: italic; font-weight: bold |
Свойства текста
Кроме изменения параметров шрифтов, можно управлять и свойствами всего текста. Значения свойств приведены в табл. 3.
| Свойство | Значение | Описание | Пример |
|---|---|---|---|
| line-height | normal множитель значение % | Интерлиньяж (межстрочный интервал) | line-height: normal line-height: 1.  5 line-height: 12px line-height: 120% |
| text-decoration | none underline overline line-through blink | Убрать все оформление Подчеркивание Линия над текстом Перечеркивание Мигание текста | text-decoration: none |
| text-transform | none capitalize uppercase lowercase | Убрать все эффекты Начинать С Прописных ВСЕ ПРОПИСНЫЕ все строчные | text-transform: capitalize |
| text-align | left right center justify | Выравнивание текста | text-align: justify |
| text-indent | значение % | Отступ первой строки | text-indent: 15px; text-indent: 10% |
Ниже, в табл. 4 приведены некоторые параметры текста и результат их применения.
Форум Приднестровской поддержки CMS XOOPS.
По ссылке вы можете скачать последнюю версию CMS XOOPS.
А так же прочитать инструкции по установке XOOPS и модулей
По данным ссылкам можно скачать модули нашей разработки.
Модуль инструкций. Ознакомьтесь с установкой XOOPS. C начальными познаниями по HTML,CSS, JS, PHP и др.
Добро пожаловать на сайт поддержки XOOPS.
Приднестровская поддержка XOOPS
Основным указанием на то, что перед нами ссылка, является то, что она подчеркнута и ее цвет изменен по сравнению с основным текстом. Такое визуальное оформление используется по умолчанию. Однако в определенных случаях может возникнуть необходимость в отображении ссылки без подчеркивания.
Решение
Для того чтобы убрать подчеркивание ссылок, воспользуемся свойством text-decoration . По умолчанию браузер устанавливает значение underline данного свойства для всех элементов a. Поэтому нам достаточно всего лишь установить его значение none для ссылок:
Такой результат был достигнут с помощью следующего CSS-кода:
Рис. 2.
5. Использование свойства text-decoration позволяет убрать подчеркивание для ссылок
Обсуждение
Помимо underline и none свойство text-decoration может принимать следующие значения:
• overline
• line-through
• blink
Эти значения можно комбинировать. К примеру, если бы вам захотелось оформить ссылку с помощью как нижнего, так и верхнего подчеркивания, как показано на рис. 2.6, то можно было бы использовать следующее правило стиля:
Рис. 2.6. Комбинирование различных значений свойства text-decoration позволяет создавать ссылки с нижним и верхним подчеркиванием
Совсем другое дело, когда мы имеем дело с ссылками в меню или ссылками, расположенными иным образом так, что не остается никаких сомнений в их предназначении – например, когда их текст оформлен в виде кнопок. В этом случае при желании можно убрать подчеркивание, поскольку множество других факторов указывает на то, что данный текст является ссылкой.
Для изменения цвета ссылки следует использовать атрибут style=»color: #rrggbb» в теге <a>, где #rrggbb — цвет в шестнадцатеричном представлении.
Как убрать подчеркивание ссылки в html?
Чтобы ссылки не подчер кивались, для селектора A следует добавить свойство text-decoration со значением none, как показано в примере 1.
Как убрать изменение цвета при наведении на ссылку?
Для изменения цвета ссылки при наведении на неё курсора мыши применяется псевдокласс :hover, а чтобы смена цвета происходила плавно, к селектору A следует добавить свойство transition, значением которого выступает время. Оно указывается обычно в секундах или миллисекундах.
Как в ворде сделать нижнее подчеркивание на пустом месте?
Самый простой способ сделать подчеркивание без текста – это вставить несколько пробелов или знаков табуляции, а потом подчеркнуть их. Если такой способ вам подходит, то установите курсор там, где должно находится подчеркивание и вставьте несколько пробелов с помощью клавиш ПРОБЕЛ или TAB на клавиатуре.
Как убрать линию в ворде не выделяется?
Для того чтобы убрать невесть откуда взявшиеся линии, появившиеся в следствии неправильного форматирования — нужно найти в меню Word-а пункт «Границы и заливка» и на закладках этого «Граница» и «Страница» выбрать параметр «Тип» — «нет» (без рамки).
Как убрать цвет и подчеркивание ссылки CSS?
Чтобы убрать подчёркивание у ссылки, следует в стилях для селектора a добавить text-decoration со значение none (пример 1). Для псевдоклассов :hover и :visited нет необходимости добавлять text-decoration, они наследуют свойства селектора a.
Как можно изменить цвет посещенной ссылки?
Как задать цвет посещённых ссылок? Как только пользователь открывает ссылку, она помечается как посещённая и меняет свой цвет на фиолетовый, установленный по умолчанию. Чтобы задать вид оформления посещённых ссылок, используйте псевдокласс :visited, который добавляется к селектору A, как показано в примере 1.
Какой из предложенных тегов Устанавливает цвет гиперссылок при нажатии?
Устанавливает цвет гиперссылок при нажатии.
Как убрать подчеркивание у гиперссылки?
Удаление подчеркивания с одной гиперссылки
В контекстном меню нажмите «Шрифт». Появится окно «Шрифт». На вкладке «Шрифт» щелкните стрелку вниз под параметром «Подчеркивание». Выберите «Нет» в раскрывающемся меню, затем нажмите кнопку «ОК».
Как убрать подчеркивание текста на андроид?
Вам не нужно использовать какую-либо логику для удаления подчеркиваний – просто вызовите getText (). ToString (), когда вы хотите использовать значение. Он не будет включать специальное форматирование или что-то еще. someTextView.
Как убрать точки у списка?
Чтобы скрыть отображение маркеров в списке применяется стилевое свойство list-style-type со значением none. Его следует добавить к селектору ul или li, как показано в примере 1. Маркеры хотя и не отображаются в списке, но текст при этом всё равно оказывается сдвинут вправо.
Как изменить текст в ссылке?
Настройка текста гиперссылки
- Щелкните правой кнопкой мыши в любом месте ссылки и в меню выберите пункт Изменить гиперссылки.
- В диалоговом окне Изменение гиперссылки выберите текст в поле Текст.
- Введите текст, который вы хотите использовать для ссылки, и нажмите кнопку ОК.
Как изменить цвет текста в HTML?
Цвет шрифта на сайте можно задать при помощи HTML-кода. Для этого существует тег font.
…
Атрибуты тега FONT
Начертание | WebReference
Существует несколько видов начертаний шрифта, которые встречаются на сайтах: нормальное, жирное, курсивное, подчёркнутое, перечёркнутое и выворотное (рис. 1). Все указанные вариации шрифта составляют его гарнитуру.
Рис. 1. Разное начертание шрифта текста
Большая часть начертаний в той или иной мере встречается в различных текстовых редакторах и допускает смешивание с другими. Например, можно сразу установить жирный курсивный текст. Что касается выворотки, то здесь светлый текст выводится на тёмном фоне. Для больших объёмов подобный текст (светлые буквы на тёмном фоне) читать труднее, чем в традиционном исполнении, поэтому выворотка обычно применяется для привлечения внимания читателя к тексту, например заголовку.
Чтобы управлять форматированием текста, в частности изменять начертание шрифта, можно воспользоваться для этого специальными элементами HTML или обратиться к стилям. В табл. 1 перечислены основные элементы, которые применяются для изменения оформления текста.
| Код HTML | Описание |
|---|---|
| <b>Текст</b> | Определяет жирное начертание текста. |
| <strong>Текст</strong> | Сильное выделение текста. Визуально не отличается от <b>. |
| <i>Текст</i> | Устанавливает курсивное начертание текста. |
| <em>Текст</em> | Выделение текста. Визуально не отличается от <i>. |
| <sup>Текст</sup> | Воспроизводит текст как верхний индекс. Шрифт при этом
отображается выше базовой линии текста и уменьшенного
размера. |
| <sub>Текст</sub> | Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера. |
Подчёркивание текста
Хотя подчёркивание текста лучше использовать только в ссылках, правильное его применение может придать эстетичный вид элементам веб- страницы.
Вначале разберёмся, почему к подчёркиванию создалось такое отношение, чтобы не повторять чужих ошибок.
- Подчёркнутый текст читается хуже, чем обычный. С учётом того, что чтение с экрана по сравнению с чтением с листа бумаги менее комфортно, данный фактор становится важным для повышения удобства восприятия информации.
- На веб-страницах подчёркивание ссылок стало определённым стандартом. Когда мы видим на сайте подчёркнутый текст, то воспринимаем его в силу привычки как ссылку. Если это не так, возникает раздражение: почему этот текст выглядит как ссылка, но при этом ссылкой не является?
Получается, что если включить подчёркивание, то оно должно быть либо декоративным, чтобы не возникала ассоциация со ссылками, либо применяться для небольших текстов, например заголовков.
Для добавления подчёркивания есть два основных метода. Первый заключается в использовании свойства text-decoration со значением underline, как показано в примере 1.
Пример 1. Свойство text-decoration
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Подчёркивание</title> <style> .dot { text-decoration: underline; } </style> </head> <body> <h2>Часть 4, в которой Пол и Пропилен наносят ответный удар</h2> </body> </html>Рис. 2. Вид линии, полученной с помощью text-decoration
Второй метод позволяет установить линию произвольного стиля и цвета через свойство border-bottom.
Например, для добавления пунктирного подчёркивания у ссылок используем значение dashed. Чтобы подчёркивание применялось не ко всем ссылкам, следует указать уникальный класс, назовём его, скажем dot. Также необходимо убрать исходное подчёркивание у ссылок (пример 2).
Пример 2. Пунктирное подчёркивание
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Пунктирное подчёркивание</title> <style> a.dot { text-decoration: none; /* Убираем подчёркивание */ border-bottom: 1px dashed #000080; /* Добавляем свою линию */ } </style> </head> <body> <p><a href=»link1.html»>Обычная ссылка</a> на другую страницу.</p> <p><a href=»link2.html»>Ссылка с пунктирным подчёркиванием</a>.</p> </body> </html>Рис. 3. Вид обычной ссылки и ссылки с пунктирным подчёркиванием
Толщина линии и цвет подчёркивания у ссылок также задаются через свойство border-bottom.
Обратите внимание на некоторые моменты. Линия, полученная через border-bottom, располагается чуть ниже традиционного подчёркивания. При добавлении такой линии к блочным элементам, вроде <h2>, линия будет не под текстом, а занимать всю ширину элемента.
Зачёркивание
Зачёркивание обычно применяется в текстах для создания эффекта редактирования. Дескать, что-то написали, потом передумали, но старый текст остался. В таком случае удобнее использовать элемент <del>, он как раз и предназначен для этой цели. Текст внутри <del> будет отображаться зачёркнутым.
<p>Вот такой он <del>редиска</del> нехороший человек.</p>
Выворотка
Выворотка это инверсия цветов текста и фона. К примеру, чёрный текст на белом фоне в выворотке будет выглядеть как белый текст на чёрном фоне. Для создания выворотки применяется стилевое свойство background, задающее цвет фона и color, определяющее цвет текста, как показано в примере 3.
Пример 3. Цвет фона и текста
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Выворотка</title> <style> .invert { background: #000; /* Чёрный цвет фона */ color: #fff; /* Белый цвет текста */ padding: 2px; /* Поля вокруг текста */ } </style> </head> <body> <p>Обычный текст</p> <p><span>Выворотка</span></p> </body> </html>См. также
- text-decoration
- Оформление ссылок
- Свойства текста в CSS
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 11.03.2020
Редакторы: Влад Мержевич
Размер текста
Ctrl+←
Наклон текста
Ctrl+→
html — Подчеркивание текста при использовании CSS
спросил
Изменено 10 лет, 10 месяцев назад
Просмотрено 56 тысяч раз
Я новичок в CSS, поэтому хочу убедиться, что реализую его правильно.
Мне нужно включить пояснительный абзац на веб-страницу. Я бы хотел, чтобы он выглядел по-другому, поэтому я включил во внешний файл CSS следующее:
div.usage { стиль шрифта: курсив; поле слева... поле справа... ; }
, а затем включил
Насколько я понимаю, при использовании CSS контент и макет разделены. Как же тогда мне подчеркивать какой-то текст в моем объяснении? Насколько я понимаю, я должен
- html
- css
Вы правы насчет разделения содержимого и макета, но в этом случае я бы обернул это тегом. Однако тег устарел. Я бы использовал что-то вроде этого:
Это очень важно.
и
em { text-decoration:underline; }
означает выделенный текст. По умолчанию используется курсив, поэтому, в зависимости от вашего сброса CSS, вам может потребоваться также сбросить font-syle до нормального.
Кроме того, подчеркивание текста обычно является плохой идеей, так как большинство людей считают подчеркнутый текст ссылками. Вместо этого я бы выделил его жирным шрифтом или, может быть, даже придал бы ему цвет фона.
1
Как вы сказали, HTML предназначен для контента, а CSS — для стилей. Таким образом, вам не нужно использовать стили в вашем HTML. В самом деле, когда вы думаете в HTML, вы должны думать не только о содержании, но и семантически.
Итак, класс, который вы используете для своего div.usage выбран очень удачно, потому что он ничего не говорит о его стиле, но говорит о его семантике. А как насчет текста, который вы хотите подчеркнуть? Я бы сказал, что семантически это текст, который вы хотите выделить, и в HTML есть хороший элемент для этого: элементов (жирный шрифт) для подчеркивания, которое вы хотите.
Это очень важно.сильный { вес шрифта: нормальный; оформление текста: подчеркивание; }
Если вы хотите использовать этот стиль только для выделенного текста внутри элемента div.usage , укажите более конкретно:
.usage strong {
вес шрифта: нормальный;
оформление текста: подчеркивание;
}
Конечно, вы не хотите добавлять div в селектор (я имею в виду .usage лучше, чем div.usage ). Таким образом, вы будете готовы, если вы собираетесь кодировать, например, список или праграф с семантикой использования .
Свойство «text-decoration: underline» позволяет убрать выделение текста.
Вы должны использовать один из этих тегов: или и стилизовать их в css.
.usage strong { вес шрифта: полужирный; }
В своей разметке вы определяете некоторый контент, который хотите выделить ( ) или сильно подчеркнуть ( ).
См. http://www.w3.org/TR/html4/struct/text.html.
Я бы не стал использовать подчеркивание для выделения, так как это может сбить пользователей с толку, думая, что это гиперссылка.
Небольшой дружеский совет: лучше не использовать подчеркивание в Интернете, так как очень часто путают с кликабельной ссылкой.
Я бы посоветовал использовать
это важно
Который по умолчанию будет выделен жирным шрифтом.
Или, возможно, вы могли бы использовать желтый фон для текста, как маркер выделения…
текст выделенный текст
И поместите это в свой CSS
диапазон.подсветка {
цвет фона: #FF9;
}
вы можете попробовать это:
Это очень важно.
css:
.underline { text-decoration: underline; }
7
привет для подчеркивания вы можете взять небольшой пример здесь
HTML
Это просто текст для проверки underline с помощью CSS.
CSS
div p { стиль шрифта: курсив; }
div p span{украшение текста: подчеркивание;}
В настоящее время люди привыкли говорить, что разметку использовать не следует, но лишь немногие могут подкрепить это фактами (в отличие от цитирования предполагаемых авторитетов и использования отрицательно звучащих прилагательных). Если вам действительно нужно подчеркивание (что обычно не очень хорошая идея в документах HTML, как указано здесь), то — самый простой и надежный способ. Вы по-прежнему можете позже решить, хотите ли вы использовать, скажем, жирный шрифт вместо подчеркивания, и тогда вы можете сделать это просто в CSS:
u { украшение текста: нет; вес шрифта: полужирный; }
Для выделения другие методы почти всегда лучше, чем подчеркивание. Но бывают ситуации, когда подчеркивание является частью общепринятой системы обозначений (например, в фонетике или математике), и тогда вам может понадобиться использовать (и вам не захочется полагаться на CSS).
2
Вы можете инкапсулировать текст, который хотите подчеркнуть, в span и укажите класс для этого диапазона
.underline {
украшение текста: подчеркивание;
}
Это очень важно.
2
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Обязательно, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Цвет подчеркивания 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)», что означает «оранжевый».
Результат показан ниже, и вы можете видеть, что цвет подчеркивания заголовка — «зеленый», текст абзаца — «синий», а подчеркивание полужирного текста — «оранжевый».
Пример № 3 Опять же, мы используем код HTML из примера 1 и связываем данный файл CSS с файлом HTML из примера 1.
Весь текст тела HTML выравнивается по «центру» и размера шрифта «24px». Мы подчеркиваем все элементы заголовка, абзаца и жирного текста так же, как мы описали в приведенном выше примере. Здесь мы меняем цвет этих подчеркиваний, используя «text-decoration-color» и присваивая значения цвета в форме «HSL». «HSL (0, 100%, 50%)», который мы используем здесь для подчеркивания заголовка, показывает «красный» цвет. Затем мы используем «HSL (133, 86%, 47%)» для подчеркивания абзаца, которое отображается как «светло-зеленый», а для жирного шрифта мы используем «HSL (327, 85%, 33%)», который для «пурпурного» цвета.
Результат приведен ниже, с цветом «красный» для подчеркивания заголовка, «светло-зеленый» для текста абзаца и «пурпурный» для подчеркивания полужирного текста.
Пример № 4 В этом примере мы немного изменим приведенный выше HTML-код, добавив ссылку здесь, в этот файл. Теперь у нас есть один заголовок, один абзац, жирный текст внутри этого абзаца, а также ссылка.
Теперь мы собираемся подчеркнуть все это, а затем применить разные цвета подчеркивания для всех из них в CSS.
Мы создаем подчеркивание заголовка, используя свойство «text-decoration» и изменяя его цвет на «оранжевый» с помощью «text-decoration-color». После этого мы используем свойство text-decoration для создания жирного подчеркивания текста и text-decoration-color для изменения цвета на «синий». Мы устанавливаем «размер шрифта» абзаца на «22px». Для упоминания ссылки мы используем «а» здесь с «наведением», а затем меняем цвет подчеркивания на «красный», поэтому он изменит цвет подчеркивания ссылки, когда мы наводим указатель мыши на эту ссылку и также изменяет свой «размер шрифта» при наведении на «20px».
В первом выводе мы просто подчеркиваем заголовок и жирный текст. Подчеркивание заголовка отображается «оранжевым» цветом, а подчеркивание полужирного текста отображается здесь «синим».
На втором изображении вы можете видеть цвет подчеркивания ссылки.
Когда мы наводим курсор на эту ссылку, цвет подчеркивания ссылки становится «красным», как мы установили его в нашем коде CSS, поэтому он меняет свой цвет при наведении.
Здесь у нас есть один заголовок и два разных абзаца с именами «p1» и «p2». У нас также есть жирный текст и элемент «div», а также элемент «span». Мы создадим подчеркивание для всего этого, а также изменим цвет этих подчеркиваний.
Мы используем «выравнивание текста», и для значения этого свойства мы устанавливаем здесь «центр» для всех элементов, которые присутствуют внутри тела. Мы также увеличили «размер шрифта» и установили его на «25px». Мы используем свойство text-decoration для всех элементов, которые мы создали в файле HTML, используя их имена. Затем мы также используем свойство text-decoration-color внутри имен всех этих элементов здесь. Здесь мы используем названия цветов, цвет RGB, а также цвета HSL. Для заголовка и первого абзаца «p1» мы используем цвет подчеркивания «RGB», для второго абзаца «p2» и жирного шрифта «b» мы используем цвет «HSL» для подчеркивания, а для « div» и «span», мы используем имена цветов в свойстве «text-decoration-color».
