Книга css3 3е издание Серия Бестселлеры OReilly
 Скачать 20.28 Mb.
|
|
344 Часть 2. Применение CSS В данном случае наибольший интерес представляет селектор .home .homeLink Это очень точный, явно определенный селектор, применяемый только к ссылке с классом homeLink , которая также заключена внутри тега с классом home Если вы измените класс страницы, например, на quiz , c кнопки-ссылки раздела Home (Домой) исчезнет выделение. Просмотрите веб-страницу в браузере, чтобы увидеть результат: теперь ссылка Home (Домой) имеет белый фон и значок скрепки. Чтобы проделать все то же самое с остальными ссылками, вы должны немного расширить селектор. 6. Отредактируйте селектор только что созданного стиля: .home .homeLink, .feature .featureLink, .expert .experLink, .quiz .quizLink, .project .projectLink, .horoscope .horoscopeLink { background-color: #FFFFFF; background-position: 97% 100%; padding-right: 15px; padding-left: 30px; font-weight: bold; } Конечно, довольно объемный CSS-код. Этот стиль теперь адресуется ко всем ссылкам панели навигации, но только при выполнении определенных условий. Если вы в дальнейшем измените идентификатор id тега , например, на quiz , то ссылка раздела Quiz (Викторина) приобретет такое же форматирование, каким была выделена ссылка раздела Features (Особенности). Теперь пришло время проверить результаты работы. ПРИМЕЧАНИЕ Этот длинный селектор является примером группового селектора, который мы обсуждали в гл. 3. 7. Измените атрибут class тега на feature следующим образом: Воспользовавшись предварительным просмотром веб-страницы, вы увидите, что ссылка Features (Особенности) теперь выделена белым цветом фона и знач- ком скрепки (см. рис. 9.14). Весь секрет в том, что нужно изменить атрибут class тега , чтобы указать, к какому разделу сайта принадлежит страни- ца. Например, для страницы гороскопа измените атрибут класса на ПРИМЕЧАНИЕ Готовы продолжить стилизацию дальше? Попытайтесь добавить эффект ролловера, чтобы закон- чить стиль, созданный в шаге 6 (используйте псевдокласс :hover в качестве составляющей селек- тора: .quiz .quizLink:hover). Попробуйте также добавить другое изображение для ссылки главной страницы Home (Домой) (можете использовать файл home.png в папке с рисунками images). Глава 9. Приводим в порядок навигацию сайта 345 Полную версию данной навигационной панели можно увидеть в файле 09_ finished\nav_bar\nav_bar_vertical.html. Переход от вертикальной панели навигации к горизонтальной Предположим, вы хотите создать горизонтальную панель навигации в верхней части веб-страницы. Никаких проблем — большую часть самой сложной работы мы уже выполнили. Чтобы расположить кнопки горизонтально в одну строку, необходимо немного изменить уже созданную веб-страницу (мы будем дорабаты- вать наш последний файл nav_bar.html , поэтому, если вы хотите сохранить верти- кальную панель навигации, прежде чем продолжить, сделайте копию файла). 1. Убедитесь в том, что вы выполнили все шаги по созданию вертикальной панели навигации, и откройте файл nav_bar.html в HTML-редакторе. Сейчас вы увидите, как просто изменить ориентацию панели. Сначала подчи- стим кое-что из того, что мы уже сделали. Нужно удалить ширину, которую вы установили для тега
ранее. Эта ширина препятствовала тому, чтобы нави- гационные кнопки охватывали всю длину страницы. Но поскольку тегу необходимо расшириться, чтобы вмещать набор горизонтальных кнопок, эта ширина подойдет нам без изменений. 2. Найдите стиль .mainNav и удалите в нем свойство width: 175px; Теперь раскрываю сам секрет преобразования вертикальной панели навигации в горизонтальную. 3. Добавьте в таблицу новый стиль (сразу после .mainNav ): .mainNav li { float: left; width: 12em; } Этот стиль применяется к тегу 346 Часть 2. Применение CSS Рис. 9.15. Преобразование вертикальной панели в более компактную, с горизонтальным расположением кнопок требует выполнения всего нескольких действий; гораздо больше усилий нужно приложить для настройки стилей, определяющих параметры границ и позиционирование фонового изображения 4. В стиле .mainNav a измените свойство border-bottom: none; на border-left: none; Это действие приводит к удалению левых границ кнопок, чтобы они не удва- ивались, и в то же время к нижнему краю добавляется граница. Однако нижняя граница тега по-прежнему отображается поверх кнопок, и с левой стороны панели навигации отсутствует граница на крайней левой кнопке (смотрите об- веденные кружком области на рис. 9.15, 2). Никаких проблем — просто измени- те границы 5. Найдите стиль .mainNav и измените в нем свойство border-bottom: 1px dashed #999999; на border-left: 1px dashed #999999; Сейчас при просмотре веб-страницы в браузере вы заметите, что граница над кнопками исчезла, но с левой стороны панели навигации так и не появилась (см. рис. 9.15, 3). Это еще одно свидетельство сложности использования плава- ющих элементов. Они вышли из обычного потока содержимого документа, и браузер больше не видит их в качестве составной части тега . Тег умень- шился до минимальных размеров, именно поэтому его нижняя граница отобра- жается поверх остального содержимого (это может показаться слишком запу- танным, но так оно и есть, именно поэтому работе с плавающими элементами посвящена отдельная глава книги — см. гл. 13). К счастью, несмотря на то, что проблема кажется достаточно сложной, ее реше- ние совсем простое. Добавим одно CSS-свойство к маркированному списку. 6. Добавьте два свойства в конце стиля .mainNav : .mainNav { margin: 0; padding: 0; list-style: none; border-left: 1px dashed #999999; } Глава 9. Приводим в порядок навигацию сайта 347 Код overflow: hidden заставляет расширяться неупорядоченный список. Почему свойство работает? Об этом вы узнаете из гл. 12. Наконец, значок скрепки, выров- ненный по правому краю нажатой кнопки Quiz , выглядит неплохо (см. рис. 9.15, 4), но лучше позиционировать его по левому краю. 7. Найдите стиль выбранной кнопки, созданный в шаге 6 (это стиль с длинным селектором). Измените координаты его свойства background с 97% 100% на 3px 100% Теперь стиль должен выглядеть следующим образом: .home .homeLink, .feature .featureLink, .expert .experLink, .quiz .quizLink, .project .projectLink, .horoscope .horoscopeLink { background-color: #FFFFFF; background-position: 3px 100%; padding-right: 15px; padding-left: 30px; font-weight: bold; } Просмотрите веб-страницу в браузере, и вы обнаружите, что горизонтальная панель навигации полностью работоспособна и замечательно выглядит (см. рис. 9.15, 5). Кроме того, она отлично работает даже в браузере Internet Explorer. ПРИМЕЧАНИЕ Возможно, вы захотите центрировать текст кнопок-ссылок панели навигации. Для этого нужно сде- лать две вещи: добавить в стиль .mainNav свойство text-align: center и подкорректировать свойство left-padding этого же стиля, чтобы текст был расположен точно по центру кнопок. Законченная версия веб-страницы, которая должна получиться, находится в фай- ле nav_bar_horizontal.html в папке 09_finished\nav_bar учебного материала. 10 Осуществление преобразований, переходов и анимации с помощью CSS За весьма короткую историю Интернета у разработчиков было несколько вариан- тов добавления анимации к своим веб-сайтам. Самая простая и примитивная ани- мация в рамках одного изображения предоставлялась в GIF-формате. Программы Adobe Flash позволяли создавать сложную анимацию и даже игры и веб-приложе- ния, но изучить эту технологию весьма непросто, и она не позволяет взаимодей- ствовать с другим HTML-кодом на вашей странице, представляющим изображе- ния, заголовки и абзацы, из которых составлена основа веб-содержимого. JavaScript дает возможность анимировать все, что имеется на веб-странице, но ценой изуче- ния всех тонкостей этого языка программирования. К счастью, CSS3 предоставляет способ перемещения, преобразования и анима- ции любого HTML-элемента, имеющегося на странице без обращения к любой из других упомянутых здесь технологий. Преобразования В CSS3 представлены несколько свойств, связанных с преобразованиями элемен- та веб-страницы, будь то вращение, масштабирование, перемещение этого элемен- та или его перекашивание вдоль горизонтальной или вертикальной оси (которое называется наклоном). Преобразование можно использовать, например, для при- дания небольшого наклона (вращения) панели навигации или для укрупнения изображения вдвое при проходе над ним указателя мыши. Можно даже сочетать несколько преобразований для получения весьма впечатляющих визуальных эф- фектов. Основным CSS-свойством для получения любого из этих изменений является transform . Оно используется с предоставлением типа желаемого преобразования и добавлением значения, указывающего на степень преобразования элемента. На- пример, для вращения элемента предоставляется ключевое слово rotate , за кото- рым следует количество градусов поворота: transform: rotate(10deg); Глава 10. Осуществление преобразований, переходов и анимации с помощью CSS 349 Показанное выше объявление приведет к вращению элемента на 10° по часовой стрелке. CSS-преобразования появились относительно недавно, и поэтому они поддержи- ваются не всеми браузерами. Двухмерные (2D) преобразования поддерживают Internet Explorer 9, Safari, Chrome, Firefox и Opera, но не поддерживают Internet Explorer 8 и более ранние версии. Более того, для всех широко используемых на данный момент браузеров нужно применять префиксы производителей. Поэтому, чтобы показанный выше код заработал, его нужно переписать следующим образом: -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); ПРИМЕЧАНИЕ Ранее в данной книге уже встречались некоторые другие свойства CSS3, требующие использования префиксов производителей, например -webkit-linear-gradient. Но до сих пор не было префикса вида -ms-, который предназначался бы для продукции компании Microsoft и был бы нацелен на использо- вание Internet Explorer. Internet Explorer 9 не понимает многие из свойств CSS3, поэтому для него обычно не требуется никаких префиксов производителя. Internet Explorer 10 (который, возможно, станет доступен ко времени чтения данной книги) не собирается применять префикс производителя для боль- шинства свойств, рассматриваемых в книге. А Internet Explorer 9 понимает свойство transform, поэтому для работы данного свойства в этом браузере нужно воспользоваться свойством -ms-transform. У CSS-преобразований есть одна странность: они не касаются окружающих эле- ментов. То есть, если повернуть элемент на 45°, он может наложиться на те элементы, которые находятся выше, ниже его или по бокам. Сначала веб-браузеры выделяют элементу то пространство, которое он занимал бы при обычных обстоятельствах (до преобразования), а затем они занимаются преобразованием элемента (его вра- щением, увеличением или наклоном). Этот процесс становится очевидным при уве- личении размеров элемента путем использования функции преобразования scale (см. далее подраздел «Масштабирование»). При увеличении размеров элемента в два раза браузер увеличивает преобразуемый элемент, но при этом не убирает с пути окружающее его содержимое, что обычно приводит к частичному перекрытию со- держимого страницы (рис. 10.1). То есть веб-браузер сохраняет все остальные части страницы в том виде, в котором они бы появились, если бы элемент не был увеличен. Показанное на рис. 10.1 увеличение -элемента (большой квадрат) приводит к перекрытию им заголовков выше и ниже этого элемента. Квадрат посередине, вы- деленный точками, представляет -элемент до его увеличения в два раза. Вращение Разобраться в работе функции rotate свойства transform довольно просто: ей предо- ставляется угол от 0 до 360°, а браузер вращает указанный элемент по кругу на указанное количество градусов (рис. 10.2). Чтобы задать значение угла, использу- ется число, за которым следует сокращение deg . Например, для вращения элемен- та на 180° , добавьте следующее объявление: transform: rotate(180deg); 350 Часть 2. Применение CSS Рис. 10.1. Трансформируемые элементы просто игнорируются другими окружающими их элементами Рис. 10.2. Функция rotate позволяет заставить любой элемент страницы — div, button, banner, photo илиr footer — вращаться либо на небольшой, любо на совершенно немыслимый угол ПРИМЕЧАНИЕ Для экономии пространства в приводимые здесь примеры не включаются префиксы производите- лей, но при помещении данного кода в таблицу стилей нужно добавлять к нему также свойства -webkit-transform, -moz-transform, -o-transform и -ms-transform. Для вращения элемента против часовой стрелки можно применять отрицатель- ные числовые значения. Например, средний элемент в верхней части рис. 10.2 по- вернут на 45° против часовой стрелки благодаря следующему объявлению: transform: rotate(-45deg); Значение 0deg не придает никакого вращения, значение 360deg придает одно вра- щение на полный оборот, а значение 720deg — два полных вращения. Разумеется, вне- шний вид элемента, которому было придано одинарное, двойное или тройное враще- ние, останется таким же, как и у элемента, не подвергавшегося никакому вращению (верхнее левое и нижнее правое изображения на рис. 10.2), поэтому использование Глава 10. Осуществление преобразований, переходов и анимации с помощью CSS 351 значения с числом 360 и кратным ему может вызвать удивление. В CSS3 предостав- ляется механизм анимирования изменений в CSS-свойствах. Так, например, можно заставить кнопку прокрутиться четыре раза, когда указатель мыши пользователя проходит над ней, путем начального вращения на 0deg и добавления стиля :hover для этой кнопки с вращением 1440deg . Как это делается, будет вскоре показано. Масштабирование Элемент можно также увеличить или уменьшить в размерах, воспользовавшись для этого функцией scale (рис. 10.3). Например, чтобы увеличить элемент вдвое, нужно добавить следующее объявление: transform: scale(2); Рис. 10.3. Для увеличения размера любого элемента на странице используется функция scale Следует напомнить, что при увеличении элемента браузер не убирает другие элементы с его пути. Фактически при увеличении элемента он, скорее всего, пере- кроет другие элементы (посмотрите, к примеру, на правый верхний квадрат на рис. 10.3). Число, представляемое в скобках, является коэффициентом масштабирова- ния — числом, на которое умножаются текущие размеры элемента. Например, 1 говорит об отсутствии масштабирования, .5 указывает на половину текущего размера, а 4 — на учетверение текущего размера. То есть числа между 0 и 1 приво- дят к уменьшению, а числа больше 1 — к увеличению элемента (значение 0 факти- чески делает элемент невидимым на странице). На это число происходит масштабирование элемента и всего, что в нем нахо- дится. Например, если масштабировать -контейнер с коэффициентом 2, то вдвое шире и выше станет не только сам контейнер, но также и текст внутри него. Это же касается и находящихся внутри изображений. 352 Часть 2. Применение CSS Конечно, можно удивиться: а зачем вообще все это нужно. В конце концов, мож- но ведь просто увеличить или уменьшить ширину и высоту элемента, используя CSS-свойства width и height , а размер текста можно увеличивать или уменьшать с помощью свойства fontsize . Чаще всего масштабирование используется для визу- альных изменений элемента на странице в динамическом режиме. Например, про- ход указателя мыши над кнопкой может тут же привести к увеличению размера этой кнопки. Этого эффекта можно добиться с помощью состояния :hover Предположим, например, что на странице есть ссылка, к которой применен класс .button . Для форматирования этой ссылки в виде кнопки можно создать следующий простой стиль: .button { font: .9em Arial, Helvetica, sans-serif; border-radius: .5em; background-color: rgb(34,255,23); border: 1px solid rgba(0,0,0,.5); padding: .5em; } Чтобы выделить это кнопку, можно сделать ее немного больше при проходе над ней указателя мыши посетителя: .button:hover { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } Когда указатель выходит за пределы кнопки, преобразование удаляется и кноп- ка возвращается к своему обычному размеру. Способ анимирования этого измене- ния размеров с помощью CSS-преобразований будет рассмотрен в подразделе «Пе- реходы». СОВЕТ Подобный замысел можно применить для изображений. Показать галерею из небольших изображе- ний, а затем добавить к этим изображениям стиль :hover, чтобы при проходе над ними указателя мыши посетителя они становились больше. Чтобы все это выглядело вполне достойно, в HTML вставляется финальная, увеличенная версия изображения, но его размер уменьшается либо с по- мощью CSS, либо с использованием свойств width и height тега Можно даже проводить раздельное горизонтальное и вертикальное масштаби- рование. Для этого внутри скобок нужно представить два значения, разделенных запятой. Первое число будет относиться к горизонтальному, а второе — к верти- кальному масштабированию. Например, чтобы сделать элемент вдвое меньше по ширине, но вдвое выше, используется следующее объявление: transform: scale(.5,2); Эффект можно увидеть в левом нижнем изображении рис. 10.3. В CSS3 также предоставлены отдельные функции для горизонтального и вер- тикального масштабирования: scaleX проводит масштабирование по горизонталь- Глава 10. Осуществление преобразований, переходов и анимации с помощью CSS |