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

Leave a Comment / Css / By /

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

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

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


Узнаем как вставить в текст знак нижнего подчеркивания

Пользователь, который только начал свое знакомство с компьютером, может столкнуться с огромной…

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

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

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

a {

text-decoration: none;

}

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

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

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


Свойства CSS цвета. Коды цветов

Один из инструментов для изменения стилей веб-страниц — CSS цвета. Есть несколько способов…

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

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

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

а: hover {

text-decoration: none;

}

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

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

а {

text-decoration: none;

}

а: hover {

text-decoration: underline;

}

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

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


Привлекательные страницы, или О том, как в 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 можно создавать следующие виды ссылок:

  • — a:link — ссылки не посещенные;
  • — a:visited — ссылки после посещения  пользователем;
  • — a:hover —  пользователь провел над;
  • — a:active — ссылки активные. 

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

{font-size; text-decoration; color; font-weight;  font –family; } 

При этом создается новый стиль, а последовательность выше описанную —  необходимо соблюдать.

Существует возможность оформления ссылки в любом тэге, так называемый комбинированный способ. Далее приводится несколько примеров  оформления ссылок. 

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

Со ссылками, при помощи CSS, можно сделать интересную особенность. Цвет ссылки, при наведении на нее курсора мыши, остается неизменным, но зато у нее появляется подчеркивание другого цвета, нежели сама ссылка. Данный прием не работает в браузерах Netscape 4.x и Internet Explorer 5. 

Пример: Изменение цвета подчеркивания у ссылок

<html>
<head> 

<style>
a:link { color: blue; text-decoration: none }
 a:hover { color: red; text-decoration: underline }
.link { color: blue }
</style> 

<body>
<a href=link1.html><span class=link>Ссылка</span></a>

</body>

</head>

</html> 

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

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

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

<html>
<head>

<style>
A {color: #FF0000;}
A:visited {color: #666666;}
A:hover { text-decoration: none; border-bottom: 1px dashed blue; }</style>

</head> 

<body>
<a href=1.

html>Подчеркнутая ссылка</a>
</body>

</html>  

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

 

Сайт на HTML

Таблицы стилей — CSS

Вебмастеру в помощь

×

Ваше имя

Телефон

Сообщение

Мои услуги

   

ДОРАБОТКА МОДЕРНИЗАЦИЯ
УСОВЕРШЕНСТВОВАНИЕ
ТЕХНИЧЕСКАЯ ПОДДЕРЖКА
ОБСЛУЖИВАНИЕ САЙТОВ
НА JOOMLA.

html — Как создать эффект подчеркивания для зависших ссылок в CSS?

спросил

Изменено 2 месяца назад

Просмотрено 13 тысяч раз

Я пытаюсь добиться такого стиля:

Как создать этот эффект с помощью CSS? 9

Используя :hover и установив border-bottom . Что-то вроде этого

 ул{
  стиль списка: нет;
  заполнение: 0;
  маржа: 0;
}
уль ли {
  плыть налево;
  поле: 0 5px;
}
уль ли а {
  текстовое оформление: нет;
  черный цвет;
}
уль ли: наведите {
  нижняя граница: 2 пикселя сплошного красного цвета;
} 
 <ул>
  
  • Главная
    • 
  
  • О нас
    • 
  
  • Контакты
    • 
 
     а {
        отображение: встроенный блок;
        положение: родственник;
        текстовое оформление: нет;
        выравнивание текста: по центру;
    }

    а: наведите: до {
        содержание: '';
        ширина: 100%;
        высота: 100%;
        положение: абсолютное;
        слева: 0;
        внизу: 0;
        box-shadow: вставка 0 -10px 0 #11c0e5;
    }

    промежуток {
        дисплей: блок;
        ширина: 100 пикселей;
        высота: 40 пикселей;
        цвет фона: красный;
        отступы сверху: 20px;
    } 
     
    тексты ссылок

    3

    Зарегистрируйтесь или войдите в систему

    Зарегистрируйтесь с помощью Google

    Зарегистрироваться через Facebook

    Зарегистрируйтесь, используя электронную почту и пароль

    Опубликовать как гость

    Электронная почта

    Требуется, но не отображается

    Опубликовать как гость

    Электронная почта

    Требуется, но не отображается

    Анимированное подчеркивание при наведении (чистый CSS)

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

    Псевдоэлементы и псевдоклассы

    Я подумал, что было бы неплохо начать с освежения знаний о псевдоэлементах и ​​псевдоклассах. На самом деле нам нужно знать разницу между ними, потому что они очень похожи. Псевдоэлемент типа… временно преобразует часть вашего HTML в элемент, чтобы его можно было стилизовать самостоятельно. Если у вас возникли проблемы с пониманием этой концепции, рассмотрите селектор

    span::first-letter . Здесь рассматриваемый псевдоэлемент равен first-letter , который выбирает самую первую букву в диапазоне и оформляет ее в соответствии с установленными правилами. С другой стороны, псевдокласс — это стиль, который обычно не существует, но применяется к элементу при определенных условиях. Примером этого может служить псевдокласс :hover , который помогает нам применить другой набор стилей к элементу, когда пользователь наводит на него курсор мыши.

    ::после мыслей

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

    • text-decoration (установить подчеркивание )
    • граница
    • коробка-тень

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

    Кажется, существует распространенное заблуждение, что псевдоэлементы ::before и ::after создаются вне родительского элемента. Это не верно. На самом деле их имена относятся к их положению по отношению к содержимому (или внутреннему HTML, если хотите) внутри родителя. Оба они являются дочерними элементами элемента(ов), для которого они объявлены.

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

     Дом
Новости
    Войти в полноэкранный режимВыйти из полноэкранного режима

    Давайте также применим некоторые стили по умолчанию для тегов a — 

     a {
    отображение: встроенный блок;
    ширина: 120 пикселей;
    размер шрифта: 20px;
    выравнивание текста: по центру;
    цвет: помидор;
    семейство шрифтов: "Segoe UI", Tahoma, Geneva, Verdana, без засечек;
    вес шрифта: 600;
    курсор: указатель;
}
    Войти в полноэкранный режимВыйти из полноэкранного режима

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

     a::after {
    содержание: "";
    дисплей: блок;
    поле сверху: 10px;
    поле слева: авто;
    поле справа: авто;
    высота: 2 пикселя;
    ширина: 0 пикселей;
    цвет фона: помидор;
}
    Войти в полноэкранный режимВыйти из полноэкранного режима

    Установка ширины на 0px — это то, что скрывает его от просмотра.

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

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