Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:


Css в ссылка


СSS Ссылки

С помощью CSS, стили cсылок могут быть разные.

Текст ссылки Текст ссылки Кнопка ссылки Кнопка ссылки

Стили Ссылок

Ссылки могут быть оформлены в любом свойстве CSS, например:( color, font-family, background и т.п.).

Редактор кода »

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

Четыре сотояния ссылок:

  • a:link - по умолчанию, непосещенная ссылка
  • a:visited - ссылку посетил пользователь
  • a:hover - при наведении курсора мыши на ссылку
  • a:active - на данный момент ссылка нажата
/* непросмотренная ссылка */ a:link {    color: red;} /* просмотренная ссылка */ a:visited {    color: green;} /* наведение мыши на ссылку */ a:hover {    color: hotpink;} /* активная ссылка */ a:active {    color: blue;

}

Редактор кода »

При определении стиля для нескольких состояний ссылок, есть некоторые правила порядка:

  • a:hover Должно происходить после a:link и a:visited
  • a:active Должно происходить после a:hover

Оформление Текста

Своиство text-decoration в основном используется, чтобы удалить подчеркивание ссылок:

a:link {    text-decoration: none;} a:visited {    text-decoration: none;} a:hover {    text-decoration: underline;} a:active {    text-decoration: underline;

}

Редактор кода »

Цвет Фона

Свойство background-color может использоваться, чтобы указать цвет фона для ссылки:

a:link {    background-color: yellow;} a:visited {    background-color: cyan;} a:hover {    background-color: lightgreen;} a:active {    background-color: hotpink;

}

Редактор кода »

Дополнительно - Кнопка Ссылки

Этот пример демонстрирует более сложный пример, где мы сочетаем в себе несколько свойств CSS для отображения ссылки в виде блока/кнопок:

a:link, a:visited {    background-color: #f44336;    color: white;    padding: 14px 25px;    text-align: center;    text-decoration: none;    display: inline-block;} a:hover, a:active {    background-color: red;

}

Редактор кода »

Еще Примеры

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

Дополнительно - создать ссылку как кнопку в рамке Еще один пример, как создать, блок/кнопки.

Изменить курсор Свойство cursor определяет вид курсора на дисплее.

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

Проверьте себя с помощью упражнений!

Упражнение 1 »  Упражнение 2 »  Упражнение 3 »  Упражнение 4 »

schoolsw3.com

Стили ссылок в CSS, примеры создания ссылок CSS

Главная ›› Уроки по CSS, CSS3 ›› Стили ссылок в CSS

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

Как задать стиль ссылке в CSS?

В CSS можно изменить любое свойство ссылок (цвет, шрифт, цвет фона). Также для ссылок можно настроить стили, в зависимости от их состояния:

  • a:link — не посещенная ссылка;
  • a:visited — посещенная ссылка;
  • a:hover — ссылка, над которой находится курсор мыши;
  • a:active — ссылка в момент щелчка мыши.

Пример:

a:link {font-size:12px; color:#ff0000;} a:visited {font-size:12px; color:#00ff00;} a:hover {font-size:12px; color:#ff00ff;} a:active {font-size:12px; color:#0000ff;}

При формировании стилей ссылок следует соблюдать правила:

1. «a:hover» должен определяться только после «a:link» и «a:visited»; 2. «a:active» должен определяться после «a:hover».

При оформлении текста ссылки используют также свойства:

1. text-decoration — задает подчеркивание текста ссылки.

Атрибуты:

  • blink — устанавливает мигающий текст;
  • line-through — создает перечеркнутый текст;
  • overline — линия проходит над текстом;
  • underline — устанавливает подчеркнутый текст;
  • none — отменяет все заданные по умолчанию эффекты;
  • inherit — значение наследуется у родителя.

Пример:

a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;}

2. background-color — задает цвет фона ссылок.

Пример:

a:link {background-color:#b2аа99;} a:visited {background-color:#ffff85;} a:hover {background-color:#gg704d;} a:active {background-color:#ff7ddd;}

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

Читайте также:

siteblogger.ru

Ссылки



С помощью CSS вы можете изменить внешний вид ссылок.

Стилизация ссылок

В CSS вы можете изменить любое свойство ссылок (например, цвет, шрифт, цвет фона).

Кроме того, для ссылок можно настроить стили, в зависимости от их состояния.

Четыре состояния ссылок:

  • a:link — непосещенная ссылка
  • a:visited — посещенная ссылка
  • a:hover — ссылка, над которой находится курсор мыши
  • a:active — ссылка, в момент щелчка мыши

a:link {color:#FF0000;} /* непосещенная ссылка */ a:visited {color:#00FF00;} /* посещенная ссылка */ a:hover {color:#FF00FF;} /* ссылка, над которой находится курсор мыши */

a:active {color:#0000FF;} /* ссылка в момент щелчка мышью */

Посмотреть

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

  • a:hover ДОЛЖЕН определяться только после a:link и a:visited
  • a:active ДОЛЖЕН определяться после a:hover

Основные стили ссылок

В первом примере ссылки меняют цвет в зависимости от их состояния.

Давайте теперь рассмотрим другие виды стилизации ссылок.

Оформление текста

Свойство text-decoration обычно используют для удаления подчеркивания ссылок:

a:link {text-decoration:none;} /* непосещенная ссылка */ a:visited {text-decoration:none;} /* посещенная ссылка */ a:hover {text-decoration:underline;} /* ссылка, над которой находится курсор мыши */

a:active {text-decoration:underline;} /* ссылка в момент щелчка мышью */

Посмотреть

Цвет фона

Свойство background-color задает цвет фона ссылок:

a:link {background-color:#B2FF99;} /* непосещенная ссылка */ a:visited {background-color:#FFFF85;} /* посещенная ссылка */ a:hover {background-color:#FF704D;} /* ссылка, над которой находится курсор мыши */

a:active {background-color:#FF704D;} /* ссылка в момент щелчка мышью */

Посмотреть

Примеры

Стилизация ссылок

Добавление различных стилей ссылкам.

Отображение ссылки как кнопки

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



weblabla.ru


Смотрите также



Компьютерные курсы по направлениям:

Для начинающих


A

Компьютер для начинающих: Word, Excel, Access и другие программы!

Графические пакеты


B

Популярные пакеты Adobe Photoshop, CorelDraw, ArchiCAD, AutoCAD и другие!

WEB + анимация


C

Курсы по созданию сайтов, WEB-дизайну и крутой анимации в Adobe Flash!

Бухгалтерия + делопроизводство

Сетевые технологии


E

Курсы сборки ПК, системных администраторов и защиты информации!