Взаимосвязь между составляющими

В тексте издания ярче других проявляется информационная составляющая. Книга является учебником, и это предоставляет читателю большой объём информации. Для учебного издания также очень важна психологическая составляющая. В тексте она выражена ярко благодаря диалогичности. Логическая составляющая также достаточно хорошо выражена в тексте книги. Эстетическая есть, хотя и имеет некоторые недостатки. В целом, на мой взгляд, в издании доминируют информационная и психологическая составляющие.

Рекомендации по усовершенствованию структуры текста

• разбить книгу на две части: уроки 1–6 включить в часть «Язык HTML», уроки 7–13 — в часть «Язык CSS»;

• пронумеровать пункты и подпункты в уроках, так как у читателя могут возникнуть трудности с нагромождением непронумерованных заголовков и подзаголовков в тексте.

Что касается самого текста урока, то его лучше сначала отдать на проверку профессиональному программисту, а лишь потом редактору. Последний здесь нужен для исправления логических, стилистических и других языковых неточностей, потому что текст подобного рода должен, в первую очередь, просмотреть человек, имеющий опыт в данной области знаний. Я лишь взяла на себя смелость исправить некоторые пунктуационные ошибки и изменить структуру урока.

Отредактированный вариант урока «Использование языка css»

7.1. Использование языка CSS

Таблицы каскадных стилей приобрели популярность в конце 1996 года. Несмотря на относительно долгое существование этой технологии, её практическое применение для Web-дизайна ограничивалось управлением шрифтами и цветом, по крайней мере, до недавнего времени. Данное ограничение возникло из-за отсутствия совместимой поддержки таблиц стилей браузерами. Поскольку не все браузеры одинаково обрабатывали инструкции языка CSS (если вообще обрабатывали), дизайнеры не могли в полной мере воспользоваться реальными преимуществами таблиц стилей. Вместо этого ответственность за отображение информации возлагалась на язык HTML.

Теперь, когда поддержка языка CSS реализована гораздо лучше, и, благодаря этому, можно воспользоваться множеством ценных возможностей языка, Web-дизайнеры переходят от использования языка HTML как средства стилизации и создания макетов страниц к настоящему дизайну с применением языка CSS.

Почему это так важно? Причин тому множество:

• раздельное хранение представления и документа позволяет стилизовать этот документ для различных устройств, включая монитор, принтер, проектор и даже портативные устройства;

• раздельное хранение представления и документа означает уменьшение размера документа, что, в свою очередь, ускоряет загрузку и отображение страницы, доставляя удовольствие посетителям;

• язык CSS позволяет управлять как одним документом, так и миллионами документов. Для внесения изменения потребуется модифицировать необходимый стиль в одном CSS-файле, и это изменение автоматически отразится на всех связанных документах. В языке HTML это сделать невозможно;

• CSS-документы кэшируются. Это означает, что они загружаются в память браузера только один раз. При перемещении по сайту браузеру никогда не приходится заново интерпретировать стили. В результате мы получаем более плавные переходы от страницы к странице и более быструю загрузку страниц, что всегда является конечной целью;

• отделив представление от структуры и содержимого, легко добиться доступности документа. Документы, в которых не используются сложные таблицы и большое количество элементов языка HTML, отвечающих за представление, по сути, являются более доступными, чем те документы, у которых перечисленные свойства присутствуют.

Очевидно, что язык CSS предоставляет множество возможностей. В этой главе мы узнаем, как эффективно и гибко использовать язык CSS для дизайнов.

7.2. Упрошённая теория языка CSS

Перед началом использования языка CSS необходимо узнать некоторые важные моменты, касающиеся самого языка и его эффективного применения. Я постараюсь сделать это быстро и безболезненно, поскольку знаю, что вам не терпится испытать его в действии.

7.2.1. Правила языка CSS

Правила языка CSS состоят из селектора и, по крайней мере, одного объявления. Селектор — это код элемента языка HTML, к которому будет применено правило стиля. В этой книге мы сконцентрируемся на наиболее распространённых селекторах, но, став более квалифицированным специалистом в области применения языка CSS, вы сможете использовать более дюжины типов селекторов. Объявление состоит, по крайней мере, из одного CSS-свойства и соответствующего значения. При помощи CSS-свойств определяются стили:

hi {color: red;}

Селектор hi отвечает за заголовки hi языка HTML, а объявление состоит из свойства color и значения red. Проще говоря, это правило изменяет цвет текста элементов hi на красный цвет. Обратите внимание, что синтаксис правила стиля отличается от синтаксиса языка HTML. Объявления заключаются в фигурные скобки, за каждым названием свойства следует двоеточие, а после каждого свойства со значением ставится точка с запятой. В правиле можно использовать любое количество свойств.

7.2.2. Применение языка CSS

Существует шесть типов таблиц стилей:

• стиль браузера — это стандартная таблица стилей, используемая браузером. Если никакие правила стиля не объявлены, применяются эти стандартные стили;

• стиль пользователя — пользователь может написать свою таблицу стилей и переопределить любые стили, созданные вами, изменив настройки браузера. Такой подход используется редко, но может оказаться полезным для людей с ограниченными возможностями, например с плохим зрением. В данном случае пользователь создаст стили с высококонтрастными шрифтами больших размеров, которые переопределят ваши стили;

• встроенный стиль — стиль, который определяется непосредственно в элементе и применяется с использованием атрибута style. Такой подход полезен для стилей, единовременно применяемых к одному элементу, однако он не считается идеальным;

• внедрённый стиль — этот стиль управляет представлением одного документа и размещается внутри элемента style HTML-документа;

• связанный стиль — это таблица стилей, которая связана с HTML-документом при помощи элемента link, размещённого в разделе документа head. Любой документ, связанный с данным типом таблицы стилей, получает все стили, определённые в ней, в чём и заключается преимущество управления языка CSS;

• импортированный стиль — этот тип похож на связанные стили, однако позволяет импортировать стили в связанную таблицу стилей или непосредственно в документ. Он полезен для реализации обходных путей и для управления множеством документов.

Мы познакомимся с примерами использования перечисленных таблиц стилей по мере изучения материала главы.

7.2.2.1. Каскад

Люди часто интересуются, почему стили называются каскадными. Каскад — это иерархия применения — красивое название для системы применения правил. Если внимательно посмотреть на пять перечисленных типов таблиц стилей, станут очевидными различные способы применения стиля к одному и тому же документу.

Что же получится в результате, если у нас будет встроенный стиль, внедрённая таблица стилей и связанная таблица стилей? Каскад определяет способ применения правил. В случае с типами таблиц стилей, пользовательский стиль переопределяет все остальные стили; встроенный стиль превосходит внедрённый, связанный и импортированный стили; внедрённый стиль имеет преимущественное значение перед встроенным стилем; связанные и импортированные стили рассматриваются как равные по значимости, и применяются везде, где не были применены другие типы таблиц стилей. Стиль браузера используется только в том случае, когда для данного элемента не было предоставлено ни одного стиля.

Каскад также относится к порядку применения нескольких таблиц стилей. Если существуют три связанные таблицы стилей, применена будет та из них, которая интерпретируется браузером при наличии конфликтов между ними.

7.2.2.2. Наследование

Наследование означает, что стили наследуются от родительских элементов.

Оба элемента hi и р считаются потомками элемента body. Стили, заданные для элемента body, будут унаследованы потомками, если не будет применено другое правило, переопределяющее унаследованный стиль. В языке CSS наследуются почти все свойства, кроме свойств, относящихся к границам и к отступам.

7.2.2.3. Специфичность

Наконец, если между таблицами стилей существуют конфликты, которые невозможно решить при помощи каскада, у языка CSS есть алгоритм, разрешающий такие конфликты. Алгоритм основан на специфичности правила. Алгоритм немного сложный для обсуждения в этой книге, но о нём следует упомянуть.

Понятно, что две страницы текста не могут полностью раскрыть ни одну из этих тем, поэтому, если вы хотите узнать больше, обязательно обратитесь к части «Дополнительные источники».

7.3. Практическое применение языка CSS

7.3.1. Добавление встроенного стиля

Ладно, довольно теории — приступаем к работе! В этой части мы узнаем, как применять встроенный стиль. Встроенные стили используются редко, поскольку они задают стили только для одного конкретного элемента. Такой подход препятствует использованию преимуществ управления языка CSS.

Более того, встроенный стиль можно сравнить с элементами языка HTML, отвечающими за представление, поскольку стиль записывается непосредственно в документе, а не отделяется от него, что лишает нас возможности использовать важнейшие преимущества языка CSS. Я использую встроенные стили в основном для ситуаций, когда необходимо быстро исправить проблему для одного требуемого элемента, или в редких случаях, когда на всём сайте существует только этот стиль для одного уникального элемента.

Рассмотрим следующий элемент:

<hl>welcome!</hl>

Если бы этот заголовок был частью готового HTML-документа и мы просмотрели его в браузере, результаты были бы такими же, как на рисунке 7.1.

Допустим, что нам не нравится стандартный цвет и размер шрифта. Можно добавить CSS-правила непосредственно к этому элементу, воспользовавшись атрибутом style:

<hl style="color: gray; font-size: 24px;">Welcome!</hl>

Теперь у нас будет заголовок серого цвета с размером шрифта, равным 24 пикселам, как показано на рисунке 7.2.

7.3.2. Использование внедрённого стиля

Внедрённый стиль управляет только тем документом, в который он был внедрён. Как и встроенные стили, этот подход не позволяет реализовать возможность применения стилей сразу ко всему сайту. Однако существуют ситуации, в которых удобно использовать именно внедрённый стиль. Первая ситуация, когда данный документ является единственным документом на сайте, использующим специфические стили. Другая ситуация относится к процессу разработки. Мне нравится использовать внедрённый стиль при работе над дизайном, поскольку в этом случае всё находится в одном документе. Мне не приходится переключаться между приложениями или окнами, чтобы выполнить задачу. Так как правила стилей останутся прежними, я могу просто вырезать готовые стили из внедрённой таблицы и связать их с документом, с чем мы сейчас и познакомимся.

Внедрённый стиль добавляется в раздел документа head с использованием элемента style и обязательного атрибута type, как показано в примере 7.1.

На рисунке 7.3 показаны результаты.

7.3.3. Создание связанной таблицы стилей

Чтобы воспользоваться преимуществами языка CSS, большую часть времени мы будем использовать связанные таблицы стилей. Связанная таблица стилей — это отдельный файл с расширением .CSS, в котором размещаются все CSS-правила (но без тегов языка HTML). Любой HTML-файл, к которому нужно применить стили, описанные в этой таблице, можно связать с ней, используя элемент link в разделе документа head.

В примере 7.2 показана таблица стилей, готовая для связывания. Я указала ряд правил стилей и сохранила файл под именем styles.ess в моей локальной папке.

В примере 7.3 приведён готовый HTML-документ, связанный с необходимой таблицей стилей, которая размещается в том же каталоге, что и документ.

Результаты приведены на рисунке 7.4.

Конечно, с данной таблицей стилей можно связать любое количество документов, используя элемент link.

Для элемента link используется несколько атрибутов, перечисленных ниже:

• rel — атрибут связи, который описывает связь ссылки. В данном случае связь осуществляется с основной таблицей стилей, поэтому используется значение stylesheet;

• type — как и для элемента style внедрённого стиля, необходимо определить тип языка и используемый формат — в данном случае text/css;

• href — знакомый атрибут ссылки. В данном случае было указано только имя файла, поскольку оба документа находятся в одном каталоге. Таблицы стилей можно размещать в другом каталоге; просто проверяйте корректность значения атрибута href. Можно также использовать абсолютное связывание для непосредственной связи с таблицей стилей;

• media — атрибут media позволяет определять различные стили для различных устройств вывода. Если создать отдельную таблицу стилей для данного документа, предназначенную для вывода информации на портативных устройствах, в элементе link использовалась бы следующая информация: media="handheld". Подобным образом атрибут media= "print" предполагает использование таблицы стилей только для печати. В данном случае атрибуту media присвоено значение screen. По умолчанию, значением атрибута media является all, поэтому, если необходимо применить одни и те же стили ко всем устройствам вывода, используйте это значение или просто не указывайте атрибут media.

Как уже отмечалось, с документом можно связать любое количество таблиц стилей.

7.3.4. Импортирование таблиц стилей

Импортированные таблицы стилей очень похожи на связанные таблицы стилей, так как для импортируемых стилей создаётся отдельный документ. После этого эти таблицы можно либо импортировать в основную таблицу стилей, либо импортировать непосредственно в документ.

7.3.4.1. Непосредственное импортирование в документ

При импортировании в документ на самом деле используются два типа таблиц стилей: отдельная импортируемая таблица стилей (я назвала файл именем import.css) и встроенная таблица стилей в документе. Выполнить импортирование при помощи элемента link невозможно; поэтому вместо элемента link используется директива ©import языка CSS, как показано в примере 7.4.

Таблица стилей import.css будет импортирована непосредственно в документ. Представьте себе, что элемент style содержит все правила стилей из файла import.css — это как раз то, что происходит. Поэтому теперь стиль фактически внедрён в этот файл.

Этот способ можно использовать для любого количества документов, но обычно этот метод используется в основном для обходных решений. Ряд браузеров, в частности, браузер Netscape версии 4, не поддерживают директиву ©import, но при этом они поддерживают элемент link. Поскольку в браузере Netscape 4.x реализована ограниченная поддержка языка CSS, применять стили необходимо с особой осторожностью. Выделение стилей, не поддерживаемых браузером, в связанные таблицы стилей, а поддерживаемых — в импортированные таблицы стилей, позволит пользователям браузера Netscape увидеть некоторые стили, но не все. Данный метод очень эффективен для обходного решения, когда необходимо поддерживать браузеры Netscape версии 4.

Другое обходное решение с использованием директивы ©import заключается в размещении всех стилей в импортированной таблице. Любой браузер, не поддерживающий директиву ©import, просто не сможет прочитать стили, и браузер отобразит документ без стилей.

Квантовый скачок: кратковременное отображение нестилизованного содержимого (Flash of Unstyled Content — FUOC)

Если используется метод с директивой ©import, а раздел документа head не содержит элементов link или script, браузер Internet Explorer будет часто сначала отображать нестилизованное содержимое, а затем перерисовывать страницу уже с применением стиля. Это раздражающая ошибка, но её легко избежать, добавив элементы link или script в раздел документа head. Дополнительную информацию по проблеме FUOC можно получить по адресу http://www.bluerobot.com/web/css/fouc.asp.

В большинстве случаев вы не будете использовать директиву ©import во внедрённой таблице, пока для этого не появится особая причина.

7.3.4.2. Импортирование стиля в связанную таблицу стилей

Другое применение директивы ©import и истинная причина, по которой эта директива существует, заключаются в возможности разбивать стили на модули и в их последующем импортировании в основную таблицу стилей. Рассмотрим пример на рисунке 7.5.

Представьте, что каждый модульный файл (modl.css, mod2.css и mod3.css) содержит специфические стили для какой-либо возможности или функции сайта. Например, могут существовать стили для управления рекламой, стили для таблиц и стили для форм. Все эти стили можно оформить в виде отдельных модульных файлов, а затем импортировать в файл styles.сss, который связан со страницей index.html. Основная причина использования данного метода заключается в том, что изменения в модули можно вносить независимо от других модулей, а также можно легко избавляться от стилей, когда они больше не нужны. Этот метод наиболее эффективен для очень больших сайтов с множеством стилей.

Квантовый скачок: обходные пути в языке CSS

Хотя язык CSS теперь используется повсеместно, иногда приходится применять обходные пути для обеспечения кросс-браузерной совместимости. Для обходных путей можно использовать описанный метод модулярного импорта. В этом случае, как только обходной путь становится ненужным, можно просто удалить импортируемый файл и соответствующую директиву ©import, полностью избавившись от обходного пути и очистив таблицу стилей. Более подробную информацию по обходным путям в языке CSS можно прочитать в моей статье «Strategies for Long-Term CSS Hack Management» на сайте InformIT пo адресу http://www.informit.com/articles/article.asp?p=170511.

7.3.5. Комментирование и форматирование кода на языке CSS

Возможность добавлять комментарии в HTML-файлы для описания разделов, сокрытия разметки и содержимого от браузера или добавления указаний для коллег, работающих над документом, существует и в языке CSS. И точно так же, как код на языке HTML можно записывать с отступами или применять другое индивидуальное форматирование, это можно делать и в коде на языке CSS.

7.3.5.1. Комментирование кода на языке CSS

Комментарии языка CSS отличаются от комментариев языка HTML. Комментарии языка CSS начинаются с прямого слэша и звёздочки, а закрываются звездочкой, за которой следует прямой слэш. Любое содержимое, расположенное в этой области, не интерпретируется браузером, как показано в примере 7.5.

Всё, что выделено наклонным шрифтом, браузером не интерпретируется, а стили, находящиеся за пределами комментариев, интерпретируются. Комментирование может помочь разбить таблицы стилей на логические группы, чтобы ускорить поиск необходимых стилей. Кроме того, можно временно скрыть стили, которые в данный момент не нужны, а также оставить пояснения для других людей, работающих над текущей таблицей стилей.

Иногда код языка CSS, используемый для определения внедрённой таблицы, заключается в комментарии языка HTML, как показано в примере 7.6.

В данном случае комментарии языка HTML используются для сокрытия CSS-кода от старых браузеров, не поддерживающих язык CSS. Многие из этих браузеров попытаются отобразить CSS-правила в своём окне. Подобное использование комментариев языка CSS широко распространено в наши дни, хотя для современных браузеров этот метод является ненужным.

7.3.5.2. Форматирование кода на языке CSS

Возможно, вы обратили внимание, что в этой главе были использованы два подхода по форматированию кода (с моей стороны это подло, не так ли?). В первом подходе за селектором на одной строке размещается объявление:

body {background-color: #999; color: black;}

Во втором подходе правило разбивается на строки:

body {

background-color: #999;

color: black;

}

Оба подхода абсолютно корректны; выбор зависит от индивидуальных предпочтений. Многие CSS-дизайнеры, считающие каждый бит и байт документа, предпочитают первый подход. Другие приводят аргументы, что разбиение правил на строки облегчает поиск необходимых стилей. В любом случае, поскольку требуемый синтаксис не нарушен, используемый вид форматирования таблицы стилей является персональным выбором.

7.3.6. Настало время использовать воображение!

Если после знакомства с материалом данной главы вы считаете, что работать с разметкой и языком CSS скучно, ваше разочарование вполне обосновано. Крайне необходимо уделять внимание сложным моментам, и я уверяю вас, что вы уже прошли это, уловив смысл сложных понятий.

Но, несомненно, вы хотите применить приобретённые знания и получить представление, как использовать язык CSS для улучшения внешнего вида объектов. Как никак, это то, что я обещала, не так ли?

К счастью, следующая глава позволит немного позабавиться: вы будете использовать своё воображение.

Мы будем использовать изображения и цвет, чтобы нарядить документы, а также исследовать возможности языка CSS для работы с изображениями и цветом в дизайнах.

18