Как убрать оформление ссылок css
CSS: Оформление ссылок
Селекторы псевдо-классов
Ссылки
Чаще всего селекторы псевдо-классов можно встретить, когда они применяются к ссылкам. Каждая ссылка может находиться в одном из четырех состояний: непосещённая, посещенная, активная (находящаяся под курсором мыши) и нажатая (удерживаемая кнопкой мыши). В CSS есть возможность стилизовать ссылку в каждом ее состоянии:
Приведенный выше код содержит четыре CSS правила. При этом в каждом из селекторов используется псевдо-класс. Первое правило задает цвет для ссылок, по которым пользователи еще не переходили, если пользователь перешел по ссылке, то будет использовано второе правило. Псевдо-классы :hover и :active динамически изменяют отображение ссылки: :hover стилизует ссылку только в то время, когда над ней находится указатель мыши, а :active только тогда, когда пользователь уже щелкнул по ссылке, но кнопка еще удерживается.
Псевдо-классы :hover и :active формально называют динамическими, поскольку они применяют стиль только при взаимодействии пользователя с соответствующими элементами путем наведения курсора мыши и щелчка по ссылке соответственно.
Подчеркивание ссылок
По умолчанию текст ссылок всегда отображается подчеркнутым. Используя свойство text-decoration вы можете либо совсем убрать подчеркивание ссылок либо сделать так, чтобы ссылка была подчеркнутой, только при наведении на нее курсора мыши.
Примечание: если подчеркивание ссылок отключается с помощью свойства text-decoration, то единственным визуальным отличием между ссылками и обычным текстом будет их цвет. Это может привести к тому, что пользователям может быть трудно отличить ссылки от текста.
Псевдо-классы :first-child и :last-child
Еще одним примером псевдо-классов являются :first-child и :last-child. Псевдо-класс :first-child ссылается на первый по порядку дочерний элемент обозначенного родителя, в отличие от него :last-child работает наоборот, он ссылается на последний дочерний элемент:
Поскольку первый абзац является первым дочерним элементом для
Свойства ссылок
Для управления видом различных ссылок в CSS используются псевдоклассы, которые указываются после селектора A через двоеточие. В табл. 1 приведены допустимые псевдоклассы и их описания.
| Свойство | Описание |
|---|---|
| A:link | Определяет стиль для обычной непосещенной ссылки. |
| A:visited | Определяет стиль для посещенной ссылки. |
| A:active | Определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее. |
| A:hover | Определяет стиль для ссылки при наведении на нее мышью. |
Ссылки без подчеркивания
Одно из наиболее популярных применений CSS — это скрытие подчеркивания у ссылок. С позиции юзабилити не совсем верное решение, поскольку пользователь может сразу не догадаться, что текст, который он видит, является ссылкой. Все ведь уже привыкли — раз подчеркивание используется, значит это ссылка. Но при правильном применении отсутствие подчеркивания у ссылок может придать определенный эффект сайту. Часто делается, что при наведении курсора, ссылка становится подчеркнутой, меняет свой цвет или используется и тот и другой эффект одновременно (пример 1).
Пример 1. Подчеркивание у ссылки и изменение ее цвета
Ниже приведено использование данного примера. При наведении курсора на ссылку, она становится подчеркнутой и красной.
Подчеркнутые и надчеркнутые ссылки
Пример 2. Использование подчеркивания в ссылках
Изменение размера ссылки
Пример 3 показывает, как изменять размер ссылки при наведении на нее курсора.
Пример 3. Изменение размера ссылки
Изменение цвета подчеркивания
Со ссылками, при помощи CSS, можно сделать интересную особенность. Цвет ссылки, при наведении на нее курсора мыши, остается неизменным, но зато у нее появляется подчеркивание другого цвета, нежели сама ссылка (пример 4).
Пример 4. Создание подчеркивание другого цвета
Ссылки разных цветов
Часто возникает необходимость на одной странице использовать ссылки разных цветов и размеров. И применять для каждой области веб-страницы ссылки подходящего типа. Одни для меню, другие для текста. В этом случае создаем два или больше класса со своими параметрами и применяем их по своему усмотрению. В примере 6 достаточно поменять значения у соответствующего класса, и цвета у ссылок, где этот класс используются, изменятся автоматически.
Пример 5. Ссылки разных цветов
Результат данного примера показан на рис. 1.
Как в CSS убрать подчеркивание ссылки
Здравствуйте, дорогие друзья!
Давайте сегодня решим такую проблему, как стилизация ссылок на страницах вашего сайта, а именно как в CSS убрать подчеркивание ссылки. Данный вопрос в большинстве случаев возникает у начинающих веб-разработчиков и у тех людей, которые не особо разбираются в CSS, но хотят внести некоторые изменения в оформление своего сайта.
Навигация по статье:
Отключаем подчеркивание
Чтобы в CSS убрать подчеркивание ссылки нам нужно воспользоваться специальным CSS-свойством text-decoration со значением none, которое нужно прописать в файле стилей нашего сайта для ссылки.
Если вам нужно убрать подчёркивание ссылки для всех ссылок на сайте, то в CSS пишем:
Убираем подчеркивание ссылки CSS при наведении
Если же у вас изначально ссылки не имеют подчеркивания, и это подчеркивание появляется при наведении указателя мышки, то вам нужно указывать немного другой селектор, а именно:
В этом случае мы дописали к селектору псевдокласс hover, который как раз и позволяет задать стили для элемента при наведении указателя.
Используя показанные в данной статье стили, вы сможете с легкостью убрать или добавить подчеркивание для ссылок на вашем сайте. Если у вас возникнут вопросы, вы всегда можете задать их в комментария.
Желаю вам успехов в оформлении вашего сайта! До встречи в следующих статьях!
Ссылки в CSS
На этой странице вы найдете примеры по изменению HTML-ссылок при помощи CSS, который позволяет их делать ссылками-блоками, ссылками-иконками, без подчеркивания, с закругленными углами, изменять между ними расстояние и многое другое. В дальнейшем на основе этих примеров можно создавать различные варианты навигационных меню для сайта.
Прежде чем вы начнете изучение примеров, хочу сделать небольшое пояснение. Во всех примерах, для большей наглядности, будет использован псевдокласс CSS :hover, который применяется для изменения стилей ссылок при наведении на них курсора мыши. Надо сказать, что подобная практика является обычным явлением и в той или иной степени применяется практически на всех сайтах интернета.
Ссылки без подчеркивания и с подчеркиванием
В этом примере мы уберем подчеркивание у ссылок, а потом будем добавлять или убирать при наведении курсора мыши.
Пример HTML и CSS: как убрать и добавить подчеркивание у ссылок
Описание примера
Изменение стиля подчеркивания ссылок и расстояния от подчеркивания до текста
Изначально подчеркивание у ссылок — это сплошная тонкая линия, почти вплотную прижатая к тексту. И в большинстве случаев такого варианта вполне достаточно. Однако иногда дизайн требует, чтобы ссылки подчеркивались не сплошной, а, например, пунктирной линией, или чтобы расстояние от подчеркивания до ссылок было больше стандартного, или само подчеркивание было более жирным. А иногда нужно сделать вообще какое-нибудь экзотическое подчеркивание, например волнистой или разноцветной линией. Все эти варианты и будут рассмотрены в данном примере.
Пример HTML и CSS: пунктирное подчеркивание ссылок
Описание примера
Ссылки-блоки
Очень часто для создания меню требуется сделать не просто текстовые ссылки, а ссылки-блоки, у которых активной областью будет как сам текст, так и определенная зона вокруг него.
Пример HTML и CSS: делаем ссылки-блоки
Описание примера
Ссылки с рамками под курсором мыши
В этом примере мы сделаем ссылки с рамками, которые будут у них появляться в момент наведения курсора мыши. В общем-то, в этом нет ничего сложного, но есть один маленький нюанс.
Пример HTML и CSS: делаем ссылки с рамками при наведении курсора мыши
Описание примера
Вместо того чтобы делать цвет рамок под фон страницы, ему можно было бы присвоить значение transparent и сделать прозрачным, но, как я уже говорил, IE6 неправильно его обрабатывает.
Трехмерные ссылки
В этом примере мы сделаем трехмерные ссылки, которые будут походить на кнопки. Точнее ссылки будут не трехмерные, а псевдотрехмерные, конечно.
Пример HTML и CSS: создание трехмерных ссылок
Описание примера
Ссылки с иконками
В этом примере мы сделаем ссылки с иконками, которые будут содержать не только изображения этих иконок, но и текст под ними. Однако в дальнейшем вы легко сможете их изменить и оставить, например, только иконки.
Перед началом работ подготовим несколько изображений иконок, причем в двух комплектах — для обычных ссылок и ссылок под курсором мыши. Второй комплект должен внешне отличаться от первого, у нас оно выражается в цветовой палитре.
Пример HTML и CSS: делаем ссылки с иконками
Описание примера
IE6 придется немного «пролечить»:
Если вам нужны ссылки вообще без текста, а только с иконками, то можно поступить так. Убрать у ссылок все внутренние отступы и минимальную ширину. Задать им явную ширину и высоту равную размеру иконок.
Закругленные углы ссылок
В данном примере мы закруглим углы у ссылок с помощь одного из способов закругления углов, описанном в соседнем подразделе. Вариант с применением CSS 3 рассматривать не будем, так как там все очень просто, а лучше сделаем закругления с использованием изображений.
Для этого сначала вырежем несколько заготовок картинок в двух комплектах — для обычных ссылок и ссылок под курсором. У нас оно будут отличаться наличием/отсутствием тени у изображений.
Пример HTML и CSS: ссылки с закругленными углами
Описание примера
Останавливаться на самой технологии закругления не будем, если необходимо, то прочитаете о ней в соответствующем разделе сайта.
Для IE6 и IE7 подключаем дополнительные стили с помощью условных комментариев, но сам CSS-код немного изменяем и делаем его отличным от того, который используется в способах закругления углов:
Закругленные углы ссылок (вариант два)
Рассмотрим еще один пример закругления углов ссылок, но уже с использованием четырех отдельных изображений-уголков.
Пример HTML и CSS: ссылки с закругленными углами (второй вариант)
Описание примера
Здесь тоже не будем говорить о самом закруглении, обозначим только отличительные моменты.
2.7. CSS-ссылки
CSS-ссылки содержат свойства, которые отвечают за внешний вид гипертекстовых ссылок HTML-документа. Ссылки представляют собой основной способ навигации по сайту, поэтому применение CSS-стилей для оформления улучшит их визуальное восприятие.
Оформление гипертекстовых ссылок
1. Псевдоклассы состояний гипертекстовых ссылок
Большинство браузеров выделяют четыре основных состояния гиперссылок, каждому из которых соответствует свой псевдокласс селектора:
Используя псевдоклассы для форматирования каждого состояния ссылок, можно дать пользователям подсказки, по каким ссылкам он уже переходил, а по каким — ещё нет, например:
Форматировать ссылки нужно в указанной последовательности, в противном случае состояние стилей перестанет работать (в силу механизма каскадности).
2. Выборка отдельных ссылок
Для стилизации отдельных ссылок нужно задать им стилевой класс, после чего можно будет менять внешний вид выбранных ссылок:
3. Подчеркивание ссылок
Добавление подчеркивания только при наведении на ссылку:
Внешний вид нижней границы ссылки:
4. Изображения для ссылок
Если нужно, чтобы значок автоматически добавился ко всем ссылкам, содержащим документы одного формата, можно воспользоваться следующей конструкцией:
5. Использование фонового изображения
Можно преобразовать внешний вид ссылки, добавив в качестве нижней границы фоновое изображение: