Глава 16. CSS для распечатываемых веб-страниц 539 Обучающий урок: создание таблицы стилей для печати В этой программе-примере мы создадим таблицу стилей для печати. Чтобы печат- ная версия веб-страницы имела лучший вид, добавим стили, которые удаляют не- желательные элементы и фоны страницы, изменяют форматирование текста и пе- чатают URL-адреса любых ссылок на странице. Чтобы приступить, загрузите файлы примеров. Как это сделать, рассказывает- ся в конце гл. 2. Файлы для этого примера находятся в папке 16 Удаление ненужных элементов страницы Прежде чем приступить к работе, вы должны определить, как размечена страница, чтобы можно было решить, какие элементы нужно печатать. 1. Запустите браузер и откройте файл print.html из папки 16 У веб-страницы плавающая разметка, состоящая из нескольких тегов
(рис. 16.4). По всей вероятности, любой, кто будет печатать эту страницу, больше всего заинтересован в главном содержимом (большом куске текста по центру стра- ницы). Печать навигационной панели и боковой панели — пустая трата чернил, так что ваша таблица стилей для печати должна скрывать эти части страницы. Рис. 16.4. Макет страницы позволяет управлять размещением элементов. При печати страницы лучше, чтобы некоторые элементы вовсе не появлялись. Баннер, навигационная панель и боковая панель не дадут никакой полезной информации в распечатанном документе
540 Часть 4. CSS для продвинутых 2. В текстовом редакторе создайте новый файл, названный print.css , и сохраните его в папке 16 вместе с основной таблицей стилей. В вашей новой таблице стилей для печати первоочередная задача состоит в том, чтобы скрыть навигационную панель и другие части страницы, которые вы не хотите печатать. 3. Используя свойство display , создайте новую группу селекторов, которые скры- вают навигационные элементы и боковую панель: .sidebar, .navWrapper, .footerNav { display: none; } При свойстве display , которому установлено значение none , браузеры скрывают эти элементы так, что они не печатаются. Но сначала вы должны присоединить внешнюю таблицу стилей к своей веб-странице, чтобы браузеры могли найти ее. 4. В текстовом редакторе откройте файл print.html из папки 16 У данной страницы уже есть присоединенная таблица стилей — main.css . Эта внешняя таблица стилей предусматривает все форматирование для страницы при ее отображении в браузере. Кроме того, поскольку таблица стилей присо- единена с помощью тега
без указания атрибута media , она применяется и при печати страницы. Ваша таблица стилей для печати, следовательно, долж- на отменить любые стили из файла main.css , которые плохо выглядят при печа- ти. Первый шаг в этом процессе — присоединить таблицу стилей для печати после файла main.css в HTML-коде этой страницы. 5. Вставьте тег
в начале страницы, где присоединяется файл global.css ( main. css ). Вставьте пустую строку после этого тега, а затем добавьте следующее:
Если свойства из двух стилей с одинаковым названием конфликтуют, то побеж- дают свойства последней присоединенной к странице таблицы стилей, так что этот тег
должен идти после другого тега
. Таким образом, если у фай- ла main.css есть класс, названный .copyright , который создает белый 10-пиксель- ный текст на черном фоне, вы можете создать другой стиль, названный .copyright , в таблице стилей для печати, с черным текстом размером 12 пунктов на белом фоне. Хотя два стиля имеют одно название, свойства из таблицы стилей для пе- чати победят, потому что она присоединена последней (см. раздел «Особенности механизма каскадности: какие стили имеют преимущество» гл. 5 для получения большей информации об этом механизме каскадности). 6. Сохраните файлы print.css и print.html , а затем просмотрите print.html в брау- зере. Вид страницы не отличается от того, который был в шаге 1 этого урока. Так происходит потому, что вы еще не печатали страницу. Вы можете увидеть воз- действие таблицы стилей для печати, используя команду Print Preview (Пред- варительный просмотр) браузера. 7. Если вы пользуетесь операционной системой Windows, выполните команду File Print Preview (Файл Предварительный просмотр). Любителям Mac надо
Глава 16. CSS для распечатываемых веб-страниц 541 выбрать File Print (Файл Печать), а затем в появившемся окне Print (Печать) нажать кнопку Print Preview (Предварительный просмотр). В окне Print Preview (Предварительный просмотр) вы увидите, что правая боко- вая панель и навигационные элементы исчезли. Но дизайн все равно еще не впечатляет. Главное содержимое не наполняет страницу так, как должно. Далее рассмотрим, как устранить оставшиеся проблемы. Установка разметки Пока основное содержимое и нижний колонтитул с записью об авторских правах некорректно соответствуют печатной странице: основное содержимое не дотягива- ется до правого края страницы, а запись имеет отступ от левого края. Эти два эле- мента выглядели бы намного лучше, если бы заполняли всю печатную область. В настоящее время разметкой управляют два стиля. На рис. 16.4 вы можете видеть, что страница разделена на несколько зон, каждая из которых создается собственным отдельным тегом
. Стили .mainWrapper и .footer центрируют об- ласти с основным содержимым и с нижним колонтитулом и устанавливают для них ширину 900 пикселов. Кроме того, стиль .main имеет заданные значения ши- рины, а стиль .footerMain — левое поле. Поскольку вы не знаете, на бумаге какого размера будет распечатана эта страница, вы должны избавиться от всех заданных значений ширины и удалить все поля. 1. Вернитесь к текстовому редактору и файлу print.css . Добавьте один новый стиль, убирающий установленные значения ширины и поля тех областей стра- ницы, которые будут распечатаны: .banner, .mainWrapper, .footer, .main { width: auto; margin: 0; padding: 0; } Первое объявление — width:auto — затрагивает несколько областей страницы. Оно отменяет установку ширины, равной 900 пикселам, для основного текста и нижнего колонтитула в файле main.css и оставляет точную ширину для брау- зера. Значение auto просто позволяет тегу
заполнить всю доступную ши- рину, поэтому за размер бумаги можно не беспокоиться. Два других объявле- ния — margin и padding — устраняют пространство вокруг этих разделов div Содержимое с записью об авторском праве, представленное внутри тега
с идентификатором footerMain , не имеет установленной ширины, но имеет левый отступ. При печати он будет выглядеть нелепо, поэтому следует устранить его. 2. Добавьте такой стиль к таблице стилей print.css : .footerMain { margin: 0; } Вы спрятали правую боковую панель, для позиционирования которой при- менялось свойство float , но основное содержимое все еще плавающее, чего не должно быть для печатной страницы.
542 Часть 4. CSS для продвинутых 3. Добавьте новый стиль в файл print.css : .main { float: none; } При печати плавающих разметок могут проявиться различные проблемы. Как мы обсуждали ранее, плавающие элементы могут внезапно выскочить за преде- лы их блока-контейнера, не позволяя фонам и границам отображаться коррект- но. Решение заключается в следующем: добавьте объявление overflow: hidden; к стилю блока-контейнера. Тем не менее скрытие переполняющегося содержи- мого иногда приводит к тому, что печатный материал не отображается. Поэтому вы должны выключить это для двух стилей. 4. Добавьте еще один стиль к таблице стилей print.css : .mainWrapper, #footer { overflow: visible; } Данный стиль гарантирует, что содержимое внутри этих двух разделов div пол- ностью отображается. У нас также есть несколько фоновых цветов и изображений, разбросанных по странице. Иногда фоновые изображения и цвета печатаются, но чаще всего это- го не происходит. Все зависит от браузера и настроек пользователей. Некоторые браузеры не печатают фоновые элементы вовсе, другие же могут печатать их, но дают людям право выбора. Печать фона полезна, когда бумажный вариант страницы должен выглядеть как экранная версия. Но если ваши фоны были созданы просто для украшения и станут пустой тратой чернил, окажите услугу своим посетителям и отключите их. 5. Добавьте следующий стиль к таблице стилей print.css : html, body, .banner, .footerWrapper { background: #FFF; } При просмотре на экране у страницы выделяются различные фоновые цвета и изображения. Например, баннер имеет фоновое изображение для заголовка About Us (О нас), а нижний колонтитул — фиолетовый цвет в качестве фонового. Этот стиль устанавливает белый цвет фона для страницы и баннера и удаляет графику (я уже рассказывал о том, почему фоновое изображение исчезает). Область с логотипом сайта также выглядит не очень хорошо при печати. Она слишком высокая, так как была расширена за счет применения фонового изо- бражения, которое не появится при печати. Вы сможете отрегулировать высоту и улучшить внешний вид этого верхнего раздела, центрировав логотип и доба- вив линии над и под ним. 6. Добавьте новый стиль к таблице стилей print.css : .banner { height: auto; text-align: center;
Глава 16. CSS для распечатываемых веб-страниц 543 border-bottom: 2pt solid #000; border-top: 2pt solid #000; padding: 10pt 0; margin-bottom: 15pt; } Первое свойство устраняет высоту баннера, позволяя ему принять размер в со- ответствии с содержащим его тегом
. Другими словами, она будет такой же, как и высота логотипа внутри него. Свойство text-align центрирует логотип, придавая ему классический вид. Благодаря границам выше и ниже логотипа появляются линии, а отступ добавляет пространство между логотипом и гра- ницами. Обратите внимание, что в этих стилях используются пункты, посколь- ку это более привычный способ измерения элементов при печати. Вы можете сохранить этот файл. Просмотрите print.html в браузере и исполь- зуйте функцию Print Preview (Предварительный просмотр), чтобы увидеть, какой будет печатная версия страницы. Переформатирование текста В то время как цветной текст и заданные в пикселах шрифты могут хорошо ото- бражаться на экране, лазерные принтеры лучше понимают шрифты, размеры ко- торых указаны в пунктах. Кроме того, черный текст смотрится лучше на белой бумаге. В этом подразделе мы отрегулируем текст так, чтобы он выглядел при пе- чати как можно лучше. 1. В файле print.css добавьте следующее CSS-правило: * { color: #000000 !important; } Этот стиль указывает каждому тегу использовать черный текст независимо ни от чего. Использование символа * (универсальный селектор) — быстрый способ определить стиль для каждого элемента на странице (см. подраздел «Универ- сальный селектор» раздела «Стилизация групп тегов» гл. 3), в то время как пра- вило !important решает любые конфликты, вызванные каскадностью. Таким образом, хотя * — не очень специфический стиль, свойство color здесь превос- ходит то же самое свойство в более характерных стилях, таких как .main h1 или .nav .mainNav a После этого нужно установить новые размеры шрифта для текста. 2. Добавьте три следующих стиля: h1 { font-size: 30pt !important; } h2 { font-size: 16pt !important; font-weight: bold !important; } p {
544 Часть 4. CSS для продвинутых font-size: 11pt !important; } Эти стили задают каждому из этих тегов более благоприятный для печати раз- мер шрифта. Добавление правила !important приводит к тому, что указанные размеры всегда применяются, независимо от любых конфликтов со стилями, находящимися в таблице стилей main.css ПРИМЕЧАНИЕ В нашем случае h1, h2 и p — единственные теги, которые печатаются со страницы print.html. Ваши страницы могут нуждаться в переопределении размеров текста для других тегов, таких как списки и т. д. Просто ради интереса добавьте несколько стилей, чтобы изменить размер шриф- та записи об авторском праве и добавить линию границы над ней. 3. Добавьте два следующих стиля: .footerMain { margin-top: 15pt; border-top: 1pt solid #000; padding-top: 5pt; } .footerMain p { font-size: 9pt !important; } Все свойства CSS в этих стилях должны быть устаревшими. Они регулируют пространство над нижним колонтитулом, добавляют линию границы, немного пространства между границей и запись об авторском праве, делают текст за- писи меньше. Обратите внимание на объявление !important в стиле .footerMain p . Вы должны добавить его, поскольку в стиле p из шага есть !important . По- скольку у .footerMain p больший приоритет (мы обсуждали эту концепцию под- робно ранее), чем у р , его объявление !important в итоге побеждает. Отображение URL В качестве последнего штриха добавим еще один стиль, который печатает URL- адрес рядом с текстом любой ссылки на странице. Таким образом, экранный текст Click here to found out more (Нажмите здесь, чтобы узнать больше) напечатается как Click here to found out more (http://www.outmore.com/) (Нажмите здесь, чтобы узнать больше (http://www.outmore.com/)), так что любой человек, читающий печатную версию, сможет посетить сайт, на который указывает ссылка. Эта методика исполь- зует некоторый усовершенствованный CSS-код, который Internet Explorer вер- сии 6 (и 7 на момент написания книги) не поймет, но она тем не менее не причи- нит никакого вреда этому браузеру. Однако это существенное улучшение для пользователей, которые распечатывают ваш сайт из браузеров Internet Explorer 8, 9 и 10, а также Chrome, Firefox и Safari. 1. Добавьте еще один, последний стиль к таблице стилей print.css : a:after { content: " (" attr(href) ") "; }
Глава 16. CSS для распечатываемых веб-страниц 545 На строке content: этот стиль добавляет URL-адрес (часть attr(href) ) в конец каждой ссылки (часть a: after ). 2. Сохраните файл print.css . Откройте страницу cosmo.html в браузере и распеча- тайте ее. Распечатанная страница должна выглядеть так, как показано на рис. 16.5, — простой, содержащей только факты. Конечную версию страницы вы найдете в папке 16_finished Рис. 16.5. Простота страницы делает ее замечательной для печати. Вы получите лестные отзывы от пользователей, которым нужна только информация, а не навигационные панели, реклама и фоновые изображения, тратящие впустую чернила
17 Совершенствуем навыки работы с CSS На данный момент мы рассмотрели большинство принципов каскадных таблиц стилей. С добавлением разметки, основанной на CSS, вы сможете быстро и эффек- тивно разрабатывать сайты. Но даже теперь, когда вы овладели всеми свойствами, которые предлагает CSS, научились устранять ошибки браузеров и освоили искус- ные приемы разработки красивых веб-страниц, вы все еще можете изучить не- сколько методик, которые сделают ваш CSS-код более легким для создания, ис- пользования и поддержки. Эта глава содержит некоторые рекомендации по созданию и использованию CSS. Они не являются основополагающими, но могут ускорить вашу работу. Добавление комментариев Если приходится редактировать таблицу стилей через недели, месяцы или даже годы после того, как она была создана, может возникнуть вопрос: «Зачем я создавал этот стиль? Что он делает?» Как в любых других проектах, создавая сайт, вы долж- ны хранить заметки о том, что вы делали и для чего. К счастью, для этого вам не придется исписывать кучу бумаги. Вы можете включать ваши заметки прямо в таб- лицы стилей, используя комментарии CSS. Комментарий CSS — это просто заметка, содержащаяся между двумя наборами символов: /* и */ . Как и в HTML, комментарии CSS не читаются и не выполняют- ся браузером, но позволяют добавлять полезные напоминания к вашим таблицам стилей. Вам не нужно комментировать в своих таблицах стилей абсолютно все, в конечном счете большинство свойств, таких как color , fontfamily , border-color и т. д., говорят сами за себя. Но вполне резонно будет добавить комментарий для стиля, когда сразу не поймешь, что именно делает тот или иной стиль или свойство. Например, вы можете сбросить блочную модель CSS, чтобы ширина и высота эле- мента вычислялись с учетом границ и отступов: * { -moz-box-sizing: border-box; box-sizing: border-box; } В то время когда вы писали стиль, вы знали, что он делает, но будете ли вы так же хорошо помнить это три месяца спустя? А что, если кому-нибудь, кто не знаком
Глава 17. Совершенствуем навыки работы с CSS 547 с этим приемом, понадобится отредактировать ваш код CSS? Добавьте коммента- рий, и вы или кто-то еще, кто будет работать с вашим сайтом, легко выясните, что делает этот стиль и зачем он был создан: /* Сброс для всех элементов вычисления размеров в соответствии с моделью блоков */ * { -moz-box-sizing: border-box; box-sizing: border-box; } Вы можете оставить обширный комментарий, который может занимать несколь- ко строк. Просто начните с символов /* , введите все комментарии, а затем закончите символами */ . Это удобно при добавлении сопровождающей информации в начале таблицы стилей, как показано на рис. 15.1. Вы можете также использовать много- строчные комментарии для предоставления полезной вводной информации, которая позволит отслеживать версию сайта или таблицы стилей, добавлять информацию об авторском праве и идентифицировать вас как владельца CSS-кода. Рис. 17.1. Комментарии CSS помогут идентифицировать стили для их редактирования спустя некоторое время Организация стилей и таблиц стилей О создании стилей и таблиц стилей уже было рассказано многое. Но когда вы про- ектируете сайт, который будет поддерживаться, вы можете объединить несколько принципов, которые помогут вам в будущем. Придет день, когда вы должны будете
548 Часть 4. CSS для продвинутых изменить вид сайта, наладить определенный стиль или передать свою тяжелую работу кому-то еще, кто теперь станет ответственным за нее. Помимо комментари- ев для себя или других людей, небольшое планирование и организация внутри вашего CSS-кода решат различные проблемы в будущем. Давайте стилям понятные имена Вы уже изучили технические аспекты именования различных типов селекторов — селекторы класса начинаются с выражения a. , что позволяет идентифицировать стили как классы, а селекторы ID начинаются с символа # . Кроме того, названия, которые вы задаете для ID и классов, должны начинаться с буквы и не могут со- держать такие символы, как & , * или ! . Помимо выполнения этих требований, не- обходимо соблюдать некоторые практические правила, что может помочь вам от- слеживать стили и работать более эффективно. Называйте стили по их назначению, а не по внешнему виду. Очень заманчиво бывает использовать такие названия, как .redhighlight , при создании стиля для форматирования огненно-красного текста, бросающегося в глаза. Но что, если вы (босс, клиент) решите, что оранжевый, синий или бледно-зеленый будет смотреться лучше? В результате получится, что стиль, названный .redhighlight , на самом деле определяет текст бледно-зеленого цвета, что, конечно, сбивает с толку. Лучше использовать название, которое описывает назначение стиля. Например, если красный цвет текста предназначен для указания ошибок, кото- рые допустил посетитель при заполнении формы, используйте название .error Когда стиль должен оповестить посетителя о некоторой важной информации, назовите его .alert . В любом случае изменение цвета или другое форматиро- вание стиля не вызовет путаницы, так как стиль все равно предназначен для указания ошибок или оповещения пользователей, независимо от его цвета. Следует также избегать имен с указанием конкретных размеров, например .font20px . Сегодня этот шрифт может иметь размер 20 пикселов, а завтра, может быть, вы дадите ему размер 24 пиксела или перейдете от пикселов к em или процентам. Лучше, может быть, воспользоваться селектором тега: примените размер шрифта к тегу h2 или к тегу p , или даже воспользуйтесь селектором потомков вроде .sidebar1 p Не используйте названия, основанные на месте расположения элемента. По той же самой причине, по которой нужно избегать названия стилей согласно их внеш- нему виду, вы должны избегать названия их по расположению. Иногда такое название, как .leftSidebar , кажется очевидным выбором: «Я хочу, чтобы весь материал в этом блоке был размещен у левого края страницы!» Но, возможно, кто-то захочет переместить левую боковую панель вправо, вверх или даже вниз страницы. И внезапно название #leftSidebar перестанет иметь какой-либо смысл вообще. Названия, более соответствующие назначению этой боковой панели, — .news , .events , .secondaryContent , .mainNav — идентифицируют ее независимо от места расположения. Названия, которые вы видели до сих пор в этой книге, — .gallery , .figure , .banner , .wrapper и т. д. — подчиняются этому правилу. Всегда есть соблазн использовать имена типа .header и .footer (для элементов, которые всегда находятся в верхней или нижней части страницы), поскольку их названия более чем очевидны. Но вы во многих случаях сможете подобрать
Глава 17. Совершенствуем навыки работы с CSS 549 имена, которые лучше определяют содержимое элементов, например .branding вместо .header . С другой стороны, применение имен с информацией о позиции иногда имеет смысл. Скажем, вы хотите создать два стиля: один для передви- жения изображения в левую часть страницы, а другой — для передвижения изображения в правую часть. Поскольку эти стили существуют исключительно для размещения изображений в левой или правой части страницы, использо- вание этой информации в имени стиля вполне оправданно. Так, .floatLeft и .floatRight — разумные имена. Избегайте непонятных названий. Такие названия, как .s , .s1 и .s2 , могут сде- лать ваши файлы меньше, но при этом доставят много хлопот при обновлении сайта. В итоге вам придется поломать голову, чтобы вспомнить, для чего же все-таки были созданы эти загадочные стили. Будьте краткими, но ясными: sidebar , .copyright и .banner не потребуют много времени для набора, но их на- значение сразу очевидно. Используйте несколько классов, чтобы сэкономить время Часто два и более элемента на веб-странице определяют много подобных свойств форматирования. Вы, возможно, захотите использовать одни и те же стили границы для размещения нескольких изображений. Однако могут быть и некоторые различия в форматировании этих элементов. Возможно, вы захотите, чтобы некоторые изо- бражения передвинулись влево и имели правое поле, в то время как другие должны переместиться вправо и иметь левое поле. Самое очевидное решение — создать два класса стиля, чтобы каждый имел одни и те же параметры границы, но различные свойства float и margin . Затем вы при- меняете один класс для изображений, которые должны передвинуться влево, а дру- гой — для изображений, которые должны переместиться вправо. Но что, если вы должны обновить стиль границы для всех этих изображений? Вам понадобится отредактировать два стиля, и если вы забудете один, у всех изображений на одной стороне страницы будет неправильное форматирование! ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ Препроцессоры CSS Если вы хотите решать задачи быстро и эффективно, присмотритесь к препроцессорам CSS. Препроцессоры являются инструментами, получающими код и выра батывающими из него конечный продукт. Что касается CSS, препроцессор позволяет создавать CSS в некой сокращенной версии, а затем вырабатывать из него конечный CSSфайл, помещаемый на ваш вебсервер. Применение препроцессоров CSS имеет ряд преиму ществ. • CSS-переменные. Препроцессоры позво ляют определять переменные — своеобразные хранилища информации — и использовать их в ка честве значений в вашем коде CSS. Предположим, например, что у вас есть синий цвет, который вы со бираетесь применять по всему сайту. Обычно цвет добавляется в CSS в виде шестнадцатеричного чис ла или RGBзначения. Когда нужно изменить этот цвет, приходится искать все экземпляры шестнад цатеричного значения и вносить в них изменения. С помощью препроцессора можно определить этот цвет всего один раз, в начале таблицы стилей. Если нужно изменить цвет, достаточно изменить значе ние переменной, и цвет обновится по всей таблице стилей.
550 Часть 4. CSS для продвинутых • Упрощение использования свойств CSS3. Как уже ранее говорилось, при добавлении новых CSSсвойств зачастую приходится использо вать префиксы производителей. Это сопряжено с на писанием четырех и более строк кода для одного и того же свойства, например для linear-gradient. Большинство препроцессоров CSS могут создавать код за вас. Обычно вам остается только создать обыч ное CSSсвойство — background image : linear- gradient(red, blue ); , а препроцессор добавит весь дополнительный код для работы с различными браузерами • Объединение таблиц стилей и умень- шение количества файлов. Как уже го ворилось, зачастую удобнее разбить ваш CSSкод на несколько таблиц стилей. В этом случае код CSS хранится в отдельных, легко управляемых файлах взаимосвязанных стилей. Но с точки зрения произво дительности вебсервера лучше было бы отправить как можно меньше файлов. Препроцессор CSS по зволяет хранить ваш код CSS в разных файлах, а за тем объединить их в одну внешнюю таблицу стилей, которую смогут использовать ваши вебстраницы. Более того, вы можете выбросить все ненужное, CSS комментарии и другие символы, которые не нужны для работы CSSкода и неоправданно увеличивают размер ваших CSSфайлов. Двумя наиболее популярными препроцессорами CSS являются LESS ( http://lesscss.org) и SASS (http:// sass-lang.com ). Но в их использовании есть два недо статка. Вопервых, предполагается, что вы уже доста точно знаете CSS. Если вы не слишком хорошо разби раетесь в селекторах и свойствах CSS, изучение порой не совсем обычного синтаксиса LESS и SASS может вас только запутать. Вовторых, оба препроцессора требуют довольно не простой установки на компьютер. Они представляют собой небольшие компьютерные программы, запу скаемые при выполнении своих задач обработки в фо новом режиме. Однако эти ограничения можно обойти путем использования автономной программы вроде бесплатной Scout ( http://mhs.github.com/scout-app/ ) или коммерческого приложения Compass.app ( http:// compass.handlino.com ). Обе эти программы работают как на компьютерах с Windows, так и на Mac, и могут конвертировать файлы LESS и SASS в обычные преж ние внешние таблицы стилей. ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ Рассмотрим страницы, изображенные на рис. 17.2. Страница сверху выглядит так, как она первоначально отформатирована. Снизу к обеим фотографиям приме- нены одни и те же стили, соответственно, создается эффект границы. Кроме того, к левому изображению применен дополнительный класс стиля, заставляющий его передвинуться влево; у правого изображения также есть второй класс, из-за кото- рого оно передвинулось вправо. Существует прием, который работает во всех браузерах и преимуществами ко- торого пользуются на удивление немногие разработчики, — создание нескольких классов, применяемых к одному и тому же тегу. Это просто означает, что, когда вы применяете атрибут class для тега, вы добавляете два (или больше) названия клас- са:
. В этом примере тег
получает инструкции фор- матирования от стилей .note и .alert Скажем, вы хотите использовать один и тот же стиль границы для группы изо- бражений, но одну их часть желаете поместить слева, а другую — справа. Эту зада- чу можно решить таким образом. 1. Создайте класс стиля, который включает свойства форматирования, разделя- емые всеми изображениями. Этот стиль можно назвать .imgFrame , у него есть сплошная граница шириной 2 пиксела, задаваемая вокруг всех четырех сторон.
Глава 17. Совершенствуем навыки работы с CSS 551 Рис. 17.2. Две фотографии с одним стилем класса 2. Создайте два дополнительных класса стиля: один — для изображений, пере- Создайте два дополнительных класса стиля: один — для изображений, пере- двигаемых влево, а другой — для передвигаемых вправо, например .floatLeft и .floatRight 3. Примените оба класса к каждому тегу: или На данный момент классы применяются к каждому тегу, и браузер объединяет информацию о стиле для каждого класса, чтобы отформатировать тег. Теперь, если вы хотите изменить стиль границы, просто отредактируйте стиль .imgFrame . Это позволит обновить границы вокруг изображений, перемещенных влево и вправо. СОВЕТ Вы можете перечислить этим методом более двух классов; только не забывайте ставить пробел между их названиями. Эта методика полезна, когда вы должны наладить только несколько свойств одного элемента, оставив при этом остальные элементы, отформатированные
552 Часть 4. CSS для продвинутых подобным образом, неизменными. Вы можете разработать базовое форматирование боковой панели, которое передвинет ее вправо, добавит интересные фоновые изо- бражения и будет включать тщательно разработанное оформление. Вы можете ис- пользовать этот стиль повсюду на вашем сайте, но ширина боковой панели будет изменяться в различных случаях. Возможно, она равна 33 % на одних страницах и 25 % — на других. В таком случае создайте отдельный класс стиля (такой как .sidebar ) с основным форматированием для боковой панели и отдельные классы только для определения ширины боковой панели, например .w33per и .w 25per . Затем примените по два класса к каждой боковой панели:
Группируйте стили Добавление одного стиля за другим — распространенный способ создания таблицы стилей. Однако через какое-то время то, что было простой коллекцией из пяти стилей, расширилось до массивного CSS-файла с 500 стилями. В таком случае быстрый поиск нужного стиля — то же самое, что поиск иголки в стоге сена. Если вы организуете стили с самого начала, то в конечном счете намного облегчите себе жизнь. Нет никаких конкретных и быстрых правил насчет того, как группировать стили, но есть две общепринятые методики. Группируйте стили, которые применяются к связанным частям страницы. Груп- пируйте все правила, которые применяются к тексту, изображениям и ссылкам в баннере страницы, в одном месте, правила, которые относятся к главной на- вигации, — в другом, а стили для основного содержимого — в третьем. Группируйте стили со связанными задачами (имеющими друг к другу отноше- ние). Помещайте все стили для разметки в одну группу, для оформления — в дру- гую, для ссылок — в третью и т. д. Использование комментариев для разделения групп стилей. Назависимо от того, какой подход вы предпочтете, убедитесь, что используете комментарии CSS, чтобы разделить каждую группу стилей. Скажем, вы собрали все стили, которые управляют разметкой ваших страниц, в одно место в таблице стилей. Опишите эту коллекцию таким комментарием: /* *** Разметка *** */ или /* --------------------------- Разметка --------------------------- */ Укажите в начале /* , а в конце — */ ; тогда внутри вы можете использовать лю- бую вычурную комбинацию из звездочек, черточек или других символов, которые вам нравятся, чтобы сделать эти комментарии легко узнаваемыми. Если вы ищете интересную идею, посмотрите, как таблицы стилей комментируются на следу- ющих сайтах: www.wired.com , www.mezzoblue.com и http://keikibulls.com СОВЕТ Для ознакомления с методикой обозначения комментариев, облегчающей нахождение конкретного раздела редактируемой таблицы стилей, зайдите на сайт www.stopdesign.com/log/2005/05/03/css- tip-flags.html.
Глава 17. Совершенствуем навыки работы с CSS 553 Используйте несколько таблиц стилей Из гл. 16 вы узнали, что можно создавать различные таблицы стилей для разных типов отображения — одну для экрана, а другую для принтера. Кроме того, воз- можно, вы захотите иметь множество таблиц стилей для экрана, исключительно в организационных целях. Здесь используется базовая концепция из предыдущего раздела — группирование связанных стилей. Когда таблица стилей становится настолько большой, что трудно находить и ре- дактировать стили, то, возможно, пришло время создать отдельные таблицы сти- лей, каждая из которых имеет свои функции. Вы можете поместить стили для фор- матирования форм в одной таблице стилей, стили для разметки — в другой, стили, которые определяют цвета элементов, — в третьей, создать еще одну таблицу сти- лей для хранения ваших трюков в Internet Explorer и т. д. Конечно, количество отдельных файлов должно быть в пределах разумного, так как, скажем, 30 внешних CSS-файлов, через которые придется пройти, совсем не сэкономят время. Кроме того, чем больше внешних CSS-файлов, тем на большее количество запросов дол- жен отвечать ваш веб-сервер, что становится одной из причин снижения скорости работы веб-сайта. На первый взгляд может показаться, что получится больше кода в каждой веб- странице, так как будет намного больше внешних таблиц стилей, которые нужно присоединить или импортировать, — по одной строке кода для каждого файла. Но есть подход лучше: создайте отдельную внешнюю таблицу стилей, которая использует правило @import , чтобы включить множество таблиц стилей. Рису- нок 17.3 иллюстрирует этот подход. Рис. 17.3. HTML-страница может присоединить один CSS-файл (base.css в этом примере). HTML-код не должен изменяться, даже если вы хотите добавить или удалить дополнительные внешние таблицы стилей. Просто обновите файл base.css, добавляя или удаляя правило @import Рассмотрим, как реализовать этот подход. 1. Создайте внешние таблицы стилей для форматирования различных типов эле- Создайте внешние таблицы стилей для форматирования различных типов эле- ментов вашего сайта. Например, создайте файл color.css со стилями для управ- ления цветом сайта, файл forms.css , который управляет форматированием форм,
554 Часть 4. CSS для продвинутых файл layout.css для задания разметки и файл main.css , который охватывает все остальное (см. рис. 17.3, справа). ПРИМЕЧАНИЕ Это всего лишь рекомендации. Организуйте ваши стили и таблицы стилей так, как вам кажется наиболее логичным и как будет работать наилучшим образом для вас. Для получения дополнитель- ной информации можете прочитать статью о модульном CSS-дизайне на сайте www.contentwithstyle. co.uk/content/modular-css. 2. Создайте «пограничную» внешнюю таблицу стилей и импортируйте каждую таблицу стилей, которую вы создали в шаге 1. Вы можете назвать файл base.css , global.css , site.css или как-то вроде этого. Данный CSS-файл не будет содер- жать каких-либо предписаний. Вместо этого используйте правило @import , что- бы присоединить другие таблицы стилей: @import url(main.css); @import url(layout.css); @import url(color.css); @import url(forms.css); Это весь код, который должен быть в файле, хотя вы можете еще добавить не- которые комментарии с номером версии, названием сайта и т. д., чтобы помочь идентифицировать файл. 3. Наконец, присоедините таблицу стилей из шага 2 к HTML-страницам вашего сайта, используя тег или правило @import (о том, как использовать эти методы, читайте в разделе «Внешние таблицы стилей» гл. 2). Например:
Теперь, когда веб-страница загружается, браузер использует файл base.css , ко- торый, в свою очередь, говорит браузеру загрузить четыре остальные таблицы стилей. Вам может показаться, что здесь происходит очень много загрузок. Однако бра- узер лишь однажды загружает эти файлы и сохраняет их в своем кэше — ему не приходится снова получать их по Интернету (см. врезку «Обходной прием. Не по- падитесь с кэшированием» в разделе «Понимание таблиц стилей» гл. 2). Есть и другая польза от применения отдельной внешней таблицы стилей для загрузки нескольких других таблиц: если вы позже решите разделить стили на до- полнительные таблицы стилей, то вам не придется работать с HTML-кодом вашего сайта. Вместо этого просто добавьте еще одно правило @import к той «пограничной» таблице стилей (см. шаг 2 выше). Если вы решите вытащить все стили, связанные с типами устройств, из файла main.css и поместить их в собственный файл type.css , вам не нужно будет затрагивать веб-страницы сайта. Просто откройте таблицу сти- лей со всеми правилами @import в ней и добавьте еще одно: @import url(type.css) Эта возможность также позволяет вам обмениваться данными между различ- ными таблицами стилей для временных изменений дизайна. Скажем, вы решаете изменять цвет вашего сайта каждый день, месяц или сезон. Если вы уже поместили основные определяющие цвет стили в отдельный файл color.css , то можете создать другой файл (например, summer_fun.css ) с различным набором цветов. Затем изме-
Глава 17. Совершенствуем навыки работы с CSS 555 ните в «пограничном» файле правило @import для файла color.css , чтобы загружать новый файл цветовых стилей (например, @import url(summer_fun.css) ). ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ Головная боль с кэшем Кэш браузера, как правило, является помощником каж дого владельца сайта. Как мы уже обсуждали в этой книге, кэш гарантирует, что частым посетителям вашего сайта не придется загружать один и тот же файл снова и снова, что замедлило бы открытие страниц и повысило оплату за хостинг. Тем не менее кэш может стать голов ной болью, когда вам необходимо обновить внешний вид сайта. Например, если все его страницы ссылаются на внешнюю таблицу стиля под названием main.css , у посетителей этот файл будет кэширован. Но при об новлении файла и, соответственно, изменении внешнего вида сайта предыдущие посетители могут попрежнему иметь доступ к старой таблице стилей, сохраненной на их жестком диске, вместо нового файла main.css Со временем кэш посетителей все же очистится и они получат новые CSSфайлы. Однако у вас есть один простой способ победить кэш — обновить тег
на каждой HTMLстранице. Обычно тег
для внешней таблицы стилей выглядит следующим об разом:
Однако если добавить строку запроса после имени CSS файла (например, main.css?v=1 ), то браузер будет ви деть файл как main.css?v=1 , а не как main.css . Если вы измените число после v= при обновлении внешней таблицы стилей, браузеры воспримут это как появление нового файла и загрузят внешнюю таблицу стилей с веб сервера вместо использования кэшированной версии. Предположим, что, когда вы запускаете ваш сайт, файл main.css является первой версией стилей CSS сайта. Вы можете использовать этот тег
:
Затем, когда вы обновите файл main.css , можно из менить тег
на следующий:
Браузер посчитает таблицу стилей отличной от сохра ненной в кэше версии файла main.css и загрузит файл с вебсервера. На самом деле ?v=1 ничего не делает и не влияет на то, как работает вебсервер. Это просто способ заставить браузер перезагрузить файл. Недостатком этого метода является необходимость обновлять теги
для каждого HTMLфайла сайта. Если вы также работаете на PHP, то вам доступен более автоматизированный способ справиться с этой про блемой: http://ikeif.net/2009/03/27/stop-caching- files-php-function Устранение столкновений стилей в браузере Когда вы просматриваете в браузере веб-страницу, основанную не на CSS, у HTML- тегов уже есть некоторое минимальное форматирование: заголовки полужирные, тег
Скачать 20.28 Mb.