В предыдущей разделе вы узнали один маленький секрет языка XHTML — в нем не так много средств форматирования. Если вы хотите, чтобы ваша веб-страница выглядела красиво, нужно дополнительно использовать таблицы стилей.
Таблица стилей — это документ, наполненный правилами форматирования. Браузеры читают эти правила и применяют их при отображении веб-страниц. Например, правило таблицы стилей может быть таким: «Выделить все заголовки на данном сайте полужирным начертанием, окрасить их в цвет фуксии и заключить каждый заголовок в рамку».
Существует несколько причин, почему удобнее помещать команды форматирования в таблицу стилей, а не вставлять их в веб-страницу. Наиболее очевидная причина — возможность повторного использования. Например, благодаря таблицам стилей можно создать единое правило для форматирования заголовков третьего уровня, и при этом каждый заголовок третьего уровня на каждой веб-странице вашего сайта будет отображаться в соответствии с заданным правилом.
Вторая причина заключается в том, что таблицы стилей помогают создавать аккуратные, удобочитаемые и легкоуправляемые XHTML-файлы. Благодаря тому, что все форматирование вашего сайта осуществляется при помощи таблиц стилей, нет необходимости в использовании команд форматирования в XHTML-документе. Все, что от него требуется, — организация ваших страниц в логические блоки. (Чтобы повторить, в чем заключается разница между формированием структуры и форматированием веб-страницы, обратитесь к соответствующему разделу в начале предыдущей главы.) И, наконец, таблицы стилей дают вам более широкие возможности форматирования, чем те, которые существуют в языке XHTML. С помощью таблиц стилей вы можете изменять цвета, границы, размеры полей, выравнивание и, до определенной степени, шрифты.
Вы будете встречаться с таблицами стилей на протяжении всей этой книги. В данной главе вы изучите основы таблиц стилей и узнаете, как можно их использовать для создания разнообразных визуальных эффектов.
Основы таблиц стилей
При создании таблиц стилей применяется стандарт, который носит официальное название CSS (Cascading Style Sheets — Каскадные таблицы стилей). CSS — это технология, которая назначает правила стиля. Эти правила изменяют внешний вид элементов веб-страницы подстраивая такие параметры, как цвет, шрифт, размер, границы и размещение.
Если на веб-странице применяется технология CSS, браузер читает как XHTML-файл, так и правила таблицы стилей. Затем эти правила используются браузером для форматирования страницы.
Благодаря этой системе создатели веб-сайтов получают сразу два преимущества — широкие возможности форматирования страниц и предотвращение ситуации, когда XHTML-документ настолько заполняется элементами форматирования, что становится трудно его распознать. В идеале XHTML-документ должен только формировать структуру веб-страницы (т. е. определять, что на странице является заголовком, что — абзацем, списком и т. д.), а таблица стилей — форматировать эту веб-страницу для придания ей особого внешнего вида.
Три типа стилей
Прежде чем вы узнаете, как писать правила технологии CSS, нужно вначале выяснить, куда вы будете помещать эти правила. В технологии CSS существует три способа применения таблиц стилей к вашей вебстранице.
Внешняя таблица стилей, которая хранится в отдельном файле. Это наиболее эффективный метод, так как в данном случае происходит полное отделение правил форматирования от XHTML-страниц. Кроме того, одно и то же правило легко можно применить ко многим страницам.
Внутренняя таблица стилей, которая внедряется в XHTML- документ (она вставляется прямо внутрь раздела <head>). В этом случае информация о стиле также отделяется от XHTML-документа, и при желании вы сможете скопировать данную таблицу стилей и вставить ее на другую страницу (хотя при этом сложно обеспечить синхронизацию всех копий при последующем внесении изменений). Внутренняя таблица стилей используется, если вы хотите передать кому-либо полную веб-страницу одним файлом — например, отправляете знакомому главную страницу сайта по электронной почте. Также, возможно, вы захотите использовать внутреннюю таблицу стилей, если знаете, что не будете применять ее правила на другой странице.
Встроенный стиль — способ вставки языка таблицы стилей непосредственно в открывающий тег элемента XHTML. На первый взгляд это кажется подозрительным — ведь, как вам уже известно, лучше не вставлять команды форматирования в саму веб-страницу, потому что, как правило, средства форматирования длинные и громоздкие. Это действительно так, но вы можете время от времени использовать метод встроенного стиля, если нужно отформатировать какой-либо один элемент и вы ограничены во времени. При этом результат будет не очень аккуратным и структурированным, но все же вы достигнете цели.
Благодаря данным возможностям у вас есть выбор либо полностью следовать идее технологии CSS (при использовании внешних таблиц стилей), либо время от времени идти на компромисс (в случае применения внутренних таблиц стилей или встроенных стилей). Так как язык таблиц стилей всегда одинаковый, то даже при использовании более легкого подхода, как в случае с внутренними таблицами стилей, вы всегда сможете перейти на внешние таблицы стилей посредством копирования Данных в другой файл, если решите воспользоваться более структурированным подходом.
Поддержка стандарта CSS браузерами
Прежде чем перейти к применению таблиц стилей, необходимо убедиться, что они поддерживаются всеми браузерами, которыми пользуются посетители вашего сайта. Это не так просто, как кажется. Первая проблема состоит в том, что, на самом деле, существует несколько версий стандарта CSS: оригинальная версия CSS1, немного улучшенная — CSS2, исправленная — CSS2.1 и версия, разрабатываемая в настоящее время, — CSS3. Но действительно серьезная проблема заключается в том, что не все браузеры поддерживают стандарт CSS как таковой, независимо от его версии. А если поддерживают, то не всегда так, как требуется. Отклонения варьируются от незначительных до тревожных. В данной книге основное внимание уделяется свойствам версий CSS1 и CSS2, которые поддерживаются всеми наиболее известными браузерами (см. ниже). Мы абсолютно не будем касаться версии CSS3, которая все еще слишком новая, чтобы быть полезной. Несмотря на вышесказанное, не забывайте тестировать ваши страницы в различных браузерах, чтобы убедиться, что они отображаются надлежащим образом.
Как правило, можно рассчитывать на всестороннюю поддержку стандарта версии CSS1 в таких браузерах, как Netscape Navigator 6, Internet Explorer 5, Opera 3.6 и любые версии Firefox, Safari и Google Chrome. Последние версии этих браузеров поддерживают стандарт CSS более последовательно и комплексно, в том числе добавленные средства из CSS2 и даже CSS3.
шаблоны joomla 3
Люди, которые уже много лет пользуются Всемирной паутиной, могут помнить ранние поколения браузеров — Netscape 4.x и Internet Explorer 4.x. Эти браузеры ненадежны при применении более необычных средств технологии CSS. Однако навряд ли кто-либо еще употребляет данные браузеры.