seodon.ru | CSS справочник — text-decoration
Опубликовано: 18.08.2010 Последняя правка: 08.12.2015
Свойство CSS text-decoration используется для оформления текста элемента — подчеркивания, надчеркивания, зачеркивания или мигания. Также с помощью этого свойства можно убирать подчеркивание у ссылок.
Хотя text-decoration и не наследуется, оно распространяет свое действие на текст всех потомков элемента, которые находятся в прямом потоке HTML-страницы. А вот если какие-то потомки являются всплывающими (float), абсолютно позиционированными (position) либо имеют значение свойства display равное inline-table или inline-block, то на них данное свойство не действует.
Тип свойства
Назначение: текст.
Применяется: ко всем элементам.
Наследуется: нет.
Значения
Значением свойства text-decoration является ключевое слово none или inherit либо одно или несколько (через пробел) ключевых слов задающих стили оформления.
- underline — подчеркивает текст элемента.
- overline — надчеркивает текст, то есть рисует над ним линию.
- line-through — отображается зачеркнутый текст.
- blink — текст элемента мигает (мерцает), то есть кратковременно исчезает и вновь появляется.
- none — отменяет все эффекты оформления.
- inherit — наследует значение text-decoration от родительского элемента.
Процентная запись: не существует.
Значение по умолчанию: none, однако браузеры по умолчанию подчеркивают текст у ссылок.
Цвет линий подчеркивания, надчеркивания или зачеркивания всегда соответствует цвету текста элемента (color) к которому применялось text-decoration. То есть даже если у потомков будет другой цвет текста, то цвет линий при этом не изменится.
Синтаксис
text-decoration: [underline || overline || line-through || blink] | none | inherit
Пример CSS: использование text-decoration
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>seodon.ru - CSS свойство text-decoration</title> <style type="text/css"> a:hover { text-decoration: none; /* убрать подчеркивание у ссылок под курсором */ } </style> </head> <body> <p><a href="https://spravka.seodon.ru/css/">Справочник по CSS</a></p> </body> </html>
Результат примера
Версии CSS
| Версия: | CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
| Поддержка: | Да | Да | Да | Да |
Браузеры
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari | ||
| Версия: | До 9.0 | 9.0 и выше | 2.0 и выше | До 4.0 | 4.0 и выше | 9. 2 и выше | 3.1 и выше |
| Поддержка: | Частично | Да | Частично | Частично | Да | Частично | Частично |
Internet Explorer 6.0 и 7.0 не понимают значение inherit.
IE до версии 9.0, Chrome и Safari не поддерживают значение blink.
Opera применяет значение blink только к тексту самого элемента, но не его потомков.
Chrome, Safari, Firefox до версии 4.0 не применяют данное свойство к потомку элемента, если этот потомок является HTML-таблицей.
IE 6.0 и 7.0, Chrome, Safari, Firefox до версии 4.0 применяют text-decoration к потомкам элемента, даже если они являются всплывающими, встроенными блоками (inline-block) или абсолютно позицонированными — ошибка.
Стилизация ссылок с помощью CSS
Ссылка имеет четыре различных состояния: обычное, посещенная, активная и наведение. Эти четыре состояния ссылки могут быть по-разному стилизованы через свойства CSS с использованием псевдоклассов элемента привязки в зависимости от того, в каком состоянии они находятся.
Ниже рассмотрены псевдоклассы CSS, связанные с тегом HTML <a>, которые можно использовать для определения различных стилей для разных состояний гиперссылки.
- a:link — устанавливает стили для обычных или не посещенных ссылок, на которые не наведен указатель мыши.
- a:visited — устанавливает стили для ссылки, которую посетил пользователь, но на нее не наведен указатель мыши.
- a:hover — устанавливает стили для ссылки, когда пользователь наводит на нее указатель мыши.
- a:active — устанавливает стили для ссылки, по которой происходит клик.
Вы можете указать любое свойство CSS, например, color, font-family, background и т. д. для каждого из этих селекторов, чтобы переопределить стиль ссылок.
a:link { /* непосещенная ссылка, обычное состояние */
color: #FF0000;
text-decoration: none;
}
a:visited { /* посещенная ссылка */
color: #00FF00;
}
a:hover { /* курсор мыши над ссылкой (hover) */
color: #FF00FF;
text-decoration: underline;
}
a:active { /* активная ссылка */
color: #0000FF;
}Порядок, в котором вы устанавливаете стиль для нескольких состояний ссылок, важен, поскольку то, что определяет последний, имеет приоритет над более ранним кодом CSS.
Стандартные стили ссылок
Во всех основных веб-браузерах ссылки на веб-страницах имеют подчеркивание и используют цвета ссылок браузера по умолчанию, если вы не устанавливаете стили специально для них.
блок 1
Например, цвета ссылок по умолчанию в веб-браузерах на основе Gecko, таких как Firefox, — синий для не посещенных, фиолетовый для посещенных и красный для активной ссылки.
Установка цвета ссылок в CSS
Для установки цвета ссылки достаточно использовать селектор а. Однако считается хорошей практикой добавить стили для посещенных ссылок и состояния hover (момент, когда курсор находится над ссылкой). Это делается для удобства пользователя, который всегда может видеть какие ссылки он уже посетил и на какие может перейти.
Как убрать подчеркивание у ссылок
CSS-свойство text-underline обычно используется для удаления или добавления подчеркивания для ссылок. В следующем примере демонстрируется, как удалить или установить свойство text-underline для разных состояний гиперссылки.
a:link { /* непосещенная ссылка, обычное состояние */
color: #FF0000;
text-decoration: none;
}
a:visited { /* посещенная ссылка */
color: #00FF00;
text-decoration: none;
}
a:hover { /* курсор мыши над ссылкой (hover) */
color: #FF00FF;
text-decoration: underline;
}
a:active { /* активная ссылка */
color: #0000FF;
text-decoration: underline;
}блок 3
html — Как убрать подчеркивание имени при наведении
спросил
Изменено 3 месяца назад
Просмотрено 248 тысяч раз
У меня такой html:
легенда.зеленый-цвет{
цвет:зеленый;
}
В моем случае Раздел выглядит зеленым, но когда я навожу на него указатель мыши, он становится похожим на href, но я хочу, чтобы он оставался таким же, без подчеркивания и изменения цвета.
Можно ли добиться без изменения CSS или с минимальным изменением CSS?
или может быть как-то с jquery?
- html
- css
попробуйте это:
legend.green-color a:hover{
текстовое оформление: нет;
}
2
Удалить текстовое оформление тега привязки
Раздел
1
Для этого вы можете использовать CSS под legend.green-color a:hover .
legend.green-color a:hover {
цвет:зеленый;
текстовое оформление: нет;
}
Чтобы сохранить цвет и не подчеркивать ссылку:
legend.green-color a{
цвет:зеленый;
текстовое оформление: нет;
}
Вы можете присвоить идентификатор конкретной ссылке и добавить CSS. См. шаги ниже:
1. Добавьте идентификатор по вашему выбору (должно быть уникальным именем; может начинаться только с текста, а не с числа):
def
Затем добавьте необходимый CSS следующим образом:
#smallLinkButton: наведение, активное, посещенное{ текстовое оформление: нет; }
легенда.зеленый цвет{ цвет:зеленый !важно; }
В реагировать вам нужно сделать это
....
или если вы используете bootstrap в реагировать , то используйте этот класс
className="text-decoration-none"
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
ссылок CSS — TutorialBrain
Ссылки CSS
В HTML ссылки создаются с помощью тега .
Вы можете изменить цвет текста, оформление текста, цвет фона и семейство шрифтов гиперссылки с помощью CSS.
Примеры стилей ссылок CSS
Вы можете изменить цвет ссылок с помощью CSS.
Цвет связи
Подписаться на @tutorial_brain
Ссылка на изображение в стиле HTML
Ссылка на изображение в формате HTML может быть оформлена с помощью CSS. Ссылка не нужна только для текста. Это может быть и для изображений.
Давайте посмотрим, как мы можем стилизовать изображения со ссылками —
Пример оформления ссылки на HTML-изображение
img {
ширина: 50%;
высота: 30%
}
Цвета ссылок
Иногда требуется изменить цвет ссылок.
- Если вы хотите, чтобы конкретная ссылка имела определенный цвет, вы можете использовать встроенный CSS.
- Чтобы все ссылки на вашем сайте имели определенный цвет, вы можете использовать внешний CSS.
- А чтобы все ссылки на конкретной странице вашего сайта имели определенный цвет, вы можете использовать Внутренний CSS.
Давайте посмотрим, как можно изменить цвет ссылки с помощью внутреннего CSS. Таким же образом можно изменить цвет ссылок во внешнем и встроенном CSS.
Пример изменения цвета ссылок
a {
цвет: темно-синий;
}
Подписаться на @tutorial_brain
Ссылки для кнопок
Поскольку на кнопки практически можно нажимать, а кнопки ведут к «Призыву к действию» или могут также ссылаться на веб-страницу.
Давайте посмотрим, как можно стилизовать ссылки на кнопке с помощью кнопок ссылок CSS-
Пример оформления кнопок со ссылкой
.redbutton {
цвет фона: фиолетовый;
граница: 2 пикселя сплошного оранжевого цвета;
радиус границы: 10 пикселей;
}
Подписаться на @tutorial_brain
Подчеркивание ссылок
Если вам нужно убедиться, что ссылки явно подчеркнуты, вы можете использовать свойство подчеркивания text-decoration: underline .
Пример подчеркивания ссылок
a {
оформление текста: подчеркивание;
}
Подписаться на @tutorial_brain
Ссылки стилей в div
Создать уникальный стиль для div легко, даже если вы хотите добавить ссылку на div.
Вы можете определить div с помощью id или класс . Затем вы можете использовать этот тег id или class внутри тега стиля, чтобы задать стиль.
Таким образом, вы можете изменить цвет ссылки, ширину div, цвет фона и т.д.
Пример использования ссылок в div
#divimg1 {
ширина:авто;
высота: 300 пикселей;
цвет фона: оранжевый;
}
Подписаться на @tutorial_brain
Стилизация ссылок HTML на основе различных этапов ссылки
Существует 4 типа ссылок в зависимости от фазы (этапа), на которой они находятся. Эти фазы происходят с определенным событием, которое принимает пользователь::
- a:link → Это обычная ссылка, которую пользователь не посещал.
Косвенно эта ссылка является нетронутой и не посещенной. - a:visited → Ссылка, которую пользователь посетил уже в стадии посещенной ссылки. Обычно веб-сайты отображают эту ссылку другим цветом по сравнению с непосещенной ссылкой.
- a:hover → Когда пользователь наводит указатель мыши на ссылку, то конкретный момент, когда пользователь наводит курсор на ссылку, является стадией наведения. На некоторых веб-сайтах курсор меняется на «руку» при перемещении курсора.
- a:active → Момент перехода по ссылке называется активной стадией ссылки, поэтому, когда пользователь щелкает определенную ссылку, и окно временных рамок при нажатии на ссылку является фазой активной ссылки. .
Пример обычной ссылки, которая не посещалась:
a:link {
text-decoration:none;
семейство шрифтов: калибровки;
цвет: зеленый;
}
Пример посещенной ссылки:
a:посетили {
цвет: синий;
}
Пример ссылки при наведении мыши:
a:hover {
цвет: черный;
фоновый цвет:розовый;
}
Пример активной ссылки:
a:active {
цвет: помидор;
text-decoration:underlined;
background-color:yellow;
}
Предупреждение/Опасность/Информация/Успех
Важно следовать им при определении стиля для различных этапов ссылок.
Пример, показывающий различные типы ссылок
a:link {
текстовое оформление: нет;
семейство шрифтов: калибри;
цвет:зеленый;
}
а: посетил {
цвет синий;
}
а: наведите {
цвет: розовый;
украшение текста: подчеркивание;
}
а: активный {
цвет: помидор;
оформление текста: подчеркнутый;
цвет фона: желтый;
}
CSS Interview Вопросы и ответы
- Какое свойство гиперссылки определяет непосещенную ссылку?
В CSS свойство a:link определяет непосещенную ссылку.
a:link — это стандартная ссылка, по которой не нажимают и не посещают.
- Как изменить цвет ссылок?
Сначала выберите ссылку и укажите встроенный CSS, внешний CSS или внутренний CSS.
Синтаксис:
com/" target="_blank">Выделите ссылку темно-синим цветом
ИЛИ
<стиль>
а {
цвет: темно-синий;
}
3. Что такое алинк и влинк?
alink — активная ссылка — это обычная ссылка, по которой пользователь не заходил. Косвенно эта ссылка не нажимается, и это непросмотренная ссылка.
vlink — Это Visited-ссылка, здесь пользователь нажал на ссылку и теперь она находится в стадии посещенной ссылки. Обычно веб-сайты отображают эту ссылку другим цветом по сравнению с непосещенной ссылкой.
3. Как добавить ссылку на кнопку?
Кнопка дает призыв к действию, когда мы нажимаем на нее. Обычно кнопки используются для кнопки отправки, кнопки входа и т. д.
Чтобы добавить ссылку на кнопку, нам нужно указать тег тег внутри тега .
4. Как убрать подчеркивание в ссылке?
По умолчанию ссылки подчеркнуты.
