Обзоры

Что такое CSS (Каскадные таблицы стилей)

В предыдущей разделе вы узнали один маленький секрет языка 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 Ex­plorer 4.x. Эти браузеры ненадежны при применении более необычных средств технологии CSS. Однако навряд ли кто-либо еще употребляет данные браузеры.

Это интересно