Как изменить вид ссылки

Как изменять внешний вид ссылок?

Как надо написать в CSS чтобы сделать допустим для первой ссылки в обычном состоянии чтобы не было подчёркивающей линии и цвет был чёрный. А для второй в обычном виде всё стандартно, но при наведении на неё курсора допустим она становилась зелёной?

Отслеживать
задан 8 апр 2019 в 16:42
82 9 9 бронзовых знаков
8 апр 2019 в 17:00

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

#a1 < text-decoration: none; color: black; >#a2:hover

Отслеживать
ответ дан 8 апр 2019 в 18:51
36 1 1 бронзовый знак

• css
• ссылки

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.10.27.43697

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как создать и изменить ссылку

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

Как добавить ссылку на сайт

Самый простой способ добавить ссылку в текст — с помощью визуального редактора. Он позволяет создать ссылку без знаний html.

В WordPress редактор записей содержит две вкладки: визуально и текст. В первой для создания ссылки достаточно нажать кнопку «Вставить/изменить ссылку» и задать адрес нужной веб-страницы. Во вкладке Текст можно создать или отредактировать ссылку с помощью html и css.

Визуальный редактор WordPress выглядит так:

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

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

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

В конце нажмите кнопку Добавить ссылку.

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

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

Вот как выглядит простейшая html ссылка:

текст ссылки

А вот как эту ссылку видит посетитель сайта — текст ссылки. Щелчок по ней откроет главную страницу этого сайта.

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

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

Где открывается ссылка

По умолчанию веб-страница, указанная в ссылке открывается в том же окне и заменяет открытую страницу. Чтобы ссылка открылась в новом окне нужно использовать атрибут target со значением _blank, который размещается внутри открывающего тега .

target= «_blank» href= «https://tavry.ru»>текст ссылки

Как изменить цвет ссылки

Цвет ссылок сайта задается в файле style.css. Обычно он более яркий — для того, чтобы пользователь понимал, что перед ним именно ссылка, а не обычный текст. Особым цветом можно выделить также ссылку, которую пользователь уже посетил (a:visited) или на которую навел указатель (a:hover).

Сделаем все ссылки на сайте оранжевого цвета, для этого добавим в файл style.css такое правило:

a color: #D47424;
>

Это правило сделает цвет ссылки, на которую навели указатель красным:

a:hover color: #f00;
>

Сделаем ссылку, которую пользователь уже посетил серого цвета:

a:visited color: #c0c0c0;
>

Предположим, нужно сделать так, чтобы какая-то одна ссылка в тексте была другого цвета. Чтобы изменить цвет одной конкретной ссылки нужно внести изменение в ее код — добавить в открывающий тег атрибут style и задать для него нужный цвет, например, голубой «color:#0ff» или черный «color:#000»

style= «color: #000»

В итоге получим следующий код:

Еще по теме:

• Как изменить тему WordPress
• Как найти и установить бесплатную тему WordPress
• Как сделать сайт быстро и просто
• Как разрешить или запретить комментарии на сайте WordPress

Изменить вид ссылок

маленький вопрос: по поводу ссылок по тексту: в файле style.css есть строка: на сайте есть текст, двух видов: 1. мама мыла раму 2. мама дома моет рамы встал вопрос: как сделать так, что бы текст указанный в 1 пункте, не выделялся, а активная ссылка выделялась. такое возможно? пример: мама мыла раму, мама дома моет рамы, при наведении на ссылку: мама дома моет рамы заранее спасибо! ps. если вдруг не в той ветке задал вопрос, прошу указать где можно такой вопрос задать.

• Какой анкор будет у ссылки с картинкой?
• Ссылки на главную страницу — актуально ли, и как правильно ставить на многоязычном сайте?
• Встроенный формат дополнительных ссылок в объявлениях AdWords

На сайте с 03.11.2008
18 мая 2020, 07:56

krilovsky68:
: как сделать так, что бы текст указанный в 1 пункте, не выделялся, а активная ссылка выделялась.
такое возможно?

Правильнее — изменить a на span например.

Но можно смотреть по наследованию.

Делаю хорошие сайты хорошим людям. Предпочтение коммерческим направлениям. Связь со мной через http://wp.me/P3YHjQ-3.

На сайте с 30.09.2016
18 мая 2020, 08:16
a
a[href]:hover
Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
На сайте с 03.11.2008
18 мая 2020, 08:19
Sitealert:
Присвоить активной ссылке класс active,

Насколько я понял ТСа интересует разница с href.

На сайте с 30.09.2016
18 мая 2020, 08:25
SeVlad:
Насколько я понял ТСа интересует разница с href.

Да, исправил. Меня сбило с толку слово «активная», это немного другое.

На сайте с 08.08.2019
18 мая 2020, 09:53
Sitealert:
a
a[href]:hover

попробовал не получилось.

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

на ней есть текст двух видов.

там есть предложение:

Раздел сайта «Для физических лиц» ориентирован на граждан, которым требуется квалифицированная юридическая помощь — помощь адвоката.

в нем как раз не хотелось бы что бы текст выделялся другим цветом.

В разделе «Для физических лиц» мной освещены следующие вопросы:

— военные споры (военный адвокат)

а тут хотелось бы что бы было видно что это ссылка)

ссылки с переходами выделялись синим цветом, а просто текст с комментариями не выделялся.

(чувствую что не совсем верно объясняю. )

попробовал в файл style.css написать:

в принципе получилось как хотел)

но на 90% уверен, что не правильно

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

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

Решение

Псевдокласс :hover , который добавляется к селектору A , определяет состояние ссылки при наведённом на неё курсоре мыши. В стилях вначале указывается селектор A , потом :hover (пример 1).

Пример 1. Изменение вида ссылки

HTML5 CSS 2.1 IE Cr Op Sa Fx

       
Cras ingens iterabimus aequor — завтра снова мы выйдем в огромное море.
  

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

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

Аналогично можно изменить и цвет фона под ссылкой при её наведении, добавив свойство background к селектору A:hover , как показано в примере 2.

Пример 2. Изменение цвета фона ссылки

HTML5 CSS 2.1 IE Cr Op Sa Fx

       
Audaces fortuna juvat - счастье покровительствует смелым.
  

Результат данного примера показан на рис. 2. Чтобы текст плотно не прилегал к фону, к селектору A добавлено свойство padding .

Рис. 2. Изменение цвета фона ссылки