The Urban Agrarian Lifestyle

А Revolutiort in Indoor Agriculture

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed

diam nonummy nibh euismod tincidunt ut laoreet dolore magna

aliquam erat volutpat. Ut wisi enim ad minim veniam, quis

nosttud exerci tation ullamcorper suscipit loЬortis nisl ut aliquip

ех еа commodo consequat. Duis autem vel eum iriure.

Рис. 1.2. Пример изменения внешнего вида текста

на странице благодаря использованию CSS

До появления CSS дизайнеры прибегали к применению тега <font> и других

средств HTML для достижения определенных визуальных эффектов:

<р>

<font color="#0066FF" size="5" face="Verdana.

Arial. Helvetica. sans-serif">Urban Agrarian

Lifestyle</font></strong>

<br />

<font color="#FFЗЗOO" size="4" face="Georgia.

Times New Roman. Times. serif">

<em>

<strong>A Revolution in Indoor Agriculture

Lorem ipsum dolor sit amet ...

</р>

Используя CSS, можно добиться тех же результатов (и даже лучше) с гораздо

меньшим объемом НТМL-кода (см. рис. 1.2):

<hl>The Urban Agrarian Lifestyle</hl>

<h2>A Revolution in Indoor Agriculture</h2>

<p>Lorem ipsum dolor sit amet ... </р>

Кроме того, применяя CSS для дизайна веб-страницы, вы используете HTML

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

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

Два новых НТМL-тега

Даже весь спектр НТМL-тегов не может удовлетворить потребностей веб-ди:зайнера

в разметке разнообразного содержимого веб-страниц. Конечно, тег <code> у до-

Наnисание НТМL-кода для CSS 35

бен для обозначения и выделения программнога кода, но кто-то скажет, что тег

<rec i ре> ( •набор команд•) подошел бы лучше. Но, увы, такого тега не существует.

К счастью, HTML предлагает два тега для группировки, объединения и разбивки

- в общем , для определения логического фрагмента веб-страницы. Они позволяют

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

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

с помощью стилей CSS.

БРИЛЛИАНТ БЕЗ ОГРАНКИ

Простой HTML- помощь поисковым серверам

Научившись писаtь НТМL-код так, чтобы использоваtь

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

документов, и применяя CSS как инструмент

для создания дизайна, стили3ации, придания страницам

3аконченного внешнего вида, вы обнаружите

дополнительные преимущества простого и поиятиого

HTMl. С одной стороны, вы сможете подняtь nозиции

своих веб-страниц в nоисковых системах, заняв верхние

строки в тисках таких поисковиков, как Google,

Yahoo!, MSN и др. Когда поисковые серверы сканируют

просторы Интернета в поисках новых сайтов и новой

информации, они систематизируют данные, просматривая

НТМL-коды веб-страниц в nоисках реального

содержимого. Старый способ написания НТМL-кода

с применением форматирующих тегов (например

<font") и множества таблиц для создания дизайна

страницы влияет на работу поискового сервера.

Некоторые поисковые системы прекращают чтение

НТМL-кода страницы после просмотра определенного

количества символов. Если у вас на страницах имеется

большой объем НТМL-кода для создания дизайна,

то nоисковый сервер может уnустить важное содержимое

страниц или некоторые страницы вообще не

будут систематизированы. Простой и структурированный

HTMl, напротив, будет легко просматриваться

и систематизироваться поисковыми системами.

Использование тега <hl:> для выделения важных

тем страниц (в противоположнОСtь форматированию

текста большим попужирным шрифтом) - грамотный

подход, поскольку поисковые серверы nридают

большое значение содержимому этого тега во время

сканирования страниц.

Рекомендации Google по созданию веб-страниц для

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

смотрите на сайте www.googte.com{webmasters/

guldellnes.html.

О хитростях написаниR НТМl-кода, оптимизировнного

специально для поисковых машин, вы прочтете по

адресу www.digital-weЬ.oom/artides/seo_and_your _

weЬ_sitЩ.

Теги <di v> и <span> похожи на пустые сосуды, которые вы сами и заполняете.

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

к ним СSS-стили, чтобы фрагменты внутри этих тегов выглядели так, как вам

хочется. Тег <di v> (предназначен для деления на фрагменты) определяет любой

отдельный блок содержимого, например абзац или заголовок. Однако вы также

можете логически объединить любой набор таки х элементов, как заголовок,

несколько абзацев, маркированный список и т. д., в единственном блоке

<div>. Тег <div>- замечательное средство разбивки веб-страницы на такие логические

фрагменты, как баннер, нижний колонтитул, боковое мettiO и т. д.

Впоследствии , используя CSS, вы сможете nозиционировать любой иа этих

фрагментов в выбранное место всб-страницы , соадавая сложную схему раам<..'Тки

(см. часть 3).

36 Глава 1. CSS - новый nодход к НТМL

Тег <span> применим к внутренним (inline) элементам страницы, то есть к словам,

фразам, которые находятся в пределах абзаца текста или оглавления. Его можно

использовать точно так же, как и другие внутренние НТМL-теги, например как

<а> (чтобы добавить ссылку к фрагменту текста) или <strong> (чтобы выделить

слово в абзаце полужирным шрифтом). Можно применять тег <span>, чтобы указать

название компании, и затем использовать CSS, чтобы выделить это название другим

шрифтом, цветом и т. д. Рассмотрим пример этих тегов в работе. К ним добавлены

атрибуты id и cl ass, часто используемые для применения стилей к фрагментам

страницы.

<p>Call customer service at 555-555-5501 for more information</p>

</div>

Это было краткое введение в теги для неб-страниц. В разд. (!Селекторы классов:

точное управление~ гл. 3 рассказывается, как пользоваться такими тегами в сочетании

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

Что нужно забыть об HTML

CSS позволяет писать более простой и понятный НТМL-код. Вам больше не нужно

пользоваться тегами и атрибутами HTML для создания и улучшения дизайна

неб-страниц. Тег <font> -наглядный тому пример. Единственная его цель состоит

в том, чтобы изменить цвет, размер и начертание шрифта текста страницы. Он не

выполняет никакого структурирования и не делает страницу логически более понятной.

Привожу список рекомендаций, тегов и атрибутов HTML, которые вы можете

легко, без ущерба для внешнего вида страниц заменить СSS-стилями.

О Избавьтесь от тега <font> для управления отображением текста. CSS выполнит

это гораздо лучше (о форматировании текста читайте в гл. 6).

О Забудьте о тегах <Ь> и <i >, используемых для выделения текста курсивом или

полужирным шрифтом. CSS в состоянии сделать полужирным или курсивным

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

тегами языка HTML. Чтобы выделить слово или фразу, пользуйтесь

тегом <strong> (браузеры в любом случае отображают текст, выделенный

этим тегом, как полужирный). Если вы хотите придать тексту чуть меньший

акцент, то пользуйтесь для его выделения тегом <em> (браузеры выделяют содержимое

этого тега курсивом).

СОВЕТ----------------------------------------------------Чтобы

выделить заголовок статьи курсивом, nользуйтесь тегом <cite> - таким образом вы убьете

сразу двух зайцев. Он одновременно выделяет заголовок курсивом и nомечает его как цитату для

nоисковых серверов. Заnомните это, nожалуйста.

О Не пользуйтесь тегом <tab l е> для разметки страницы. Применяйте его только

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

Написание НТМL-кода для CSS 37

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

всю необходимую разметку веб-страницы гораздо быстрее и с меньшим объемом

кода, нежели с помощью тега <ta Ь l е>.

О Уберите атрибуты тега <body>, которые всего лишь улучшают внешний вид содержимого

веб-страницы: background, bgcol or, text, l i nk, al i nk и vl i nk устанавливают

цвет текста, фона страницы, гиперссылок, добавляют фоновое изображение

на страницу. CSS справляется с этим гораздо лучше (см. в гл. 7 и 8

СSS-аналоги этих атрибутов). Избавьтесь также от браузер-зависимых атрибутов,

устанавливающих границы страницы: leftmargin, topmargin, marginwidth,

marginheight. CSS выполнит и эту работу (см. гл. 7).

О Не злоупотребляйте тегом <br />. Если вы привыкли пользоваться им для вставки

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

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

между абзацами, а также между заголовками и тегами <р>; раньше разработчики

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

абзацами, заменяя единственный тег <р> несколькими тегами разрывов строк

плюс тегом <font>, чтобы первая строка абзаца была похожа на заголовок).

Использование свойства margi n в CSS дает свободу определения таких параметров,

и вы с легкостью можете установить интервал между абзацами, заголовками

и другими блочными элементами (см. разд. ~Управление размерами полей

и отступов~ гл. 7).

ПРИМЕЧАНИЕ------------------------------------------------

8следующей главе вы узнаете о технике, называемой «сброс стилей». Она устраняет проблему

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

В целом добавление в теги атрибутов, управляющих цветом, границами, рамками,

фоновым изображением, выравниванием текста, форматированием таблиц, -

устаревший стиль написания НТМL-кода. Сюда также входят атрибуты позиционирования

изображений, текста в абзацах и ячейках таблицы. Вместо этого обратитесь

к средствам CSS, которые обеспечат и выравнивание текста (см. подраздел ~выравнивание

текста~ разд. ~Форматирование абзацев текста~ гл. 6), и устаНовку границ

(см. разд. ~добавление границ~ гл. 7), и фоновые параметры (см. разд. ~Установка

цвета фона~ гл. 7), и позиционирование изображений (см. разд. ~Фоновые

изображения~ гл. 8). ·

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

Всегда неплохо иметь подробное пашагавое руководство к действию. Если вы все

еще не уверены в том, как именно пользоваться HTML для создания хорошо структурированных

веб-страниц, даю несколько подсказок

О Применяйте на странице только один тег <hl>, чтобы определить ее главную

тему. Представьте, что это заголовок главы: ведь название главы дается один

раз. Корректное использование тега <hl> имеет дополнительное преимущества

- правильную систематизацию страниц поисковыми серверами (см. врезку

~Бриллиант без огранки~ выше).

38Глава 1. CSS- новый подход к НТМL

О Используйте заголовки, чтобы указать относительную важность текста. Если два

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

тег заголовка одного уровня. Если один из заголовков имеет меньшую

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

подзаголовок. Например, от заголовка уровня <h2> переходите к подзаголовку

уровня <hЗ> (рис. 1.3). Лучше использовать заголовки по порядку и стараться не

пропускать их номера, например, никогда не переходите от тега <h2> к тегу <h5> .

<h1>

<h2>

<hЗ>

<h4>

...

ChJ.a VetВe< ........ ,,ch .... , ....... ch;.v.,

BOARDING YOUR CHlA

~ \<!;' ,,,·,:•J'JI.,;

i v.tltUI.Imvt.l1 ..cь.. .. ",. .. t\.llpl&lialgiltiluoollt t...ar,.t...,..-a.,

j ~eg«.<UI'U«.Ii!rmsl.umut~.

Creature Cиmforts ! ~:~.,.,..~~d* Pra!!!e'111110o8n.~

А f'10tft* AtoQoy Нот НDIJWJ ~

L!Jre'nII)UrldoЬ'tltam8. ~adфisOnpdt.. ~~.~

~.ucьltrull\lrll\-nulll~....,.,.~"'*"---~ 1

Н8taNI.urnllpu!Ut. ~ 111.rnoAeМ!Itii'I,CICIIМICIOQ ~.-. f81n~

=.... ~== ..~. ~.= -':=-==::...~ 11

_." ,." ... Oo•i• i

~~-=-~~-е.~::~. 1

' ...............p.II'U8.~1d.~8\~~.--N8'1'1ы..dl: 1

! =ln.~=М.a=dtD.~ ~~==:...~ 11

Рис. 1.3.Исnользуйте теги заголовков: расnоложите их в тексте в nорядке важности

О Используйте тег <р> для абзацев текста.

О Применяйте маркированные списки, если у вас есть перечень связанных элементов,

таких как ссылки навигации, заголовки, подсказки и др.

О Пользуйтесь нумерованными списками, чтобы определить ряд последовательно

выполняемых операций или порядок набора элементов. В обучающих примерах

этой книги (см. разд. «Обучающий урок: форматирование текста в действии>>

гл. 6) есть наглядный пример такого списка.

О Чтобы создать словарь терминов и их определений, пользуйтесь тегом <dl>

(список определений терминов) в сочетании с тегами <dt> (название термина)

и <dd> (определение термина). Просмотреть пример использования этой комбинированной

консtрукции тегов можно по адресу www.wЗschools.com/tags/tryit.

asp?filename=tryhtml_list_definition.

О Если вы хотите включить цитату в виде отрывка текста с другого сайта, чьеголибо

высказывания и др., используйте тег <Ь l ockquote> для длинного контекста

(высказываний), а тег <q>- для коротких цитат.

О Применяйте такие малоизвестные теги, как <cite>, чтобы сослаться на книжный

заголовок, Г3Зетную статью или сайт, <address> -для указания контактной информации

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

Наnисание НТМL-кода дпя CSS 39

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

изображений. Все это выполнит CSS.

О Если нет HTML-тera, соответствующего элементу или набору элементов, которые

вы хотите выделить на странице для придания им определенного внешнего

вида, то пользуйтесь тегами <div> и <span>. Об их использовании будет рассказано

в следующих главах (например, в разд. ~селекторы классов: точное управление•

гл. 3).

О Не злоупотребляйте тегом <div>. Некоторые дизайнеры полагают, что <div>это

все, что им нужно, и при этом игнорируют теги, которые могут быть более

уместны. Возьмем пример создания навигационной панели. Можно добавить

блок <div> на страницу и заполнить его кучей ссылок. Но ведь гораздо лучше

использовать маркированный список: в конце концов, навигационная панель

и сама является списком ссылок.

О Никогда не забывайте указывать закрывающие теги. Открывающий тег <р> требует

соответствующего ему закрывающего теrа </ р>, как и любые другие теги,

за исключением одиночных, например <br/> и <i mg/>.

О Проверяйте синтаксис своих веб-страниu с помощью WЗС-валидатора (см. врезку

•Информация для новичков• и рис. 1 .4 ниже). Плохо написанный НТМL-код,

как и код с опечатками, вызовет множество непредсказуемЬiх ошибок браузера.

Проверяйте nравильиость кода веб-страниц

В HTML существуют оnределенные nравила: наnример,

тег <htm 1 > охватывает все содержимое веб-страницы,

а тeг<tttle> должен находиться внутри <head>.

В XHTML синтаксис еще более строrмй. ~ли забыть об

этих правилах или npoao сделать nри llaбope оnечатку,

то некорреКП!ый НТМL-код станет nричиной некоторых

nроблем (наnример, веб-страница отобразится

в разпичных браузерах nо-разному). более того, вряд

ли вы наnишете nравильный СSS-код вмеае с ошибочным

HTMl. К счааью, сущеавуют nрограммные

средавадля лроверки nравильиости НТМl-кода.

Самый легкий способ проверить НТМl-код- выnолнить

синтаксический контроль (валидацию) на сайте

WЗС по адресу http://valictator.wЗ.org/ (см. рис. 1.4).

д еще вы можете ВО<Лользоваться расширением для

браузера Firefox, которое называется Web Developer

и размещается по адресу http:/ /chrispederick.com/

'WOfk/weЬ-developer/. Это еще один nростой и быстрый

сnособ nротестировать страницу WЗС -валидатором.

Можно либо указать валидатору адрес существующей

страницы в Интернете, либо загрузить файл с НТМLкодом

с вашего комnьютера, либо вставить НТМl-код

веб·страницы в окно формы на сайте и нажать кноnку

запуска nроверки.

Консорциум Всемирной nаутины - World Wide Web

Consortium (WЗС) - организация, ответственная за

оnределение стандартов веб-технологий и языков

nрограммирования, включая HTML, XHTMl, XMl.

При нахождении ошибок на ваших веб-страницах WЗСвалидатор

сообщит о них. При использовании браузера

Firefox вы можете загрузить и установить надстройку,

коrорая nозволит выnолнять синтаксический контроль

веб-страниц неnосредственно в этом браузере, не nосещая

сайт WЗС. Эта надстройка даже nоnытается исправить

обнаруженные ошибки. Загрузить надстройку

можно no адресу http://users.skynet.Ьe/mgueury/

mozilla/. Подобный инструмент для браузера Safari достуnен

на caйтewww.zappatic.net,/safaritk!y/.

40Глава 1. CSS- новый подход к НТМL

00 • WS hltjr/Л .. idltoo.w3'"'g'""•l!d<t<./>)',.O _ /> •

~-- . ..:. j)G«t-·-· I!)G«t-·--· i)G<t-.-· -~ ... --

Jw;r;;~v.r.......-- ! !) • lii\ • с;, ,jio• Р19<• Sllctp Т...,• •· " ,

fvlarkLIP Val1datюn Servtce

Velldate Ьу URI

Valodlte а docvment on1ine

• More Optlons

Тhis vakdator cnecks lhe mati(\JO Vfidi!v d WеЬ doct.me~ in НТМL, ХНТМL, SМIJ.., MathМL, etc. W

you WISII to vaidate speofic content soch as RSS!A!om !ee<Js 01 CSS sty!eshee!s. MoЬIIeOK C9!'!1en!.

or to find Ь<о!<еn inks lhere are athervaйdatQ!S зn(j tools avarlaЬie

Тhе WЗС vaidators rely on c001П1111ity Щ)1Ю11 for hosting and development.

Q2!Ш! and hejp us Ьufld Ьet!er tools for а Ьetter wеЬ.

Тlu$ ""109 NnS tllo W3C Mldcup V .. dator 19JA.

=~~20Ct~~~~S:~=~==~W:=v - YOUR lf1'tAAC.1'1Q.11r$ Wtl'1'l ntiS Sl7t ARl tiAC.COIШAIIOf ;,•mк OURPUВlCANO

ШUN'R flfWAr:YSТA"nUENТS

Рмс. 1.4.HTML-валидатор от W3C поэволит быстро nроверить правильность кода неб-страницы

Важность doctype

HTML следует некоторым правилам, содержащимся в файле объявления тиnа

документа (Document Туре Definition (ОТО)). ОТО представляет собой ХМL-документ,

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

конкретного типа HTML. Для каждой версии HTML есть свой ОТО.

Какое отношение все это имеет к CSS? Самое прямое. Если хотите, чтобы вебстраницы

корректно и согласованно отображались брауэерами, то вы сами должны

сообщить брауэеру, какой версией HTML или XHTML пользуетесь, указывая этот

самый тип документа - ООСТУРЕ - в начале веб-страницы. Но ООСТУРЕ

определяет не только версию HTML (например HTML4.01 Transitional), а и соответствующий

ОТО-файл в Интернете. Если вы укажете DOCTYPE с ошибкой,

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

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

обеспечение вести себя подобно устаревшим браузерам, выпускавшимся

до 1999 года (Netscape 4, lnternet Explorer 5). Если современный брауэер сталкивается

со страницей, в которой отсутствует nравильный ООСТУРЕ, то он •думает~, что

важность doctype 41

эта страница была написана в текстовом редакторе HTML давным-давно, и отображает

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

DOCTYPE ваши СSS-стилизованные веб-страницы, возможно, не будут смотреться

так, как они должны выглядеть в соответствии с текущими стандартами. Если,

проверяя веб-страницу в браузере, вы невольно просматриваете ее в альтернативном

режиме, то можете не ломать себе голову, пытаясь исправить проблемы отображения.

Они связаны с неправильным DOCTYPE, а не с ошибочным HTML или CSS.

ПРИМЕЧАНИЕ-----------------------------------------------Для

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

браузеров посетите сайты www.quir1<smode.org/index.html?/css/quirksmode.html и http://hsivonen.iki.fi/

doctype/.

Указать правильный DOCTYPE достаточно просто. Нужно только знать используемую

версию HTML. По всей вероятности, вы создаете веб-страницы

с применением HTML 4. Возможно, даже начали пользоваться XHTML для

сайтов (см. введение).

Самые популярные версии HTML и XHTML на сегодня - HTML 4.01 Transitional

и XHTML 1.0 Transitional. Эти типы языка разметки все еще позволяют использовать

такие теги, как <font>, обеспечивая переход от старого HTML к новым типам

HTML и XHTML, более строгим по синтаксису.

Лучше, конечно, вообще не применять эти теги, хотя они все еще работают в переходных

(traпsitional) версиях языка. Можно постепенно исключить их из кода

своих веб-страниц. В синтаксически строгих версиях HTML и XHTML некоторые

устаревшие теги не работают вообще.

ПРИМЕЧАНИЕ------------------------------------------------

8 синтаксически строгих версиях HTML и XHTML запрещены теги и атрибуты,. предназначенные для

стилизации веб-страниц, например тег <font> и атрибут центрирования абзаца. В этих версиях

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

в новом окне гиперссылка).

Если у вас версия HTML 4.01 Transitional, то добавляйте приведенный ниже

doctype в самом начале веб-страниц:

<!DOCTYPE HTML PUBLIC "-//WЗC//DTD HTML 4.01 Transitional//EN"

"http://WvМ.w3.org/ТR/html4/loose.dtd">

Определение doctype для XHTML 1.0 Transitional похоже, но указывает на

другой DTD. Кроме того, необходимо добавить кое-что еще в открывающий тег

<html >.Эта строча определяет тип используемого XML языка, в нашем случае это

XHTML.

<!DОСТУРЕ html PUBLIC "-1/WЗC//DTD XHTML 1.0 Transitional//EN"

"http://WvМ.w3.org/ТR/xhtml1/DTD/xhtml1-transitional .dtd">

ПРИМЕЧАНИЕ-----------------------------------------------Если

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

специально для их применения. Список соответствий типов doctype смотрите на сайте WЗС по адресу

www.w3.org/QN2002/04/valid-dtd-list.html.

42 Глава 1. CSS- новый подход к НТМL

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

определили doctype из вышеприведенного списка, и всегда добавляйте его

первой строкой в НТМL-файлах (перед открывающим тегом <html>). В этом увесистом

куске кода можно сделать описку или незаметную ошибку, так что лучше

всего проверьте валидиость страницы, чтобы быть уверенными в правильности.

Очень удобно иметь на компьютере шаблон-копию пустой НТМL-страницы с правильным

doctype. Это дает возможность копировать ее каждый раз при создании

новой неб-страницы. Общие шаблоны для написания HTML/XHTML веб-страниц

можно найти на сайте книги по адресу http://www.sawmac.com/missing/css2e/.

ПРИМЕЧАНИЕ-------------------------------------------------Большинство

визуальных программных па кетов для создания веб-страниц (Dreamweaver, Expressioп

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

В хороших текстовых редакторах НТМL-кода имеются также ярлыки для облегчения добавления

doctype.

Долгожданный Internet Explorer 8

Благодаря автоматическому обновлению продуктов Microsoft новый lnternet

Explorer 8 сумел занять свою нишу на рынке браузеров. К великому счастью ди;

шйнеров, IE 8 считается версией, наиболее соответствующей стандартам. В ней

исправлены все ошибки, рожденные брауэерами IE 6 и IE 7, а также достигнута

практически идеальная совместимость с CSS 2.1. Это значит, что хорошо сделанные

сайты будут выглядеть во всех браузерах (IE 8, Firefox, Safari и Opera) практически

одинаково. Читая дальше, вы поймете, что это не касается браузеров IE 6

и IE 7, где потребуется соэдание особого, специфичного для каждого браузера кода,

чтобы все выглядело одинаково.

Тем не менее IE 8 можно назвать хамелеоном. Он может принимать вид других

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

совершенно не тот вид, которого вы хотите добиться. Очень важно, например,

указывать правильный тип документа (DOCTYPE). Вы уже знаете, что без указания

DOCTYPE браузер начинает работать в режиме совместимости. А Internet

Exploгer 8, работая в этом режиме, постарается представить страницу как Internet

Explorer 5 (!!!).

Но это еще не все! IE 8 может притвориться IE 7. Если кто-то, рассматривая ваш

сайт в IE 8, пажмет кнопку Режим совместимосrи, то lE 8 станет lE 7 и покажет страницу,

отключив все свойства CSS 2.1. То же самое может произойти, если компания

Microsoft поместит ваш сайт в список совместимых страниц (Compatibllity View

List). Это сайты, которые с точки зрения Microsoft выглядят лучше в IE 7, а не

в IE 8. Вам не потребуется этот режим, если при создании сайта вы будете учитывать

все рекомендации, предложенные в этой книге.

К счастью, у нас есть возможность сказать IE 8 быть просто IE 8. Для этого

нужно добавить один mеtа-тег, чтобы IE 8 начал игнорировать режим совместимости

и список совместимых страниц и стал отображать вашу страницу в режиме

наибольшей совместимости со стандартами:

Долгожданный Intemet Explorer 8 43

Поместите эту строку в разделе <head> вашей страницы, сразу за тегом <t i t 1 е>.

Эта конструкция будет работать и для последующих версий Internet Explorcr.

Часть тега" IE;edge" сообщит будущим версиям браузера, что они должны исrюльi}

Овать свои стандартные режимы, отображая сайты. Да. и не забудьте rюмсщать эту

строку на каждой веб-странице!

. ИНФОРМАЦИЯ ДЛЯ НОВИЧКОВ

Кроссбрауэерное тестирование

Как известно, существует множество различных браузеро

в. Если вы являетесь пользователем Windows, то

по умолчанию вам доступен lпternet Explorer, а еще

вы можете установить дополнительные браузеры,

наnример Firefox, Safari, Opera или Google Chrome.

Пользователи дррlе Мае могут остановить свой выбор

на nредустановленном Safari или же восnользоваться

браузерами Firefox 3 либо Google Chrome 1. Несмотря

на то что все nоследние браузеры лучше всеrо присnособлены

для работы с веб-страницами, основанными

на CSS, этого нельзя сказать об lntemet Explorer 6,

который все еще является самым расnространенным

браузером в Сети. Даже IE 7 содержит те же огрехи.

Чтобы знать наверняка, что ваши сайты работают у самой

широкой аудитории nользователей, вам потребуется

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

количестве браузеров. Предлагаю несколько способов.

Пользователи Windows. Обычно комnьютеры nод

уnравлением Windows могут заnускать только одну

версию браузера IE, то есть по умолчанию у вас нет никакой

возможности исnользовать IE б, IE 7 или IE 8 одновременно

на одном компьютере. Что ж, по умолчанию

вы этого не можете, а вот благодаря маленькой, но

очень полезной программе IEТester есть возможность

узнать, как выглядят ваши страницы в IE 5.5, IE 6, IE 7

и IE 8 одновременно. Скачать ее можно по адресу

www.my-debugьar.com/wiki/IEТester/HomePage.

Да, установите и другие браузеры на ваш компьютер:

Firefox, Safari, Opera и Chrome. К счастью, вам не понадобится

Мае, поскольку Apple выnускает браузер Safaгi

и для Windows-мaшин.

Пользователи Мае OS. Для таких nользователей тестирование

немного затруднено. Вы nросто должны

nроверять сайты вlntemet Explorer- это самый расnространенный

браузер. Даже если ваша искусная

работа nрекрасно выглядит на вашем компьютере,

известные проблемы с отображением страниц вiЕ 6 или

IE 7 могут все испортить. Итак, у вас три варианта.

Первый- куnить (или одолжить) Windоws-компьютер.

Второй - установить Windows на собственный комnьютер

с nомощью программы Boot Camp (www.apple.

com/macoSX/features/Ьootcamp.html}, но у вас должна

быть система Мае OS на основе nроцессора lntel.

Третий - воспользоваться nрограммами виртуализации

VMWaгe Fusion или Parallels Desktop. Они nозволяют

заnускать виртуальную машину Windows одновременно

с Мае OS так, что появляется возможность

nереходить с Windows на Мае OS и обратно, тестируя

сайты в обеих оnерационных системах. Этот сnособ

лучший из всех nредложенных. Как программы виртуализации,

так и Boot Camp требуют коnии Windows.

Для всех. Существует еще один сnособ, достуnный

для nользователей и Windows, и Мае OS, а также не

требующий установки какого-либо дополнительного

nрограммнаго обесnечения. Нужно восnользоваться

интернет-сервисами для кроссбраузерноrо тестирования.

Они nозволяют видеть то, как выглядят страницы

в разных оnерационных системах и браузерах. Многие

из этих сервисов коммерческие, а nотому требуют денег

за исnользование. Utmus (http://litmusapp.com/)

делает скриншоты ваших страниц во многих браузерах.

CrossBrowserTesting.com (www.aossЬrowsertestng.com)

nозволяет удаленно работать с другим комnьютером.

Иначе говоря, вы можете работать с Windows-мaшинoй,

где установлены все версии IE, Firefox и Safari.

Такой сnособ nозволяет nроверять не только внешний

вид страниц, но и взаимодействие с ней, наnример

то, как работают nрограммы, наnисанные на

JavaScript в различных браузерах. Browsercam (www.

Ьrowsercam.com) - еще один сервис, который nозволяет

создавать скриншоты страниц, как это делает

Utmus, или же восnользоваться удаленным компьютером

так, как это возможно в CrossBrowserTesting.

2Соэдание стилей

и таблиц стилей

Даже самые сложные и красивые сайты (в том числе и тот, который nредставлен

на рис. 2.1) когда-то начинзлись с оnределения единственного СSS-стиля. Постеnенно,

по мере добавления все новых таблиц стилей, можно разработать полностью

законченный дизайн сайта. Независимо от того, являетесь вы новичком в изучении

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

основных правил создания таблиц стилей. В этой главе мы начнем изучение CSS

с основных понятий, которыми нужно руководствоваться в nроцессе создания

и использования таблиц стилей .

.........., .., '•"•

. .. .........

••'""•'?'·r· .

• • • ,.-; ... "'1

,.... __ :_to..l .._ff~·-·· -.-.......... .. ".._ ........ -.,.,.,. ..........., .,,_:; ~----~. . ·---· __ _._ .. ____ .... _ .... _.".,,_,_ ..

, .. _,\ .... ,. . . . ........... lloo1 __ ,. ___~---- .. ... ... _... ....

.•.•,._ ._.,.",".". _..._. __. ._.t m_ ._. ~ ,-...·_ -......-.. " .,.._....-..... .. ~-> ~•. ... - ...~ • _ .................. .

=:=::::.::.::-::::;.--..... ,..,, __ ...... _ ~ ............... " .

..._ .. __ ..,.._ .. _.._ ....... -.. .......... '"'"- -~ ....... ..

..... ........... ,..~-·-··---.. - ... ··~ .. -\'00, .. -. ....... -. ••• ,._ .. .,._."_, .... ,. .... ~ .. ·--~·· hc• -.· .• - ..... .-.....

-·~·~----... -.,..-·~ '". ... __ ......... ...............- ................... .,....

Рис. 2.1. Любая СSS-стилиэованная веб-страница состоит из отдельных определений СSS-стилей

В левой части рис. 2.1 представлен код таблицы стилей CSS, определяющей

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

Что такое стиль 45

ПРИМЕЧАНИЕ-----------------------------------------------Многие

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

их чтению книг и руководств. Если вы сначала хотите попробовать свои силы в создании таблиц

стилей, а затем вернуться к этому теоретическому материалу, чтобы прочитать о том, что только

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

Что такое стиль

Определение стиля в CSS, устанавливающего внешний вид какого-либо элемента

(фрагмента) веб-страницы, -это всего лишь правило, которое сообщает браузеру,

что и каким образом форматировать: изменить цвет шрифта заголовка на синий,

выделить фото красной рамкой, создать меню шириной 150 пикселов для списка

гиперссылок. Если бы стиль мог говорить, он сказал бы: ~Браузер, сделай, чтобы

вот это выглядело так-то~. Фактически определение стиля состоит из двух основных

элементов: это сам элемент веб-страницы, который непосредственно подлежит

форматированию браузером, - селектор, а также форматирующие команды - блок

обьявления. Селекторами могут быть заголовок, абзац текста, изображение и т. д.

Блоки объявления могут, например, окрасить текст в сИний цвет, добавить красную

рамку (границу) вокруг абзаца, установить фотографию в центре страницы - возможности

форматирования бесконечны.

ПРИМЕЧАНИЕ-----------------------------------------------Как

и разработчики WЗС, веб-диэайнеры часто называют СSS-стили правилами. В этой книге оба

термина взаимозаменяемы.

Разумеется, СSS-стили не могут быть написаны на обычном языке, как, например,

предыдущий абзац. У них есть свой собственный язык. В частности, чтобы

выбрать стандартный цвет и размер шрифта для всех абзацев на веб-странице,

нужно напцсать следующее:

р { color: red; font-size: 1.5em: }

Этот стиль как бы говорит браузеру: ~сделай текст всех абзацев веб-страницы,

помеченных тегом <р>, красным и установи размер шрифта равным полуторакратной

высоте латинской буквы em ( em - буква m, напечатанная шрифтом Cicero, - стандартная

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

см. гл. 6). Любой стиль, даже самый простой, содержит несколько элементов

(рис. 2.2). Он состоит из селектора, который сообщает браузеру, что именно форматировать,

и блока объявления, в котором перечислены форматирующие команды,

используемые браузером для стилизации фрагмента, определенного селектором.

Блок объявлений

Значение Значение

Рис. 2.2. Пример описания стиля (или правила)

46 Глава 2. Соэдание стилей и таблиц стилей

О Селектор. Как уже было отмечено, селектор сообщает браузеру, к какому элементу

или элементам неб-страницы применяется стиль: к заголовку, абзацу,

изображению или гиперссылке. На рис. 2.2 селектор р обращается к тегу <р>,

передавая браузеру, что все теги <р> нужно форматировать, используя объявления,

указанные в данном стиле. Благодаря большому разнообразию селекторов,

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

мастерски форматировать веб-страницы (в следующей главе селекторы описаны

более подробно).

О Блок объявления стиля. Код, расположенный сразу за селектором, содержит

все форматирующие команды, которые можно применить к этому селектору.

Блок начинается с открывающей ( {) и заканЧивается закрывающей фигурной

скобкой (} ).

О Объявление свойства. Между открывающей и закрывающей фигурными скобками

блока объявления можно добавить одно или несколько определений или

форматирующих команд. Каждое объявление имеет две части -свойство и значение

свойства, заканчивающиеся точкой с запятой.

О Свойство. CSS предлагает большой выбор команд форматирования, называемых

свойствами. Свойство представляет собой слово или несколько написанных

Через дефис слов, определяющих конкретный стиль или стилевой эффект.

У большинства свойств есть соответствующие, простые для понимания названия,

такие как font-si ze, margi n-top, background-col or и т. д. (в переводе с английского:

размер шрифта, верхний отступ, цвет фона). В следующих главах будет

описано множество полезных свойств CSS.

ПРИМЕЧАНИЕ------------------------------------------------

8 приложении 1 вы сможете найти удобный глоссарий свойств CSS.

О Значение. Наконец настал тот момент, когда вы можете задействовать свой

творческий потенциал, приеваиная значения СSS-свойствам: определяя фоновый

цвет, например, синим, красным, фиолетовым, салатовым и т. д. Как будет

описано в других главах, различные СSS-свойства требуют определенных типов

значений- цвет (red или #FFOOOO), длина (18рх, 200% или 5em), URL (images/

background. gi f), а также определенных ключевых слов (top, center, bottom).

Вам не обязательно описывать стиль в одной строке, как изображено на рис. 2.2.

У стилей может быть множество форматирующих свойств, и есть возможность

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

поместите селектор и открывающую скобку в одной строке, каждое объявление

-далее в отдельных строках, а закрывающую фигурную скобку -в последней

строке стиля. Это будет выглядеть следующим образом:

р {

color: red:

font-size: 1.5em:

вместо

р { color:red: font-size:l.5em: }

Понимание таблиц стилей 47

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

спокойно добавлять их, создавая хорошо читабельные стили CSS. Так, полезно

сделать отступ при перечислении свойств табуляцией или несколькими пробелами

для явного отделения селектора от блока объявления. И к тому же один пробел

между двоеточием и значением свойства, конечно, необязателен, но он обеспечивает

дополнительную удобочитаемость стилей. Фактически можно добавить любое

количество пробелов там, где вам захочется. Например, со 1 or: red. со 1 or: red

и со 1 or: red - все варианты будут правильно работать.

ПРИМЕЧАНИЕ-----------------------------------------------Не

забывайте ставить в конце каждой nары «свойство- значение» точку С'заnятой:

color: red;

Проnуская эту точку с заnятой, вы собьете с толку брауэер, в результате чего таблица стилей будет

нарушена и веб-страница отобразится некорректно.

Однако не стоит nереживать - оnисанная ошибка достаточно расnространена, nоэтому nросто убедитесь

в том, что исnользуете СSS-валидатор, о котором будет рассказано через пару страниц.

Понимание таблиц стилей

Конечно, один стиль не превратит неб-страницу в произведение искусства. Он может

выделить абзацы красным цветом, но, чтобы придать сайту красивый и стильный

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

набор определяемых СSS-стилей включается в таблицу стилей. Таблицы стилей

бывают двух видов - внутрен:ние и внешние, - в зависимости от того, где определена

стилевая информация: непосредственно в самой неб-странице или в отдельном

файле, связанном с неб-страницей.

Как выбрать внутреншt:е или внеUUIИе таблицы стилей? Еще с момента изобретения

CSS внешние таблицы стилей были лучшим способом создания дизайна

веб-страниц. Они делают создание сайтов проще, а обновления быстрее. Внешняя

таблица стилей сосредотачивает всю информацию о стилях в едином файле, который

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

присоединить одну и ту же внешнюю таблицу стилей к каждой странице сайта,

создавая, таким образом, единЬ1й дизайн. А обновление внешнего вида всего

сайта будет заключаться лишь в редактировании одного-единственного текстового

файла - внешней таблицы стилей.

Внешние таблицы стилей помогают неб-страницам открываться быстрее. Когда

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

НТМL-код, без кода громоздких вложенных таблиц для стилизации, без тегов

<font>, без кода встроенных стилей CSS. Кроме того, когда браузер загрузит внешнюю

таблицу стилей, он сохранит этот файл на клиентском компьютере посетителя

неб-страницы (в специальной системной папке, называемой кэшем) для быстрого

доступа к нему. Когда посетитель неб-страницы переходит к другим страницам

сайта, которые используют ту же самую внешнюю таблицу стилей, браузеру нет

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

запрашиваемый НТМL-файл и достает внешнюю таблицу стилей из своего кэша,

что дает существенный выигрыш во время загрузки страниц.

48 Глава 2. Создание стилей и таблиц стилей

ПРИМЕЧАНИ Е -----------------------------------------------Когда

вы работаете над своим сайтом и польэуетесь предварительным просмотром в брауэере, кэш

работает без всякой пользы для вас. Подробнее об этом рассказано в следующей врезке.

Кэш браузера обесnечивает значительное увеличение

скорости nросмотра веб-страниц.

Всякий раз, когда браузер открывает веб-страницу,

он помещает загруженную информацию в кзш. Сюда

также поnадают такие часто исnользуемые файлы, как

внешние таблицы стилей CSS или изображения, что

позволяет окономить время загрузки веб-араниц.

Вместо того чтобы в следующий раз (при просмотре

других страниц этого же сайта или повторного nросмотра

этих же страниц в будущем) nовторно загружать те

же самые файлы, браузер может доешь их прямо из

кзша, будь то nросмотренная ранее веб-<траница или

рисунок. Однако не всегда то, что хорошо для посетителей

сайта, удобно для вас.

ПО(J(ольку браузер кэширует и nовторно обращается

к файлам внешних таблиц стилей CSS, это часто сбивает

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

сайта. Доnустим, работая над стилизацией веб-страницы,

которая использует внешние таблицы стилей,

вы nросматриваете ее в браузере, дабы убедlm>СЯ, что

добились именно тоrо, чего хотели. Но не все выглядит

так, как было задумано, хотя вроде бы в СSS-коде

ошибок нет. Вы возвращаетесь в программу-редактор

и вносите изменения в файл внешних таблиц стилей

CSS. Снова вернувшись в браузер и перезагрузив

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

изменений, вы видите, что никаких изменений

не nроизошло! Вы только что полали в ловушку,

связанную с особенностями кзша. Дело в том, что при

nерезагрузке веб-страницы браузер не всегда nерезагружает

данные, уже находящмес.я в кзше, в том числе

внешние таблицы стилей. Таким образом, невозможно

увидеть, как выглядит веб-страница, стилизованная

с nомощью только что отредактированного СSS-кода

из внешней таблицы стилей.

Есть два nути решения этой nроблемы: выключить

кэширование или заставить браузер nерезагрузить

все содержимое веб-страницы.

Чтобы обойти эту путаницу, можно выnолнить nринудктельную

nерезаrрузку страницы (вместе< перезагрузкой

всех связанных файлов), нажав клавишу Orf, а затем,

удерживая ее, кноnку Reload (Обновить) браузера.

В lntemet Exploгer для этой цели nредназначено сочетание

клавиш Cbl+FS, а в Firefox-Orf+Shift:+R.

Внутренниетаблицыстилей

Внуrренняя таблица стилей - это набор стилей, часть кода веб-страницы, которая

всегда должна находиться между открывающим и закрывающим тегами <style>

и </style> НТМL-кода, в теле тега <head> веб-страницы . Например:

hl {

}

color: #FF7643:

font-family: Arial:

р {

color: red :

font-size: 1.5em:

Внешние таблицы стилей

}

</sty1e>

</head>

<body>

/* Далее следует остальная часть вашей веб-страницы ... */

ПРИМЕЧАНИЕ-----------------------------------------------Вы

можете nоместить тег <style> и все его стили nосле <title>, но веб-дИэайнеры обычно размещают

их nрямо nеред закрывающим тегом </head>, как nокаэано в nримере выше. Если вы также

исnолЬзуете код JavaScript на страницах, добавляйте его nосле таблиц стилей. Часто nрограммы

JavaScript nолагаются на CSS, nоэтому, добавляя таблицы стилей nервыми, вы гарантируете, что

код JavaScript будет расnолагать всей необходимой для своего выnолнения информацией.

Тег <sty 1 е> -тег HTML, а не CSS, но именно он сообщает браузеру, что данные,

содержащиеся внутри, являются кодом CSS, а не HTML. Создание внутренней

таблицы стилей идентично созданию внешней, с той лишь разницей, что перечень

стилей не выносится в отдельный файл, а заключается между тегами <sty1e>, как

описано выше, в самой веб-странице.

Внутренние таблицы стилей можно легко добавить в веб-страницу, и так же

просто перейти к редактированию НТМL-кода этой же веб-страницы. Однако эти

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

дизайна сайта, состоящего из множества страниц. Во-первых, вам придется

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

сайта, а это не только трудоемкая, но еще и глупая работа. Этот код делает каждую

страницу вашего сайта громоздкой. К тому же такая страница медленно загружается.

Во-вторых, внутренние таблицы стилей доставляют много трудностей при

обновлении дизайна сайта.

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

в тег <hl> ), которые первоначально отображались крупным, полужирным

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

шрифтом Courier синего цвета. Используя внутренние таблицы стилей,

пришлось бы редактировать каждую страницу сайта. У кого-нибудь найдется

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

решение - использование внешних таблиц стилей.

1 РИМЕЧАНИЕ---------------------------------------------------Иногда

можно nрибегнуть к сnособу добавления стилевой информации неnосредственно к каждому

конкретному НТМL-тегу без nрименения таблицы стилей. В обучающем уроке этой главы будет

nокаэано, как выnолнить такой маневр, исnользуя встроенные стили.

Внешние таблицы стилей

Внешняя таблица стилей - это не что иное, как текстовый файл, содержащий весь

набор стилей CSS. Он не должен содержать НТМL-кода, поэтому никогда не включайте

сюда тег <sty 1 е>. Вдобавок название этого файла всегда должно заканчиваться

расширением CSS. Можно давать какое угодно имя этому файлу, но лучше,

чтобы оно было наглядным. Назовите файл внешней таблицы стилей, например,

50 Глава 2. Соэдание стилей и таблиц стилей

g1oba1.css, si t e.css или mai n.css, если это общая таблица _________________стилей, связанная со всеми

страницами вашего сайта, или form .css, если он содержит описания для стилизации

заполняемых форм сайта.

Точно так же, как вы должны были удостовериться

в nравильности наnисания НТМL-кода веб-страниц,

исnользуя валидатор НТМL от WЗС (см. врезку «Информация

для новичков)} в разд. «Долгожданный lntemet

Explorer 8~t гл. 1 ), проверьте СSS-код на наличие ошибок.

На сайте WЗС имеется инс1J!Умент для nроверки синтаксиса

кода CSS: http://jigsaw.wЗ.org/css-validator/.

Он работает, как и НТМL-валидатор: можно ввести

URL-aдpec веб-страницы (как вариант- только адрес

к внешнему СSS-файлу), загрузить или скопировать

СSS-файл, вставить код в форму и просто нажать кнопку

запуска проверки.

При наборе сss-кода очень просто сделать опечатку

иnи ошибку, которой вполне достаточно дnя того,

чтобы изменить до неузнаваемости весь тщательно

продуманный дизайн страниц сайта. Если веб-страница,

содержащая СSS-код, выглядит не так, как вы

ожидали, то причиной тому может быть небольшая

ошибка в коде.

СSS-ваnидатор от WЗС- первое средство поиска проблем

с дизайном веб-страниц.

Можно также выполнить быструю проверку синтакси·

са, используя браузер Firefox. Загрузите страницу

с СSS-кодом, которую хотите проверить, и выберите

в меню Tools (Инструменты) пункт Error Console (Консоль

оwибок). Нажмите кноnку wamlngs (Предупреждения),

и вы увидите сnисок ошибок или оnечаток,

которые не прошли проверку Firefox.

совп----------------------------------------------------

Если есть веб-страница с внутренней таблицей стилей, а вы хотите исnольЗовать внешнюю таблицу

стиле.й, то всего лишь вырежьте фрагмент оnисания стилей, расnоложенный между тегами

файл с расширением CSS, наnример gloЬal.css, и свяжите его с вашей веб-сrраницей, исrюльэуя

одну из методик, оnисанных далее.

Создав внешнюю таблицу стилей, вы должны подключить ее к веб-странице,

которую нужно отформатировать. Можно прикрепить таблицу стилей к веб-странице

с помощью НТМ L-тera < 1 i nk> или встроенного в CSS правила @i mport, которое

делает то же самое. Все существующие браузеры обрабатывают эти команды одинаково.

Обе команды позволяют прикрепить таблицы стилей к веб-странице, так

что выбор того или иного способа - Лишь вопрос предпочтения.

ПРИМЕЧАНИЕ-----------------------------------------------Правило

@import может сделать одну вещь, с которой тег <llnk> не сnравится,- nрисоединить

одну внешнюю таблицу стилей к другой. Этот mособ оnисан в nодразделе «Исnользуйте несколько

таблиц стилей~ раэд. «Организация стилей и таблиц стилей» гл. 15.

Связывание таблиц стилей с НТМL-кодом

Наиболее распространенный метод добавления вн~шней таблицы стилей в небстраницы-

использование НТМL-тега <1 ink>. Синтаксис применения этого тега

Внешние таблицы стилей 51

немного различается в зависимости от того, чем вы полъзуетесъ -· HTML или

XHTML ..

Пример для HTML:

КодХНТМL:

Единственное отличие состоит в том, как тег <l i nk> заканчивается. В HTML тег

связывания - пустой элемент, поэтому у него есть только открывающий тег и нет

соответствующего закрывающего тега</ l i nk>. В XHTML для закрытия тега необходимо

добавить слэш (!).

В остальном теги связывания в HTML и XHTML идентичны и требуют наличия

трех атрибутов.

О re l =" sty l esheet" - указывает тип ссылки; в данном случае это ссылка на таблицу

стилей.

О type="text/css"- сообщает браузеру, данные какого типа ему ожидать; в рассматриваемом

случае - текстовый файл, содержащий СSS-код.

О href- указывает местонахождение внешнего СSS-файла на сайте. Значение

этого атрибута- URL-aдpec, который будет отличаться в зависимости от того,

где вы храните СSS-файл. Он работает так же, как атрибут s гс при добавлении

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

вёб-страницу.

(08~----------------------------------------------------

к веб-странице можно присоединить множество таблиц стилей, добавляя несколько тегов <link>,

каждый из которых указывает на свой файл таблицы стилей. Эта методика - отличный способ

организовать СSS-стили ваших веб-страниц. Подробнее об этом читайте в раэд. «Организация сти-

лей и таблиц стилей» гл. 15. ·

Прикреппение таблиц сrипей с испопьзованием CSS

CSS имеет встроенный способ привязки внешних таблиц стилей к коду HTML -

правило @import. Его нужно добавить в НТМL-тег <style>. Например:

@import url(css/global.css);

</style>

В отличие от НТМL-тега <l i nk> правило @import -языковая конструкция CSS,

обладающая некоторыми несвойственными HTML качествами.

О Чтобы выполнить привязку к внешнему файлу CSS, нужно использовать url

вместо href и заключать путь к СSS-файлу в круглые скобки. Так, в рассмотренном

выше примере css/gl оЬа l. css -путь к внешнему СSS-файлу. Кавычки,

в которые заключен URL, необязательны. Таким образом, url (css/global.css)

и url ( "css/gl obal. css") будут работать одинаково.

52 Глава 2. Соэдание стилей и таблиц стилей

О Посредством ~скольких правил @import, как и с помощью нескольких тегов

<l i nk>, можно присоединить любое количество внешних таблиц стилей:

@import url(css/global.css):

@import url(css/forms.css);

</style>

О После правила @import можно добавлять обычные СSS-стили, если, например,

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

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

уже описанный во внешней таблице стилей.

ПРИМЕЧАНИЕ------------------------------------------------

0 стилях, их nриоритетах и взаимодействии, а также о том, как создать стиль, который отменяет

другие ·стили на веб-странице, читайте в раэд. «Уnравление каскадностью» гл. 5. Вы можете даже

создать внешний СSS-файл, который содержит только nравила @import, выnолняющие nривязку

других файлов внешних таблиц стилей. Такая методика часто nрименяется в целях уnорядочения

и систематизации стилей сайта (см. nодраздел «Исnользуйте несколько таблиц стилей» раэд. «Организация

стилей и таблиц стилей» гл. 15). ·

Например:

@import url(css/global .css);

@import url(css/forms.css):

р { color:red: }

</style>

С точки зрения синтаксиса нужно поместить все правила @import перед СSSстилями,

как показано в примере, но, если вы забудете об этом, ничего страшного

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

после СSS-стилей. Однако все существующие браузеры пренебрегают этим

правилам-ограничением.

Так какой метод лучше использовать? Хоть оба они работают, использование

тега <l ink> встречается чаще. В некоторых случаях правило @import может замедлять

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

посетите страницу www.stevesouders.com/Ыog/2009/04/09/dont-use-import). Поэтому,

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

<l i nk>, подробно описанный в этой главе.

Обучающий урок: создание первых стилей

В этом разделе речь пойдет об основных приемах создания СSS-стилей, в том числе

встроенных, а также внутренних и внешних таблиц стилей. По мере прочтения

книги на практических примерах вы научитесь создавать различные СSS-стили,

от Простых элементов дизайна до полноценных СSS-ориентированных макетов

неб-страниц.

Обучающий урок: создание nервых стилей 53

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

по адресу www.sawmac.com/rss2e/. Перейдите по ссылке и загрузите ZIРархив

с файлами (подробное описание процесса разархивации файлов содержится

на указанном сайте). Файлы каждой главы находятся в отдельных папках, названных

02 (для второй главы), 03 (для третьей) и т. д.

ВНИМАНИЕ----------------------------------------------------

8 оnисанном архиве содержатся nаnки с nримерами для всех обучающих уроков, nриведенных

в этой книге. Скачайте его, чтобы в дальнейшем выnолнять задания, предлагаемые в конце каждой

главы.

Затем следует запустить программу редактирования веб-страниц, которой вы

пользуетесь, будь то простой текстовый редактор (Блокнот или Text Edit) или программный

комплекс для визуального проектирования (Dreamweaver или Microsoft

Expression Web Designer) (перечень программнога обеспечения приведен во введении).

ПРИМЕЧАНИЕ-----------------------------------------------Если

вы nольэуетесь Dreamweaver, то вам nригодится оnисание применения этой nрограммы для

создания стилей и таблиц стилей, nриведенное в приложении 2. Dreamweaver, как и другие nрограммы

для редактирования НТМL, nозволяет работать с НТМL-кодом в чистом виде, nереключившись

в режим его nросмотра. Именно это и nотребуется в ходе обучающего урока.

Соэдание встроенного стиля

Размещая стилевые команды CSS (см. разд. «Что такое стиль~ этой главы) непосредственно

в НТМL-коде страницы, вы создаете вcmpoe1t1tьtЙ стиль. Встроенные

стили не обеспечивают экономии ни времени загрузки веб-страниц, ни трафика,

поэтому нет никаких положительных доводов для их использования.

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

одной неб-страницы, можно прибегнуть к встроенным стилям. (Например,

создавая НТМL-форматированные электронные письма, лучше всего использовать

внутренние стили. Это, к слову, единственная возможность заставить CSS работать

в Gmail.) Если вы все-таки применяете этот метод и хотите, чтобы стиль работал

должным образом, то уделите особое внимание размещению стилевых команд

внутри тегов, которые следует отформатировать. Рассмотрим пример, наглядно

демонстрирующий, как это делается.

1. В своей программе редактирования веб-страниц откройте файл 02\basic. HTML.

Этот простой и изящно написанный ХНТМL-файл содержит несколько заголовков,

абзац, маркированный список и информацию об авторском праве в теге

<address>. Начнем с создания встроенного стиля для тега <hl>.

2. В открывающем теге <hl> укажите свойство стиля style="color: #C7M8D: ".

Тег должен выглядеть следующим образом:

54 Глава ____________2. Создание стилей и таблиц стилей

Атрибут sty1 е относится к HTML, а не к CSS, поэтому после него идет знак=,

а значение атрибута - весь код CSS - заключено в кавычки. Код CSS - это

только та часть, что находится в кавычках. В данном случае вы добавили свойство

со 1 or, которое воздействует на цвет текста, и установили его значение равным

#C7M8D, то есть шестнадцатеричному коду, определяющему серовато-коричневый

цвет (об изменении цвета текста читайте в подразделе «Придание

тексту цветового оформления» разд. «Стилизация текста>> гл. 6). Двоеточие

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

свойства. Далее проверим результат в браузере.

3. Откройте страницу bas i с. HTML в браузере.

Запустите любимый браузер и выберите пункт меню File ~ Open (Файл~ Открыть)

или нажмите Qri+O и выберите файл basic. htm1 в папке 02 с обучающими

материалами на своем компьютере (можете просто перетащить этот файл

с Рабочего стола - или из другого места, где вы сохраняли обучающие материалы,

- в пустое окно браузера). Во многих НТМL-редакторах имеется функция

Preview in Browser (Предварительный просмотр в браузере), которая с помощью

определенного сочетания клавиш или пункта меню открывает страницу для

просмотра в браузере. Посмотрите руководство программы редактирования

HTML: возможно, в ней есть команда, которая сэкономит ваше время. Открыв

страницу в браузере, вы видите, что заголовок стал серовато-коричневым.

Встроенные стили могут содержать более одного свойства CSS. Добавим в тег

еще ОДНО СВОЙСТВО.

4. Вернитесь в свой НТМL-редактор. После точки с запятой за кодом #C7M8D наберите

font-size