Самоучитель по креативному веб-дизайну. Книга 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 это нормальный дескриптор заголовка.



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

только на один элемент Web-страницы. Например, если на странице содержатся

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



Применение нескольких правил каскадных списков стилей

к одному селектору

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

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





р {color:red; font-size:18pt}

p {color:black; font-size:12pt}



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

размером 12 пунктов.

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

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


TeKCT, выводимый шрифтом красного цвета, размером

18 пунктов, полужирным начертанием

Текст, выводимый шрифтом черного цвета, размером 12

пунктов

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



3T O КРИТИЧЕСКИЙ заголовок уровня K/hl>

3To нормальный заголовок уровня 1



Таким образом, при определении класса каскадного списка стилей без селек —

тора, его можно будет использовать для форматирования любого элемента Web-

страницы. Если же класс будет определен с селектором, его форматирование можно будет применить только к указанному в определении типу HTML-деск — риптора.

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



Выбор типа шрифта с помощью свойства font-family

Независимо от типа выбираемого шрифта, будь то Times New Roman, Century

Schoolbook или Matisse ITC, общий настрой Web-страницы определяется именно шрифтом, который Web-браузер использует для вывода на экран содержимого

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

отображения содержимого страниц всего Web-сайта.



ПРАКТИКУМ

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

ца (р) и свойство font-family, как показано в следующем коде:





Bbi6op семейства шрифтов (то есть начертания)

style type=»text/ess»>



p {font-family:helvetica}

—>







В приведенном примере правило каскадного списка стилей для селектора аб — заца (р) заставляет браузер выводить на экран весть текст, который находится после дескриптора , шрифтом Helvetica. Свойство font-family, значение ко — торого устанавливается в фигурных скобках ({}), является частью объявления

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

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

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

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

Roman) или даже третьего (возможно, Courier) типа шрифта. (Теоретический предел для количества типов шрифтов, указываемых в правилах каскадных спис — ков стилей, не установлен.)

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





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







npHMep изменения начертания шрифта

type=»text/ess»>





—>

р {font-family:Helvetica;»times new roman»,courier}







Стандартый заголовок уровня K/hl>

Web-браузер выводит текст, заключенный между дескрипторами абзаца, шрифтом Helvetica. Если этот шрифт по ряду причин не доступен, CSS — правило заставляет Web-браузер искать шрифт Times New Roman, а затем Courier.


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

Бсли все три упомянутых шрифта оказываются недоступными, Web —

браузер игнорирует данное CSS-правило и использует шрифт, который установлен в браузере по умолчанию.





Здесь свойство font-family указывает, что браузер должен выводить на экран

текст, находящийся после дескриптора шрифтом Helvetica. Если шрифт Helvetica на компьютере посетителя не установлен, будет использоваться шрифт Times New Roman. Если же и Times New Roman отсутствует, браузер попытается

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



Задание размера текста с помощью свойства font-size

При установке определенного размера шрифта, как правило, преследуются

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

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

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

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

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





Свойство font-siz e каскадных списков стилей позволяет задавать размер вы — водимого на странице текста. Более того, написание правил списков стилей, уп —

равляющих размером шрифта, во внешних списках стилей дает возможность лег —

ко экспериментировать со значениями свойства font-siz e для определения оптимального размера шрифта. Помните, что изменение одного правила во внешнем каскадном списке стилей приводит к изменению размера шрифта на всех Web-страницах, связанных с этим списком стилей.



ПРАКТИКУМ

В то время как атрибут siz e дескриптора позволяет выбирать размер шрифта только из 14 имеющихся размеров (од 1 до 7 и от -1 до -7), выражае — мых в пунктах, пикселях и параметрах em, свойство font-siz e каскадных спис — ков стилей предоставляет в ваше распоряжение неограниченное количество раз — меров шрифтов. Специалисты, работающие с печатью, ближе всего знакомы с выражением размера шрифта в пунктах. При печати пункт представляет собой

х/п дюйма. Следовательно, символ размером 12 пунктов при печати будет иметь

размер Уб дюйма, а символ размером 72 пунктов — 1 дюйм. К сожалению, на мониторе текст одинакового размера в пунктах может быть разного размера, по — скольку браузеры могут работать в системах, в которых мониторы имеют различ- ное разрешение.



Полезные ссылки
Случайные записи
  • 22.01.2011">Руководство по actionscript. часть 1, стр. 138
  • 22.01.2011">Руководство по actionscript. часть 1, стр. 115
  • 17.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.121
  • 25.02.2011">Руководство по actionscript. часть 6, стр. 081
  • 23.07.2011">Животные рисунки
  • 18.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.73
  • 03.03.2011">Руководство по actionscript. часть 5, стр. 070
  • 18.03.2011">Руководство по actionscript. часть 2, стр. 113
  • 11.07.2010">Работаем над идеей
  • 21.03.2011">Руководство по actionscript. часть 2, стр. 043
  • 13.06.2010">Самоучитель по креативному веб-дизайну. Книга 4, стр.100
  • 20.03.2011">Руководство по actionscript. часть 2, стр. 059
  • 12.06.2011">Американские ученым удалось превратить в нейроны клетки кожи
  • 02.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.103
  • 12.06.2010">Самоучитель по креативному веб-дизайну. Книга 4, стр.107
Опрос

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

View Results

Loading ... Loading ...