Как сделать ссылку без подчеркивания
Свойства ссылок
Для управления видом различных ссылок в 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 underline style всех ссылок.
Предостережение относительно удаления подчеркивания
Нравится вам подчеркивание или нет, нельзя отрицать того, что оно позволяет указать на связь текста со ссылкой. Если убрать подчеркивание или изменить синий цвет ссылок, то нужно предоставить взамен стили, которые позволяют выделить текст ссылок. Это сделает взаимодействие посетителей с сайтом интуитивным.
Не подчеркивайте текст, не связанный со ссылкой
Не подчеркивайте текст, который не является ссылкой. Люди привыкли к тому, что подчеркнутый текст ( с помощью CSS underline color ) является ссылкой. Если вы подчеркиваете контент, чтобы акцентировать на нем внимание ( вместо того, чтобы вывести его полужирным шрифтом или курсивом ), вы вводите пользователей сайта в заблуждение.
Измените сплошное подчеркивание точками или пунктиром
Если хотите сохранить подчёркивание ссылок, но при этом изменить стиль по умолчанию ( линия « solid « ), это можно сделать следующим образом. Вместо сплошной линии используйте точки. Для этого нужно удалить подчеркивание и заменить его свойством border-bottom :
Так как стандартное CSS text decoration underline мы удалили, будет отображаться только линия из точек:
То же самое можно сделать, чтобы получить пунктирное подчеркивание. Просто измените значение border-bottom на dashed :
Изменение цвета подчеркивания
Еще один способ обратить внимание пользователей на ссылки — изменить цвет подчеркивания. Н забудьте, что цвет text underline CSS должен соответствовать используемой цветовой схеме:
Как сделать двойное подчеркивание
Хитрость в создании двойного подчеркивания заключается в изменении ширины рамки. Если создать рамку шириной в 1 пиксель, в результате получится два подчеркивания, которые выглядят как одно:
Также можно использовать подчеркивание по умолчанию, чтобы создать альтернативное двойное подчеркивание. Например, чтобы одна из линий была двойной:
Не забывайте о различных состояниях ссылок
Также можно использовать border-bottom для различных состояний ссылок. Использование псевдокласса :hover поможет улучшить опыт взаимодействия пользователей. Чтобы создать второе точечное подчеркивание, выводимое при наведении на ссылку курсора мыши, используйте следующий код и деактивацию CSS text decoration underline :
Пожалуйста, опубликуйте ваши мнения по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, лайки, отклики, дизлайки, подписки!
Гиперссылка без подчеркивания
Ссылка без подчеркивания, не меняющая цвет после клика
Нужно сделать ссылку, которая бы не подчеркивалась и была бы белого цвета, оставаясь такой и после.
Сумма чисел в ячейках без заливки и подчеркивания. Написать функцию
Здравствуйте! У меня есть экселевский документ, там есть таблица с числами. Мне нужно было создать.
иногда в дизайн просто не вписывается подчеркивание.
красивее конечно через стили всё это делать
Атрибут style, также, как и тег style не относится к css. К css относятся стили, прописанные внутри style.. :pardon:
Гиперссылка. Копирование из ячейки и вставка как гиперссылка
Добрый день! Помогите, пожалуйста? У меня есть таблица. В первой ячейке стоит название сайта. Во.
Подчеркивания текста в cs
Всем привет using System; using System.Collections.Generic; using System.Data.Entity; using.
Эффект подчеркивания меню
Как сделать эффекты, указанные на картинке ниже? Как делал я: погрузил все меню в контейнер.
Не отображается символ подчеркивания
Здравствуйте! Делаю подменю Reopen в меню File. В подменю должно быть: «В качестве нулевой.
Ссылки в 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: ссылки с закругленными углами (второй вариант)
Описание примера
Здесь тоже не будем говорить о самом закруглении, обозначим только отличительные моменты.
Как убрать подчёркивание ссылки?
Пишу сайт по шаблону, и столкнулся с такой проблемой, что никак не могу убрать подчёркивание у ссылок!
Две одинаковых страницы только один на русском, а другой на английском, но оба подключены к одной CSS.
Русская версия
Простой 3 комментария
Перед тем как продолжать с CSS, исправьте ошибки в разметке https://validator.w3.org/nu/
Потом прогоните через этот же валидатор и стили.
Следующим ходом замените флоаты на флексы и/или гриды.
Дальше по обстоятельствам.
aside div.language ul a
ссылкам нужно убирать text-decoration а не вложениям
а вообще кто вставляет li в ссылку? бред сивой кобылы какой то
Сам недавно ток приехал, и сел за пк.
ПС: не обращайте внимание на гневные или заумные ответы, кажется многие забыли что значит быть новичком
У вас несколько проблем к ряду, во первых сбросьте стили.
Хотя бы так. Второе у вас конструкция Html категорически не правильная, прислушайтесь что вам пишут выше. li это элемент списка, ol ul и тп, вы не можете их вставить в отдельный div или же в тег a-href. Судя по всему вам еще рановато вообще что либо писать, изучите матч часть. Не хочу вас обидеть, но таковы реалии, ваш уровень это не уровень новичка, это уровень ничего.
Ankhena, да я с вами согласен, но человек столкнётся этим в последствии, не поняв почему у p,ul буду отступы, моя ошибка была в том что я не объяснил для чего это вообще. Подчёркивание уберёт сброс стилей.
Прошу прощения за оффтоп, но почему по вашему сброс родных для браузера стилей сомнительная идея? Да возможно не в такой конфигурации, но всё же почему?