разработка сайтов
разработка и создание сайтов
Если у вас возникнут вопросы по языку html или просто по созданию сайтов, смело обращайтесь к нам на
форум в раздел "создание сайтов". Вам
обязательно ответят (мы гарантируем!).
Также рекомендуем посетить недавно открытый раздел
html. Здесь вы найдете краткий курс по основным
возможностям html, а также тематические авторские статьи.
Думаю веб мастерам будет интересен такой вид заработка, как игра на валютной бирже,
в последнее очень популярный в интернете. Читайте статьи раздела
forex.
как создать сайт /
Статьи
/
html
/
такие разные ссылки
Вернуться в раздел "
html"
"такие разные ссылки"
Часто возникает необходимость на одной странице использовать ссылки
разных цветов и размеров. И применять для каждой области веб-страницы
ссылки подходящего типа. Одни для меню, другие для текста.
Первый подход для создания таких ссылок связан с использованием тега
FONT. Помещаем тег FONT между тегами <a href=...> и </a> и
задаем нужный цвет шрифта и его размер.
Пример 1. Ссылки разных цветов с помощью тега FONT
<body link=#0000ff>
<p><a href=link1.html>Ссылка 1</a>
<p><a href=link2.html><font color=#ff0000 size=-1>Ссылка 2</font></a>
</body> |
Ссылка 1 | Ссылка 2
Способ прост, но неудобен при большом количестве ссылок. Только
представьте, если вдруг захочется поменять цвет у ссылок, то придется
перелопачивать все страницы. Тут нам на помощь приходят каскадные
таблицы стилей, позволяющие упростить процесс изменения оформления
сайта. Создаем два или больше класса со своими параметрами и применяем
их по своему усмотрению. В нижеприведенном примере достаточно поменять
значения у соответствующего класса, и цвета у ссылок, где этот класс
используются изменятся автоматически.
Пример 2. Ссылки разных цветов с использованием стилей
| <html>
<head>
<style>
a { font-size: 14px; color: red }
a.link1 { font-size: 12px; color: green }
a.link2 {font-size: 14px; color: blue }
</style>
<body link=#0000ff>
<p><a href=link1.html>Ссылка 1</a>
<p><a href=link2.html class=link1>Ссылка 2</a>
<p><a href=link3.html class=link2>Ссылка 3</a>
</body> |
Ссылка 1 | Ссылка 2 | Ссылка 3
Дополнение к вышеописанному мне прислал VinnyNov (Vinny@mail.novgorod.ru) уже после опубликования данной статьи.
Замечание: если цвет в каскадной таблице
указывать у ссылки (тега <a> ), то замечены глюки в Нетскейпе
(цвет ссылки не меняется) и Опере (цвет черты подчеркивания ссылки не
меняется), поэтому для надежности я использую вложенный внутрь ссылки
тег <div> с прописанным в каскадной таблице цветом.
Пример 3. Использование вложенного тега DIV
|
<html>
<head>
<style>
.Red { font-size: 14px; color: red }
</style>
<body link=#0000ff>
<a href="..."><div class="Red">Red Link</div></a>
</body> |
Согласен с Vinny и спасибо ему за замечание и дополнение к данному материалу.
Одно из наиболее популярных применений CSS - это убирание
подчеркивания у ссылок. С позиции юзабилити не совсем верное решение,
поскольку пользователь может сразу не догадаться, что текст, который он
видит, является ссылкой. Все ведь уже привыкли - раз подчеркивание
используется, значит это ссылка. Но при правильном применении
отсутствие подчеркивания у ссылок может придать определенный эффект
сайту. Часто делается, что при наведении курсора, ссылка становится
подчеркнутой, меняет свой цвет или используется и то и другое
одновременно. При создании двух и более типов ссылок можно
воспользоваться селектором hover , однако, этот параметр не работает в
Netscape до 6 версии, поэтому его следует использовать осторожно.
Пример 4. Использование параметра HOVER
|
<html>
<head>
<style>
a.link1 { color: green; text-decoration: none }
a:hover.link1 { text-decoration: underline; color: red }
a.link2 { color: blue; }
a:hover.link2 { color: black }
</style>
<body link=#0000ff>
<p><a href=link1.html class=link1>Ссылка 1</a>
<p><a href=link2.html class=link2>Ссылка 2</a>
</body> |
Влад Мержевич
http://www.html.krsk.ru
Вернуться в раздел "
html"
Также рекомендуем посетить недавно открытый раздел
html. Здесь вы найдете краткий курс по основным
возможностям html, а также тематические авторские статьи.
