Пятница, 29.03.2024, 11:08
Скрипты для Ucoz
Карта сайта
Главная | Оформление ссылок в таблице стилей (CSS) - Скрипты для Ucoz



Книги для вебмастера
Новые сообщения Участники Правила форума Поиск Лента новостей
  • Страница 1 из 1
  • 1
Скрипты для Ucoz » Всё для Ucoz » Основы HTML » Оформление ссылок в таблице стилей (CSS)
Оформление ссылок в таблице стилей (CSS)
bandjukДата: Воскресенье, 13.11.2011, 21:35 | Сообщение # 1
Генерал-лейтенант
Группа: Администраторы
Пол:
Награды: 22
Репутация: 22
Сообщений: 615
Бог сайта и форума За дизайнерские умения За уважение народа За хорошую посещаемость на форуме за 100 постов
Хотите, чтобы ваши ссылки не выглядели уныло-подчёркнутыми?
Для этого Каскадные таблицы стилей (CSS) имеют ряд дополнений при использовании ссылок: их можно раскрасить в любые цвета, можно убрать подчёркивание, можно выделить ссылку двумя горизонтальными линиями, можно увеличить высоту шрифта при наведении на неё курсором и многое другое.
Всё зависит от Вас и Вашей фантазии!

Разберём кусочек кода из таблице стилей CSS сайта Ucoz.
Открываем: Панель Управления --->Управление дизайном ---> Таблица стилей (CSS), находим код:

Code

/* General Style */
a:link {text-decoration:underline; color:#FFFFFF;}
a:active {text-decoration:underline; color:#FFFFFF;}
a:visited {text-decoration:underline; color:#FFFFFF;}
a:hover {text-decoration:none; color:#FFFFFF;}

Этот кусочек кода отвечает за оформление практически всех ссылок а сайте!

Для начала давайте разберём этот код:

a:link- неактивированная ссылка;
a:active- ссылка активированная в данный момент;
a:visited- ссылка активированная ранее (посещённые ссылки);
a:hover- ссылка при наведении указателя мыши;

color:#FFFFFF; - отвечает за цвет соответствующей ссылки. В нашем примере все ссылки имеют белый цвет.

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

text-decoration:underline; - ссылка подчёркнута;
text-decoration:none; - ссылка не подчёркнута;
text-decoration: underline overline;} - ссылка подчёркнута вверху и внизу;
text-decoration:line-through;} - ссылка зачёркнута;

значение
border-bottom: 2px dashed; - пунктирное подчёркивание внизу с тощиной 2 пикселя;
где 2px dashed означает,что линия будет пунктирной с тощиной 2 пикселя, а border-bottom
проводит наш пунктирчик снизу.

Пример:

Code
a:hover {color:#ff0000; border-bottom: 2px dashed;}


Ну а сейчас сделаем так, чтобы ссылка при наведении на неё курсором выделялась другим цветом, например, синим. Допишем в свойстве a:hover следующее background:#0000ff

Code
a:hover {color:#ff0000; text-decoration:none;background:#0000ff;}


Ну и напоследок давайте выделим нашу ссылочку рамкой, для чего нам понадобятся обработчики событий onMouseOver (указатель мыши находится на ссылке) и onMouseOut(указатель мыши находится вне ссылки).

Code
<table id=table1 onMouseOver="table1.border='2'" onMouseOut="table1.border='0'" border='0'>
<tr> <td>
<a href=#.html>ССЫЛКА</a>
</td></tr></table >


Материалы на эту же тему:

Создание красивого раздвижного меню для сайта
Основные атрибуты и свойства фона - background
Основные Мета тэги
Создание рамки с помощью FIELDSET
Границы при помощи border
Коды для вставки изображения в страницу
 
Скрипты для Ucoz » Всё для Ucoz » Основы HTML » Оформление ссылок в таблице стилей (CSS)
  • Страница 1 из 1
  • 1
Поиск:

Яндекс.Метрика
Copyright Глюк Рекордс © 2024

Создать бесплатный сайт с uCoz