Как сделать ссылку в css: Извините, такой страницы Kak Vstavit Ssylku V Html I Oformit Ee V Css %23P1 не существует!

Содержание

Ссылки внутри страницы | WebReference

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

Элемент, на который требуется сделать ссылку, обозначается идентификатором, а адрес ссылки меняет свой вид на #id, как показано в примере 1.

Пример 1. Ссылка на заголовок

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Ссылки</title> <style> .toc { padding: 0 20px; background: #f0f0f0; display: inline-block; } </style> </head> <body> <div> <h3>Оглавление</h3> <ul> <li><a href=»#t1″>Сепульки</a></li> <li><a href=»#t2″>Сепулькарии</a></li> <li><a href=»#t3″>Сепуление</a></li> </ul> </div> <h3>Сепульки</h3> <p>Важный элемент цивилизации ардритов с планеты Энтеропия.

</p> <h3>Сепулькарии</h3> <p>Устройства для сепуления.</p> <h3>Сепуление</h3> <p>Занятие ардритов с планеты Энтеропия.</p> </body> </html>

Результат данного примера показан на рис. 1. К каждому заголовку <h3> добавлен уникальный идентификатор через атрибут id, а сама ссылка имеет вид #id, где id — идентификатор элемента на который делается переход.

Рис. 1. Ссылки на заголовки

Как видите, по своему виду такие ссылки ничем не отличаются от ссылок на другой сайт. Но стоит открыть любую ссылку в примере, как браузер переместит фокус к заголовку, на который ведёт ссылка. При этом немного поменяется и адресная строка, в конец пути будет добавлено #t1 или подобное. Если нажать кнопку «Назад» в браузере, то мы вернёмся обратно к началу страницы и адресная строка примет исходный вид. Это позволяет передавать ссылки вида webref.ru/layout/#title, при открытии такой ссылки в браузере будет загружена страница и сделан переход к элементу с идентификатором title.

Псевдокласс :target

CSS позволяет управлять видом элемента, на который был сделан переход, с помощью псевдокласса :target, как показано в примере 2.

Пример 2. Использование :target

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Ссылки</title> <style> .toc { padding: 0 20px; background: #f0f0f0; display: inline-block; } h3:target { background: #cd529e; color: #fff; padding: 5px; } </style> </head> <body> <div> <h3>Оглавление</h3> <ul> <li><a href=»#t1″>Сепульки</a></li> <li><a href=»#t2″>Сепулькарии</a></li> <li><a href=»#t3″>Сепуление</a></li> </ul> </div> <h3>Сепульки</h3> <p>Важный элемент цивилизации ардритов с планеты Энтеропия.</p> <h3>Сепулькарии</h3> <p>Устройства для сепуления.

</p> <h3>Сепуление</h3> <p>Занятие ардритов с планеты Энтеропия.</p> </body> </html>

Теперь, если переходить по ссылкам оглавления, то заголовки будут менять свой цвет и фон (рис. 2).

Рис. 2. Стиль заголовка при переходе

ссылки

См. также

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11.03.2020

Редакторы: Влад Мержевич

Оформление ссылок
Ctrl+←

Списки
Ctrl+→

html — Как сделать список Li ссылкой?

Вопрос задан 5 лет назад

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

Просмотрен 16k раза

Как сделать список Li ссылкой с помощью стилей CSS, чтобы клик был не по самой ссылке, а по блоку списка?

<ul>
<li><a href="#">ссылка</a></li>
<li><a href="#">ссылка</a></li>
<li><a href="#">ссылка</a></li>
<li><a href="#">ссылка</a></li>
<li><a href="#">ссылка</a></li>
<li><a href="#">ссылка</a></li>
</ul>

html
css

Сделал сам буквально двумя стилями

li {
  background: #ddd;
  border: 1px solid #ddd;
  padding: 5px;
  margin: 5px;
  width: 200px;
list-style-type: none; 
}

.  menu li {
  cursor: pointer;
}

.menu li > a {
  display: block;
  text-decoration: none;
}

<ul>
  <li><a href="#">ссылка</a></li>
  <li><a href="#">ссылка</a></li>
  <li><a href="#">ссылка</a></li>

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

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

Правильным решением будет убрать внутренние отступы у элемента li, добавить их элементу а, увеличить ширину элемента

li на величину убранных внутренних отступов слева и справа:

li {
  background: #ddd;
  border: 1px solid #ddd;
  margin: 5px;
  width: 210px;
  list-style-type: none; 
}
. menu li {
  cursor: pointer;
}
.menu li > a {
  display: block;
  padding: 5px;
  text-decoration: none;
}

<ul>
<li><a href="#">ссылка</a></li>
<li><a href="#">ссылка</a></li>
<li><a href="#">ссылка</a></li>
<li><a href="#">ссылка</a></li>
<li><a href="#">ссылка</a></li>
<li><a href="#">ссылка</a></li>
</ul>

Не обязательно здесь CSS использовать.

<ul>
    <a href="#">главная ссылка</a>

    <li><a href="#">ссылка</a></li>
    <li><a href="#">ссылка</a></li>
    <li><a href="#">ссылка</a></li>
    <li><a href="#">ссылка</a></li>
    <li><a href="#">ссылка</a></li>
    <li><a href="#">ссылка</a></li>
</ul>

Я бы задал li ширину — заполнение по содержимому и, на всякий случай, overflow:hidden — если li будет с округлением углов. А самой ссылке < a > display:inline-block и padding’ами задавал нужную ширину.

li{
  border:1px solid red;
  list-style-type:none;
  width:fit-content;    /*---*/
  border-radius:10px;  
  overflow:hidden;    /*---*/
a{
 display:inline-block;  /*---*/
 padding:15px 80px;     /*---*/
 text-decoration:none;
 background-color:yellow;
}

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

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Стилизация гиперссылок с помощью CSS | Учебники по веб-дизайну и разработке

Цели обучения

В конце этого урока вы сможете:

Применение правил стиля CSS к пяти состояниям гиперссылок: ссылка, посещение, фокус, наведение курсора и активная.

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

страница-5.html

страница-6.html

Около пяти состояний гиперссылки

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

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

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

Гиперссылки — это пять так называемых состояний , которые можно сгруппировать в две категории:

Пассивные состояния : Так выглядит гиперссылка, когда пользователь не взаимодействует с ней. Есть два пассивных состояния.
Интерактивные состояния : Так выглядит гиперссылка, когда пользователь взаимодействует с ней. Есть три интерактивных состояния.

Гиперссылки: два пассивных состояния

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

a:link — ссылка , а не была нажата или нажата пользователем. По умолчанию веб-браузеры отображают непросмотренные гиперссылки синим цветом.
a:visited — по ссылке уже раз переходил пользователь. По умолчанию веб-браузеры отображают посещенные гиперссылки фиолетовым цветом.

В CSS вы ориентируетесь на непосещенные и посещенные гиперссылки на веб-странице, используя псевдоклассы :link и :visited следующим образом:

/* Пассивная ссылка - ранее не посещаемая */
    ссылка {
    /* здесь находятся правила стиля */
}
            
/* Пассивная ссылка - ранее посещенная */
    а: посетил {
    /* здесь находятся правила стиля */
}

Как правило, эти два пассивных состояния оформляются одинаково.

/* Состояния пассивной ссылки */
    ссылка,
    а: посетил {
     /* здесь находятся правила стиля */
}

Или, в одну строку:

/* Состояния пассивной ссылки */
а: ссылка, а: посетили {
    /* здесь находятся правила стиля */
}

Обратите внимание на двоеточие (:) между селектором a и именем псевдокласса (ссылка или посещенный).

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

/* Состояния пассивной ссылки */
    а: ссылка, а: посетили {
    красный цвет
}

Гиперссылки: три интерактивных состояния

Существует три возможных пассивных состояния гиперссылки.

a:hover — Пользователь наводит указатель мыши на ссылку. По умолчанию веб-браузеры отображают наведенные курсором ссылки синим цветом (если они ранее не посещались) и фиолетовым цветом (если ранее посещались пользователем).
a:focus — пользователь перешел по гиперссылке с помощью клавиши Tab . По умолчанию веб-браузеры отображают ссылки в фокусе с синей пунктирной рамкой.
a:active — ссылка в данный момент щелкается или нажимается пользователем. По умолчанию веб-браузеры отображают активные гиперссылки красным цветом.

В CSS вы ориентируетесь на эти три состояния гиперссылок, используя псевдоклассы :focus, :hover и :active.

Обычно все три интерактивных состояния гиперссылки оформляются одинаково.

/* Состояния интерактивной ссылки */
а: фокус, а: наведение, а: активный {
    /* здесь находятся правила стиля */
}

Опять же, обратите внимание на двоеточие (:) между селектором a и именем псевдокласса (фокус, наведение или активный).

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

/* Состояния пассивной ссылки */
а: наведение, а: фокус, а: активный {
    цвет: зеленый
}

Таким образом, раздел файла CSS, который стилизует гиперссылки, обычно выглядит следующим образом:

/* ====== СТИЛИ ГИПЕРССЫЛКИ ====== */
            
/* Состояния пассивной ссылки */
а: ссылка, а: посетили {
    красный цвет
}
            
/* Состояния интерактивной ссылки */
а: наведение, а: фокус, а: активный {
    цвет: зеленый
}

Гиперссылки: правильный порядок псевдоклассов

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

Правильный порядок следующий:

:ссылка
: посетил
:навести
:фокус
: активен

Гиперссылки и подчеркивание по умолчанию

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

Чтобы «отключить» это подчеркивание по умолчанию, вам нужно добавить следующее правило стиля в свой файл CSS.

/* ====== СТИЛИ ГИПЕРССЫЛКИ ====== */
            
/* Состояния пассивной ссылки */
а: ссылка, а: посетили {
    текстовое оформление: нет;
    красный цвет;
}
            
/* Состояния интерактивной ссылки */
а: наведение, а: фокус, а: активный {
    текстовое оформление: нет;
    цвет: зеленый;
}

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

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

Оформление ссылок на веб-странице

van Gogh

В этой задаче вы будете применять стили CSS к гиперссылкам, которые вы добавили на образец веб-страницы page-5.html в предыдущем учебнике «Введение в гиперссылки».

В VS Code откройте таблицу стилей style-5.css .
В нижней части файла таблицы стилей скопируйте и вставьте следующее:
```
/* Стили пассивных ссылок */
            
а: ссылка, а: посетили {
    текстовое оформление: нет;
    отступ снизу: 2px;
}
            
/* Стили интерактивных ссылок */
            
а: наведение, а: фокус, а: активный {
    текстовое оформление: нет;
    отступ снизу: 2px;
} 
```
Теперь вы сгруппировали пять возможных состояний гиперссылок в две категории для стилей и удалили подчеркивание по умолчанию. Вы также добавили интервал 2px , который будет отделять текст гиперссылки от любой нижней границы, которую вы поместите под ней.
Для первого набора правил стиля, которые применяются к состояниям гиперссылки :link и :visited, введите следующие свойства и значения CSS:
```
цвет: #000;
нижняя граница: сплошная 2px #000;
 
```
Для второго набора правил стиля, которые применяются к трем активным состояниям гиперссылки, введите следующие свойства и значения CSS:
```
цвет: #f26f21;
нижняя граница: сплошной синий 2px;
 
```
Сохраните таблицу стилей. Отобразите веб-страницу в браузере и проверьте изменения стиля четырех гиперссылок.

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

Щелкните page-5. html, чтобы просмотреть готовый образец этой веб-страницы в новой вкладке веб-браузера.

Оформление ссылок на веб-странице

Туризм

В этом разделе вы будете применять стили CSS к гиперссылкам, которые вы добавили на образец веб-страницы page-6.html в предыдущем учебнике по работе с внутренними гиперссылками.

В VS Code откройте таблицу стилей style-6.css .

В нижней части файла таблицы стилей скопируйте и вставьте следующее:

/* Стили пассивных ссылок */
а: ссылка, а: посетили {
    текстовое оформление: нет;
    отступ снизу: 2px;
    цвет: #006600;
    нижняя граница: сплошная 2px #006600;
}
                                        
/* Стили интерактивных ссылок */
а: наведение, а: фокус, а: активный {
    текстовое оформление: нет;
    отступ снизу: 2px;
    цвет: #f26f21;
    нижняя граница: сплошной синий 2px;
}

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

Теперь вы закончили работу над вторым образцом веб-страницы.

Нажмите page-6.html, чтобы просмотреть готовый образец этой веб-страницы в новой вкладке веб-браузера.

Загрузка ваших файлов на GitHub

После завершения веб-страницы и таблицы стилей вы готовы загрузить их в свою учетную запись на GitHub.

Откройте новую вкладку в веб-браузере и перейдите на GitHub.com. Если вы еще не вошли в свою учетную запись GitHub, войдите сейчас.
На домашней странице GitHub щелкните «репозиторий», содержащий ваши веб-страницы. Его имя будет выглядеть следующим образом, где имя пользователя — выбранное вами имя пользователя на GitHub. имя пользователя.github.io
На следующем отображаемом экране GitHub в правой части экрана вы можете увидеть кнопку с именем Добавить файл . Нажмите здесь.
В раскрывающемся списке выберите параметр Загрузить файлы .
В проводнике (Windows 10) или Finder (Apple Mac) перетащите вложенную папку 📁 упражнений , чтобы загрузить ее в свой репозиторий на GitHub.
Прокрутите экран GitHub вниз и примите или отредактируйте короткое сообщение (Добавить файлы через загрузку) в поле Принять изменения .
Наконец, нажмите зеленую кнопку Подтвердить изменения , чтобы загрузить файлы.

Ваш обновленный образец веб-страницы теперь опубликован на GitHub по веб-адресам, подобным следующим:

https://username.github.io/exercises/page-5.html
https://username.github.io/exercises/page-6.html

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

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

следующий → ← предыдущая

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

Используя CSS, мы можем стилизовать ссылки по-разному. Мы можем установить следующие состояния гиперссылки:

а:активный	Используется для добавления стиля к активному элементу.
а:наведение	Добавляет специальные эффекты к элементу, когда пользователь наводит указатель мыши на элемент.
а:ссылка	Добавляет стиль непросмотренной ссылке.
a: посещение	Добавляет стиль посещенной ссылке.

Следует отметить, что в определении CSS a:hover должен идти после a:link и a:visited , а также a:active должен идти после a:hover в чтобы быть эффективным.

Порядок объявления состояний гиперссылки приведен ниже:

<тип стиля = "текст/css"> a: ссылка {цвет: голубой;} а: посетил {color: #060235} а: наведите {цвет: #FCFC0C} a:активный {цвет: #C0F0FC}

Чтобы изменить цвет ссылки, мы должны использовать свойство CSS color . Имя цвета может быть указано в любом допустимом формате, таком как имя цвета, значение rgb() или значение HEX.

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

Пример

По умолчанию нормальные или непросмотренные ссылки имеют синий цвет. В этом примере мы меняем цвет ссылки по умолчанию, используя свойство color .

<голова> <тип стиля = "текст/css"> а { коричневый цвет; } <тело>

Добро пожаловать на

javaTpoint.com

Протестируйте сейчас

Выход

Пример

В этом примере мы применяем к ссылкам некоторые свойства CSS, такие как font-family, text-decoration и background-color . По умолчанию созданная ссылка подчеркнута, поэтому, чтобы убрать подчеркивание, мы можем использовать свойство text-decoration и установить для него значение none .

<голова> <тип стиля = "текст/css"> а { текстовое оформление: нет; коричневый цвет; цвет фона: розовый; семейство шрифтов: Arial; } п{ размер шрифта: 20px; } <тело>

Добро пожаловать на

javaTpoint.com

Текст javaTpoint.com в приведенной выше строке является гиперссылкой.

Протестируйте сейчас

Выход

Пример

Теперь есть еще один пример, в котором мы изменим цвет активных и посещенных ссылок, а также изменим цвет ссылки при наведении. По умолчанию посещенные ссылки окрашены в фиолетовый цвет, а активные — в красный, поэтому мы изменим их цвета с помощью свойства color и псевдоклассов :visited, :active и :hover .

Оставить комментарий

Штирлиц — Сеть печатных салонов в Перми

Как сделать ссылку в css: Извините, такой страницы Kak Vstavit Ssylku V Html I Oformit Ee V Css %23P1 не существует!

Ссылки внутри страницы | WebReference

Псевдокласс :target

См. также

Автор и редакторы

html — Как сделать список Li ссылкой?

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

Отправить без регистрации

Отправить без регистрации

Стилизация гиперссылок с помощью CSS | Учебники по веб-дизайну и разработке

Цели обучения

Около пяти состояний гиперссылки

Гиперссылки: два пассивных состояния

Гиперссылки: три интерактивных состояния

Гиперссылки: правильный порядок псевдоклассов

Гиперссылки и подчеркивание по умолчанию

Оформление ссылок на веб-странице

Оформление ссылок на веб-странице

Загрузка ваших файлов на GitHub

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

Пример

Добро пожаловать на

Пример

Добро пожаловать на

Пример

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