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

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

Урок 5. Ссылки в CSS

Автор: Андрей Краснокутский

Дата: 2009-03-17

Как Вы помните из уроков по HTML ссылки подразделяются на:

  • не посещенная ссылка - определяется атрибутом link="#3562c5";
  • посещенная ссылка - определяется атрибутом vlink="#c53535";
  • ссылка в момент нажатия - определяется атрибутом alink="#000000".

Прописывая эти атрибуты в теге мы определяли внешний вид ссылок на WEB-странице. Цвет ссылки задавался шестнадцатеричным значением или названием цвета.

В CSS параметры ссылок определяется с помощью псевдоклассов определяющих внешний вид тега <а>, которые прописываюся в таблице стилей. Это делается так:

  • a:link { color:#634438; } - не посещенные ссылки;
  • a:visited { color: #634438; } - посещённые ссылки;
  • a:focus { color:#c380f8} - состояние в фокусе;
  • a:hover { color:black; } - при установке курсора на ссылку;
  • a:active {color:red; } - при активизации ссылок (в момент нажатия).

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

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

Важно: Все эти псевдоклассы имееют одинаковый вес (порядок выполнения браузером), поэтому порядок в котором они размещаются в файле CSS, имеет большое значение. Псевдокласс, который появляется в файле CSS позже, заменяет собой преведущий. Правильный порядок указан выше!

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

  • text-decoration: none; - отключает поддчеркивание;
  • text-decoration: overline; - подчеркивание сверху;

Довавляя свойство text-decoration в псевдоклассы ссылок можно создавать новые классы с очень интересными эффектами.

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

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

Давайте на нашей тестовой страничке для всех ссылок изменим шрифт на Arial, сделаем его жирным, величиной 12px. Не посещенные ссылки оставим синего цвета с нижним подчеркиванием, посещенные ссылки сделаем черного цвета, а вот ссылки в момент наведения курсора сделаем красного цвета и с верхним подчеркиванием.

Открываем файл со стилями style.css и добавляем в следующий код:

Листинг 5.1.

a {
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:12px;
}

a:link { color:blue; }

a:visited {
color:black;
}

a:hover {
color:red;
text-decoration:overline;
}

a:active {color:green; }

Сохраняем, обновляем файл index.html и смотрим. Вот что у нас получилось.

Примечание: Мы прописали эти свойства для всех ссылок на web-страницах к которым "привязана" эта таблица стилей, если Вы хотите некоторые ссылки выделить как-то по другому, то для них нужно создать отдельный класс и естественно прописать этим ссылкам (которые хотите изменить).

Просмотров: 13772


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): Алексей
Дата: 2009-03-18

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

Комментарии добавил(а): Admin
Дата: 2009-03-22

Смотрите в разделе Статьи "Как добавить стрелку перед ссылкой" там все подробно описано

Комментарии добавил(а): pervik
Дата: 2010-02-18

неплохой дизайн,?!

Комментарии добавил(а): Денис
Дата: 2011-09-10

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

Комментарии добавил(а): Степа
Дата: 2013-05-16

Здравствуйте. Подскажите пожалуйста, как сделать так, чтобы ссылка в меню оставалась подчеркнутой на той странице на которой нахожусь? Спасибо.

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео Курс по созданию собственного Информационного Бизнеса в Интернете
Заработай в Интернете
и осуществи свою МЕЧТУ
"Как?"
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT