Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Инфоурок / Информатика / Конспекты / Лекционный и практический материал по теме "Ссылки с помощью CSS"

Лекционный и практический материал по теме "Ссылки с помощью CSS"

Идёт приём заявок на самые массовые международные олимпиады проекта "Инфоурок"

Для учителей мы подготовили самые привлекательные условия в русскоязычном интернете:

1. Бесплатные наградные документы с указанием данных образовательной Лицензии и Свидeтельства СМИ;
2. Призовой фонд 1.500.000 рублей для самых активных учителей;
3. До 100 рублей за одного ученика остаётся у учителя (при орг.взносе 150 рублей);
4. Бесплатные путёвки в Турцию (на двоих, всё включено) - розыгрыш среди активных учителей;
5. Бесплатная подписка на месяц на видеоуроки от "Инфоурок" - активным учителям;
6. Благодарность учителю будет выслана на адрес руководителя школы.

Подайте заявку на олимпиаду сейчас - https://infourok.ru/konkurs

  • Информатика

Поделитесь материалом с коллегами:

Практическая работа №4
Ссылки

Задание 1


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

hello_html_m42a0a841.png

Задание 2
Используя свойство text-decoration изменить ссылки, используя этот же текст в просмотре браузера.
hello_html_m4cd2dadc.png

Задание 3

Добавить фон ссылки

hello_html_2abd0f34.png

Задание 4


a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}

hello_html_6351732.png

. Задание 5

Создайте ссылки в виде кнопки.

Самые низкие цены на курсы профессиональной переподготовки и повышения квалификации!

Предлагаем учителям воспользоваться 50% скидкой при обучении по программам профессиональной переподготовки.

После окончания обучения выдаётся диплом о профессиональной переподготовке установленного образца (признаётся при прохождении аттестации по всей России).

Обучение проходит заочно прямо на сайте проекта "Инфоурок".

Начало обучения ближайших групп: 18 января и 25 января. Оплата возможна в беспроцентную рассрочку (20% в начале обучения и 80% в конце обучения)!

Подайте заявку на интересующий Вас курс сейчас: https://infourok.ru/kursy

Краткое описание документа:

С помощью 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;} /* ссылка в момент щелчка мышью */

 

Автор
Дата добавления 10.03.2015
Раздел Информатика
Подраздел Конспекты
Номер материала 435965
Получить свидетельство о публикации

УЖЕ ЧЕРЕЗ 10 МИНУТ ВЫ МОЖЕТЕ ПОЛУЧИТЬ ДИПЛОМ

от проекта "Инфоурок" с указанием данных образовательной лицензии, что важно при прохождении аттестации.

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

Список всех тестов можно посмотреть тут - https://infourok.ru/tests

Похожие материалы

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