<< Пред. стр.

стр. 35
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>

тому, что имеется в распоряжении.
Для определения селектора идентификатора применяется специальный синтаксис -
а именно, знак порядкового номера (#), за которым следует имя идентификатора:
#barney {
font-weight: bold;
color: #FF00FF;




Определение
Селектор идентификатора (ID selector) — это селектор, который
применяется к одному и только к одному элементу на странице.



Затем задайте атрибут id тега, к которому требуется применить стиль:
<р id="barney">3TOT абзац имеет идентификатор ID of "barney"</p>
Идентификаторы (ID) удобно использовать в качестве заменителей правил стиля, ко-
торые находятся в атрибуте s t y l e HTML-тега. Вспомните, что помещение CSS-кода в
атрибут s t y l e лучше всего действует для одноразовых стилей. Что такое идентифи-
катор (ID), если не одноразовый стиль? Поэтому без всяких сомнений код, подобный
следующему:
<р s t y l e = " f o n t - w e i g h t : bold; c o l o r : #FF0000;">Alert!</р>
можно заменять чем-нибудь, похожим на следующий блок кода:
<style type="text/css">


#alert {
font-weight: bold;
color: #FF0000;




11'
324 Строим Web-сайты

</style>
<body>
<p id="alert">Warning!</p>


</body>
Как можно видеть на рисунке 58.1, оба метода приводят к одному и тому же результа-
ту. Если вы эстет в области кодирования, метод идентификаторов может быть для алс
чуть более ясным, более привлекательным и по смыслу более близким к каскадным
таблицам стилей. Возможно, вы предпочтете использовать идентификатор вместо
вставки правила стиля в атрибут неуклюжего старого HTML-тега, хотя требуемого ре-
зультата позволяет достичь любой из методов.


Часто задаваемые вопросы
ЧТО произойдет, если применить один и тот же идентификатор
(ID) к нескольким элементам?
Вы не попадете в тюрьму, ваш компьютер не взорвется, и вы не раз-
рушите Интернет, Браузер обрабатывает идентификаторы (ID) как
классы, поэтому, если вы используете один и тот же идентификатор
(ID) для нескольких элементов, все элементы отобразятся со стилем
идентификатора (ID).
Однако вы создадите для себя всевозможные проблемы, когда наста-
нет время добавить на страницу функции JavaScript, использующие
метод getElementBylD. Если ваши идентификаторы (ID) не являют-
ся уникальными, функции не будут работать надлежащим образом.
Поэтому, если вам требуется стиль класса, создайте стиль класса.
Оставьте идентификаторы для специальных классов.




Alert!

Alert!




Puc. 58.1. Стиль идентификатора (ID) (внизу) работает точно так же,
как атрибут s tyl e HTML-тега (внизу), и определяет одноразовое
правило стиля. Получаемые результаты идентичны
ЧАСТЬ 5.
Ссылки

Применение стилей к гиперссылкам
Дискуссионная тема: в защиту
подчеркивания ссылок
Создание ролловерных гиперссылок
Выбор надлежащего пути
Изменение цвета одиночной гиперссылки
Выбор подходящего текста для гиперссылки
Создание экранных подсказок для гиперссылок
Открытие нового окна браузера
Использование именованных анкеров
Создание ссылок электронной почты
ГЛАВА 59.
Применение стилей к гиперссылкам
ЯЗЫК HTML предоставляет основной набор атрибутов для управления внешним ви-
дом гиперссылок на Web-странице. Эти атрибуты включаются в тег <body>:
<body l i n k = " # 0 0 0 0 F F " vlink="#FFOOFF" a l i n k = " F F 0 0 0 0 " >
Все атрибуты ссылки сведены в таблицу 59.1. Как можно видеть, HTML привязывает их
к трем состояниям ссылки: непосещенное состояние, посещенное состояние и актив-
ное состояние. Для разделения трех состояний используется цвет. Непосещенная
ссылка — это ссылка на страницу, о посещении которой в браузере нет сведений. По
умолчанию цвет непосещенных ссылок — синий. Посещенная ссылка — это ссылка на
страницу, сведения о посещении которой имеются в браузере. По умолчанию цвет посе-
щенных ссылок — фиолетовый или ярко-красный. Наконец, активная ссылка — это
ссылка, на которой щелкают мышью в текущий момент. В браузере Internet Explorer цвет
активной ссылки отображается также в том случае, когда посетитель выделяет ссылку.


Определение
Непосещенная ссылка — это ссылка на страницу, о посещении ко-
торой в браузере нет сведений. Посещенная (visited) ссылка — это
ссылка на страницу, сведения о посещении которой имеются в брау-
зере. Активная (active) ссылка — это ссылка, на которой в текущий
момент щелкают мышью или которая выделена.

Табл. 59.1. HTML-атрибуты ссылки

Атрибут Управляемое свойство

link Цвет непосещенной ссылки

vlink Цвет посещенной ссылки

alink Цвет ссылки, на которой IL елкают кнопкой мыши или кого-
рая выделена

Чтобы задать пользовательские цвета для состояний ссылки на странице, укажите: их
непосредственно с помощью атрибутов l i n k , v l i n k и a l i n k .
Трудно поверить, что Интернет приобрел такую популярность с таким ограниченным
набором конструктивных возможностей для наиболее важного элемента на любой
Web-странице. Имеется три цвета ссылки для трех ее состояний и это все. Однако воз-
можности дизайна сильно расширяются при использовании для форматирования
ссылок каскадных таблиц стилей (CSS) вместо атрибутов HTML.
На самом элементарном уровне каскадные таблицы стилей воспроизводят функции ат-
рибутов l i n k , v l i n k и a l i n k с помощью псевдоклассов l i n k , v i s i t e d и a c t i v e .
В каскадных таблицах стилей псевдокласс — это специальное дополнение тега-анкера,
которое сообщает браузеру, к какому состоянию ссылки применяется правило стил я.
ГЛАВА 59. Применение стилей к гиперссылкам 327

В главе 57 рассматривались псевдоэлементы f i r s t - l i n e и f i r s t - l e t t e r . Псевдок-
лассы сходны с ними, но в настоящее время они применяются только к тегу-анкеру.


Часто задаваемые вопросы
Как выделить гиперссылку?
Несомненно, все знают, как щелкать на гиперссылке, но не всякий зна-
ет, как выделить гиперссылку, в основном, потому, что большинство
людей не представляют, что в браузерах Internet Explorer и Netscape
можно перемещаться по Web-сайтам без использования мыши.
Вот как это работает: вы циклически перемещаетесь по интерактив-
ным элементам на странице, нажимая клавишу Tab, а после перехода
на требуемый элемент нажимаете клавишу Enter, чтобы активизиро-
вать его. А так выделяется гиперссылка: нажимая клавишу Tab, пере-
ходите на гиперссылку, устанавливая на нее фокус, если выражаться
на интернет-жаргоне. Браузер Internet Explorer изменяет внешний вид
ссылки, окрашивая ее в цвет активной ссылки. Если еще раз нажать
клавишу Tab, фокус переходит с гиперссылки и при этом возвращает-
ся ее цвет по умолчанию, соответствующий цвету либо посещенной,
либо непосещенной ссылки.

Хотя ссылки можно выделять и в Netscape, этот браузер не меняет
цвет выделенной ссылки на цвет ее активного состояния.




Определение
Псевдокласс (pseudo-class) — это специальное дополнение для се-
лектора тега-анкера, сообщающее браузеру, к какому состоянию
ссылки применяется правило стиля.


Следующий блок CSS-кода оказывает такой же эффект, как и HTML-атрибуты, приве-
денные в теге <body> в начале этой главы:
arlink {.
color: #0000FF;



a:visited {
color: #FF00FF;




a:active
Строим Web-сайты
328

• color: #FF0000;


Эти правила стилей представляют начальный продукт, который можно усовершен-
ствовать. Как насчет выделения непосещенных и активных ссылок полужирным
шрифтом и оставления посещенных ссылок с нормальным начертанием?
a:link {
color: #0000FF;
font-weight: bold;




a:visited {
color: #FF00FF;
font-weight: normal;




a:active {
color: #FF0000;
font-weight: bold;


Эти стили показаны на рисунке 59.1. Обратите внимание, как полужирное начерта-
ние помогает выделить на Web-странице непосещенные ссылки, при этом посещен-
ные ссылки кажутся менее важными.



Here is an unvmted link
Here is an mivisited link Here is an unvisited link Here is a




Puc. 59.1. Используйте каскадные таблицы стилей для изменения других свойств
ссылок, помимо окрашивания разных состояний ссылки в разные цвета

На некоторых Web-сайтах вокруг гиперссылок добавляется едва различимый фоно-
вый цвет, создающий эффект блока, как на рисунке 59.2.
ГЛАВА 59. Применение стилей к гиперссылкам 329


fje ?« Yievi Favorites loois Help


Here is an unvmted link Here is an mivisiled link Here is a ияЫ1мк. Here is an uiivmter! link




. 59.2. Добавьте атрибут background-color в правило стиля
для ссылки или состояния ссьтки, чтобы создать эффект блока

Листинг 59.1. Исходный код страницы, вид которой в браузере
показан на рисунке 59.2
а{
font-weight: bold;



/* В этих правилах стилей каждому состоянию ссылки соответствует
свой фоновый цвет. */

a:link {
c o l o r : #0000FF;
#CCFFFF;
background-color:



a:visited {
color: #FF00FF;
font-weight: normal;
background-color: #CCCCFF;



a:active {
color: #FF0000;
background-color: #FFFFCC;



Можно также выключить используемое по умолчанию подчеркивание, как на ри-
сунке 59.3.
Строим Web-сайты
330




Here is an imviiited link Here is an unviuted link Here is a visiteci link Here if an «nvisitpd
link




Рис. 59.3. Подчеркивание гиперссылок отключено

Листинг 59.2. Исходный код страницы, вид которой в браузере
показан на рисунке 59.3
а{
font-weight: bold; • •
text-decoration: none;



/*' Для выделения гиперссылки, необходима какая-нибудь визуальная
подсказка, отличная от -цвета, поэтому в отсутствие подчеркивания в
этих правилах стилей используется полужирное начертание для всех
трех состояний ссылок. */ .


a:link {
color: #OOOOFF;
background-color: #CCFFFF;



a:visited {
color: #FFOOFF; .'
background-color: #CCCCFF;



a:active {
color: #FFOOOO;
background-color: #FFFFCC;
ГЛАВА 59. Применение стилей к гиперссылкам 331


Дневник: 8 защиту подчеркивания ссылок
Каскадные таблицы стилей великолепны, когда они работают. Они позволяют делать
всякие интересные вещи с HTML-элементами. Можно даже удалить святая святых —
подчеркивание гииерссылок.
На самом первом из когда-либо созданных Web-сайтов была гиперссылка, и для этой
гииерссылки использовалось подчеркивание, так что существует давняя традиция
применения этого элемента оформления. Но подчеркивание желательно сохранить
не только по этой причине.
Очевидно одно: большинство гиперссылок использует подчеркивание. В действитель-
ности, именно по этой причине удаление подчеркивания так притягательно. Дизайнеры
любят отказываться от подчеркивания, чтобы сделать вид своих Web-сайтов уникаль-
ным, что составляет важную часть работы дизайнера. Интернет был бы менее интерес-
ным, если бы на всех Web-сайтах использовалось одни и те же правила оформления.
Существует лишь одна проблема. Те, кто бороздит Интернет, настолько привыкли к
вездесущему подчеркиванию, что они щелкают на любом элементе, содержащем под-
черкивание, даже если этот элемент не является гиперссылкой. Именно поэтом)' сле-
дует проявлять осторожность и не подчеркивать элементы, которые не являются ги-
перссылками. И по этой же причине следует подчеркивать элементы, которые явля-
ются гиперссылками.
Интернет - это, прежде всего, скорость. Люди, которым нравится Интернет, ценят
возможность быстрого поиска информации. Вместе с тем, занимающиеся Web-сер-
фингом скользят не только по Web-сайтом, но и по информации. Они в действитель-
ности не читают текст, пока не найдут нужные им сведения.
Как дизайнеру, вам следует помнить об этих фактах. Вы хотите, чтобы посетители
могли перемещаться по вашему Web-сайту быстро и непринужденно, поэтому вам не-
обходимо что-нибудь для привлечения их внимания к гиперссылкам.
Подчеркивание работает идеально. Все знают, что оно указывает на гиперссылку.
Подчеркивание легко различимо и посетителям не требуется задумываться, что оно
обозначает. Зачем портить отличную вещь?
Кроме того, неподчеркнутые гиперссылки заставляют посетителей задумываться о
том, какие соглашения по стилям используются на вашем Web-сайте. Используется ли
для этого полужирное начертание? Курсив? Слова в цветных прямоугольниках? Ко-
нечно, это очевидно для вас, но вы — дизайнер. Знания и опыт путешествий по Интер-
нету обычно не одно и то же. Другими словами, посетители не могут применить свои
знания о том, как работает Интернет, для просмотра вашего Web-сайта, это означает,
что они не сумеют перемещаться по вашему ресурсу на высоких скоростях, к которым
они привыкли.
Во что бы то ни стало, разрабатывайте состояния ссылок с помощью каскадных таб-
лиц стилей. Добавьте полужирное начертание. Добавьте курсив. Измените гарнитуру.
Измените размер шрифта. Но прежде чем отказаться от подчеркивания, хорошенько
подумайте.
ГЛАВА 6 0 .
Создание роллоберных гиперссылок
В главе 59 рассматривались три псевдокласса каскадных таблиц стилей .— l i n k ,
v i s i t e d и a c t i v e — и вы обратили внимание, что они соответствуют трем состояни-
ям ссылок в HTML. В каскадных таблицах стилей добавляется четвертое состояние
ссылки: выделенное состояние (hover state), которое описывает ссылку, когда посе-
титель наводит на нее указатель мыши. Еще одно состояние ссылки означает наличие
еще одного псевдокласса каскадных таблиц стилей, а еще один псевдокласс означает
еще одну возможность для создания особого стиля.


Определение
Выделенное состояние (hover state) описывает ссылку, когда посе-
титель наводит на нее указатель мыши. Используйте псевдокласс
hover, чтобы создать ролловерные стили для гиперссылок в каскад-
ных таблицах стилей.

Следующая таблица стилей включает правило для выделенного состояния:
а{
font-weight: bold; .•
text-decoration: none;
}
a:hover {
text-decoration: underline;


Как видно на рисунке 60.1, ссылки отображаются с полужирным начертанием, без
подчеркивания, используем.ого по умолчанию, благодаря правилу общего стиля, кото-
рое управляет всеми тегами-анкерами. Но когда посетитель наводить указатель на
ссылку, вступает в действие правило специального стиля, которое применяется толь-
ко к ссылкам, на которые наведен указатель, и появляется подчеркивание.
Обратите внимание, что нет необходимости включать полужирное начертание в npaiu i-
ло стиля для выделенного состояния. Все, что относится в общем стиле к тегам-анке-
рам, автоматически применяется к псевдоклассам. Таким образом, когда пишутся при-
вила стилей для состояний ссылок, просто включите определения для дополнительно-
го форматирования, которое хотите применить, включая несоответствия или измене-
ния для основных правил (подобно переходу от нормального начертания в обычных
ссылках к полужирному начертанию в ролловерных ссылках). Определения стилей, ко-
торые остаются одинаковыми для разных состояний ссылок, не требуется повторять.
Стиль h o v e r может включать любую каскадную таблицу стилей, которая применяет-
ся к тексту. Следовательно, в ролловерном состоянии ссылка может увеличиваться в
размере или по толщине начертания, может изменяться ее стиль, цвет; элементы
украшения и так далее. Просто внимательно относитесь к большим изменениям
стандартной ссылки. Если выделенная ссылка не помещается в то же пространство,

<< Пред. стр.

стр. 35
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>