(если вы еще не вполне готовы к применению HTML5-тегов) и добавить класс к этому div
-тегу:
:
.mainNav a { font-family: Arial, sans-serif; }
.mainNav a:link { color: #F60; }
310 Часть 2. Применение CSS
.mainNav a:visited { color: #900; }
.mainNav a:hover { color: #F33; }
.mainNav a:active {color: #B2F511; }
Использование селекторов потомков облегчает процесс стилизации ссылок, ко- торые должны выглядеть по-разному для каждой области веб-страницы (полное опи- сание неисчерпаемых возможностей таких селекторов вы найдете в разделе «Исполь- зование селекторов потомков» гл. 17).
СОВЕТ
Применение маркированных списков для представления ссылок — очень распространенный метод
(скоро вы увидите пример этого). В таком случае вы можете добавить идентификатор или класс к тегу
списка, например , а затем создать селекторы потомков наподобие
.mainNav a:link для их стилизации.
Стилизация ссылок
Теперь, когда вы знаете, как создавать селекторы, производящие выборку конкрет- ных ссылок, нужно решить, как стилизовать ссылки. Да как угодно! Вам предостав- ляется полный арсенал свойств языка CSS, а творческие способности ограничены только вашим воображением. Единственное, что нужно учесть, — ссылки должны выглядеть как ссылки. Они не обязательно будут синего цвета с подчеркиванием, но пусть они отличаются от общего содержимого веб-страниц, чтобы посетители сайта сразу могли понять, что это.
Если сделать ссылку похожей на кнопку, у которой появляются границы и изме- няется цвет фона при наведении на нее указателя мыши, большинство посетителей поймет, что они могут щелкнуть на ней. Можно также воспользоваться линейным градиентом для добавления к ссылке текстуры и глубины. Ссылки, расположенные в объемных фрагментах текста, должны четко выделяться. Этого можно добиться использованием текста полужирного начертания с сохранением традиционного под- черкивания, а также окрасив фон, добавив стиль-подсказку, изменяющий внешний вид ссылки при перемещении над ней указателя мыши. В качестве подсказки можно даже назначить рисунок (например, в виде стрелки), который визуально скажет по- сетителю о том, что щелчок кнопкой мыши перенесет его в какой-либо другой раздел текущего сайта или вообще на другой сайт.
СОВЕТ
Если вы не назначите свойству border тега ![]()
значение 0, Internet Explorer добавит границу- рамку вокруг изображения, выступающего ссылкой. Чтобы этого не произошло, добавьте в таблицу стилей следующее: img { border: none;}.
Подчеркивание ссылок
Еще с самого начала развития Сети ярко-синий подчеркнутый текст сигнализиро- вал: «Нажмите здесь, чтобы перейти туда-то». Однако стандартные атрибуты под- черкивания и цветового оформления ссылок — это то, что в первую очередь изме- няет любой веб-дизайнер. Подчеркивание — слишком распространенный способ выделения, который порядком поднадоел (рис. 9.1, 1). У вас есть возможность из- менить ситуацию, одновременно обеспечив хорошее оформление ссылок.
Глава 9. Приводим в порядок навигацию сайта
311
Полное удаление подчеркивания. Чтобы убрать стандартное подчеркивание, используйте свойство text-decoration со значением none
:
a {text-decoration: none;}
Естественно, полное удаление подчеркивания может смутить посетителей сай- та. Если вы не предусмотрите каких-то других визуальных подсказок, то ваши ссылки будут выглядеть точно так же, как и весь остальной текст веб-страни- цы (см. рис. 9.1,
2). Если вы пойдете этим путем, то обеспечьте выделение тек ста
ссылок каким-то другим способом, например полужирным начерта- нием (см. рис. 9.1,
3), цветом фона, подсказкой в виде рисунка или преобразо- ванием ссылки в имитированную кнопку.
Рис. 9.1. Существует множество способов сделать стандартное подчеркивание (1) более привлекательным: для начала полностью убираем линию подчеркивания (2, 3, 4) или создаем более стильную черту путем применения свойства border (5) или фонового изображения (6)
312
Часть 2. Применение CSS
Добавление подчеркивания только при наведении на ссылку указателя мыши.
Некоторые веб-дизайнеры убирают подчеркивание для всех ссылок, выделяют их каким-то другим способом, а затем включают атрибут подчеркивания толь- ко при наведении указателя мыши, как показано на рис. 9.1, 4. Чтобы обеспечить такой эффект, просто удалите подчеркивание ссылок, а затем повторно введите его в псевдокласс
:hover
:
a {
text-decoration: none;
background-color: #F00;
}
a:hover {
background-color: transparent;
text-decoration:underline;
}
Использование свойства нижней границы. У вас есть возможность управлять цветом, толщиной или стилем стандартной линии подчеркивания ссылок, которое всегда отображается в виде линии толщиной 1 пиксел того же цвета, что и текст.
Большего разнообразия можно добиться путем использования вместо подчер- кивания свойства border-bottom
, как показано на рис. 9.1, 5.
Скрыть обычное подчеркивание и добавить черту в виде пунктирной линии- границы можно следующим образом:
a {
text-decoration: none;
border-bottom: dashed 2px #9F3;
}
Вы можете изменить стиль, толщину линии и цвет границы. Чтобы увеличить пустой промежуток между текстом и границей, применяйте свойство padding
Использование фонового изображения. Можете больше преобразить вид ссы- лок, добавив фоновый рисунок. Например, на рис. 9.1, 6 показана граница в ви- де рукописной линии.
Подобная методика подчеркивания заголовков описана в обучающем уроке 2 гл. 8. Напомню суть метода. Сначала создается рисунок линии подчеркивания с помощью программы редактирования изображений типа Fireworks или
Photoshop, в которой имеется инструмент
Brush
(Кисть), имитирующий рисо- вание мелком, фломастером и т. д. Затем создается стиль для ссылки, убира- ющий стандартное подчеркивание и добавляющий фоновое изображение. Оно должно быть расположено по нижнему краю ссылки и повторяться в горизон- тальном направлении. Можно также добавить небольшой нижний отступ для рисунка линии:
a {
text-decoration: none;
background: url(images/underline.gif) repeat-x left bottom;
padding-bottom: 5px;
}
Глава 9. Приводим в порядок навигацию сайта
313Создание кнопокВы можете придать ссылкам вид кнопок, присутствующих в окнах и на панелях ин- струментов компьютерных программ. В этом вам помогут свойства border
, background- color и padding
. С их помощью очень просто создать широкий диапазон разновидно- стей прямоугольных кнопок (рис. 9.2).
Рис. 9.2. Можно создать кнопки со сложными и привлекательными очертаниями, комбинируя линии-границы различных стилей, цветов, ширины со свойством цвета фона
Допустим, вы назначили стилевой класс ссылке, которую хотите стилизовать в виде кнопки:
Free Donuts Here!
. Чтобы добавить вокруг этой ссылки простейшую рамку-контур черного цвета (см. рис. 9.2,
вверху слева), создайте следующий стиль:
a.button {
border: solid 1px #000;
}
Можете также окрасить кнопку путем установки цвета фона:
a.button {
border: solid 1px #000;
background-color: #333;
}
ПРИМЕЧАНИЕ
В этих примерах и a.button, и .button подойдут в качестве названия стиля. В случае a.button стиль применяется только к тегам с классом button, в то время как .button относится к любому тегу с таким именем класса. Если вы хотите быть уверенными, что стиль применяется только к конкрет- ному тегу, то добавьте имя тега в начале. Добавление названия тега также полезно в качестве напоминания при просмотре кода CSS — оно дает понять, для форматирования чего предназначен стиль. Когда вы видите a.button, становится ясно, что стиль нацелен на определенные ссылки.
314 Часть 2. Применение CSS
Чтобы превратить ссылку в кнопку, на которой хочется щелкнуть, следует ис- пользовать свойства border
, background и padding
. Может оказаться достаточным про- стое добавление рамки (верхнее изображение слева на рис. 9.2). Или же можно создать более впечатляющие кнопки, сочетая различные рамки или варьируя цвета, стили и ширину в свойстве background-color
. А для тех браузеров, которые поддер- живают линейные градиенты, текстовые и отбрасываемые блочными элементами тени, а также скругленные углы рамок с указанием радиусов,
можно добиться ре- зультатов, имеющих весьма привлекательный вид (нижний ряд на рис. 9.2).
Имейте в виду: совсем не обязательно, чтобы линии границ со всех четырех сторон ссылки-кнопки были одинакового стиля. Возможно, что у ссылки даже не будет каких-то границ. Широко применяемая дизайнерская методика превращения плоской кнопки в объемную предполагает использование четырех границ разного цвета, как показано в верхнем правом углу на рис. 9.2. Придание кнопке объемно- сти не представляет сложности, но вы должны помнить, что освещение заставляет предмет выглядеть таким. Представьте, что свет падает на одну из четырех сторон; эта обращенная к источнику света сторона — самая светлая, а противоположная — самая темная (поскольку приподнятая кнопка в выключенном состоянии препят- ствует прохождению света и вызывает появление «тени»). Остальные две стороны должны иметь цвета промежуточных оттенков между «светлыми» и «темными».
Рассмотрим CSS-код для придания кнопке-ссылке, отображенной в верхнем пра- вом углу на рис. 9.2, объемного вида:
a.button {
background: #B1B1B1;
color: #FFF;
font-weight: bold;
border-width: 4px;
border-style: solid;
border-top-color: #DFDFDF;
border-right-color: #666;
border-bottom-color: #333;
border-left-color: #858585;
}
Вы также можете (и я рекомендую) создать стиль в состоянии
:hover
. Кнопки будут реагировать на наведение посетителем на ссылку указателя мыши, обеспе- чивая интерактивность и обратную связь. В случае с объемной кнопкой при ее нажатии очень эффективен метод инверсной смены цветов: темный фон кнопки должен стать светлым, светлая граница — темной и т. д.
По-настоящему добавить глубину кнопке можно, используя линейные гради- енты и скругленные углы, блочные и текстовые тени. Например, нижняя средняя кнопка на рис. 9.2 создана с помощью следующего кода:
1. background-color: #ee432e;
2. background-image: -webkit-linear-gradient(top, #ee432e 0%, #c63929 50%,
#b51700 50%, #891100 100%);
3. background-image: -moz-linear-gradient(top, #ee432e 0%, #c63929 50%,
#b51700 50%, #891100 100%);
4. background-image: -o-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700
Глава 9. Приводим в порядок навигацию сайта
315 50%, #891100 100%);
5. background-image: linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
6. border: 1px solid #951100;
7. border-radius: 5px;
8. box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px
#333333;
9. padding: 12px 20px 14px 20px;
10. text-decoration: none;
11. color: #fff;
12. font: bold 20px/1 "helvetica neue", helvetica, arial, sans-serif;
13. text-align: center;
14. text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);
В строке 1 устанавливается темно-красный цвет фона; этот цвет предоставля- ется для браузеров, не понимающих линейные градиенты (Internet Explorer 9 и бо- лее ранние версии, а также другие браузеры). В строках 2–5 задается линейный градиент для различных браузеров. В строке 6 добавляется простая рамка, а в стро- ке 7 создаются скругленные углы, после чего в строке 8 добавляется тонкая вну- тренняя тень и
вторая отбрасываемая тень ниже кнопки, то есть применяются две отбрасываемые тени, что вполне допустимо. В строке 9 добавляется отступ, обес- печивающий появление пустого пространства вокруг текста кнопки, а в строке 10 удаляется подчеркивание, которое обычно появляется под ссылками. В последних строках устанавливаются свойства для текста в кнопке, включая цвет, шрифт, вы- равнивание и текстовую тень.
СОВЕТ
Создание привлекательных кнопок часто требует целого пакета свойств CSS (что можно заключить из приведенного выше кода). Если в создании всего этого кода требуется помощь, обратитесь к ге- нератору кнопок CSS3 по адресу http://css3button.net. Чтобы посмотреть на другие впечатляющие
CSS3-кнопки, зайдите на сайты http://hellohappy.org/css3-buttons/ и http://webdesignerwall.com/
tutorials/css3-gradient-buttons.
Использование изображенийДобавление для ссылок изображений — один из самых легких и эффективных способов улучшить внешний вид элементов навигации сайта. Существует мно- жество методик и вариантов дизайна, но при этом следует заметить, что ни в од- ном из хороших, грамотных методов не применяется HTML-тег
![]()
. Вместо этого используется прием с CSS-свойством background-image
, с помощью которо- го можно добавить привлекательность любой ссылке. Несколько примеров при- ведено на рис. 9.3 (более совершенные методы применения изображений для создания графических кнопок и эффектов ролловеров
1
описаны в обучающем уроке этой главы).
1
Ролловер — это элемент веб-страницы, изменяющий свой вид в зависимости от внешнего воздействия. —
Примеч. пер. 316 Часть 2. Применение CSS
Рис. 9.3. Даже простой рисунок может оживить ссылку и сделать ее более понятной для восприятия: значок земного шара (внизу слева) — один из способов обозначения внешних ссылок
Чтобы вспомнить свойство background-image и все, что с ним связано, вернитесь к разделу «Добавление фоновых изображений» гл. 8. Пока же напомню вам не- сколько вещей, которые нужно иметь в виду при использовании изображений со ссылками.
Не забывайте про значение no-repeat. По умолчанию фоновые изображения выводятся на заднем плане стилизуемого элемента. Со многими рисунками, применяемыми для ссылок, эффект получается ужасный (см. рис. 9.3,
вверху справа). Если вы не используете едва заметный узор,
похожий на градиентную заливку, не забудьте выключить повторное отображение фонового рисунка: background-repeat: no-repeat;
Управляйте позиционированием с помощью свойства background-position. Чтобы точно разместить фоновое изображение, используйте свойство background- position
(см. раздел «Позиционирование фоновых изображений» гл. 8). Если необходимо позиционировать изображение по правому краю ссылки, но при этом центрировать его вертикально на строке, то применяйте следующий CSS- код: background-position: right center;
Для еще более точного размещения изображений задействуйте значения пара- метров в пикселах или em. Эти единицы измерения облегчают смещение рисун- ка на нужное расстояние от левого края ссылки. Комбинируя эти единицы из- мерения с процентными значениями, вы сможете не только легко центрировать изображение вертикально по отношению к тексту ссылки, но и обеспечить его небольшое смещение на точное расстояние от левого края: background-position:
10px 50%;
Глава 9. Приводим в порядок навигацию сайта
Скачать 20.28 Mb.