Самоучитель по креативному веб-дизайну. Книга 1, стр.146

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

Тем не менее, с расширением содержимого Web-страниц и включением в них многоцветного текста различного типа и размера, графических изображений,

17 6 Глава 4. Каскадные списки стилей





картинок и анимации, дизайнеры все менее и менее желали, чтобы Web-браузе — ры ограничивали внешний вид Web-страниц. Перед разработкой каскадных спис — ков стилей для обеспечения правильного расположения элементов на странице дизайнерам приходилось использовать HTML-таблицы и вставлять прозрачные (разделительные) изображения в формате GIF для создания необходимых полей

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

и фоном.

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

Самоучитель по креативному веб-дизайну. Книга 1, стр.147

средств обеспечения ее внешнего вида позволяет упростить Web-страницы и об — легчить их сопровождение и обновление. Представьте себе, например, что необ —

ходимо изменить тип шрифта, используемого на многих страницах Web-сайта. Без применения механизма каскадных списков стилей пришлось бы изменять (или добавлять) один или несколько дескрипторов на каждую страницу. Поместив указание о выборе типа шрифта в каскадный список стилей, на кото — рый ссылаются все странице сайта, для изменения шрифта на всех страницах до- статочно будет изменить одно правило списка стилей.



Создание списка стилей

Для создания списка стилей напишите одно или несколько правил между на —

чальным и конечным дескрипторами ( ) в разделе заголовка Web-страницы (в разделе ). (В этой главе будет рассказано, каким образом можно создавать каскадные списки стилей в форме внешних документов.) От — кройте свой любимый текстовый редактор (например, Блокнот) и введите следу — ющий HTML-код:



Глава 4. Каскадные списки стилей 17 7





В приведенном примере код между начальным и конечным дескрипторами

стиля ( ) описывает каскадный список стилей. Пока что давайте

не будем останавливаться на отдельных элементах списка стилей (называемых правилами) — их синтаксис будет рассмотрен чуть ниже. Сохраните набранный

код Web-страницы в PJTML-файле (например, в файле с именем css_Testi. htm),

а затем откройте его в Web-браузере. На экране появится страница, показанная на рис. 4.3.







Терминология каскадных списков стилей

Список стилей содержит одно или несколько правил. Правило (rule) каскад — ного списка стилей представляет собой инструкцию для Web-браузера по форма — тированию или позиционированию HTML-элемента определенного типа. Спи —

Самоучитель по креативному веб-дизайну. Книга 1, стр.148

сок стилей в предыдущем примере содержит два правила. Первое правило указывает Web-браузеру, что текст, заключенный между начальным и конечным

дескрипторами заголовка уровня 1 () , должен выводится на экран шрифтом Verdana синего цвета и размера 40 пикселей:



hi {colorrblue; font-size:40px; font-family:verdana}



Первое правило списка стилей заставляет Web-браузер для первой строки тек — ста, заключенного между начальным и конечным дескрипторами абзаца (

), ввести абзацный отступ два сантиметра и вывести его на экран шрифтом

Helvetica белого цвета на зеленом фоне:



р {color:white; background:green; font-family:Helvetica; text-indent:2cm}



Следующее простое правило списка стилей содержит «селектор» (hi), который указывает, к какому HTML-элементу должно применятся данное правило, выво- дящее элемент на экран синим цветом:



hi {color:blue}



Оператор каскадного списка стилей всегда имеет вид селектор {правило}. В фигурных скобках может размещаться одно или несколько правил, при этом пра- вила разделяются с помощью точки с запятой. Приведенное выше правило ука — зывает Web-браузеру выводить текст, который в HTML-коде находится между на —

чальным и конечным дескрипторами заголовка уровня 1 () , синим

цветом. Селектор (в приведенном примере hi) представляет собой HTML-деск — риптор, к которому Web-браузер должен примерять правило списка стилей;

объявление (color:blue) — это инструкция позиционирования или форматирова —

17 8 Глава 4. Каскадные списки стилей





ния, которую Web-браузер должен применить. Объявление, как и правило, состо — ит из двух частей: свойства (например, color) и значения (blue).

Как видно из двух правил, содержащихся в приведенном выше примере, объявления с помощью скобок за селектором можно объединять в группу — пра —

вило каскадного списка стилей. При этом отдельные объявления разделяются точкой с запятой. Так, например, на рис. 4.4 рассмотрены отдельные составляю — щие правила каскадного списка стилей, используемого для вывода на экран стра — ницы, показанной на рис. 4.3.







В качестве селектора можно использовать любой HTML-дескриптор, а одно правило может содержать несколько селекторов. Например, чтобы Web-браузер применял одно и то же правило к заголовкам уровня 2, тексту абзаца и неупоря — доченного списка необходимо написать следующее правило:

Самоучитель по креативному веб-дизайну. Книга 1, стр.149



h2, p, ul {color:green; font-family:arial}



Это правило указывает Web-браузеру выводить на экран заголовки уровня 2,

текст абзаца и неупорядоченного списка шрифтом Arial зеленого цвета. Обратите внимание, что в качестве селектора могут использоваться совершенно любые HTML-дескрипторы. Таким образом, правила каскадных списков стилей могут применяться к изображениям (селектор img) и таблицам (селектор table).

Например, запустите свой любимый текстовый редактор и наберите следую —

щий HTML-код:





Глава 4. Каскадные списки стилей 179





Как уже известно из вводной части этой главы, код между начальным и ко —

нечным дескрипторами styiex/styie > описывает правила каскадного списка стилей. Селектор tabl e указывает браузеру применять правило списка стилей к содержащимся на странице таблицам. Поэтому в приведенном примере будет со- здана таблица с зеленым фоном и шрифтом белого цвета размером 20 пикселей. Более того, Web-браузер поместит таблицу на расстоянии 150 пикселей правее левой границы и 200 пикселей ниже верхней границы Web-страницы. Сохраните

набранный код в HTML-файле (например, css Test2.htm) и откройте HTML — документ в Web-браузере. На экран будет выведена страница, похожая на пока — занную на рис. 4.5.





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

При добавлении текстовых элементов на Web-страницу часто один элемент вставляется в другой. Например, при выделении текста полужирным шрифтом,

как в случае с текстом «полужирный текст» в приведенном ниже примере, фак- тически элемент полужирного шрифта вставляется в элемент абзаца:



Вы вставляете один элемент в другой всегда, когда помещаете

текст, находящийся в пределах одного набора контейнерных дескрипторов, в другой набор начального и конечного

дескрипторов. Например, следующий далее

полужирный текст представляет собой полужирный

элемент, вставленный в элемент параграфа.

При форматировании Web-браузером вставленного элемента сначала он при — меняет инструкции форматирования, установленные для внешнего элемента, а затем для внутреннего элемента (если соответствующие правила определены).

Самоучитель по креативному веб-дизайну. Книга 1, стр.150

18 0 Глава 4. Каскадные списки стилей





В терминологии. каскадных списков стилей элемент, содержащийся в другом

элементе, называется дочерним {child), а внешний элемент — родительским

(parent). Таким образом, в предыдущем примере текст, окружающий элемент по —

лужирного текста (полужирный текст), является родительским, а сам эле —

мент «полужирный текст» — дочерним. При включении одного типа элемента страницы в другой тип Web-браузер применяет правила каскадного списка роди- тельского (т. е. внешнего) элемента стилей и к дочернему (т. е. внутреннему) эле-

менту.

Предположим, например, что имеется каскадный список стилей со следую — щими правилами:



р {color:blue}

b {color:red}

При наличии на Web-странице следующего HTML-кода Web-браузер выведет

На ЭКран текст «Весь текст» СИНИМ цветом И текст «полужирного начертания

будет красным — включая и полужирный курсив» — красным цветом:



Весь текст полужирного начертания будет красным — включая и

полужирный курсив.



Элемент полужирного текста (т. е. текст, заключенный между начальным и ко — нечным дескрипторами полужирного текста) является дочерним элементом тек — ста абзаца. В свою очередь, элемент курсивного текста — это дочерний элемент элемента полужирного текста, поскольку начальный и конечный дескрипторы курсивного текста находятся между начальным и конечным дескрипторами полу —

жирного текста. Так как в приведенном примере список стилей не содержит пра — вила для элемента курсивного текста, Web-браузер будет применять к нему как к дочернему элементу правило его родительного элемента, т. е. правило для селек —

Самоучитель по креативному веб-дизайну. Книга 1, стр.151

тора ь. Таким образом, курсивный текст будет выводиться на экран шрифтом красного цвета.

Если бы каскадный список стилей в приведенном примере содержал правило только для элемента абзаца (р), весь текст выводился бы шрифтом синего цвета. Во-первых, отношение родительский элемент/дочерний элемент между элемен — том абзаца и элементом полужирного текста диктовал бы, чтобы элемент полу- жирного текста (дочерний элемент) наследовал правило элемента абзаца (роди —

тельного элемента) — «выводить текст шрифтом синего цвета». Затем отношение родительский элемент/дочерний элемент между элементом полужирного текста (родительский элемент) и элементом курсивного текста (дочерний элемент) при — вело бы к тому, что элемент курсивного текста наследовал бы правило своего ро — дительного элемента — элемента полужирного текста.



Добавление на Web-страницу каскадного списка стилей

Чтобы Web-браузер смог применить правила каскадного списка стилей для форматирования и позиционирования элементов на Web-странице, правила списка стилей должны быть включены в HTML-код страницы. Для вставки сти — лей каскадного списка стилей на Web-страницу можно пользоваться четырьмя методами:

Самоучитель по креативному веб-дизайну. Книга 1, стр.152

Глава 4. Каскадные списки стилей 18 1





• Внедрить список стилей на страницу.

• Связать страницу с внешним списком стилей.

• Импортировать список стилей.

• Включить стили непосредственно в HTML-дескрипторы.



При внедрении списка стилей на Web-страницу браузер будет применять оп — ределенные в списке правила только к элементам данной страницы. Поэтому, если правила списка стилей уникальны для данной конкретной страницы, спи —

сок можно внедрить в раздел заголовка Web-страницы. Если же правила одного

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

с расширением. ess) и связывать или импортировать внешний список стилей, как будет показано в последующих разделах этой главы.



Внедрение каскадного списка стилей

При внедрении каскадного списка стилей его правила вставляются между на —

чальным и конечным дескрипторами стиля ( ) в разделе заго — ловка Web-страницы:





Атрибут type дескриптора указывает Web-браузеру тип приведенного

списка стилей.

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

стиля, если значение атрибута type установлено равным «text/ess» . К сожале — нию, некоторые устаревшие браузеры не распознают дескрипторы стиля. Несмотря

на то что такие браузеры будут игнорировать HTML-дескрипторы, которых они не понимают, они будут выводить содержимое списков стилей на страницу в виде тек —

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

димо заключить правила списков стилей в блок HTML-комментариев (). Web-браузеры, поддерживающие списки стилей, будут игнорировать дескрипторы комментариев и применять содержащиеся в списках правила.

Связывание с внешним списком стилей

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

18 2 Глава 4. Каскадные списки стилей





шним списком стилей внешний вид всех страниц сайта можно изменить путем

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

на экран страниц при загрузке одного и того же файла каскадного списка стилей.

Как предполагает само имя метода, для связывания HTML-документа с вне —

шним списком стилей используется дескриптор . Вместо ввода правил списка стилей, в заголовок каждой Web-страницы вводится ссылка на файл спис —

ка стилей. После этого при изменении в файле списка стилей такого свойства, как, например, типа шрифта, его размера или цвета, все изменения будут сразу же отражаться на всех Web-страницах.

Для связывания Web-страницы с внешним каскадным списком стилей необхо —

димо поместить в заголовок страницы дескриптор следующего вида:



Обратите внимание, что дескриптор не нужно помещать между на-

чальным и конечным дескрипторами () . В приведенном приме —

ре дескриптор указывает Web-браузеру на необходимость использования

правил каскадного списка стилей, которые содержатся в файле styles. ess. Ат — рибут type говорит о том, что в тестовом файле содержатся данные списка сти — лей, а атрибут href указывает имя файла и, при необходимости, путь к файлу,

Самоучитель по креативному веб-дизайну. Книга 1, стр.153

содержащему объявления каскадного списка стилей. Если Web-браузер не сможет найти файл внешнего списка стилей (указанный в атрибуте href дескриптора

), для вывода элементов страницы на экран будет использоваться правила, установленные в Web-браузере по умолчанию.

Помимо атрибута type, который может использоваться для предотвращения загрузки Web-браузером типов каскадных списков стилей, которые он не поддер — живает, можно указать атрибут media, задающий среду, к которой применяются содержащиеся в файле правила. Считывая значение атрибута media, Web-браузер может выборочно загружать только те файлы каскадных списков стилей, которые применимы к данной конкретной среде работы браузера. Например, при зада-

нии следующего дескриптора Web-браузер может не загружать файлы

списков стилей, применимых для «tv» (т. е. телевидения) при выводе на экран обычных HTML-документов:



type=»text/css media=»tv»>



Допустимые значения атрибута media перечислены ниже:



al l Для всех устройств.

aural Для синтезаторов речи.

braill e Для вывода на тактильных устройствах. embossed Для принтеров брайлевской печати.

handheld Для таких малых устройств, как, например, PDA (которые, как правило, имеют монохромные дисплеи, поддерживают растровые изображения и имеют достаточно ограниченную пропускную способность).

Глава 4. Каскадные списки стилей 18 3





prin t Для вывода на принтеры. projection Для вывода на проекторы.

scree n Для вывода на компьютерный экран без разбивки на страницы

(по умолчанию).

tt y Для телетайпных устройств (использующих шрифт с фиксирован — ным углом наклона).

tv Для телевизионных экранов.



Во внешнем файле списка стилей (например, style. ess ) правила должны определяться следующим образом:



hi {colorrblue; font-size:40px; font-familyiverdana}

p {color:white; background:green; font-family:helvetica;

text-indent:lem}

body {background:#ADD8E6; color:maroon)

Обратите внимание на отсутствие во внешнем каскадном списке стилей каких

бы то ни было HTML-дескрипторов. Во внешнем^ файле списка стилей должны содержаться только правила. Таким образом, внешний каскадный список стилей содержит те же правила, что и внутренний (т. е. внедренный) список. Тем не ме —

Самоучитель по креативному веб-дизайну. Книга 1, стр.154

нее, в файле правила списка стилей не заключаются между начальным и конеч — ным дескрипторами стиля и не содержат HTML-дескрипторов.



Импортирование внешнего списка стилей

Импортирование внешнего каскадного списка стилей напоминает связывание, которое было рассмотрено в предыдущем разделе. Разница заключается в том,

что импортирование можно совмещать с другими методами, в то время как свя — зывание может использоваться только само по себе. Например, несмотря на то, что заголовок Web-страницы в предыдущем примере может содержать несколько

дескрипторов (для связывания с несколькими файлам каскадных списков стилей), он не может содержать внедренные правила. Как видно из следующего примера, заголовок Web-страницы содержит не только оператор import, но и внедренные правила списка стилей для заголовков уровня 2 и основного текста страницы:





список стилей (CSS)

style type=»text/ess»>



@importurl(styles, ess);

h2 {color:purple; font-size:30px; font-family:helvetica}

body {color:black}

—>





В приведенном примере оператор @import указывает Web-браузеру использо —

вать правила списка стилей, извлекаемые из файла style. ess. Кроме того, до —

бавляются внедренные правила, которые описаны под оператором @import.

(Если заголовок страницы содержит и оператор @import, и внедренные правила,

1 8 4 . Глава 4. Каскадные списки стилей





оператор @import должен находиться перед внедренными правилами каскадного

списка стилей.) Если импортированные и внедренные правила списков стилей конфликтуют между собой, применяются внедренные правила. Например, файл

style. es s из приведенного выше примера включает следующее правило:



body {background:#ADD8E6; color:maroon}



В этом случае внедренное правило для элемента body заменяет объявление цвета текста и Web-браузер выведет на экран текст черного цвета, а не красно —

коричневого. I Я

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

type или media дескриптора , Web-браузер должен загружать все импорти —

руемые файлы списков стилей. Тем не менее, оператор @import может использо — ваться для импорта одновременно нескольких файлов списков стилей и заменять их правила правилами, внедренными в заголовок Web-страницы.

Включение стилей в HTML-дескрипторы

Правила форматирования каскадных списков стилей можно применять как к одной отдельной Web-странице (путем внедрения правил на страницу), так и

для всех страниц Web-сайта (за счет связывания или импортирования файлов

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

Самоучитель по креативному веб-дизайну. Книга 1, стр.155


style=»text-indent:1.5in; background:blue; color:white»>

Текст этого заголовка выводится шрифтом белого цвета на синем фоне,

с отступами в 1.5 дюйма.


A это нормальный дескриптор заголовка.





Полезные ссылки
Случайные записи
  • 25.02.2011">Руководство по actionscript. часть 6, стр. 093
  • 20.03.2011">Руководство по actionscript. часть 2, стр. 060
  • 22.03.2011">Руководство по actionscript. часть 2, стр. 018
  • 19.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.25
  • 03.11.2011">Как создать кинопостер
  • 10.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.69
  • 21.03.2011">Руководство по actionscript. часть 2, стр. 032
  • 10.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.101
  • 09.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.163
  • 06.03.2011">Руководство по actionscript. часть 4, стр. 127
  • 15.03.2011">Руководство по actionscript. часть 3, стр. 051
  • 22.03.2011">Руководство по actionscript. часть 2, стр. 009
  • 10.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.67
  • 04.04.2010">Mетоды и ресурсы по выбору цветовых схем
  • 02.04.2012">Хакеры LulzSec Reborn рассказали о планах на будущее
Опрос

Какие цвета вы предпочитаете?

View Results

Loading ... Loading ...