Development,malntenanceand upd,;tting

Example StyleGui

Тhe following dooJlnenll, а style gulde t

.nd contlnulng development of "'е {QIe

overall fjJestruaure.Пllmi ng con..-entions

resources used inте constnJetion ofthis

ma i n~l n the life spanof thisяее. it is1т

development,malntenanceand upd,;tting

Человек - суще ство люб о пытн о е . Людям нрав ится в ертеть п редметы в р уках и разбирать

их на части . Когда я недавно купил но венький iMac G5, то раз обрал его на части ,

пр ежде чем прочитал инструкцию. Люди стремятся в с е поня ть . О н и в с е гда пытаются

создать мысленную мод ель предмета и его п ов еден ия . Ч аще всего чело век немедле н но

при с туп ае т к экспериментам, а к инструкциям и описаниям обращается только тогда,

когда что - либо не получается .

Лучший способ начать изучение табл иц CSS (Cascading Sty le Sheets - каскадные табл

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

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

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

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

структуриров анные коды (X)HTML и CSS.

Напомин аем , что терми н "(X)HTML"обозначает л ::Эбой из этих двух языков : как XHTML,

та к и HTML. "

В главе рассматриваются следующие вопросы :

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

• лучши е методики кодирования ;

• распространенные ошибки коди ро вания ;

• типы документов, переключатель DОСТУР Е и р ежимы б раузера;

• назначение стилей ;

• каскадирование, специфичность и наследован ие .

Структурирование кода

Большинство людей не думают о фундаменте дома, в котором они живут. Однако без

\ прочного фундамента не может существовать ни одно строение. Для любого документа ,

фундаментом является его структура. В книге рас см атри ваются современные методик и

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

де й ств и тел ьн о го до кумента (X)HTML.

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

кода (X)HTML важна для применения методик CSS. Вы узнаете, как можно вложить

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

Смы~ловая разметка

В первы е годы своего существования сеть WWW была не более ч ем набором связан-

ных до ку м е н то в, форматированных и структурированных с помощью HTML. По мере

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

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

и полужирные шрифты для создания желаемых визуальных эффектов. Таблицы HTML

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

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

прямому назначению, а для создания пробелов. Довольно быстро средства HTML потеряли

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

дескр и пто р о в (ри с . 1.1).

8 kO 6 view-source: - Source of: httр : //\vе ь. а rсh ivе.о rQ /wе Ь/ 2 0000 81S 0S 2 б4~а~Cj);'':;'~2. соm /

</-------------- 11 МAIN сОНТБNТ--- - -- - - -- - - - - - --->

<t:able widt:b=" 4 17 " cellspacing="O" cellpadding-" 4 " border=O>

<а bref- " / s е с t i о n s / роl i t i с s / D а i l уN еws / D ЕМСVN оре n О О О 8 1 З . Ь tm l " >

<img -

src- "ht tp , / / a 4. g . a kama i t e c b . ne t / 7 / 4 / 622 / 00 1/ ab c news . go , c om/me d i a / Fr o nt Page / i

width-200 height=150 у&расе = О h&расе= З border=O alt= "No t Look i ng Bac k "

align=l e ft></a>

<а hrеfс " / s е с t i оn s /ро1 i t i с s / Dа i l уN еws / DЕМСVN_о р е n О О О 8 1 З . Ь tml " >

Passing t he Torcb

</a>

</b></font><br>

<fon!: face-ge nev 8, a r i a1 , he1ve t i c a &i8e-2>Bi11 C1inton gave а s pir i ted

defense of Ыв eigh!: years in o ff i ce and touted t he qual i fications o f hi s

vice pres ident, А1 Gore, "Ь о wants to take Cli nton&/ 0146 ;s р1 асе in t he

White Ноиве. Get f ull cover age a nd <8 href

= "http , / /abcne ws .go.com/sec t i o ns /po l i t i cs! Dai l yNews/DEMCVN_ t r a ns_ c 1i nt o nOOOB _

а transcript</a>.</ f o nt> ; ..,........

4 1" /.

Рис. 1.1. Разметка са йта www .abcnews . go . com от 14 августа 2000 года; таблицы

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

полужирные шрифты; код плохо структурирован, его трудно понять

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

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

понять их код было все труднее. Чтобы хоть как-то с о владать с э т им нагроможд е нием

деск р и пто р о в , были разработаны инструменты WYS1SYG (What Уои See Is What Уои

Get - что видишь, то и получишь). К с ожал е н ию , вме сто то го чтобы упростить с итуацию,

инструменты WYS1WYG только усугубили ее : они допо лнит ельно до ба в ил и в

код HTML огромное количество дес кри п то р о в, ПОfIЯТЬ к оторые стало еще труднее. Н а

сты ке тысячелетий типичная Web-страница была настоль ко сложной , что редакти р овать

ее вручную было практичес ки невозможно из-за риска разрушить код WYS1WYG.

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

И тогда появи ли сь таблицы CSS. Б л а годаря им во зни кл а во з можн о ст ь уп ра вля т ь

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

ента от его содержимого . През ентационные де скри птор ы, как и де скрип тор шрифта ,

теперь можно отбросить и управлять версткой с помощью правил CSS, а не табл иц HTML.

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

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

ю . Появилась возможность п ер еопр еделять ст ил и б р аузе ро в по у м ол ча н ию , сл едова тел

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

ЖИРНыми. Списки теп ерь н е обязательно р азмечать круглы ми то ч ками , а цитаты мо жно

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

и ПРИм енять эл еме н ты (X)HTML, основ ывая сь не н а их в н ешн ем виде, а н а то м, кавовы

и х функции (рис. 1.2).

Р азметка считается " смысловой " (друго е название - "сема нт ическо й ") , е сл и н аз наче ни

е эл ем енто в на стра н и це н е противоречит и х назнач ению в с пец и фикация х (X)HTML.

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

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

н а стра н и це нужно изм енить цитаты . Е сли о н и размеч ены ко р р е ктн о , то, ч то бы най ти

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

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

цитаты будет намно го труд н ее.

~H:),(:~ view-source: - So u rceof~:tp : 1 / abC'1.e":,,o ;~~ . coтl О

" <di vi d== ! ~ ma i n в с о гу " c las s= ~ c l e a r t h i 8 "> -

<d i v i d="ma i ny hot o " a l ign=" r i ght "> 1'"

< а bref= " / I nt e r na t i o na l / wi r e St o r y ? i d=9 4705 7">< img widtb= " 126 "

src= "ht t p : //a. abcnews . c om/images/lnternational/BAG1200717 1046 . j peg "

id= "BAG120071 71046 . j pe g " height =" l BB" I>< / a>< / d i v>

< Ь 2 c l a s s =" r e pl a c e ">

< а bref=" / r nt e r na t i o na l !wi r e St or y7i d=947057 ">I r aq 90тЬ То11 Grows; New Ж Attacks Kill 22< / а>

< / Ь 2>

<p>New s uicide bombings ki11ed a t least 22 people i n t he ВачЬда д a r ea оп

В и nдау, while relatives s trug gled t o identify ch a r r e d bodies from а fie r y

s uicide attack near а shiite mosque in Musayyib t ha t • . . < / Р>

</ di v>

</ d i v> ...

"- т

":.c r; .~- _ .I ,"'~ ., ...r~ ..... .-. .. 4J ..., .... _~1

Рис . 1.2. Ко д современн о й версии са йта www. abcnews . go . с от; документ хорошо

структуриро ва н, код легко понять; по сравнен ию с рис. 1.1 код энач ительн о улучш ен

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

до ку м е н та программами и устро йствами . Например , п о и ско вые м ехани змы могут распо .

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

д руги м эл е ме нтам стра н ицы . Устройств а чтения с экран а могут и спользовать з а голо в ки

как до п ол н и тел ь н ое ср едство на в и г а ц и и по странице.

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

про стой спосо б присво ения стиле й эл ем ентам разных типов . Она структ у р и р у ет д о ку мен

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

стил и можно присваивать непосредственно элементам , не прибегая к идентификаторам,

зас о ряющи м код .

С и нта кс и с (X)HTML сод ержит богатый набор смысло вых элементо в , напр имер:

• hl, h2 , h З;

• и 1 , 01, d1;

• s trong, еm;

• blockquote , c i te;

• abb r ,ac r onym, c ode;

• f i e1dse t ,legend, labe l ;

• caption, t head, tbody, tfoo t .

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

е назнач ение.

Идентификаторы и имена классов

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

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

Язык (X)HTML был соз дан как простое средство разметки документов, а не как язык

интерфейса. Из - за э т о го в синтаксисе (X)HTML отс утствуют элеме нты, специально

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

Средствами XML вы можете создать для этого собств енны е эле м е нты , однако в настоящее

вр емя такой подход по многим причинам непрактичен.

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

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

иф и като р а или им ени класс а . Таким способом вы до ба в и те в до ку ме н т до пол н и тел ьную

структур у и устан о в ите в коде "зацепки" для ваших стиле й. Например , в простой список

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

, что списо к использу ется в качестве главной пан ели нави гации .

<l i><a hr е f ="# " > Н ачальн ая < / а> < / l i >

<l i><a href="# ">KoHTaKTbl</a></ li>

</ ul>

Значение ID и спользуется ДЛЯ идентифика ции отд ельно го элем е н та стран ицы . Оно

долж н о бы ть уникальным . В приведенном выше прим ер е оно иден тифицирует элем е нт

ul как с редств о н авигации по сайгу З начения ID полезны для и д ентификации устойчи в

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

Кро м е того, з н ачен ие ID может быть полезным для идентификации отдельного, чем - либо

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

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

кон цеп ту ально похожим эле ме нта м. Если форм а контактов и детал из ац и я контактных

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

и мя, н априм ер contac t . Однако делать так н е сл едует, поскольку впоследствии вы бу дете

при с в аивать эл еме нтам стили на основ е их назн ач ен ия . Намного проще применить

разны е им е на , нап р и м е р contactForm и contactDetails .

Один идентификатор можно присвоить только одном у элеме н ту на странице, а имя

кл ас са - любому количеству элементов . Классы в ес ьма пол езны ДЛЯ идентификации типов

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

, по священ ной новостям, есть даты каждой стать и . Тогда вместо присвоения датам

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

Э то буд ет кл асс дат.

При с в аив ая им ена идентификаторам и классам , в ажн о выб и р ат ь их таким образом,

чтоб ы о н и соо б щал и о назн аче нии элементов и как можно меньш е з ав и с ел и от презента ЦИ

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

ОЛ оженной справа , имя i d=" rightHandNav " . Однако впослед ствии вы можете пер ем

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

р аС С О гл асованными. Чтобы избежать этого, луч ше с са м о го начала присвоить элементу

п аи ел и ИМЯ subNav или s e c onda ryNav. Эти имен а объя ________________сняют, что делает эл е ме нт, а не как

Он пр еДставл ен или расположен . То же справедлив о и для им ен классов . Пр едп ол ожим ,

н ужно , чтобы все сообщения об ошибках ( еггог) вынодили сь красным цветом (red) . Тогда

классу с оо б ще н и й об ошибках лучш е пр исвои ть ИМЯ e r ror , а н е red (рис. 1.3), поскольку

В п оследст в и и может по надобиться изменить цв ет.

При выборе идентификатора или класса обращайте вним ани е на чувствительность

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

от табл и ц CSS, но и от языка разметки . При и сп ользовании XHTML имена идентифи катор

о в и классов чувствительны к р егистру, а при исп ользо ван и и HTML - нет. Чтобы

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

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

ы к регистру. Мы рекомендуем всегда при менять соглашение " Сагпе ] " , т.е. использо вать

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

щи х в имя.

Плохие имена :

red (красн ый)

leftColumn (л евая коло нка )

topNav (верхн яя на в игационная панель)

firstPara (пер в ый абз ац)

Хорошие имена :

е ггог ( ош и бка)

secondaryContent (доп ол н ител ьное содержимое)

mainNav (гл а в ная нави гацион ная пан ел ь)

intro (введение)

Ри с . 1.3. Хорошие и плохие идентификаторы

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

д о в ол ь н о часто прим еняют неправильно. Начинающие ди зайнеры CSS д о б а вля ют

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

У р анних р едакторов WYSIWYG тоже была "ма нера" присваивать классы при каждом

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

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

кл асс о в . Иногда такую манеру работы н аз ыв ают " кла сс и ц измо м " . В сущности, классицизм

так же п лох, как и в ерстка на основе таблиц HTML, поскольку в обоих случаях

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

Р ассмотрим при м ер кода .

<hЗ с l а s s = l п е w s Н е а d " > С а й т Zel dman . com о бно в ле н</ hЗ>

<р cl a s s="newsText ">

Джеффр и обнов ил не ск ол ьк о с т рани ц посл е . . .

< / р >

<р cl as s="newsText "><a hre f ="news .php" class="newsLink">

Допол н и т е л ь на я и н фо рма ци я </ а > </ р>

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

ново стя м (news), с помощью класса , имя кото ро го соде ржи т пр ефикс news . Та к сдела н о

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

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

каждо го элс ме н та в с е эти д о п ол н и т ел ь н ые клас сы н е нужны . Вместо них можно весь

блок новостей идснтиф ицировать с помощью дес криптора di v и класса news. По сле это го

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

, как в прив ед енном ниже примсре .

< h З>С а й т Zeldman .com об но вл е н</ hЗ>

< р> Дже ф фр и обновил несколь ко с т р а н иц посл е . .. </р>

< р><а h rе ________________f= "п еws.рhр " > Дополн ительная и нф ормация< /а> < / р >

</ div>

Устранение дополнител ьных клас со в помогает упро стить к од и у ме н ьшить р азмеры

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

главе. Следует отметить, что полагаться только на имена классов не обязательно . Обычно

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

п о какой -либо причине неудобно . Мы рекомендуем не злоупотреблять именами

классов. Если документ (X)HTML содержит слишком много классов , скорее всего, это

указывает на то, что он плохо структурирован .

Дескрипторы div и span

Элементы div предназначены для добавления структуры в документ. Многие дизайнеры

ошибочно полагают, что элементы div не имеют семантического значения (т.е.

с мысловой нагрузки. - Примеч. рвд .). Однако это не так . Название div означает division

(ра зделение). В полном соответствии со своим названием элементы div предназначены

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

содержимое документа в элемент div и присвоить ему имя id="mainContent ", то этим

в документ будут ясно добавлены структура и смысл . '

Чтобы свести объем разметки к минимуму, элемент div следует применять , только

если для выделения области не подходит никакой другой элемент страницы. Например,

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

элемент div, как в приведенном ниже примере.

<d i v id="mainNav" >

<ul>

< l i> Н а ч ал ь н а я< / l i >

<li>O Hac</li >

<l i>KoHTaKTbl</ l i>

</ul>

</ d i v>

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

к списку.

<u l i d="ma i nNav ">

< l i> Н а ч а л ь н а я< / l i >

<li>O иас </li >

<l i>KoHTaKTbl</ l i >

</ ul>

Применение слишком большого количества эл еме н то в div иногда называют "дивитизмом''

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

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

табличные структуры, к которым они привыкли, с помощью дескрипторов d i v.

Однако это всего лишь замена одних лишних дескрипторов другими, такими же лиш ними

. Вместо этого дескрипторы div следует применять для группирования логически

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

в презентационных целях.

Дескрипторы div используются для группирования блочных элементов . Для группирования

или идентификации строковых элементов можно и спользовать дес кр и п торы

е р ап , как в приведенном ниже примере .

<h2>Whe r e ' s Durs t an?</h2 >

<P>Publ i s he d оп <spa n c l a s s =" da t e ">March 2 2п~ , 2005</spa n>

Ьу <s pa n c l ass="aufhor ">Andy Budd</ span></ p>

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

реже , чем бл очных , по этом у де скр и пто ры span встреч аются на стр а н и цах н е так ч асто,

как div. Чаще всего де скрипторы span применяются для создания специальных эффек тов,

н апример дл я з амены изображения. В э тих случаях дес кр и пторы span использ уются

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

В аш а ц ель - сделать код как можно более чи стым и осмысл енным . Однако из б ежать

добавле ния деск р и пто ров d i v и span, н е имеющих смысло в о й нагрузки, иногда н е удается

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

н адеять ся , ста ндарт CSS 3 пр едоставит нам больш е контроля над докум ентами . А пока

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

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

нужно только при наличии вес к и х н а то причин.

Существуют различные версии стандартов С55 . Всегда важно учитывать, какая версия

и сп ол ь зуется в разрабатываемомдокументе .~ерсия С55 } стала рекqмендацией B~OHцe

1996 года. Она содержит лишь 'базовые св ойства элементовстра НИЦЫ, такие, как шриф т,

цвет, ширина п олосВ С55 2 добавлен ы новые концепции, в частности позиционирование

элементов и селекторы различных типов (дочерние, смежн ые и универсальные). Во

время работы над этой к ни го й- ста нда рт CS5 2 все еще являлся последней рекомендуемой

версией (5S, несмотр'Я на то';!то рекомеl:iдуемой она чала уже довольно Давно,т.в

199'8гoдy. , / "' 2~ '11. " " ••,•• ,'.1 - с'.' . .

В ко~сorjциуме WЗС'( Wогld Wid~'Web Consortium) в~емя течет медленно. Работа над

С553 началась еще в прошлом тысячелетии, тем не менее до выхода рекомендуемой

версии, по нашим сведениям, все еще доволвно далеко. Чтобы обл)гl.jИТЬ разра?от- .

ку брау ~еров, версияСS5 3 разб~та на неСК9ЛЬКО модулеq ; Консорциум предпрлагает

перевести некоторые. из них в категорию рекомендуемых независимо от других :Версия

С553 содержит мно го вдохновляющих новинок, включая средства модульной многоколонной

верстки . Селекторы модулей верстки близки к 'з а ве р ш е н и ю ..возможно, они

ста н ут рекомендацией уже в 2006 году. ,, " . .

' , ~'jC .... . ,. ., ' " , " , J~ : -~' " "' _ -~:

Из -за большого гiPОtv,l~?Куткаl3ремени межДу С55 2 и С55 382002 году к нсорциумна-

чал разработку промежУточной версии CS5 2.1.В ней исправлены ошибки версии CSS2

и п редоставлено более аккуратное описание реа лизации С55 в браузерах . Версия С5 5 2.1

бл изка к завершению "однако рекомендуемой она cтaHeT~CKopee всего злишьлв KqHQe

2006года ..В кни ге фактически . ис;пq~ьзуется версия C5S 2.1.' поскольку ol:ia бол ее~кку ~,

ратн о r:tр~д Ставляе т теКу щее состоя ние стандарта ( 5S.' . . , .

Типыдокументов,переключениетипов

документа и режимов браузера

Схема DTD (Document Тур е Definition - о пределе ние ти п а до ку м ента ) пр едс тавля ет

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

еш ено в кон кретн ом доку менте XML или (X)HTML. Брауз еры и спользуют эти прав ила

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

Брауз еры узн ают, какая схема DTD и , следователь но, в ерсия (X)HTML и спольз у ется ,

проанализировав о бъявл ение ООСТУРЕ , р азмещенное на стр анице.

О бъя вл ение О О СТ У Р Е п редставляет с обой стр о ку или д ве строк и кода, размещенные

в н ачал е до кумен та (X)HTML и описыв ающие используемую DTD. На пр и м ер , пр и в еден

н о е ниж е объяв л е ние DО СТУРЕ оз нач а ет, что н а стран ице используется DTD в ер сии

XHTML 1.0 St rict.

< !ООС ТУРЕ html PUBLIC "- / / W3C/ / OTO XHTML 1 . 0 S tr ic t / / EN "~

" ht t p: / / www. w3. 0r g/ TR/ xht m11/ 0TO/ xht m11-st r i c t . dt d" >

О бъявл ен и е ОО СТ У РЕ обыч но содержит адрес URL и спольз у е м ого файл а DTD. Если

сх е ма DTD стандартн ая , браузеры чаще в сего н е читают этот фа йл .

Проверка на действительность

Код документа (X)HTML должен быть н е только си нтаксически правильным (syntactically

coггect ) , но и действител ьным (valid) . Е сл и код недействителе п, браузер попытается

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

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

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

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

б ыть и звест н а схем а DTD, испол ьз у емая в докуме нте . Она предоставл я ется б раузе ру в

объявлени и ООСТУРЕ .

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

п р о верки . Для этого м ожно приме нить офиц и ал ьную про гр амму концерна W3 С, лю бую

к оммерч ес кую програ мму ил и н адстро йку п р ов ер ки ( н апр им ер , Firefox Developer

Extension). Многи е редакто ры (X)HTML содержат встроен ные п р оцедуры про в ер ки на

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

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

вам, действителен ли документ, и если нет, то п оче му.

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

о б н ар ужит ь о шибки в коде доку мента . Про в еря т ь доку мент н а действ ител ь ност ь р еком

е н ду ется ка к , МОЖНО чаще с с амо го нач ала р азр або т ки. Одн а ко п р о ве р ка н а действительность

не я вля ется п а н а цеей , Многи е хорошие стр ани цы не пр оходят п роверку из -за

устарев шего с одерж имого. Поэто м у, как ни в ажна про верка , во м н оги х случаях ну жно

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

В настоя щее ' в рем я Web -дизайнерам доступны м ногие инструменты проверки на дейавительность

. Вы можете проверить свой сайт в сетевом режиме, подключившись к узлу http :/ / validator

.w3. org/ И введя свой URL. Одна ко если проварка еыгюлняется ' часто ( что . нааО -.

ятельноре комендуется делать ), то вводить кажд ы й раз URLбудет утомительно. М ы предпо - .

читае м использовать небольшой сце нарий на Java5cript, х ра н я щи й с я в каталоге предпочтени й.

Щелчо к на кн опке сценария за пускает провер ку программой концерна W3( и вы водит, результаты

. Н айти та кой сценарий, как и многие другие полезные инструмент",1Web-дизайна, можно

нанашемсаЙте www. аП УЬUdd. соm/Ьо о kma;:k 1 е t s l. . ' .,~ ', ' . •

Если вы используете програм му Firefox, то можете загрузить и ин сталлировать богатый на бор

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

пр о в е рк и на дейавительноаь , наша любимая надстройка WеЬ DevelopersExtension. Она не

Тол ько проверяетна дейавительноаь файлы (X)HTML иС55, но и позволяет выполнить мно го

ДРУгих полезны х операций, на пример отключить та бли цы стилей или даже редактировать

стил и в браузере . Надстройку Web Developers Extension можно за грузить состраНИЦЫ , ht tр : '/ / .

chrispederick . com/work/fire fox/webdeve1oper/. Она оченьполез на'при разработке таб-

лиц ( 55 с помощью программы Firefox. , . .;- "

Кроме ТОГО, со стра н и цы http : / /tinyurl . com/7mnyh можно загрузить специал ~ную панель

и нарумен!ов 'дляб раузера Internet Explorer б .О. Она не та к богата , какпанель инарументов

Firefox, те м :не менее весьма полезна. , " ''' ' ' . ,

- --.....'"-................__~b ~'••!,' .. ' ,~~-..O.~

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

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

Режимы браузера

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

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

б р аузе ро в прим енили д в а р ежима вывода: стандартный (standards) ине стандартный

(quirks) . В ст а нд артн ом режиме бр аузер выводит стр аницу в полном с о от в ет ст в и и со

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

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

бр аузер ов, таких, как Internet Explorer 4.0 или Netscap e Navigator 4.0, что позволяет

предоставлять п осетителю устаревши е сайты .

Наибол е е оч евидно е отличие м ежду стандартным и нестандартным режимами состоит

в с п о с обах вывода эле менто в патентованной модели контейнеров Windows браузерами

Internet Explorer. Ко гда IE 6 появил ся на рынке, в нем было введено использование

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

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

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

кон тей неро в устарев ших мод ел ей IE в н естандартном режиме .

Д ру г ие , мен е е з а мет н ы е отличия сп ецифичны для бр аузеров раз личных типо в.

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

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

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

н а еди ни цу и т.д . .

Браузеры Mozilla и Safari могут работать еще в одном , третьем режиме, который называет

ся " п оч ти стандартный " . От стандартного он отличается лишь некоторыми малоз

начител ьным и правилами обработки таблиц .

Переключение типа документа

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

о бъявл ени е DOCTYPE. Если объявл ени е прив едено, режим выбирается на основе з а данной

схемы DTD. Если документ XHTML содержит полное объявление DOCTYPE, то

бр аузе р вы в ед ет стр а н и цу в ста ндарт н ом р ежим е. Если объявлени е DOCTYPE д о кум е н та

HTML 4.01 содерж и т с тр о гую (strict) схему DTD, страница будет выведена тоже в

стандар т н ом режиме. Объявл ение DOCTYPE, содержащее переходную (transitional) схему

DTD и адре с URI , з адае т вывод в стандар тн о м р ежим е . Если же объявл ение DOCTYPE

с одержит п ер еходную схе му DTD и не содержит адрес URI, страница будет выв едена в

не ста ндартн о м р ежиме . Если до ку мент HTML или XHTML плохо сфо рми ро ван или н е

с одержит объявления DOCTYPE, он будет выв еден в нестандартном р ежим е .

Эффект выбор а р ежи ма выво да на основе наличия объяв ления DOCTYPE называ ется

"пе ре кл юче н ием т и п а до к у ме нта". Прив едеиных выше правил придерживаются не

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

п ер е ключ ен и е тип а до ку мен та. Эр ик Мейер (ht t p : / / me yerwe b . com/er ic/dom/dtype/

dtype-grid. html ) ис сл едов ал этот вопро с и с оздал диаграм му использования различ ных

режимов вы вода разными б раузе ра м и в з а в ис и м о сти от объявления DOCTYPE.

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

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

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

css непра вильное объя вление DOCTYPE приведет к тому, что страница буд ет выведена

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

HTML важно добавить полностью сформированное объявление DOCTYPE на каждую

страницу сайта и применить строгую схему DTD. Ниже приведены примеры полностью

сформиров анных объявлений DOCTYPE.

< !DOCTYPE HTML PUBLI C " - / /W ЗС / / DТ D HTML 4 .0 1//E N " ~

" h t t р : / / w w w. w З . о r g / Т R / h t m 1 4 / s t r i с t. d t d" >

< ! ООС Т У РЕ html PUBLIC~

" - / / W ЗС/ /ОТО XHTML 1. О Transition al / / E N " ~

"httр :/ /www . w З . оrgjТR / х htm11 /DТ D / х ht ml1- t rапsiti оп а l . d t d " >

< ! О О С Т У Р Е htm1 PUBLIC "- / /WЗ С / /D Т D XHTML 1 .0 St rict/ /EN " ~

" h t t р : / / w w w . w З . о r g / Т R / х h t m 1 1 / D Т D / х h tm 1 1 - s t r i с t . d t d" >

Многие редакторы HTML добавляют объявление DOCTYPE на страницу автоматически

. При создании документа XHTML редактор может также до б а в и ть объявл ение XML

перед объявлением DOCTYPE. Ниже приведен пример объявления XML.

<? xml version="1 .0" encoding="utf-8 "?>

Объявление_________________XML - необязательный компонент файла XML. Оно о пределя ет используемую

версию XML и формат кодирования символов. К сожалению , если объявлени е

DOCTYPE не является первым эл емен то м страницы, браузер IE 6 автоматически переклю чается

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

как документ XML, она не должна содержать объявление XML.

Присвоение стилей

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

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

CSS, некогорому элементу или элем ентам, нужно каким -либо образом идентифицировать

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

Обычные селекторы

в практике Web -дизайна чаще всего применяются селекторы типов и нисходящи е

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

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

нужно всего лишь поместить в таблице CSS имя эл е м ента (т.е . типа) п еред определ ени ем

СТиля, как в приведенных ниже при мерах.

Р {color : black;}

а {text -decor a t ion : under1ine ; }

h1 { font ~ w e i gh t : b old;}

Нисходящие селекторы позволяют присваивать стили элементам, вложенным в задаНные

элементы или группы элементов. Нисходящий сел ектор создает ся п утем добавления

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

ПРИсваиваться только гиперссылкам (дескриптора), вложенным в элементы с писков

(дескриптор li).

32ГЛАВА 1

Следовательно, данный стиль не повлияет на гиперссылки, расположенные в простых

абзацах (дескриптор р).

l i а {t e xt - de c orat i on : unde rl ine ; }

Рассмотренные выше типы селекторов предназначены для присвоения стилей всем

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

селекторы идентификаторов и классов. С их помощь можно присваивать

ст ил и эл ем е нтам, имеющим указанно е имя идентификатора или класса. В определении

с ел е кто ра идентификатора используется символ #, а в определении селектора классов с

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

шрифт эл ементу i nt r o, а второй задает вывод всех элементов класса dat e Pos t ed зеленым

цветом.

#int ro {f on t - weight : bo ld : }

. da t e Pos t e d {c olor : gr een ; }

< р id = "i t rо "> Некото рЬ!Й т ек с т < /р >

<р c l a ss="datePos ted ">2 4 янв аря 2006 г о д а < /р >

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

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

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

з а гол ов ку. Между тем существуетболее простой и элегантный способ решения этой задачи

. Разные области страницы можно заключить в элементыdiv, а затем присвоить стили

эл е м е н та м div на основе идентификаторов, как в приведенном д ал е е примере . Чтобы

стили присваивались только заголовкам h l, используются нисходящие селекторы.

#ma i nConte nt h l { f o n t- si z ~: 1. 8em;}

#secondaryCont en t hl {fon t - s i ze : 1 . 2em; }

<div id="mainConten t ">

<hl > До б ро п ожал о ва ть н а м о й с а й т ! </ h l>

</div>

<d i v i d=" s econdaryConte nt ">

<h l> После дни е н ов о ст и < / hl >

</div>

Приведенный пример прост и очевиден . Тем не менее примененные в нем четыре типа

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

количеству элемен тов . Количество классов должно быть как можно меньшим. Слишком

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

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

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

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

класс или идентификатор их родительскому элем енту, а затем присваивайте им стили I

помощью нисходящих селекторов .

Псеsдоклассы

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

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

и ли ги пе рсс ыл ки . Это можно сделать с помощью селектора п севдоклассов .

/ * При своение си нег о цвета непо сещен ным гиперс сыл к ам * /

a :lin k {co l or :blue ;}

/ * П ри с в о ение зел еног о цвета п осе щенным г и п е рс с ыл к а м * /

a :vis i t e d {color :green;}

/ * Присв оение _________________кр а сног о цвета ги пе р ссылке , н а ко то р ую наве ден

у ка за т е л ь мыши , и ак тив ным гипер ссылкам */

a : hove r , a: a c t i ve {c olor : r e d ;}

/ * При своение кр а сно г о цвета строке таблицы ,

на кот ор ую нав еден ук азат ель мыши * /

tr :hover {bac kgroun d- color : red ; }

/* Пр ис в о е н ие желт ог о цвета элемента м вв ода ,

имеющим в д а н ный момент ф окус * /

i np ut :focus {background-color :yel l ow; }

Ди рект и в ы : link и : v isi ted я вл яютс я псевдоклассами гиперссылок. Их можно

под ключать только к гиперс сылкам. Директивы:h over, : a cti ve и : focus являются

д и н ам и ч ес к им и псевдокл ассами. Теоретичес ки их можно п одключ ать к любому эл ементу.

Одн ако, к сожален ию, ди на м ичес к ие псевдоклас сы в настояще е время поддерживаются

только н есколькими современными браузерами, включая Firefox. Браузеры IE6

обращают внимание н а с електоры: ac tive и : hover, только е сл и они по дключ ены к

ги пер с сыл кам , а с ел екторы : focus игнорируются ими полностью.

Ун и версальный селектор

ЭТО один из наиболе е мощных и наименее популярных т и п о в селект о р о в . Он сл ужит

как бы метасимволом, зам_________________ещающим люб о й до ступ н ый элемен т. Как и метасимвол

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

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

Например, с помощью следующего правила можн о отменить в ы вод по умолчанию внешНих

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

* {

padding : О ;

ma r gi n : О ;

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

СТ Ил из а ци и вс ех дочер н их элементов з адан ного эл емента. Некоторы е ур о в н и насл едова н

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

дополнительные селекторы

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

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

живают н е вс е с електоры . К счаст ь ю, таблицы CSS разрабатыв ались с уч етом оорагной

совместимо сти . Если брауз ер н е понимает селектор, он полностью игнориру ет в с е цравило

. Бл агодаря это му вы можете изощренно стил из о вать и укр ашать свою стран и цу для

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

л ишь б удут о п ущены некоторы е украшения . Не з абыв айте только , что дополнительные

сел екторы н е следует прим еня ть к эле м ентам , кри тич еским для правильно го фун кционирования

сайта ,

Дочерние и смежные селекторы

Первый из дополнител ьных сел екторов - дочерний . Срав н ите : ни сходящий с ел ектор

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

неп осредств енно доч ерн ем у. Дочер н и й сел ектор обозначается символом >. Приведенный

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

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

#nav > li {font-weight : b old;}

<ul id="nav ">

<li>Нача льная</ li>

< li>Услуги

<ul>Дизайн < /li>

<li>Разраб о тка < /li>

< l i > Консульта ция< /li >

</ul>

</li >

<li>KoHTaKTbl</li>

</ul>

Для брауз еров IE 6 и ниже д оче р н и й селектор можно имитировать с помощью _________________унив

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

элем е н то в с помощью нисходящего селе ктор а, а з ате м п ерео пр ед ели ть ст ил и в с ех эле м

ентов , вложе нны х в д о чер н и й эле ме нт . Сл едоват ель но , пр едыдущи й при м ер м о жно

п ер епис ать так :

#na v l i [ f ont - we i gh t : bold;}

#n av l i * {font-weigh t : normal ; }

Стилизовать элеме н т можно также на основе е го бли зо сти к другому эле менту. С помощью

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

у казанному. Смежн ый и указан ный элеме нты должны иметь один и тот же родител ь ский

элем е нт. Смежн ы й сел ектор обознач ается си м вол о м +. С помощью см ежно го селе ктор а

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

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

hl + Р {font -weight : bold;}

<hl>Загол о в о к </h l >

<р>Пер вый абза ц</р>

<р>Втор о й абзац < !р >

С помощью селектора атрибутов элементу можно п р и св а и в ат ь стиль на основе нал

и ч ия атрибута или значения, присвоенного атрибуту Это позволяет применять интере

сные и мощные решения.

При наведении указателя на элемент с атрибутом ti tle большинство браузеров выводят

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

н а а б бр е в и атуру :

<abbr tit l e ="Ca sca d i ng Styles Sheets" >CSS</abbr>

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

дополнительную информацию . Следовательно, не зная об этой возможности, он ее

н е получит. Для решения этой проблемы нужно каким-либо образом отметить элементы,

пр едоставляющие подсказку. Это можно сделать с помощью селектора атрибутов. В данном

примере мы можем на основе атрибута ti t le присвоить элементам подчеркивание

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

об элементе, задав с помощью псевдокласса :hover изменение внешнего вида

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

CSS селекторы атрибутов обозначаются квадратными скобками.

abbr [titl e] {border - bo t tom: l рх dotted #999 ; }

abbr [title ] : hove r {c ursor : help ;}

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

от присвоенных им значений. Рассмотримследующий пример. Сайты, с которыми

страница связана с помощью атрибута rel со значением nofo l low, не получают в рей тинге

Google никаких преимуществ . Приведенное ниже правило выводит изображ ение

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

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

как бы говорит : "Фу, бяка!") .

a[rel="no fo llow" ] {

bac kground-ima ge : url(nofol l ow.gif);

padding-right : 20р х ;

}

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

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

один стиль дЛЯ IE и другой - для более совершенных браузеров, согласующихся

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

рамки . Вместо пунктирной линии выводится штриховая. С помощью селектора

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

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

class, а не селектор класса.

. intro {borde r -styl e : so l i d ; }

[c l a s s =" i nt r o " ] {borde r- s t yl e : dotte d ;}

Н екоторые _________________атрибуты могут иметь несколько з н а ч е н и й , разделенных пробелами.

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

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

КЛЮчевые слова в атрибутах гиперссылокдля определенияотношений между владельца-

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

содержащи х в атрибуте r el ключевое слово friend (друг) .

a [r e l - =" fri e nd "] {background-image : url (friend.gif) ;}

<а hr e f =..http ://www. h i c ks de s i gn . com/ ..

rel="friend met co l l eague " >

Джон Хикс

< / а >

Когда рас смотрен ны е выше сел е кторы CSS 2 будут подд ерживаться большинством

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

ственно снизится .

Каскадирование и специфичность

Даже если таблица стил ей не оч ень сл ожн ая , высока вероя тность то го , что нескольк

о правил б уд ут прим еняться к одному и том у же эл е мен ту. Сп ецифик ация CSS разр

ешает этот конфликт посредством правил каскадирования. Каскадировани е основ ано

на присво ении не которого приоритета каждому пр авилу. Наибольшим приоритетом об - .

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

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

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

а флажок ! i mpor t a nt .

Правила каскадирования определяют следующи е приоритеты:

• пользовательские стили , отмеч енны е флажком! important;

• авторски е стили, отм еченные флажком ! i mp o r t ant ;

• автор ски е стили;

• пользовательские стили ;

• стил и по у молч ан ию брауз ера или устро й ств а пользователя.

После ка скадирования пр авила уп орядочиваются на основ е специфичности селекторов

. Прави ла с более сп ецифичными селекто рам и переопр еделяют правила с м ен ее

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

приоритет им е ет правило, определ енн ое посл едним .

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

Для вычисл ения специфично сти правил каждому т и пу с ел екторов присво ено числовое

з н ачен ие. Спец ифи ч н ость правила вычисля ется путем суммирования з начен и й кажд

ого его селе кто ра . К сожал ению, с пецифи чность вычисляется н е в числовой систем е с

основ анием 1О , а в си стеме с н еопредел енно выс о к и м основани ем. Это сд елано для того,

чтобы высокоспецифичные селе кторы , так ие, как селекторы идентификаторов , никогда

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

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

специфичность в числовой системе с основанием 10.

Специ фичность селектора разбивается на 4 уровня : а, Ь, с и d.

• Если стиль встроенный , а = 1.

• Значение Ь равно общему кол ичеству селекторов идентификаторов .

• Значение с равно кол и че ству классов , псевдоклассов и селекторов атрибутов.

• Значе ние d равно количеству селекторов типов и псевдоэлементов .

С помо щью этих правил можно выч ислить специф ичность любого селектора CSS.

В табл . 1.1 при в еден ряд селекторов с их специфичностью.

таблица 1.1. Примеры специфичности

Селектор Специфичность

Специфичность в системе

с основанием1О

Style= " " 1,0,0,0 1000

#wrapper #c ontent { } 0,2,0,0 200

#content .da tePos ted { } 0,1,1,0 110

div#content { } 0,1,0,1 101

#content {} 0,1,0,0 100

p.comm ent .datePos ted { } 0,0,2,1 21

p .comment { } 0,0,1,1 11

div р { } 0,0,0,2 2

р {} 0,0,0,1

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

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

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

. Правило с идентификатором всегда более специфичное, чем п р ав ило без иде нти фи

к ато ра . Правило с селектором класса более специфичное , чем с селекто рами тип ов .

И наконец, есл и два правила обладают одинаковой специфичностью, приоритет имеет

правило, определенное последним.

Использование специфичности в таблицах стилей

При создании табл и ц CSS с пеци фичность п олез на тем, что она позволяет задать об щие

стили для обычных элементов , з атем пе реопределить стили для специфичных элементов

. П р едпол ожи м , вы хотите, чтобы большинство фор м сайта имели ширину 30 еш,

однако несколько по и с к о вых ( s e a r c h) форм должны иметь ширину 15 еш . Для этого

необходимо определить следующие правила:

form {wi dth : З О е m }

form#sea rch {wi dth : 1 5em}

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

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

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

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

ширину 20 ет. Возможно, понадобится особенно большая форма приложения шириной

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

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

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

стили из разных мест таблицы стилей .

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

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

не будут переопределяться никогда (конечно, в идеале). Если обнаруживается, что общий

стиль нужно переопределить несколько раз, то лучше удалить из общего правила

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

каждому элементу, в котором оно необходимо.

добавление класса или идентификатора к дескриптору body

Интересный способ использования специфичности состоит в применении класса или

идентификатора к дескриптору body. Вы можете таким образом переопределять стили

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

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

элемент body начальной страницы и применить его для переопределениястилей.

#content {

fl oat: 1eft;

. homepage #content

fl oat: right;

#nav {

float : right;

.homepage #nav

fl oat: 1eft;

Далее в главе вы увидите, как эту методику можно использоватьдля отметки на панели

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

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

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

Идентификаторы,относящиеся ко всему сайту, иногда называют "сигнатурой CSS".

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

id= "www-site- с от " . Предположим, пользователь захочет переопределить разм ер шрифта

или цветовую схему, чтобы сайт бы ло легче читать. Он может сделать э то , добавив в

свою таблицу стилей следующее правило :

body#www-site - com {

f ont-size: 200%;

background-co1 or : black ;

c o1or : whi te;

Однако можно не останавливаться на это м . Сигнатуры CSS предоставляют пользовател

ям воз м ожн ость полностью изм енить стили сайта, Пользовател ь может с к рыть эл е ме

н ты, котор ые он н е хочет вид еть , из ме н ить структуру стр ан и цы , создать соверш енно

н о вы й диз а й н страницы .

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

и ногда люд и путают насл едовани е с каскадировани ем. На п ервый взгляд эти две ко н ц

еп ции тес н о связ ан ы , однако фактичес к и это с о ве р ше н н о разны е п онятия . К счастью,

понят ь н асл едовани е з н ач ит ел ь н о л е гч е , ч ем кас кадиро ва ни е. Свойст ва эле ме нта, кот о ром

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

в него ) . Наприм ер, е сл и присвоить элеме нту body черный цвет текста, в с е п отомки

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

п ер еоп р еделе н ы ) . То же ' с п раведл и в о и дл я р азм ера ш ри фта. Если п рисво ить эле ме н ту

body р азмер шрифта 14 пиксел ей , вс е эле менты стран и цы долж ны у наследо в ат ь этот раз м

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

не всем и брауз ерами. Например, размеры шрифта таблиц в брауз ерах Net scape

и IE дЛ Я Windows наследуются со многими проблемами. Чтобы обойти эту н едоработку,

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

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

Если устан овить размер шрифта для дескр и пто ра bod y, стиль н е будет присвоен з а гол

о в кам страни цы , хотя эле ме нты з агол о в ко в h являются потом ками элеме нта body. Вы

можете пр ед положи ть, что з а гол о в к и не наследуют разм _________________ер шрифта . Однако это н е та к .

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

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

Унаследованный стил ь имеет н ул евую спе цифич н ость.

Насл едование весьма полезно тем, что позволяет избежать добавления одних и тех же

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

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

, заче м п и с ать

р , div , hl , h2 , h З , и 1 , 0 1 , d1 , 1i {c 0 10 r : black}

В едь м ожн о н а пи сать

body {c o1o r : bla ck }

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

КОличест во и с н изит ь сложность селекторов , при сутствующих в коде . Однако, есл и стран и ца

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

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

Планирование, организация

и поддержка таблиц стилей

П ПО мере увеличен ия сайт стано вится все более сложным и насыщенным графикой .

ри этом у п равл я ть та бл и цам и CSS стан ов ится в се труднее . В этом разделе рассматривается

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

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

ЩаЮТ п оним ан и е кода.

Применение стилей к документу

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

дескри пторами style. Однако это не самый лучший способ применения стилей к докум

снту. Е сли понадобится создать еще одну страницу с эти м и же стилями, на н ей придется

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

придется дел ать это в д вух м естах , а н е в одном. К счастью , сп ецификация CSS позволяет

х р ан ить все стили в одном или н есколь ких внешних табл и цах CSS. Существу ет дв а сп особ

а п одключе н ия внешних таблиц стил е й к Wcb -странице : импорт и связыва ни е .

<l ink href="/cis /basic .css " rel = "styles he et " ~

type= "text/ c ss " />

<s t yle t ype=" text / css ">

< !--

@i mport url (" /css /advance d .css ") ;

-->

</style>

Устаревшие браузеры, такие, как Netscape 4, не поддерживают импорт. Сл едов ательно,

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

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

простая таблица CSS, содержащая базо вые типограф ски е стил и , п о нят ь которы е МОЖСТ

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

ржащая нов ейш ие стил и. С помощью это го м етода можно даже создавать разный ди зайн

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

Импортировать таблицу ст илей можно не тол ь ко в доку м ен т (X)HTML, но и в д ру гую

таблицу стилей. Это позволяет с вязать простые стили с базовой табл и цей CSS, разм

ещенной на стра н и це (X)HTML, а затем импортировать бол ее сложные стил и в табли цу

CSS (рис . 1.4).

layout.css

color.css

template.html basic.css

'--__.......Jt----+tL..-__----'IE-----..·......,~D!ypog'aph, .c",

Рис . 1.4 .Несколько таблиц стилей можно импортиро ват ь в одllУ таблицу, ко торую

затем можно связать со страницей (X)HTML

@import (url /css / layout .css ) ;

@impor t (u r l/ c s s/ t ypo gr aphy . c s s ) ;

@impor t (u r l/ c s s / co l o r . c s s ) ;

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

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

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

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

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

а не наоборот.

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

очередь, импортируется в третью таб