Ссылка подчеркнутая css: text-decoration-style | htmlbook.ru

Как сделать ссылку подчеркнутой | Все о компьютерной технике

Селекторы псевдо-классов

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

Ссылки

Чаще всего селекторы псевдо-классов можно встретить, когда они применяются к ссылкам. Каждая ссылка может находиться в одном из четырех состояний: непосещённая, посещенная, активная (находящаяся под курсором мыши) и нажатая (удерживаемая кнопкой мыши). В CSS есть возможность стилизовать ссылку в каждом ее состоянии:

Приведенный выше код содержит четыре CSS правила. При этом в каждом из селекторов используется псевдо-класс. Первое правило задает цвет для ссылок, по которым пользователи еще не переходили, если пользователь перешел по ссылке, то будет использовано второе правило.

Псевдо-классы :hover и :active формально называют динамическими, поскольку они применяют стиль только при взаимодействии пользователя с соответствующими элементами путем наведения курсора мыши и щелчка по ссылке соответственно.

Примечание: :hover, помимо ссылок, можно использовать и с другими элементами, что позволяет создавать эффекты вроде подсветки строки таблицы при наведении на нее курсора мыши. Однако браузер IE6 и более ранние версии поддерживают использование данного псевдо-класса исключительно с элементами .

Подчеркивание ссылок

По умолчанию текст ссылок всегда отображается подчеркнутым. Используя свойство text-decoration вы можете либо совсем убрать подчеркивание ссылок либо сделать так, чтобы ссылка была подчеркнутой, только при наведении на нее курсора мыши.

Примечание: если подчеркивание ссылок отключается с помощью свойства text-decoration, то единственным визуальным отличием между ссылками и обычным текстом будет их цвет. Это может привести к тому, что пользователям может быть трудно отличить ссылки от текста.

Псевдо-классы :first-child и :last-child

Еще одним примером псевдо-классов являются :first-child и :last-child. Псевдо-класс :first-child ссылается на первый по порядку дочерний элемент обозначенного родителя, в отличие от него :last-child работает наоборот, он ссылается на последний дочерний элемент:

Поскольку первый абзац является первым дочерним элементом для

Ссылки встречаются практически на всех веб-страницах. Ссылки позволяют пользователям щелкать их путь от страницы к странице.

HTML ссылки-гиперссылки

Ссылки HTML являются гиперссылками.

Вы можете щелкнуть по ссылке и перейти к другому документу.

При наведении указателя мыши на ссылку, стрелка мыши превратится в маленькую руку.

Примечание: Ссылка не обязательно должна быть текстом. Это может быть изображение или любой другой HTML-элемент.

HTML ссылки-синтаксис

В HTML ссылки определяются тегом :

Пример

href атрибут указывает адрес назначения ( https://html5css.ru/HTML/ ) ссылки.

текст ссылки является видимой частью (см. наш учебник по HTML).

Щелчок по тексту ссылки отправит вас по указанному адресу.

Примечание: Без косой черты на адреса вложенных папок, вы можете создать два запроса на сервер. Многие серверы автоматически добавляют косую черту к адресу, а затем создают новый запрос.

Локальные ссылки

В приведенном выше примере используется абсолютный URL (полный веб-адрес).

Локальная ссылка (ссылка на тот же веб-узел) указывается с относительным URL-адресом (без http://www. ).

Пример

Цвета ссылок HTML

По умолчанию ссылка будет выглядеть так (во всех браузерах):

• Непосещаемая ссылка подчеркнута и синяя
• Посещаемая ссылка подчеркнута и пурпурная
• Активная ссылка подчеркнута и красная

Можно изменить цвета по умолчанию с помощью CSS:

Пример

HTML ссылки-целевой атрибут

Атрибут target указывает, где открыть связанный документ.

Атрибут target может иметь одно из следующих значений:

• _blank — Открытие связанного документа в новом окне или вкладке
• _self — Открывает связанный документ в том же окне/вкладке, в котором он был нажат (по умолчанию)
• _parent — Oручка связанного документа в родительском фрейме
• _top — Открытие связанного документа в полном тексте окна
• framename — Открытие связанного документа в именованном фрейме

В этом примере откроется связанный документ в новом окне обозревателя/вкладка:

Примере

Совет: Если веб-страница заблокирована в рамке, можно использовать target=»_top» для выхода из кадра:

Пример

HTML ссылки-изображение как ссылка

Он является общим для использования изображений в качестве ссылки:

Пример

Примечание: border:0; добавляется для предотвращения IE9 (и более ранних) от отображения границы вокруг изображения (когда изображение является ссылкой).

Названия ссылок

Атрибут title указывает дополнительные сведения об элементе. Информация чаще всего отображается как текст подсказки, когда указатель мыши перемещается над элементом.

Пример

HTML ссылки-создать закладку

Закладки HTML используются для того, чтобы позволить читателям перейти к определенным частям веб-страницы.

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

Чтобы сделать закладку, необходимо сначала создать закладку, а затем добавить ссылку на нее.

При щелчке ссылки страница будет прокручиваться в папку с закладкой.

Пример

Сначала создайте закладку с атрибутом id :

Chapter 4

Then, add a link to the bookmark («Jump to Chapter 4»), from within the same page:

Or, add a link to the bookmark («Jump to Chapter 4»), from another page:

Example

Внешние контуры

На внешние страницы можно ссылаться с полным URL-адресом или с помощью пути относительно текущей веб-страницы.

В этом примере используется полный URL-адрес для ссылки на веб-страницу:

Пример

В этом примере ссылки на страницу, расположенную в папке HTML на текущем веб-узле:

Пример

В этом примере ссылка на страницу, расположенную в той же папке, что и текущая страница:

Пример

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

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

По сути, любая гипертекстовая ссылка является указателем адреса в глобальной сети, по которому можно моментально перейти в окне браузера. Успешный переход по ссылке возможен в двух случаях: если документ, на который ссылается документ, существует, и если синтаксис гиперссылки верен с точки зрения HTML.

Атрибут href в качестве своего значения содержит адрес (относительный или абсолютный), на который будет вести ссылка. При щелчке на ссылку браузер получает и отображает документ, адрес которого указан в атрибуте href :

Результат данного примера в окне браузера:

Как убрать подчёркивание ссылки

Все HTML ссылки отображаются подчёркнутыми. Такой вид для ссылок задан в стилях, используемых браузерами по умолчанию. Чтобы убрать нижнее подчёркивание у ссылки надо изменить для неё стиль, это можно сделать двумя способами.

Первый способ: к ссылке, у которой надо отключить подчёркивание, добавляется атрибут style со значением text-decoration: none; :

Второй способ подойдёт в том случае, когда надо убрать подчёркивание сразу у всех ссылок в HTML документе. В CSS стилях прописываем для всех элементов свойство text-decoration со значением none :

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

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

Со ссылками работают самые разнообразные свойства: color , background , border , border-radius , text-decoration , padding и т. д. Мы покажем наиболее распространенные варианты оформления ссылок, после чего вы можете подумать, каким образом их дополнить либо изменить.

Подчеркивание ссылок

По умолчанию ссылка в браузере имеет синий цвет и подчеркивание снизу. Но встретить этот классический, приевшийся дизайн в наше время — большая редкость, поскольку стиль ссылки в 99.9% случаев переделывается. Подчеркнутые ссылки чаще всего можно встретить в тексте, а вот в навигационных меню подчеркивание, как правило, убирается.

Стандартный стиль ссылки в браузере

Чтобы отменить дефолтный подчеркнутый стиль у ссылок, потребуется задать значение none для уже знакомого нам свойства text-decoration :

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

Подчеркивание ссылок при наведении

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

Ссылка подчеркнута, когда наведен курсор

Подчеркивание с помощью border

Стандартное свойство text-decoration не поддается особой стилизации, поэтому веб-разработчики часто используют в качестве альтернативы свойство border . Управлять внешним видом границы гораздо легче: ей можно задать цвет, толщину, стиль полосы. Пример:

Создание подчеркивания с помощью свойства border-bottom

Согласитесь, такой вариант выглядит веселее с точки зрения возможностей. Не забывайте, что с помощью псевдокласса :hover можно изменить вид границы (и не только) при наведении курсора. А если при этом еще и задействовать CSS-анимацию, то из обычной ссылки может получиться настоящее произведение искусства! Убедитесь в этом сами, взглянув на несколько оригинальных способов выделения ссылок в CSS.

Ссылка с фоном

Ссылки позволяют добавлять к ним фон через уже изученное нами свойство background . И если обычный фоновый цвет для ссылки вряд ли удивит кого-либо, то с помощью фоновых рисунков можно добиться более интересных результатов. К примеру, можно сымитировать рукописное подчеркивание, а также разместить другую графику, задуманную в дизайне ссылки.

Как обозначить ссылки, которые открываются в новом окне/вкладке? Для этого поведения даже существует привычная иконка. Но добавлять ее через тег будет не очень хорошим тоном. Желательно, чтобы иконка открытия в новом окне появлялась автоматически, если у ссылки есть соответствующий HTML-атрибут target=»_blank» . Здесь нам на помощь придет селектор атрибутов:

Ссылка с иконкой открытия в новом окне

В качестве фонового изображения мы задаем иконку, определяем ее расположение, отменяем дублирование фона и добавляем небольшой отступ от текста. Как видите, всё довольно просто, а посетитель уже проинформирован о поведении ссылки, и открытие новой вкладки/окна не станет для него неожиданностью.

Кроме изображений, можно задавать ссылкам и различные виды градиентов (помните, мы это делали на последнем практическом уроке?). Это здорово преображает элемент, в чем мы снова убедимся далее.

Ссылка-кнопка

Вот уж когда точно можно фантазировать, так это при создании стиля для ссылки в виде кнопки. Даже несмотря на то, что современный веб-дизайн отказался от объемных фигур с детальной прорисовкой в пользу плоских и простых форм, все равно вариантов оформления кнопок остается огромное множество.

Несколько примеров (чтобы просмотреть код CSS для каждого примера, кликните по изображению):

Код CSS для данного примера:

Код CSS для данного примера:

В этих примерах определены стили как для обычного состояния ссылки-кнопки, так и для состояний :hover (наведение) и :active (нажатие/удержание). Как видите, CSS позволяет имитировать внешний вид настоящей кнопки до мельчайших деталей.

Важно: чтобы иметь возможность подобным образом стилизовать ссылку, нужно заставить ее вести себя как блочный (block) либо строчно-блочный элемент (inline-block). Дело в том, что если вы будете добавлять отступы к строчному элементу (коим по умолчанию является ссылка), то не увидите никакого эффекта.

Что такое псевдокласс? Ссылки и псевдоклассы в CSS

1. Разархивировать скачанный файл.
2. Открыть папку index.
3. Запустить файл index.html в браузере.

Изучаем ссылки и псевдоклассы в CSS

Как работают псевдоклассы и для чего они нужны? Псевдоклассы определяют состояние элемента, после чего присваивают ему свои стили. Например, у нас на странице расположена ссылка синего цвета. Если мы наведем на эту ссылку указатель мыши, то ссылка мгновенно становится подчеркнутой, а если попробуем нажать, то ссылка становится красной. Это осуществляется с помощью псевдоклассов. Как я уже сказал, они отслеживают поведение элемента и дают ему свои стили, которые прописаны в соответствующем документе. В этом видеоуроке мы будем разбираться со ссылками и псевдоклассами, которые можно будет к ним применить.

Как прописываются псевдоклассы в коде? Сначала идет селектор, потом двоеточие и затем сам псевдоклас. На примере я показал псевдокласс, работающий при наведении на ссылку. Мы наводим мышь на ссылку, после чего происходит событие, и наша ссылка становится подчеркнутой. Как только уводим мышь со ссылки, ссылка принимает исходный вид. Думаю, понятно. А раз понятно, то давайте перейдем в документ style.css и попробуем прописать все эти псевдоклассы.

Псевдокласс непосещенной ссылки

Псевдоклассы мы можем приписывать не только к селектору «а» (к ссылкам), но и к любому классу — к любому селектору. Давайте сначала попробуем прописать псевдоклассы для всех ссылок. Прописываем селектор «a», ставим двоеточие и прописываем псевдокласс link (он означает, что пользователь нашу ссылку еще пока не посетил). Пропишем ссылке цвет и text-transform (трансформирование, которое мы изучали в прошлом видеоуроке).

 a:link {
 color: #FF00FF;
 text-transform: uppercase;
 }
 

Сохраним и проверим в браузере, что у нас получилось на данный момент. Видим, что все ссылки стали фиолетового цвета и написаны большими буквами. Но есть одна ссылка «сайт», которая не изменила стиль — как была, так и осталась написанной темно-фиолетовым цветом маленькими буквами. Почему? Все потому, что она уже была посещена. Если мы сейчас посетим ссылку «ИЗУЧАТЬ», то она станет такой же, как ссылка «сайт».

Псевдокласс посещенной ссылки

Давайте создадим специальный псевдокласс для уже посещенных ссылок. Переходим в код и  создаем касс visited. Давайте зададим ему другой цвет, чтобы можно было сразу отличить, и  поставим подчеркивание — text-decoration.

 a:visited {
 color: #FF0000;
 text-transform: capitalize;
 text-decoration: underline;
 }
 

Сохраняем. Проверяем в браузере. Все посещенные ссылки стали подчеркнутыми и приняли свойство capitalize (каждое слово ссылки стало начинаться с большой буквы).

Псевдокласс ссылки при наведении

В начале этого видеоурока я показывал пример. Там при наведении на ссылку, она принимала особый вид. Давайте сделаем это. Делается это с помощью псевдокласса hover. Text-decoration поставим overline.

 a:hover {
 color: #FFFF00;
 text-transform: lowercase;
 text-decoration: overline;
 }
 

Сохраняем и смотрим, что у нас получилось. Давайте наведем мышку на ссылку. Мы видим, что ссылка стала желтого цвета с верхним подчеркиванием, а также все ее буквы стали маленькими.

Давайте изменим цвет, например, на зеленый. Желтый здесь не очень смотрится.

 a:hover {
 color: #00FF00;
 text-transform: lowercase;
 text-decoration: overline;
 }
 

Сохраняем. Стало более-менее.

Теперь давайте попробуем задать псевдоклассы не ссылкам, а абзацу, например. То есть, чтобы все ссылки в абзаце принимали какой-либо класс. Переходим в код файла index.html и пропишем где-нибудь абзац.

 <br><p>И тут возникла идея создать уже свой собственный сайт :)</p>
 

Абзац будет иметь свой класс. Сразу его пропишем. Класс будет называться links.

 <br><p>И тут возникла идея создать уже свой собственный сайт :)</p>
 

Переходим в файл стилей. Сейчас будем прописывать стили для ссылок, которые находятся в абзаце со стилем links. Как мы это пропишем? Сначала прописываем абзац — p, ставим точку, прописываем класс — links, ставим пробел и букву «a», означающую ссылки. После этого ставим двоеточие и прописываем псевдокласс link. Сейчас я объясню, что мы написали. Сначала идет абзац, потом класс, а потом — ссылка. Абзац с классом links, в котором есть ссылка, принимает псевдокласс link со стилями, которые мы сейчас укажем. Пропишем свойство color со значением, например #004400 – темно-зеленый цвет. На этом все.

 p.links a:link {
 color: #004400;
 }
 

Сохраняем и посмотрим, что у нас получилось. А ничего у нас не получилось, потому что ссылка у нас была посещенной. Давайте пропишем еще одну ссылку, которая у нас не будет посещенной. Переходим в код.

 <br><p>И <a href="/tut.html">тут</a> возникла идея создать уже свой собственный сайт</a>.
 

Сохраняем. Проверяем. Мы видим, что ссылка «тут» стала зеленого цвета, подчеркнутая снизу, написана большими буквами. Почему она написана большими буквами? Сейчас мы это разберем. Перейдем в код. Видим, что мы задали только цвет, но чуть выше мы задали всем ссылкам трансформирование uppercase. И раз мы не указали нашей ссылке особое трансформирование, то она станет писаться большими буквами. В связи с этим мы сейчас укажем особое трансформирование. Поставим значение none.

 p. links a:link {
 color: #004400;
 text-transform: none;
 }
 

Сохраняем. Буквы нашей ссылки стали маленькими, при наведении она принимает глобальный класс всех ссылок, так как мы не задали для этого абзаца и класса links специальный псевдокласс. Давайте его зададим. Возможно на словах это чуть-чуть не понятно, но, думаю, на примере вы это поймете. Цвет поставим такой же. Трансформирования также не будет, text-decoration будет underline. В p.links a:link укажем text-decoration: none.

 p.links a:link {
 color: #004400;
 text-transform: none;
 text-decoration: none;
 }
 p.links a:hover {
 color: #004400;
 text-transform: none;
 text-decoration: underline;
 }
 

Сохраняем. Обновляем. У нас получилась ссылка «тут» зеленого цвета. При наведении появляется нижнее подчеркивание. Так же и со ссылкой «сайт», но она уже посещена, просто мы не задали псевдокласс для посещенной ссылки. При наведении она тоже становится зеленой и подчеркнутой.

Давайте создадим класс для уже посещенных ссылок. Поставим бардовый цвет, трансформирования не будет, text-decoration тоже поставим none.

 p.links a:visited {
 color: #CC0000;
 text-transform: none;
 text-decoration: none;
 }
 

Сохраняем. Смотрим, что у нас произошло с абзацем. Не посещенная ссылка имеет зеленый цвет, при наведении подчеркивается. Посещенная ссылка имеет красный цвет, но при наведении она не принимает никакой класс. Если ссылка «тут» при наведении становится зеленой и подчеркнутой, то ссылка «сайт» ничего не принимает. В чем же дело? Дело в том, что псевдокласс hover находится выше, чем visited. Чтобы наша задумка осуществилась, нам нужно псевдокласс hover поставить ниже, чем visited.

 p.links a:visited {
 color: #CC0000;
 text-transform: none;
 text-decoration: none;
 }
 p.links a:hover {
 color: #004400;
 text-transform: none;
 text-decoration: underline;
 }
 

Теперь сохраняем и проверяем. Все работает. Наша задумка осуществилась. Если мы сейчас нажмем на ссылку «тут», то она станет красного цвета, как и ссылка «сайт» и при наведении станет зеленой с нижним подчеркиванием. С этим все понятно. Осталось совсем немного.

Псевдокласс ссылки при нажатии

Сейчас я вам покажу последний псевдокласс для ссылок — active (нажатие). Пока ссылка будет нажата, она будет принимать какие-то стили. Давайте добавим свойство font-weight со значением bold. Пусть при нажатии ссылка становится жирной. Трансформирования не будет, text-decoration — тоже, а цвет укажем красный.

 p.links a:active {
 color: #CC0000;
 font-weight: bold;
 text-transform: none;
 text-decoration: none;
 }
 

Сохраняем. Проверяем. Попробуем нажать. Я держу ссылку нажатой, она стала жирной и темно-красного цвета. Если я ее отпущу, то ссылка просто примет свой вид, который принимала раньше.

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

Персональный сайт — Как сделать ссылку Цвет ссылок Параметр Target Ссылки без подчеркивания Изображения в качестве ссылк

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега A, который имеет единственный параметр href. В качестве значения используется адрес документа (URL).

Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка.

Пример 1. Использование абсолютных ссылок

Относительные ссылки, как следует из их названия, построены относительно текущего документа или адреса.
Примеры таких адресов:
1. /
2. /demo/
3. /images/pic.gif
4. ../help/me.html
5. manual/info.html

Первые две ссылки называются неполные и указывают веб-серверу загружать файл index.html (или default.html) находящемуся в корне сайта (пример 1) или папке demo (пример 2). Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге. Слэш перед адресом говорит о том, что адресация начинается от корня сайта (пример 3), двоеточие — перейти на уровень выше в списке каталогов сайта (пример 4).

<a href=images/xxx.jpg>Посмотрите на мою фотографию!</a><br>
<a href=tip.html>Как сделать такое же фото?</a>

</body>
</html>

Задание цвета всех ссылок на странице

Цвета ссылок задаются в качестве параметров тега BODY. Параметры являются необязательными и если они не указаны используются значения по умолчанию.

LINK — определяет цвет ссылок на веб-странице (цвет по умолчанию синий, #0000FF).
ALINK — цвет активной ссылки. Цвет ссылки меняется при нажатии на ней кнопки мыши. Цвет по умолчанию красный, #FF0000.
VLINK — цвет уже посещенных ссылок. Цвет по умолчанию фиолетовый, #800080.

В HTML цвета задаются цифрами в шестнадцатеричном коде, в виде #RRBBGG, где R, G и B обозначают соответственно красную, зеленую и синюю составляющую. Для каждого цвета задается шестнадцатеричное значение от 00 до FF, что соответствует диапазону от 0 до 255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ #.

Задание цвета отдельных ссылок на странице

Вышеописанный способ задания цветов работает для всех ссылок веб-страницы. Однако, иногда возникает необходимость одновременно использовать разные цвета. Светлые, например, для темных областей веб-страницы, а темные цвета — соответственно для светлых. Для этого существует два основных метода.

1. Использование тега FONT
Ссылка помещается между тегами <font> и </font>, которые должны находиться внутри контейнера <a href=…> и </a>.

В приведенном примере оранжевый цвет ссылки, заданный в теге BODY заменяется на белый с помощью тега FONT.

2. Использование стилей
Для изменения цвета ссылки следует использовать параметр в теге А, где #rrggbb — цвет в шестнадцатеричном представлении. Можно, также, использовать названия цветов или указывать цвет в формате: rgb (132, 33, 65). В скобках указаны десятичные значения красного, зеленого и синего цвета.

<a href=content.html>Содержание сайта</a><br>
<a href=im.html>Интернет-маркетинг</a><br>
<a href=use.html>Юзабилити</a>

</body>
</html>

             Изменить вид ссылки при наведении на нее курсора мыши?

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

Пример

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
<title>Цвет ссылок</title>
<style type=»text/css»>
A {
 color: #008000;
 text-decoration: none;
}
A:visited {
 color: #800080;
}
A:hover {
 color: #800000;
 text-decoration: underline;
}
</style>
</head>
<body>
<p><a href=»rome.html»>Cras ingens iterabimus aequor</a> — завтра снова мы выйдем в огромное море.</p>
</body>
</html>

В данном примере ссылка становится подчеркнутой и меняет свой цвет, когда на нее наводится указатель (рис. 1). Заметьте, что псевдокласс hover в таблице стилей идет после visited. Это имеет значение, иначе посещенные ссылки в данном случае не будут изменять свой цвет.

Рис. 1. Вид ссылки при наведении на нее курсора мыши

                                             Увеличение букв ссылки

Ещё можно увеличить буквы при наведение на ссылку

a:hover { text-transform: uppercase; }

По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено параметром target=»» тега А. Target может принимать следующие значения:

_blank — загружает страницу в новое окно браузера;
_self — загружает страницу в текущее окно;
_parent — загружает страницу во фрейм-родитель;
_top — отменяет все фреймы и загружает страницу в полном окне браузера.

Если на сайте используются фреймы, то в качестве значения target можно использовать имя фрейма.

Пример 1. Открытие документа в новом окне

Пример 2. Открытие документа во фрейме

Ссылка в примере 2 ведет на сайт www.htmlbook.ru, открывающийся во фрейме с именем newframe.

Средствами тегов HTML убрать подчеркивание у ссылок не представляется возможным. Поэтому для этой цели используются каскадные таблицы стилей (CSS).

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

Подчеркивание прячется параметром text-decoration: none.

Пример. Убирание подчеркивания у ссылки

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

Кроме текста, в качестве ссылок можно использовать и рисунки. Изображение в этом случае надо поместить между тегами <a href=…> и </a>. Пример 1. Создание рисунка-ссылки <a href=»sample.html»><img src=»sample.gif» width=50 height=50></a> Вокруг изображения-ссылки автоматически добавляется рамка толщиной 1 пиксел и цветом совпадающим с цветом текстовых ссылок. Чтобы убрать рамку, следует задать параметр border=0. Пример 2. Удаление рамки вокруг изображения <a href=»sample. html»><img src=»sample.gif» width=50 height=50 border=0></a>

Вопрос — Не меняется цвет ссылки в CSS

Помогите решить задачку. Пытаюсь чтобы в джумле 1.5 ссылки были синими и подчеркнутыми. Нашел файл CSS — template.css

изменил там код:

Код (css):

1. */

2. body { line-height:1.8; background:#fff url(‘/images/stories/fon.jpg’) no-repeat center 520px; }

3. /*

4. # body#bd { color:#555; }

5. */

6. body.fs1 { font-size:10px }

7. body.fs2 { font-size:11px }

8. body.fs3 { font-size:12px }

9. body.fs4 { font-size:13px }

10. body.fs5 { font-size:14px }

11. body.fs6 { font-size:15px }

12.  

13. /*

14. * links

15. */

16. a { color:#0000CD; text-decoration:underline }

17. a:hover,

18. a:active,

19. a:focus { color:#0000CD; text-decoration:underline }

20.  

21. /*

22. * Content spacing

23. */

24. . column p,

25. .column pre,

26. .column blockquote,

27. .column ol,

28. .column ul { margin:10px 0; padding:0 }

29. .article-content p {line-height:200%!important;}

Но ссылка становится синей только при наведении мышкой, а так она грязно серого цвета. Пример: http://www.xn—-7sbaboujb1cnxmcq5c…kovriki-tekstilnye-tiguan-5n1061270p-wgk.html

Подскажите что не так? На другом сайте все работает

Лучший ответ Дмитрий Д сказал(а): ↑

Или я просто не тот файл CSS редактирую?

Нажмите, чтобы раскрыть…

А кто делал второй сайт ))
В карточке товара /templates/gk_mystore/css/style2.css

Код (css):

1. a, #comments .comment-author {

2.   color: #0000cd;

3.   font-size: 12px;

4. }

Нажмите, чтобы раскрыть. ..

Перейти к исходному сообщению »

Нестандартный подход к оформлению подчеркивания ссылок

Сегодня речь пойдет о подчеркивании ссылок, а именно как грамотно и по интересному их оформить. Также рассмотрим нестандартное решение этой задачи.

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

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

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

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

Техническая сторона вопроса

Как всегда будем учиться на практических примерах. Сделаем список ссылок, которые подчеркнуты пунктирной линией. Цвет линии сделаем менее выразительным, чем цвет текста. Стоит отметить, что вместо свойства text-decoration для пунктирного подчеркивания используем border-bottom. Это объясняется тем, что нельзя одновременно через первое свойство указать и цвет, и стиль линии подчеркивания. Записываем в таблицу стилей следующий код:

CSS

а {
	color:#444;
	border-bottom:1px dashed #b0b0b0;
}

Вот так это будет выглядеть в реальных условиях:

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

Усложняем задачу

Но, как оказалось, такое решение не всегда эффективное. К примеру, нужно реализовать следующий вид ссылок

При этом картинка должна быть тоже активна для перехода по ссылке.

Простой метод

Можно использовать простое решение, но оно не будет соответствовать поставленной задаче:

CSS

а {
	color:#444;
	border-bottom:1px dashed #b0b0b0;
	background:url(img.png) no-repeat;
	background-size:19px;
	padding-left:20px;
	margin-bottom:10px;
}

В таком случае картинка ссылки тоже будет подчеркнута, обратите внимание

Правильное решение

Для решения нашей задачи нам потребуется слегка усложнить HTML-конструкцию кода, добавив вспомогательный тег span:

HTML

<a href="#" ><span>Ссылка1</span></a>

И слегка преобразить код в таблице стилей:

CSS

а span {
	color:#444;
	border-bottom:1px dashed #b0b0b0;
}
а {
	background:url(img. png) no-repeat;
	background-size:19px;
	padding-left:20px;
	margin-bottom:10px;
}

По итогу мы получим картинку, которая была показана при постановке задачи выше по тексту. Поставленная задача успешно решена.

В каких браузерах работает?

Оценок: 3 (средняя 5 из 5)

• 1436 просмотров

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

HTML Цвета ссылок. Уроки для начинающих. W3Schools на русском

Ссылка HTML отображается в другом цвете в зависимости от того, посещали её, не посещали или ссылка активна.

HTML Цвета ссылки

По умолчанию ссылки будут отображаться так (во всех браузерах):

• Непосещенная ссылка подчеркнута, синим цветом
• Посещенная ссылка подчеркнута, фиолетовым цветом
• Активная ссылка подчеркнута, красным цветом

Вы можете изменить цвета состояния ссылки, используя CSS:

Пример

Здесь неиспользованная ссылка будет зеленым без подчеркивания. Просмотренная будет розовым цветом, без подчеркивания. Ссылка будет желтой и подчеркнутой. Кроме того, при наведении курсора на ссылку (a:hover) она становится красной и подчеркнутой:

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>

Кнопки ссылки

Ссылку также можно оформить как кнопку с помощью CSS:

Пример

a:hover, a:active {
  background-color: red;
}
</style>

Чтобы узнать больше о CSS, перейдите к CSS Учебнику на нашем сайте.

HTML Теги ссылки

Изучаем html ссылки в веб документе — инструкция-мануал

Всем привет дорогие друзья! Прошу прощения за то, что выпал из рабочего процесса. Поскольку февраль и март были не самыми лучшими месяцами в моей жизни. Ну да ладно…Сегодня я расскажу вам про html ссылки в веб документе, как они работают, зачем нужны и другую информацию. Постараюсь максимально раскрыть тему для самых самых новичков. Итак, поехал.

Ссылки доступны практически на всех веб-страницах. Ссылки позволяют пользователям щелкнуть их путь со страницы на страницу.

HTML ссылки — это гиперссылки

Вы можете нажать на ссылку и перейти к другому документу.

Когда вы переместите мышь по ссылке, стрелка мыши превратится в маленькую руку-указатель.

Примечание. Ссылка не обязательно должна быть текстовой. Это может быть картинка-баннер, векторная иконка font-awesome или любой другой элемент HTML.

Синтаксис

Ссылка в html документе определяется тегом <a>  который является парным:

<a href=»url»>Текст ссылки находится здесь</a>

Пример:

<a href=»http://smarticlr.ru»>Посетите мой блог</a>

Атрибут href указывает адрес получателя (https://smarticle.ru) ссылки.

Текст ссылки — ее видимая часть. Нажав на текст ссылки, вы отправите на указанный адрес.

Примечание. Без косой черты на адресах подпапки вы можете создать на сервере два запроса. Многие серверы автоматически добавят косую черту в адрес и затем создадут новый запрос.

Местные локальные ссылки

В приведенном выше примере используется абсолютный URL (полный веб-адрес).

Локальная ссылка (ссылка на тот же веб-сайт) указана с относительным URL (без http: // www ….).

Пример:

<a href=»html_images.asp»>HTML Images</a>

Цвета HTML ссылок

По умолчанию будет отображаться ссылка (во всех браузерах):

• Неприкосновенная ссылка подчеркнута и синяя
• Посещенная ссылка подчеркнута и фиолетовая
• Активная ссылка подчеркнута и красная

Вы можете изменить цвета по умолчанию, используя CSS:

<style> a:link { color: green; background-color: transparent; text-decoration: none; } a:visited { color: pink; background-color: transparent; text-decoration: none; } a:hover { color: red; background-color: transparent; text-decoration: underline; } a:active { color: yellow; background-color: transparent; text-decoration: underline; } </style>

Пример:

Ссылки HTML — атрибут цели

Атрибут target указывает, где можно открыть связанный документ. Может иметь одно из следующих значений:

_blank — открывает связанный документ в новом окне или вкладке
_self — открывает связанный документ в том же окне / вкладке, когда он был нажат (это по умолчанию)
_parent — открывает связанный документ в родительском кадре
_top — открывает связанный документ во всей полноте окна
framename — открывает связанный документ в именованном фрейме
В этом примере откроется связанный документ в новом окне / вкладке браузера:

<a href=»https://www.w3schools.com/» target=»_blank»>Visit W3Schools!</a>

Пример:

Совет. Если ваша веб-страница заблокирована во фрейме, вы можете использовать target = «_ top» для выхода из фрейма:

<a href=»https://www. w3schools.com/html/» target=»_top»>HTML5 tutorial!</a>

Пример:

HTML ссылка в изображении

Как и текстовые, ссылки может заключать и в изображения (баннеры):

Пример:

<a href=»default.asp»> <img src=»smiley.gif» alt=»HTML tutorial»> </a>

Примечание: border: 0; , чтобы IE9 (и ранее) не отображал границу вокруг изображения (когда изображение является ссылкой). Задается в стилях для картинки.

Атрибут Title у HTML ссылок

Атрибут title указывает дополнительную информацию об элементе. Информация чаще всего отображается в виде текста всплывающей подсказки, когда мышь перемещается над элементом.

Пример:

<a href=»https://www.w3schools.com/html/» title=»Go to W3Schools HTML section»>Visit our HTML Tutorial</a>

Создание якорных ссылок закладок

Якорные HTML-ссылки используются, чтобы позволить читателям перейти к определенным частям веб-страницы.

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

Чтобы сделать закладку, вы должны сначала создать закладку, а затем добавить к ней ссылку.

При щелчке по ссылке страница будет прокручиваться до местоположения с закладкой.

Пример:

Сначала создайте закладку с атрибутом id:

<h3>Chapter 4</h3>

Затем добавьте ссылку на закладку («Перейти к главе 4»), с той же страницы:

<a href=»#C4″>Перейти к главе 4</a>

Или добавьте ссылку на закладку («Перейти к главе 4»), с другой страницы:

<a href=»html_demo. html#C4″>Перейти к главе 4</a>

Внешние пути ссылок

На внешние страницы можно ссылаться с полным URL-адресом или с указанием пути к текущей веб-странице.

В этом примере для ссылки на веб-страницу используется полный URL-адрес:

<a href=»https://www.w3schools.com/html/default.asp»>HTML tutorial</a>

А в этом примере ссылка на страницу, расположенную в папке html на текущем веб-сайте:

<a href=»/html/default.asp»>HTML tutorial</a>

Этот пример ссылается на страницу, расположенную в той же папке, что и на текущей странице:

<a href=»default.asp»>HTML tutorial</a>

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

Открыв в браузере вы получите свой результат. До новых встреч на странице блога!

P.S. Помяните моего дедушку Мацкевича Юрия Альбиновича, ушедшего на небеса 08.03.2018

Я всегда буду тебя помнить, ты многое для меня сделал..((

ссылок для стилизации с реальным подчеркиванием

Прежде чем мы перейдем к , как стилизовать подчеркивание, мы должны ответить на вопрос: следует ли подчеркивать ?

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

Это ясно из этого совета из «Практической типографии» Баттерика:

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

Но Интернет другой. Гиперссылки — определяющая черта Интернета; и с самого начала Интернета они были подчеркнуты. Это общепринятое соглашение. Значение кристально ясное — подчеркивание означает ссылку .

Однако многие популярные веб-сайты отказались от подчеркивания: The New York Times , New York Magazine , The Washington Post , Bloomberg, Amazon, Apple, GitHub, Twitter, Wikipedia. Когда в 2014 году они удалили подчеркивание со своей страницы результатов поиска, ведущий дизайнер Google Джон Вили утверждал, что это сделало внешний вид более чистым. Примечательно, однако, что большинство этих сайтов сохранили небольшие отклонения от традиционного мрачного синего цвета ( # 0000EE ), который использовался браузером по умолчанию с самого начала Интернета.Хотя это дает визуальную подсказку для большинства пользователей, этого может быть недостаточно для соответствия стандарту доступности WCAG .

Цвет не используется как единственное визуальное средство передачи информации, указания действия, побуждения к ответу или выделения визуального элемента.
— WCAG 2,1

WCAG строго не требует использования подчеркивания для ссылок, но рекомендует их. Пользователи с дальтонизмом должны уметь распознавать ссылку.Вы можете различать их другими способами, например, с помощью полужирного шрифта . Или вы можете сохранить эту давно устоявшуюся визуальную аффорданс. Но если мы собираемся использовать подчеркивание, , мы хотим, чтобы они выглядели красиво . Марцин Вихари, дизайнер из Medium, описал идеальное подчеркивание как:

[…] видимый, но ненавязчивый — позволяющий людям понять, что можно нажимать, но не привлекая к себе слишком много внимания. Он должен быть расположен на правильном расстоянии от текста, удобно расположившись позади него, когда спусковые элементы хотят занять то же место.

Для достижения этого традиционно требовалось трюков CSS .

Хаки, которые у нас были

Это одна уловка, с которой будут знакомы все разработчики: граница снизу . Эмулируя подчеркивание с помощью border-bottom , мы получаем контроль над цветом и толщиной. У этих псевдо-подчеркивания есть одна проблема: слишком большое расстояние от текста. Они находятся под нижними элементами букв. Вы можете решить эту проблему, используя line-height , но это имеет свои проблемы.Похожая техника использует box-shadow . Марчин Вихари первым применил самую изощренную технику, используя background-image для имитации подчеркивания. Это были полезные приемы, но, к счастью, в них больше нет необходимости.

Styling

Наконец, мы можем разграничивать ссылки, не жертвуя стилем, благодаря двум новым свойствам CSS.

• text-underline-offset управляет положением подчеркивания.
• text-decoration-Thickness управляет толщиной подчеркивания, а также надстрочных и сквозных линий.

Согласно блогу WebKit:

Вы также можете указать from-font для обоих этих свойств, которые будут извлекать соответствующую метрику из самого файла используемого шрифта.

UX агентство Clearleft смело использует (псевдо) подчеркивание, привлекая внимание к ссылкам с красочным стилем. Вот один пример искусственного подчеркивания:

  a {
  текстовое оформление: нет;
  нижняя граница: # EA215A 0,125em сплошной;
}  

Обратите внимание, что это фальшивое подчеркивание явно находится под нижним нижним элементом буквы «y»:

Вот тот же абзац с использованием DevTools для применения того же стиля к реальному подчеркиванию с использованием новых свойств CSS:

  a {
  цвет оформления текста: # EA215A;
  толщина-украшение-текста:.125em;
  смещение подчеркивания текста: 1.5px;
}  

Вы заметите, что в моем примере кода я использую модуль em . Спецификация настоятельно рекомендует использовать вместо пикселей, чтобы толщина масштабировалась вместе со шрифтом.

Эти свойства уже добавлены в Safari и появятся в Firefox 70.

С переходом на Chromium для браузера Microsoft Edge мы наконец-то получим кроссбраузерную поддержку свойства в стиле текстового оформления , которое предлагает следующие параметры: сплошной (по умолчанию), двойной , пунктирный , штриховая и волнистая .В сочетании эти новые свойства открывают целый ряд возможностей.

Возможно, самое большое обновление для подчеркивания в Интернете, однако, произошло без необходимости разработчикам ничего делать . В старые добрые времена нисходящие элементы бесцеремонно перерезали подчеркиванием, что было далеко не изящно. Разработчики пытались обойти этот недостаток, применяя text-shadow , который соответствовал цвету фона. text-decoration-skip-ink предлагает лучший способ освободить место для спусковых устройств.

Удобно, оно установлено как новое значение по умолчанию для подчеркивания; Это означает, что внешний вид подчеркивания улучшился, в то время как большинство веб-разработчиков не знают о существовании этого свойства. Если вы хотите, чтобы подчеркивал глифы, вы можете установить для этого свойства значение none .

Основы CSS: стилизация ссылок как у босса

Интернет основан на ссылках. Идея о том, что мы можем щелкать / касаться ссылки и переходить с одной веб-страницы на другую, — это то, как серфинг в Интернете стало нарицательным.

Ссылки в HTML даже выглядят иначе, чем обычный текст без каких-либо стилей CSS.

Они синие (пурпурные при посещении). Они подчеркнуты. Это ссылка в чистом виде.

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

Хотите использовать другой шрифт, изменить цвет, убрать подчеркивание и сделать все прописными? Конечно, а почему бы и нет?

  a {
  красный цвет;
  текстовое оформление: нет;
  текст-преобразование: прописные буквы;
}  

Теперь готовим на газе! Но зачем останавливаться на достигнутом? Давайте рассмотрим еще несколько способов стилизации ссылок, чтобы сделать их удобнее.

Стиль каждого состояния ссылки

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

• Ссылка (: ссылка ): вероятно, она используется меньше всего, но она предназначена для стилизации элементов с href , а не для ссылок-заполнителей.
• Посещено (: посещено ): внешний вид ссылки, по которой пользователь щелкнул на странице раньше, когда курсор мыши не находится над ней.Стили, которые можно применить к : посещенный , ограничены по соображениям безопасности.
• Наведение (: наведение ): когда курсор мыши помещается поверх ссылки без щелчка
• Активен (: активен ): когда ссылка находится в процессе нажатия. Это может быть очень быстро, но это когда кнопка мыши была нажата и до того, как щелчок закончился.
• Focus (: focus ): аналогично : наведите курсор на , но где ссылка выбирается с помощью клавиши Tab на клавиатуре.Состояния наведения и фокуса часто стилизованы вместе.

Обратите внимание, порядок там важен:

1. Ссылка
2. Посещено
3. Наведите указатель мыши
4. Активно
5. Фокус

Если вы не сделаете это в этом порядке (представьте, что ваш стиль : посещенный идет после вашего стиля : наведите курсор на ), ссылки не будет вести себя так, как вы хотите. В моем воображаемом примере стиль : посещенный будет переопределять стиль : hover , что маловероятно, что это то, что вам нужно.Фокус — это функция доступности, поэтому последняя, ​​потому что она наиболее важна.

Один из способов запомнить порядок — ЛЮБОВЬ и НЕНАВИСТЬ . то есть L (ink) OV (isted) E / H (over) A (Active) TE.

Вот та же ссылка, на которую мы смотрели. Сначала попробуйте навести указатель мыши на него, не щелкая, и обратите внимание, что он становится подчеркнутым. Затем щелкните ссылку, но оставьте кнопку мыши нажатой на некоторое время, чтобы увидеть, как активный стиль меняет цвет ссылки на черный.Наконец, отпустите кнопку мыши, и ссылка должна стать фиолетовой, прежде чем она будет технически посещена.

Ссылки кажутся простой концепцией, но, черт возьми, в них много чего происходит, а CSS дает нам невероятные возможности для настройки опыта!

Ссылки как кнопки

Хотя по этому поводу ведутся споры, мы можем использовать CSS, чтобы текстовая ссылка выглядела как кнопка.

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

  a {
  цвет фона: красный;
  цвет белый;
  заполнение: 1em 1.5em;
  текстовое оформление: нет;
  текст-преобразование: прописные буквы;
}  

Отлично! Теперь давайте воспользуемся способностями изменения состояния, которые мы узнали в предыдущем разделе, чтобы сделать нашу искусственную кнопку более интерактивной. Мы сделаем кнопку темно-серой при наведении, черной при активной и светло-серой при посещении:

  a {
  цвет фона: красный;
  цвет белый;
  заполнение: 1em 1.5em;
  текстовое оформление: нет;
  текст-преобразование: прописные буквы;
}

a: hover {
  цвет фона: # 555;
}

a: active {
  цвет фона: черный;
}

а: посетил {
  цвет фона: #ccc;
}  

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

Ой, и курсоры!

Мы довольно подробно рассмотрели ссылки на стили, но есть еще один их компонент, который мы не можем игнорировать: курсор.

Курсор указывает положение мыши на экране. Мы уже привыкли к стандартной черной стрелке:

  a: hover {
  курсор: указатель;
}  

  #link {
текстовая документация: нет;
цвет синий;
}

/ * показывать подчеркивание при наведении * /
#link: hover {
текст-оформление: подчеркивание;
цвет оформления текста: красный;
-webkit-текст-украшение-цвет: красный;
}
  

  a: hover {цвет: красный; }  

  a.border {
    высота строки: 1.2em;
    текстовое оформление: нет;
    нижняя граница: сплошной синий 1px;
}
a.border: hover {
    цвет нижней границы: красный;
}  

  a.text-shadow {
    текстовое оформление: нет; / * нам не нужен этот нативный стиль ссылки * /
    нижняя граница: сплошной синий цвет 3 пикселя; / * из-за этой границы * /
    дисплей: встроенный блок;
    высота строки: 0.85; / * контролирует положение границы * /
    text-shadow: / * закрашивает границу, применяя 'свечение' * /
    2px 2px белый,
    2px -2px белый,
    -2px 2px белый,
    -2px -2px белый;
}
a.text-shadow: hover {
    цвет границы: красный;
}  

  a.ink {
    -webkit-text-decoration-skip: чернила;
    текст-украшение-пропустить: чернила;
}  

   Типографика   

  @supports not ((text-decoration-skip: ink) или (-webkit-text-decoration-skip: ink)) {
    a.ink-alt {
        текстовое оформление: нет;
        нижняя граница: сплошной синий цвет 3 пикселя;
        обивка-дно:.2vh;
    }
    a.ink-alt: hover {
        цвет границы: красный;
    }
}
a.ink-alt {
    -webkit-text-decoration-skip: чернила;
    текст-украшение-пропустить: чернила;
}
a: hover {
    красный цвет;
}  

Удаление синего подчеркивания из ссылки в CSS

1. Установите для свойства text-decoration значение none , чтобы удалить синее подчеркивание из ссылки в CSS
2. Используйте псевдоклассы для выделения, чтобы удалить синее подчеркивание из ссылки в CSS
3. Удалите свойство box-shadow , чтобы удалить подчеркивание и цвет из ссылки в CSS

В этом руководстве представлены методы удаления синего подчеркивания, образованного в гиперссылке в HTML.Мы будем использовать CSS, чтобы удалить такое подчеркивание.

Установите для свойства

Мы можем использовать свойство text-decoration в CSS, чтобы указать оформление текста. Имущество является короткой собственностью трех других владений. Эти свойства: text-decoration-line , text-decoration-color и text-decoration-style . Свойство text-decoration-line применяет художественное оформление текста, например, надчеркивание, подчеркивание и сквозную строку.Свойство text-decoration-color отвечает за установку цвета оформления текста, а свойство text-decoration-style применяет различные стили, такие как сплошной, волнистый, пунктирный, пунктирный, для оформления текста. Когда мы используем сокращенное свойство text-decoration , мы можем указать значение как none . В результате мы можем установить для всех трех свойств значение none . Следовательно, он удалит подчеркивание в гиперссылке, а также уберет синий цвет.

Например, создайте div с контейнером класса . Затем внутри div создайте span с классом thisPage . Затем между тегом span напишите текст Current Page . Напишите тег привязки в следующей строке. Установите для атрибута href тега значение # . Внутри тега anchor напишите еще один span с классом otherPage .Напишите текст Next Page между span . Затем в соответствующем файле CSS выберите тег привязки, который находится внутри контейнера класса как .container a . Установите красный цвет для текста, используя шестнадцатеричный код # FF0000 . Затем установите для свойства text-decoration значение none .

Приведенный ниже CSS устанавливает красный цвет текста Next Page , что является гиперссылкой. Свойство text-decoration , для которого установлено значение none , удалит подчеркивание и синий цвет элемента тега привязки .

Пример кода:

  

     Текущая страница 
      Следующая страница  

  

  .container a {
  цвет: # FF0000;
  текстовое оформление: нет;
}
  

Использование псевдоклассов для выделения для удаления синего подчеркивания ссылки в CSS

Мы выберем псевдоклассы и применим те же свойства CSS, что и первый метод для удаления синего подчеркивания ссылки.Ранее мы выбирали только тег привязки . В этом методе мы будем использовать псевдоклассы для выбора тегов привязки. Мы будем использовать псевдоклассы, такие как : hover , : visit , : link и : active . Класс : hover применяется, когда пользователь указывает на элемент с помощью указывающего устройства, такого как мышь, но не обязательно щелкает элемент. Класс : посещенный применяется, когда ссылка уже нажата. Точно так же класс : link выбирает все непосещенные ссылки.И класс : active выбирает активную ссылку. Мы будем использовать тот же HTML-документ для демонстрации этого метода.

Например. используйте псевдоклассы : ссылка , : посещенный , : hover и : активный , выбрав тег привязки . Разделите каждый псевдокласс запятой. Установите свойство text-decoration на none и установите свойство color на # 000000 .

Примененные свойства CSS вступят в силу для всех псевдоклассов в примере ниже.Селектор a: link изменит цвет гиперссылки на черный и удалит подчеркивание, когда ссылка не посещена. Он переопределяет свойство color среди всех других селекторов. Селектор a: посещенный удалит подчеркивание из ссылки после того, как ссылка была посещена. Эффекты CSS также будут иметь место при наведении курсора на ссылку и во время щелчка по ссылке. Таким образом, мы можем удалить подчеркивание и синий цвет из ссылки, используя псевдоклассы CSS.

Пример кода:

   Текущая страница 
  Следующая страница  
  

  a: ссылка, a: посетил, a: hover, a: active
{
    цвет: # 000000;
    текстовое оформление: нет;
}
  

Удалите свойство

  box-shadow: вставка 0 -3px 0 0 #bdb;
  

   Текущая страница 
  

  .thisPage {
  цвет: зеленый;
  box-shadow: вставка 0 -3px 0 0 красный;
  тень коробки: нет;
}
  

 a: [condition] <----- Условие относится к состоянию ссылки 

 а: ссылка
{
цвет: зеленый;
текстовое оформление: нет;
} 

 a: посетил
{
цвет: фиолетовый;
стиль шрифта: курсив;
} 

 a: парение
{
font-weight: жирный;
} 

 а: ссылка
{
цвет: # 000000;
оформление текста: капители;
} 

 а: ссылка
{
цвет: зеленый;
текстовое оформление: нет;
}

а: посетил
{
цвет: фиолетовый;
стиль шрифта: курсив;
}

а: парение
{
font-weight: жирный;
}

а: активный
{
цвет: # 000000;
вариант шрифта: капители;
} 

Я нашел два способа добиться этого. Один использует материал text-decoration , второй использует старый трюк border-bottom .

лично я предпочитаю text-decoration чем border-bottom . Правильный инструмент для правильной работы. Я не знаю.

text-decoration - самый простой способ подчеркнуть текст.

  a {
    текстовое оформление: нет;
    цвет синий;
}

/ * показывать подчеркивание при наведении * /
a: hover {
    текст-оформление: подчеркивание;
    цвет оформления текста: красный;
    -webkit-текст-украшение-цвет: красный;
}
  

  a {
 текст-оформление: подчеркивание;
 цвет оформления текста: красный;
 стиль оформления текста: волнистый;
}