Книга css3 3е издание Серия Бестселлеры OReilly
 Скачать 20.28 Mb.
|
;__background-repeat:_no-repeat;__background-position:_0_2px;){kind=link}
|
border-bottom: 2px solid #F60; } 334 Часть 2. Применение CSS Теперь ссылки выделяются, а использование границ вместо обычного подчер- кивания позволит изменить стиль, цвет и толщину линий. А сейчас вы измени- те вид посещенных ссылок. 7. Добавьте стиль псевдокласса :visited для посещенных ссылок: a:visited { color: #6E97BF; } Стиль изменяет внешний вид посещенных ссылок на более светлый с серым оттенком — это искусный способ отвлечь внимание от уже посещенной страни- цы. Если вы просмотрите страницу сейчас, щелкните кнопкой мыши на одной из ссылок (попробуйте, например, одну из тех, что находятся в центре страни- цы), а затем вернитесь к странице links.html . Вы должны увидеть, что ссылка стала светлее. Но вы также заметите, что остается выделение полужирным и все еще присутствует то оранжевое подчеркивание, которое вы назначили для сти- ля в шаге 6. Это пример каскадности в действии (см. гл. 5): стиль a:visited яв- ляется более значимым, чем простой селектор, поэтому его свойство цвета пе- реопределяет тот цвет, который был назначен стилем. Сейчас добавим эффект-ролловер hover (наведения), чтобы фон изменял цвет при наведении на ссылку указателя мыши. 8. Добавьте в таблицу стилей стиль псевдокласса :hover : a:hover { color: #FFF; background-color: #6E97BF; border-bottom-color: #6E97BF; } Этот псевдокласс применяется только на время, пока указатель мыши показы- вает ссылку или перемещается над ней. Свойство интерактивности эффекта- ролловера позволяет посетителям узнать, что выполняется какое-то действие (рис. 9.10). Рис. 9.10. С помощью нескольких стилей вы можете изменить внешний вид любой ссылки, а используя псевдокласс :hover, можно установить отдельный стиль, включаемый при перемещении указателя мыши над ссылкой Добавление для ссылки фонового изображения Ссылка на адрес электронной почты внизу веб-страницы ничем не отличается от других ссылок на странице (рис. 9.11, вверху). Поскольку mailto указывает на адрес электронной почты, при щелчке на ней кнопкой мыши посетитель не пе- Глава 9. Приводим в порядок навигацию сайта 335 рейдет на другую веб-страницу, а запустит почтовую программу. Чтобы обеспе- чить визуальное выделение этой ссылки, добавим небольшой значок почтового конверта. Рис. 9.11. Несколько тонких корректировок сделают назначение ссылки понятным: простая ссылка (вверху) превращается в явную, узнаваемую владельцами электронной почты (внизу) 1. Добавьте во внутреннюю таблицу стилей файла links.html еще один селектор потомка: a[href^="mailto:"] { color: #666666; border: none; background: url(images/email.gif) no-repeat left center; } Здесь используется расширенный селектор атрибута, выбирающий любые ссыл- ки, начинающиеся с mailto: (то есть он выбирает ссылки на адреса электронной почты). Для ссылки назначен серый цвет, а код border: none убирает подчерки- вание, определенное в шаге 6. Свойство background добавляет фоновое изображе- ние с левой стороны, а параметр no-repeat обеспечивает однократное отображе- ние рисунка. Здесь трудность состоит в том, что фоновое изображение (значок конверта) располагается на заднем плане прямо под текстом ссылки, и она ста- новится трудночитаемой (см. рис. 9.11, посередине). 336 Часть 2. Применение CSS 2. Добавьте в только что созданный стиль атрибута левый отступ размером 20 пик- селов: padding-left: 20px; Помните, что отступ добавляет промежуток между содержимым и границей элемента, поэтому установка небольшого левого отступа смещает текст ссылки на 20 пикселов, оставляя фоновое изображение на месте. И последний штрих: нужно немного отодвинуть всю ссылку от примечания об авторском праве. 3. Добавьте в стиль левое поле размером 10 пикселов. Должен получиться следу- ющий окончательный вариант: a[href^="mailto:"] { color: #666666; border: none; background: url(images/email.gif) no-repeat left center; padding-left: 20px; margin-left: 10px; } Эта маленькая корректировка обеспечивает визуальное отделение изображе- ния-значка почтовой ссылки от примечания об авторском праве (см. рис. 9.11, внизу). Таким образом, ссылка воспринимается посетителем как сочетание значка с текстом. Выделение внешних ссылок Иногда требуется визуально показать, что ссылка соответствует другому внешне- му сайту. Этим можно сказать посетителям, что дополнительная информация по теме находится где-то еще в Интернете, на другом сайте, или предупредить, что выбор этой ссылки приведет к переходу на другой сайт. Кроме того, вы, возможно, захотите идентифицировать ссылки, указывающие на загружаемые файлы или другие документы, не являющиеся веб-страницами. На веб-странице, над которой мы работаем, правосторонняя боковая панель Resources (Ресурсы) содержит различные типы ссылок, которые вы выделите знач- ками, используя отдельный значок для каждого типа. Для начала настроим базо- вый стиль, который применяется ко всем ссылкам. 1. Добавьте во внутреннюю таблицу стилей веб-страницы links.html следующее: .resources a { border-bottom: none; } Поскольку все ссылки, которые нужно отформатировать, находятся внутри с классом resources , селектор потомка .resources a воздействует только на эти ссылки. Этот стиль избавляется от подчеркивания, которое было добав- лено в общем стиле ранее. Далее добавим значок рядом с внешними ссылками. 2. Добавьте другой стиль в конец внутренней таблицы стилей веб-страницы links. html : Глава 9. Приводим в порядок навигацию сайта 337 .resources a[href^='http://'] { background: url(images/globe.png) no-repeat right top; } В этом стиле селектора потомка используется расширенный селектор атрибу- та. В основном он воздействует на любую ссылку, которая начинается с http:// (но только на ту, которая находится внутри элемента с классом resources ). Как и стиль ссылки на адрес электронной почты, который вы создали ранее, этот стиль добавляет фоновое изображение. Он помещает изображение на правую сторону ссылки. Тем не менее у этого стиля есть проблема, аналогичная проблеме стиля ссылки на адрес электронной почты, — изображение появляется под текстом ссылки. К счастью, решение такое же — нужно добавить отступы, чтобы переместить изображение в нужное место. В этом случае, однако, вместо левого отступа вы добавите правый (поскольку значок появляется на правой стороне ссылки). Кроме того, так как все ссылки в разделе ресурсов будут иметь значки схожих размеров, вы можете сократить количество кода, добавив отступы к стилю .resources a , созданному в шаге 1. 3. Отредактируйте стиль .resources a так, чтобы он выглядел следующим обра- зом: .resources a { border-bottom: none; padding-right: 22px; } Если вы сохраните страницу и просмотрите ее в браузере, то увидите маленькие значки с земным шаром с правой стороны двух нижних ссылок боковой панели. Теперь отформатируем другие ссылки. 4. Добавьте еще три стиля во внутренней таблице стилей: .resources a[href$='.pdf'] { background: url(images/acrobat.png) no-repeat right top; } .resources a[href$='.zip'] { background: url(images/zip.png) no-repeat right top; } .resources a[href$='.doc'] { background: url(images/word.png) no-repeat right top; } Эти три новых стиля проверяют, как заканчивается атрибут href , идентифици- руют ссылки как файлы Adobe Acrobat ( ), ZIP-архивы ( .zip ) или докумен- ты Word ( .doc ) и назначают различные значки в каждом конкретном случае. 5. Наконец, добавьте состояние hover (наведения указателя мыши) для ссылок на ресурсы: .resources a:hover { 338 Часть 2. Применение CSS color: #000; background-color: rgba(255,255,255,.8); } Этот стиль изменяет цвет текста и добавляет цвет фона (рис. 9.12). Рис. 9.12. Используя расширенные селекторы атрибутов, вы можете легко идентифицировать и стилизовать различные типы ссылок веб-страницы Окончательную версию этого урока вы найдете в файле 09_finished/links/links. html Обучающий урок 2: создание панели навигации На этом практическом занятии мы превратим простой список ссылок во впечатля- ющую панель навигации с эффектом-ролловером и выделением нажатой кнопки текущего раздела сайта. 1. Откройте файл веб-страницы nav_bar.html из папки 09\nav_bar в HTML-редак- торе. Как видите, в этом файле содержится совсем короткий программный код. Здесь присутствует внутренняя таблица со сбросом стандартных стилей CSS и одним правилом, определяющим простейшее форматирование тега основного содержимого веб-страницы. Код HTML создает маркированный список, состо- ящий из шести ссылок. Веб-страница имеет вид, показанный на рис. 9.13, 1. Первым шагом будет добавление HTML-кода, обеспечивающего целенаправ- ленное форматирование ссылок списка средствами CSS. 2. Найдите открывающий тег и добавьте в него class = "mainNav" , чтобы он выглядел следующим образом: Атрибут class назначает этот список главной областью навигации, или панелью управления. Мы будем использовать его для создания селекторов потомков, избирательно форматирующих только ссылки этого списка (а не все ссылки веб-страницы). 3. Добавьте во внутреннюю таблицу после body новый стиль: .mainNav { margin: 0; padding: 0; Глава 9. Приводим в порядок навигацию сайта 339 list-style: none; } Этот стиль будет применен лишь к тегу с классом mainNav . Он удаляет от- ступ и маркеры, которые браузер добавляет в маркированные списки, как пока- зано на рис. 9.13, 2. Теперь приступим к форматированию ссылок. Рис. 9.13. Вам может показаться, что преобразование простого списка в сложную панель навигации требует выполнения объемной работы, но на самом деле нужно всего лишь создать несколько стилей 4. Добавьте производный селектор для форматирования ссылок списка: .mainNav a { color: #000; font-size: 11px; text-transform: uppercase; text-decoration: none; } Этот стиль определяет базовое форматирование текста ссылок: устанавливает цвет и размер шрифта, верхний регистр всех букв, удаляет линию подчеркива- ния (см. рис. 9.13, 3). Сейчас придадим ссылкам вид кнопок. 5. Добавьте в стиль .mainNav свойства border и padding : border: 1px dashed #999; padding: 7px 5px; Теперь при просмотре веб-страницы в браузере вы заметите пару проблем (см. рис. 9.13, 4): границы перекрываются между собой, а ссылки имеют различ- ную ширину. Это происходит потому, что тег является линейным элементом 340 Часть 2. Применение CSS и ширина ссылки равна длине ее текста. Кроме того, верхний и нижний отступы не обеспечивают увеличения высоты линейным элементам, поэтому границы накладываются друг на друга (о линейных элементах читайте в разделе «Управ- ление размерами полей и отступов» гл. 7). Решить эти проблемы со ссылками можно путем изменения их способа отображения браузером. 6. Добавьте свойство display: block; в стиль .mainNav Мы изменяем параметры отображения тега таким образом, чтобы он обрабаты- вался браузером как абзац текста или другой блочный элемент, с расположением ссылок в виде списка, в точности одна над другой. Осталась единственная пробле- ма — ссылки растянуты по всей ширине окна браузера — слишком много для кно- пок. Исправим ситуацию, ограничив ширину тега в соответствующем стиле. 7. Во внутренней таблице найдите стиль .mainNav и добавьте в него свойство width: 175px; .mainNav { margin: 0; padding: 0; list-style: none; width: 175px; } При ширине списка 175 пикселов ссылки по-прежнему слишком широки, хотя и ограничиваются шириной элемента-контейнера (тег ). В большинстве слу- чаев список ссылок заключен в какой-то элемент разметки веб-страницы (на- пример, боковая панель), для которого уже определена ширина, поэтому можете пропустить этот шаг (о том, как создавать боковые панели, читайте в части 3). Сейчас перейдем к самому интересному. 8. Добавьте в стиль .mainNav свойство background следующим образом: .mainNav a { color: #000; font-size: 11px; text-transform: uppercase; text-decoration: none; border: 1px dashed #999; padding: 7px 5px; display: block; background-image: url(images/nav.png); background-repeat: no-repeat; background-position: 0 2px; } Эти строки изменяют цвет фона ссылок на серый и устанавливают одиночное изображение с левой стороны каждой кнопки (см. рис. 9.13, 5). Здесь тоже нуж- но кое-что исправить: текст ссылки накладывается на значок, а линии границ между кнопками имеют толщину, равную 2 пикселам (теоретически границы имеют толщину 1 пиксел, но сливающиеся воедино линии соседних ссылок об- разуют линию толщиной 2 пиксела). Глава 9. Приводим в порядок навигацию сайта 341 ПРИМЕЧАНИЕ Используя сокращенный вариант свойства background, можно изменить код в шаге 8 на такой: background: #E7E7E7 url(images/nav.png) no-repeat 0 2px;. 9. Удалите верхнюю границу и измените отступ в стиле .mainNav , чтобы он выгля- дел следующим образом: .mainNav a { color: #000; font-size: 11px; text-transform: uppercase; text-decoration: none; border: 1px dashed #999; border-bottom: none; padding: 7px 5px 7px 30px; display: block; background-color: #E7E7E7; background-image: url(images/nav.png); background-repeat: no-repeat; background-position: 0 2px; } Выглядит неплохо: текст каждой ссылки отделен от значка, границы выделя- ются. Однако нижняя граница последней ссылки исчезла. Существует несколь- ко способов разобраться с этим. Один состоит в том, чтобы создать стилевой класс с надлежащим параметром нижней границы border-bottom , а затем приме- нить его к этой ссылке. Будет гораздо проще применить нижнюю границу к тегу , содержащему список ссылок (поскольку этот тег не имеет отступов, нет промежутка, отделяющего верх от верхней стороны этой первой ссылки). 10. Добавьте верхнюю границу в стиль .mainNav , чтобы он выглядел следующим образом: .mainNav { margin: 0; padding: 0; list-style: none; width: 175px; border-bottom: 1px dashed #999; } Вот и все, мы создали простейшую панель навигации с применением границ, отступов, фонового цвета и изображений (см. рис. 9.13, 6). Добавление ролловеров и выделение текущего раздела сайта стилем выбранных ссылок Пришло время усовершенствовать панель навигации и придать ей некоторую ин- терактивность. Сначала обеспечим кнопкам главной панели управления эффект ролловера. Они должны изменять свой вид, акцентируя внимание посетителя на том, какую кнопку он собирается нажать. 342 Часть 2. Применение CSS Неплохо было бы дать посетителю знать, в каком разделе (на какой странице) сайта он находится. Мы можем обеспечить созданной панели навигации автома- тическую интерактивность. Она будет просто изменять свой стиль в соответствии с выбранным разделом страницы. Звучит совсем просто, но в действительности это потребует некоторой разметки и настроек, как вы увидите в следующих шагах. Эффект ролловера реализовать просто, но начнем по порядку. 1. Добавьте в конце таблицы стилей файла nav_bar.html следующий стиль: .mainNav a:hover { font-weight: bold; background-color: #B2F511; background-position: 3px 50%; } Он определяет внешний вид ссылки-кнопки в состоянии hover . Стиль изменяет шрифт текста кнопки с обычного на полужирный, а также цвет фона на ярко- зеленый. Кроме того, он использует метод CSS-спрайтов, упомина вшийся ра- нее. То же самое изображение применяется в шаге 8 в прошлом разделе — оно в действительности содержит три различных значка (рис. 9.14). В этом случае изображение центрируется внутри кнопки, отображая средний значок файла. Рис. 9.14. С помощью несложного CSS-кода можно создать интерактивный эффект ролловера для кнопок панели навигации, а также автоматически подсветить раздел сайта текущей страницы Теперь при наведении указателя мыши на любую кнопку и его перемещении на ней кнопка моментально изменяет свой вид (откройте веб-страницу в своем браузере и посмотрите сами). Глава 9. Приводим в порядок навигацию сайта 343 Теперь сделаем панель навигации более информативной, выделив кнопку, со- ответствующую текущему разделу, страницу которого открыл посетитель сай- та. Чтобы сделать это, нам потребуется идентифицировать в HTML-коде пане- ли навигации две вещи: раздел, к которому принадлежит страница, и разделы, на которые указывает каждая ссылка. В нашем примере предположим, что от- крыта домашняя страница. ПРИМЕЧАНИЕ Другим вариантом будет создание стилевого класса, который изменяет внешний вид ссылки, пред- ставляющей раздел страницы. Для веб-страницы гороскопа ссылка панели навигации может выгля- деть следующим образом: Horoscopes. 2. Найдите тег и добавьте в него класс class= " home ": Теперь, когда мы знаем, какому разделу сайта принадлежит текущая открытая страница, можно использовать селектор потомка для создания конкретного CSS- стиля, который будет применен к веб-странице раздела Features (Особенности). Далее мы должны маркировать разделы, на которые указывает каждая ссылка- кнопка, что достигается путем добавления классов. 3. Найдите в HTML-коде панели навигации ссылку Home (Домой) и добавьте в нее класс , чтобы тег выглядел следующим образом: >Home Этот класс однозначно определяет ссылку, предоставляя возможность создания стиля, который будет применен только к ней. Естественно, нам потребуется добавить классы для всех ссылок панели навига- ции. 4. Повторите шаг 3 для каждой из ссылок, используя следующие классы: featureLink , expertLink , quizLink , projectLink и horoscopeLink С HTML-частью закончили. Настало время создать CSS-код. Теперь у нас есть маркированные страница и ссылка, и мы можем элементарно создать производ- ный селектор, выделяющий кнопку-ссылку Features (Особенности). 5. Добавьте в таблицу стилей веб-страницы еще один стиль: .home .homeLink { background-color: #FFFFFF; background-position: 97% 100%; padding-right: 15px; padding-left: 30px; font-weight: bold; } Мы уже рассматривали эти свойства прежде. Мы снова используем метод CSS Styles для регулировки позиции фонового изображения. На этот раз изображе- ние отодвигается на 97 % вправо, а его нижняя часть помещается в нижнюю часть кнопки. Другими словами, значок будет отображаться внизу изображения (см. рис. 9.14). О том, как процентные значения работают с фоновыми изобра- жениями, мы говорили в гл. 8. |