validate8galnstthese specjficatlons.

Ри с . 2. 1. Контейнер

В нутрен няя полос ка (padding) окаймляет область с одержи мого. Е сли к элемен ту добавить

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

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

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

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

пунктирной и т.д. За пределами рамки расположена внешняя пустая полоска (margin).

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

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

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

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

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

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

margin и padding значения О . Это можно сделать как для отдельных элементов,

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

* {

ma r gi n : О;

padding: О;

В правилах CSS свойства width и height определяют ширину и высоту области содержимого.

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

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

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

полосок - 1О и 5 пикселей соответственно, ширину содержимого нужно задать равной

70 пикселям (рис . 2.2).

100рх

10рх 5рх 70рх 5рх 10рх

Рис. 2.2. Пример расчета ширины контейнера

# туВ ох {

margin : l Opx;

pa dd i ng : 5 р х ;

width : 70 р х ;

Внутреннюю п олоску, рамку и внешнюю полоску можно применить ко всем или толь ко

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

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

Браузер IE/Winи модель контейнеров

к сожалснию, в н еста ндартных режимах б раузеров IE 5.Х и IE 6 исполь зуется их соб ственная

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

содержимого эти браузе ры считают свойство widt h равным сумме ширины сод ержи м о го

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

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

к а расположе на в нутри рамки . Ч е м шире внутренняя полоска , те м меньш е мсста оста стся

для содержимого . Однако, несмотря на безупречную л о ги ч но ст ь , браузср ы IE 5/6

нарушают спецификацию CSS 2, что может породить сер ьсзные проблемы . Например,

в предыдущем при мере общая ширина контейнера в браузере IE 5.х буд ет равна 90 п и кс

елям , а не 100 ( рис . 2.3) . Это объясняется тем , ч то б раузер IE 5.Х считает внутреннюю

полоску с каждой сто ро ны шириной 5 пиксел ей частью области соде ржимого .

90рх

I,

, .~

,С !

i ~.', ,' :

" ~,i~

О " .' ' ,, ' . ', ' " ',,., ',' ......•............, , . , ' ',' , " """" " ,, " ',' " ' /f ~ ~ ' ' ' .:

11()о 11( )о 11(

10рх 5рх 60рх

)о 11( )о 1(

5рх 10рх

Рис. 23. В нестандартноймодели контейнеров браузера

IЕ элементы имеют менъшию ширину, ч ем определено в

специфи ка ц и и CSS

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

аются в главе 9. Одн а к о самый лучший способ - н е создавать пробл ем у вообще . Для

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

определенно й ш и р и ной . В м е сто это го до б авл я йт е внутренни е или вн ешни е п ол ос к и к

р одительским и дочерни м элементам .

С л и я н и е внешних полосок

Кон цепц ия слия ния внешних полосок сравнительно несложная, однако на практи ке

при верстке Web- стран и ц она часто п ри водит к путани це . Суть концепции такова : когда

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

одн у полоску. Шири на р ез ул ьтир ую ще й полоски рав н а ширине большей из исходны х

полосок .

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

эл ем е нта сливается с верхней внешн ей полоской нижнего эл емента (рис . 2.4) .

До сл и я н и я По сле сл ияни я

Полос ки сливаются ,

образуя одну полоску

к Обл асть содерж имого

Рис. 2.4.Пример слия ния внешних полосок

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

внешние полоски, нет, верхние и нижние внешние полоски сливаются (рис . 2.5).

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

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

ВнеШние полоски, н о не им еет ни рам ки , ни внутренних полосок. Тогда верхняя внешняя

ПОЛОС Ка при коснется к нижн ей и они сольются (рис . 2.6).

Е сли полученная таким образом внешняя полоска прикасается к вн ешней полоске

Сл едующего эле ме н та , они тоже сливаются (рис . 2.7).

Не путайте вертикальные и горизонтальные полоски! Вертикальная полоска ( как внутренняя,

так и

А. в нешняя ) п озици онир ует элеме нт по в ертикали, ее ширин а изм __________________еря ется тоже но в ертикали .

н ал о гичн о этому, горизонтальн ая полоска позиционир у ет эл ем ент' по горизон тали , а ее ширин а

ИЗ меРя ется тоже по горизонтали. - Примеч . ред .

--------- - - - - -

До слияния

Поло с к и сл иваютс я ,

образуя одну полос ку

После слияния

Рис. 2.5. Пример сл ияния верхн их внеш них полосок родительского и дочернею элементов

До слияния После слиян ия '

Полос ки сливаются ,

образуя одну п ол о ску

, ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••j

i """'~:~~~~:.~~,~:.:.~~~........ i

! ~.~~~.~~~.~~:~~~.:.~~.~~ ..,]

Рис. 2.6. Слияние верхней и нижней внешних полосок одного элемента

До сл ия н ия После сли ян и я

::~~~i;t~l~~~~~;~j B~~;:,~~':"~"~:~,~;. [ ~;~I;:;;~~;i;~J

Рис. 2.7. Сл ившаяся внешняя поло ска пустою элемента сливается с внешней полоской сл е дующего

пустого эл емента

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

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

полоску.

Слияние внешних полосо к - в е сьма пол езно е средство . Рассмотрим ти п и ч ну ю ст р аницу,

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

первым абз аце м равна ширин е в ерхн е й вн еш не й полоски элеме н та абзаца. Е сли бы в нешни

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

ширину, равную сумме ширины в ерхних и нижних вн ешних полосок Э то о зн ач ает, ' что

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

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

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

Без сл иян ия внешн их полосо к Со слиянием внешн их полосо к

II

L-,-- - ---\lI------- --'

Между абзацами промежутки в два

раза шире, чем между верхней

к ро мко й страницы и первым абзацем

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

Рис . 2.8. Слияние внешних полосок позволяет п о ддерживат ь оди наковую ширину nро межутков

между абзацами

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

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

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

Позиционирование

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

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

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

Модель визуального 'фо рмати рова н и я

Такие элементы, как р, hl или d i v, называются блочными (или элементами блочного

уровня). Это означает, что визуально эти элементы выводятся как блоки содержимого

или блочные контейнеры . В то же время такие элементы, как strong или span, называются

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

КОнтейнеров.

С помощью свойства display можно изменитьтип генерируемогоконтейнера. Чтобы

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

~l sPl a y значение block. Если свойству display присвоить значение попе, элемент не

удет генерировать контейнер вообще. В этом случае ни контейнер, ни его содержимое

ВЫВОдиться не будут и элемент не займет места в документе.

В таблицах CSS существует три базовые схемы позиционирования: нормальный по ток,

Плавающий блок и абсолютное позиционирование. Если явно не указано иное; жиа нет

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

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

mTML.

Блочные контей неры выводятся вертикально оди н н ад другим . Расстоя ние по ве]

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

полосок.

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

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

рамок ( р ис . 2.9). Вертикальные внешние ивнутренние полоски и линии ра м о к н а высс

ту строчных ко нтейнеров не влияют. Го р из о нтал ь ный контейнер, об разованный строкоз

называется строчным контейнером. Его высота всегда достаточно велика, чтобы вмеСТИ1

все расположен ные в нем вложе нн ые строчн ые к онтейнеры. Установ ив высоту строк

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

Строчно й контейнер

Элемент st го п g Внутр енняя поло с ка

г· ····· ....r·····"!·,,·,1·,,·,;·,··,,·:··········..·..···· 1

j Phasellus: :nonummy~ : condimentum 1

I""ш",,,,,,,,,:,,,,,,,j,,,,,,,,,,,,,r}й,,,i.,,,,,,,,,,&,j,,,,,,,"",,j,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,j1Высота

i ~~ ~: _._ ~ _....] строки

Ано нимныи строчнои эл е м е н т

Вн ешняя поло ска

Ри с. 2.9. Строчные элементы, размещенные в строчном контейнере

Как и элементы (X)HTML, контей не ры могут б ыть вложенными один в друго:

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

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

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

в самое начало блочного элемента, например d i v. Тогда текст будет интерпретироваты

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

абзаца р.

<div>

Н ек о т о рый те к ст

< р > П р о до лж е н и е TeKCTa</ p>

</ div>

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

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

Апало гичная ситуация возникает при раз мещении строк текста внутри блочного Э1

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

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

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

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

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

относительное позиционирование

Концепция относ ительного позиционирования д о в ольно "р о ста . При таком по зи ци о н

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

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

з ада в го р из онтал ь ную и в ертикальную позиции . Если поз иц и и с вер ху ( t op) присв оить

значен ие 2 0 р х , контейн ер будет смеще н на 20 пикселе й в низ от носитель но н ачально го

пол ожен ия в потоке . Если же присвоить з наче н ие 20рх е ще и п озици и слева, 'то элеме н т

будет сме щен на 20 пикс ел ей вправо, а сл ева от н его будет создано п устое пр остра нство

ши рИ ll ОЙ 20 пиксел ей (ри с . 2.10) .

#ту Во х {

pos i t ion : r elative ;

l e ft : 20 рх ;

top : 20 р х ;

position: гelative

~ ~- _ .· К онтейнер 1 :·

,,

··,·····

,,,·····

···

,,,

·... ~_ ~ .._ .

Род и те л ь с к и й ко нтейнер

Рис. 2.10. Относительно е позициониро вание элемента

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

анств о н езависимо о т того, с ме ще н он или н ет. Смеще нны е элементы мо гут насл аи ваться

на другие контейнеры .

Абсолютное позиционирование

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

Н ОРмал ьного потока, Т. е. элемент позиционируется относительно его позици и в н орм ал ьно

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

ИЗВлекает элемент из потока документа. Следовател ьно, элемент при этом не зан и м ает

ПРостранство. Другие элеме нты нормального потока ведут себя 'так , будто абсолютно по З

ИЦионированного элемента не существует (рис. 2.11).

Абсолютно позиционированный элемент разм ещается относительно бл ижай шего по ЗИЦионированного

родительского элемента. Если элемент не имеет родительского пози ~

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

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

.lIибо страница, либо элемент HTML.

:>0 I J lf-\tsf-\ г:

["f~~~~~ ':~'~~~'1":;~; ~ ;~~~: ':~ ~'~" 1'r':':':' :':':':' :.:. :.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:~ !

.: . :: : ~ i :left. 20рх : : : 1

~ ! ·1-.··----··.··...·.·-----1 ~ I

: Контей не р 2 : position : absolute : Конте йне р 3 : 1 ...... .... ...... ........ ··: - ..! :;· :· ::._ ' :: ~?~::~1~~~ ..2 ~ ~ ~

Относител ьн о ПОЗИ ЦИ О НИРО8а н н ый р оди т ел ьс ки й элемент

:: Н :

Рис . 2.11. Абсолютное п озиц и он ирован ие элемента

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

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

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

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

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

тел ь н остью н асл ое н и я контейн еров можно с помощью св о й ства z - i ndex. Ч ем больп

з на че н ие z-in d ex, тем выше п р и ор итет вывода ко нтейнера на экра н .

Абсолютное п озиционирование относительно ближайшего позиционированного ре

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

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

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

з и ц и о и и р о в ат ъ абз ац относительно него.

#b r anding {

width : 700 р х ;

height : lOOp x ;

position : re lative ;

#branding . t e l {

posit i on : absolute ;

r i ght : lOpx ;

bott om: l Op x ;

tex t - a l i g n: right ;

<div id="brandi·ng ">

<р с lаss = "t е l " >Телефон : 095 -2 55 -12 -8 7</p>

</ d iv>

~ 't ,.!

Абсолютное ~ оз и цион и ров ан и е '.. в относит ельно по зици онированном родит ель с ком

эл е t'A е нт~л реКР ёJС Н О I?а боiа етв больш инстве 'соврем енных б рауз еро в. Однако брауз еры

IЕ 5.5 и 'Е б содержат досадную" ошибку " на руш а ЮLЦую позици?ни рова н ие. §Сл k1 а бсолютно

ПОЗИЦИОf-jироватьконтейнер относительно пра вогоили, ~ ижнего кра~ родитель -

-"/1:: - '}. '} ,~: , _ ' , _ ' ,,:, ' _ . ' ~ _ . ~ - f _ • с кого пози ционированного конте инера, то нуж но убедиться в то м, . ято для родитель -

ского конте йнера явно заданы -ра змеры , В противном случа е брауз ерlЕ 5j б оши боч н о

выполниr поз.ИЦиОн ИРован и'е относительно стран ицы, а не родительского ко нтей нера :

!Более по.•д..•робно . эта ?Ш Ибка р асс ма три. в ается в гла в е 9. Р еш ени е проблемы ~()вольно

простое :.нужно всего лишь явно задать ши р и н у и вы соту.родитель с кого ко н теи не ра. • . . .

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

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

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

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

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

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

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

ютн о п оз и ц ио н и р о в а нн ого кон тейнера (нап рим ер, пут ем и змен ения раз м е ра шр иф т а )

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

может разру шить с трудом настроенную структуру ст ран и ц ы.

Фиксированное позиционирование

Ф и к с ир о в а н н ое поз и ционирование - эт о разновиднос ть аб солютного по зицио ни рования

. Р аз н и ца м ежду н и м и состоит в том, что блок , содержащ ий зафи к с и р ов а н н ый

элеме нт, должен быть видовым экраном ( viеwро гt ) . Это позволяет создавать плавающие

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

ь на сайге Snook.ca ( р ис . 2.12). Форма комментари ев з афи кс и р о ва н а , чтобы о на всегда

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

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

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

иш .п

........ _I""I">М ...... \фБ IOW .,.. ...I_...~ .~.._ .u..

WO''''i~ ..... V\ ''''

· ~_ и ~I CWI ...._

•1oII:I-.= ... ;t><'I) Р8'1''''_''IJ'Ie~

•E".aJ II<I~'~' &II" " _"'O<I ;"_", \"'"

_",,". I..#u~.Io<a<><)

.•~Q<J tII"...,.. .... "C'WI~ " '''I',:,."..r,.. ....,m~..~ ~III ~_ """ se......,. 1a ...,SOI. t..'>Ido ..""/мIy"""""""'.1It8OI .._I"""''d 0ul .... ...~ III8C''

~ОО~_о-'_ ,.,. _'" :;t"dOo/.._1М

~,

. _" - - " " ~'-- -- -- - - -'. _ - - _ . _- -- - - ·_ · ~=;';.1

.........,.""'_ O"Z" . . . ......... "' .,.."""", ~ ,. ......... 3F5_ _ ...~ _IO'O'J So<,,-'>IЦ

•\.IWt-о .... _ ...... """""', . ..

: ~~;~~::(:~::G~ ~~:~\';~~;~....~ "' . '.,.;...I ~a: .~:.':; :::::~~:~:.

•_".,.."""' . r"....~_~ r.o_..vo;>"MjQL:......"

_'-""'~.>I<.К' ..._.".""II"~:>.oI .... ~ ~..... ( " i'<IlO

-l<Jgonltl,'~~~ЫI<: а.. ... ". ..,.~" ,~ <)<:.. t:I '~__" ,

,-." . ;.........,,;

1I<.t.Щ,:>' ''fIO' .,.,J ...._wil'<'''' ...,.. ''''о! (t.>''''' ''''' ~..<аШ...

... " ~ jЬ_ I"Ь~w"' IФ<t~"" i\XI!s С< '1' ()<!I• Рис. 2.12. На сайте Snook.ca поле комментариев зафиксировано в правой части экрана и не

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

К сожалени ю , браузеры IE 6 и более низкие версии н е поддерживают фиксиро ванное

ПОз иционирование. Для ре ш ен ия этой пробл емы Джонатан Снук (Г о пагпап Snook ) исПОльзует

сценарий ] avaScript , фи ксиру ю щий форму в браузере IE.

Плавающие элементы

Последняя и з рассматриваемых в главе моделей п о з и ци они р о в а н и я - модель пла вающих

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

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

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

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

суще ствует.

Ка к показано на рис. 2.13, если сделать блок 1 плавающим и пристыковать его к правом

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

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

Пл авающи х бл око в нет

Бло к 1 сделан плавающим

и пристыкован к правому к р а ю

f" ~ ': ~ '~ '..' ~'~':~ ~ " " " " " " " " " " " " " " " " " " ' " ~

: l ' :

:.' :

: : Бл о к 1 : :

: I r :

~ ;: :::==::: ~

j ~ Блок 2 j j

~ : ~ ?

~ ;-_..__._; i

: : Бло к З : :

~ : I ~

1 ... .............. ... .. ~

:о • . •• .• . ~ • . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . :

·....... ......... :- ......

·: Блок 2 :' "" , - ~ ,.. ....... ........ ....,.

:, Блок 3 .: ...... ...... .. .... .. ... . ~

..... ... .._.... ... ..

: Блок 1 : .' + .' , . .. .. .... ... .. .. .. .. ,

Ри с . 2.13 . Блок 1 сделан плавающим и присты ко ван к правому краю содержа щего

контейнера

Когда блок 1 пристыкован влево (рис. 2.14), он удален из потока документа и его левый

к рай касается л е в о го края с одержащего контейнера . Поскольку он не в потоке , он

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

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

п редыду щего ( кром е блока 1, который будет касаться левого края содержащего контей н

ера) .

Пл ав ающи й блок 1

п р и ст ыко ва н влево

Блок 2 скрыт

под бл о к о м 1

...................... ,.

: Блок 3 : : :

' '

Все три плавающих бло ка

пристыкованы влево

.. ............... ... ... , .

: Б л ок 1 : : Блок 2 : : Бло к 3 :

•l ' " I •:. ....-- : : ....-- : : ....-- :

1 1 ' ,;. _ , _ • Ри с . 2.14. Плавающие элементы при стыкованы вл ево

Если с оде ржащий к о н тейне р сл ишком уз кий для всех пл а в ающи х эле ментов и они

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

п ер е н есены вни з ( р и с . 2.15). Если пл ав ающи е эле мент ы имеют раз ную вы с оту, эл ем е нт

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

у бл о к у предыдущей строки .

Места по го р и зо нтал и недо статочно

Бл о к I

'-··Б~~~З· · -~

t .........-..- I

: _ ~ ..~- - - _:

Блок 3 перенесен

Блоки разной высоты

Блок 3 "зацепился "

за бл ок 1

Рис . 2.15. Если места по горизонтали недостаточ но, плавающий элем ент n ер ено

сится вниз

Строчные контейнеры и очистка

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

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

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

ч тобы текст мог обтекать изоб ражения (рис . 2.16).

Плавающих ко н те й н е ро в нет

i~ " ' i

,[: I!

[f 11

~ ••0 ' 0' •••' :

Плавающее изображение

пристыковано влево

iШШ Ш "Ш ШШ l i

·:· ..: ···: ..:· .. i Строчные контейнеры укорачиваются. ]

: ч тобы н е наслоиться на плавающее :

: изображени е :

'\. Н , ••••• .•• . • . ••• .•• . ••• . • . ••• . и ••:

Ри с. 2.16. Строчные контейнеры укорачиваются, обтекая плавающие блоки

Ч тоб ы строчные контейнеры н е обтекали пл авающий контейнер, им нужно присво~

TЬ СВойство clear (очистка). Оно может иметь а начениегегг (слева), right ( справа) ,

oth (обе ) или п оп е (нет ) . Знач ени е указывает, какая сторон а строчного контейнера не

ДОЛжна обтекать плавающий блочный контейнер. Этого же результата можно достичь,

ОСтави

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

I\O!iT ~

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

теСНила рамку верти кально вни з (рис . 2.17). .

Во второй абзац добавле но

сво йство с/еа г: left

i t2jш о ш о ш шшш " II

. . . .. ... . .. ... . .. . .. . .. . . . . . . . . . . . .. .. .. .. . . . . . . .. . .. . . . •••••••••H •• . •• . • . ••~

Второ й абзац см еще н вн из

. .

; Для устранен ия обтекан ия ;

; добавле н а верхняя внешняя полоска ;

~ •••••••• .•••••••и ••••••••••••••••••••••••••••••••••••••••04 • . ••• . •• . • . •• . •:

Рис. 2.17. Устранение обтекания двумя способами

Как вы уже знаете, плавающие элементы извлекаются из потока документа и не вли

яют на окружающие элементы. Обтекание и очистка являются исключениями из этоп

правила . С их помощью можно предоставить достаточно ме ста плавающим элементам]

потоке текста.

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

облегчают размещение плавающих элементов . Таким способом решается проблема с аб

солютным позициони рованием (см. выше в главе), порожденная тем, что изменение вы

соты абсолютно позиционированного элемента не влияет на размещение окружающиз

элементов и может разрушить структуру страницы.

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

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

ста . Рисунок и текст размещены в содержащем контейнере, имеющем одноцветный фот

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

. news {

background-co1or : gray;

border : solid 1 р х black;

.news img {

float : 1eft;

. ne ws р {

fl oat : right ;

<div c1ass="news ">

<img s r c=" news - p i c . j pg " / >

<р >Н екоторый тек ст </р >

</ div>

Казалось бы, все размещено правильно . Однако мы н е учли, что плавающие элемент

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

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

Для этого нужно где-нибудь в эл ементе црименить свойство c l e a r (ри с . 2.18).

Конте йнер не охв атывает

плавающие эле менты

::::::::::::::::::::::::::::::;:::::!:::::::::::;::;::::::::::;:::;::;:::::~

~-. - - -

v

Плавающие элементы

не занимают пространство

Ко нт е й н е р охватывает

плавающие эле менты

i······· ··..··..·..·······t.··········..·..·..·..·· ~

~~ j · ··.... ···· .... ···· .... ·· . ..

!........... __..'::::{ :;::::.:::::.I

Пустой элемент div

Рис. 2.18. Плавающий эл емен т не за нимает простран ства и н е

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

нужно до бавить в нега пустой элемент со свойством с Геез:

к сожалению , нам негде разместить свойство clear . Единственный выход - доб авить

ПУСТОЙ элем ент (н априм ер , div) и присво и ть ему свойство clear.

. news {

background-color : gray;

borde r : s ol i d l р х black ;

. news i mg {

float : 1eft ;

. news р {

float : r i ght;

.clear {

clear : both;

<d i v c l a ss=" news ">

<i mg src= "news-pic .jpg" />

<р>Не ко торый те к ст < /р >

<div c1ass="c1ear"></div>

</ div>

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

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

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

эле ме н т ы, кото рым м ожн о присвои ть свой ство c lea r, одн ако так бывает далеко не

всегда.

Реше ние п р обл емы д о в ол ь н о пр о стое : в место очистки плавающих элемен то в (изо бражен

ия и текста) м ожно сделат ь плавающим контейнер div.

. ne ws {

bac kg round-colo r : gray;

borde r : so lid l px black;

f1oat : 1eft :

. news img {

fl oat : l eft ;

. news р {

fl oat : r i gh t ;

<div c l a s s =" news ">

<img src="news- p i c . j p g " />

< р>Неко т о р ый текст </р>

</ div>

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

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

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

их с п омощью ка к ого- ли бо эле ме н т а ( ча сто и с поль зуя дл я эт о го нижний кол о н т и тул

стра н ицы ) . Тако й с п о соб существе н н о уме н ь шает о бъ ем до п ол н ител ь н о й разм етки. Его

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

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

эле ме нтов.

Существует е ще один с п ос об решения этой проблемы . При своени е з н аче н ий hidden

или a u t o св о йству ov e r f l owавтомат ически очищает все вложенные плавающи е элемен т

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

ях, п оскольку свойст во over f low влияет на пов едение контейнера.

И н акон ец, п о с л едний с п особ решения пр о бл емы. Очистить плавающие элементы

можн о с п омощь ю кода CSS, с ге нер и р ован ного с цен ар ием j avaScript. Фактич ес ки э тот

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

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

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

Обычн о для этого использу ется до п ол нительн ый класс .

<di v c l a s s="news clear">

<img src="news - pic . jpg" / >

< р > Н е к о т о рый т е к ст < / р >

</ di v>

Псевдокласс : afte r можн о прим ен ить в с очета н и и с объя влением содержимого для

до б а вле н ия н ов ого содержи мого в ко нец существую ще го . В качестве нового содержимого

м ы об ычно и спольз уем си мвол "точка". п о скольку о н небол ьшой и н е н авя эчи вый . Но в о е

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

поэто му нуж но устано вить его высоту р а в н о й О и прис в оить его с в ойству v i s ibili t y

значе ние hidden. По с кол ьку очищенн ые элементы имеют верхние внешние полоски, зан

и м аю щи е п ространство п о в ертикал и , с войство display генерируемого содержимого

должно иметь значение bloc k. Выпол н и в в се эти фо рмаль ности, м ожн о легко очист ить

генер и руемое содержимо е.

. cl ear :aft er {

co nt ent : "." ;

height : О ;

vi sibi lity : hidden;

displ ay : block;

clear : both;

Этот метод хорошо работает в большинстве современных б'раузеро~7но, к'сожалению,

не в IE б ив более низки )(версия х. Для решения этой проблемы разр~ б отано нес коль ко

приемов , бол ь ш и нство иЗ KOTOPЫ ~ описаны насайте www.po sit ionis ~ver Yihing.net/

ea sycl ear i ng е ,html. Из ра сс матр ивае м ы х на са йте методов чаще дру ги х' пр и м е н я ется

трю к Холли ( см. главу8) ,в, KO:rOPOM браузеР ~IIЕ5 /б, ,,заман ~~аются" в нужн ую стру ктуру

ст ра н и цы (см , главу 9) . . " . '. : '

. clear {

di spl ay : inl i ne-block;

}

/ * Т р ю к Х о лл и п р е д н аз н а че н т о л ь ко для IE Win */

* ht ml . cl ea r (he i ght : 1%;)

. cl e a r {displ ay : block ; }

/ * Ко н ец т рю ка Х о лл и * /

Недостаток трюка х6лли ~ОСТОИТ в том, что он довольно сложен, а . потому при годен не

ДЛя в сех диз а йнеров : 11;1

Рассмотре ние м етодов на основе ] avaScript выходит за рамки данной книги, однако

о Них все же следует кратко упомянуть . В отличие от предыдущих методов, методы на

ОСНове J avaScr ipt работоспособ н ы практически на любом браузере (единствешюе условие

- в браузере должно быть включено выполнение сценариев ]аvаSсгiрt) . При исполь -

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

aVaS . CГI pt соде ржимое можно хотя бы п р оч итат ь .

Резюме

Читая эту главу, вы узнали о некоторых особенностях модели контейнеров (некота

рые из этих особенностей довольно странные). Вы ознакомились с тем , как смежные вер

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

браузеры IE 5.х в Windows интерпретируют свойство width иначе, чем другие браузерь

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

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

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

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

ширины верхней внешней полоски.

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

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

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

IIЫХ полезных методиках верстки страниц . Итак, открывайте ваш любимый текстовьп

редактор и приступайте к кодированию .

ГЛАВА 3

Фоновые изображения

и замена изображений

top-Ieft.gif

Lorem Ipsum

l orem 'Р$ит "dolO(51! ате!.

consectetuer adlplsclng еlit :

Proin venenatis tur pis и!

quam; '" oolor. Nam ultrlces

nlsl sollicitudin 5aplen. Ut

laclnla allquet,ante.

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

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

изображений Web-дизайнер может превратить скучный текстовый документ в МНОГ(

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

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

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

изобретен дескриптор image, профессия Web -дизайнера могла бы и не появиться .

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

цы презентационнымиизображениями.Таблицы CSS позволяют выводить на странт

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

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

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

интересных и полезных эффектов .

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

•контейнеры со скругленными углами, имеющие фиксированную или изменяему

ширину;

•метод "раздвижной двери";

•контейнеры типа "вершина холма";

•создание теней с помощью таблиц CSS;

•поддержка прозрачности изображений PNG в браузерах IE 5.х и выше;

•замена изображений.

О С Н О В Ы фОНОВЫХ изображений

Применить фоновое изображение несложно . Предположим, на странице должно БЫ1

размещено эстетически привлекательное повторяющееся фоновое изображение. Для р

шения этой задачи можно просто задать изображение в качестве фона элемента body.

body {

background : url (pattern .gif ) ;

}

ПО умолчанию браузер повторит фоновое изображение по вертикали и горизонта.

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

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

тали или не повторяться вообще .

В наСТОящее время все более модными становятся градиенты. Для добавления на C1'f

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

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

bod y {

backg r ound: #ccc ·u r l (g r adient . gi f ) r epeat-x;

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

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

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

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

был СЛишком заметным, можно добавить цветной фон. Градиентное изображение вс

да выводится поверх цветного фона. Когда изображение закончится, начнет выводиться

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

но го изображения, переход между изображением и фоном будет незаметным.

Повторяющиеся изображения (tiling images) полезны во многих ситуациях . Однако

ч аш е всего на Web-страницах используются неповторяющиеся и зображения , например

е сл и страница начинается с большого яркого логотипа компании . Для этого нужно всего

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

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

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

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

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

это го использован пустой дескриптор div, имеющий иден тификатор brandi ng. Затем

можно у ста н о в и т ь размеры элемента di v равными размерам изображения b r a nding,

применить фон и отменить повторение.

#branding {

width : 700р х ;

height: 200 р х ;

background :u rl (/image s/brandi ng . gi f ) no-repea t;

}

Фоновое изображение можно позиционировать . Предположим, нужно добавить маркеры

к каждому загол о в ку сайга (рис . 3.1). Это можно сделать следующим образом:

hl {

pa dding- l e f t : ЗОр х ;

background : url(/images /bullet .gif ) no - r epeat l eft cent er ;

~left center

r · - - · · - · · _ - - · · - _ · · ~ · · · · · · · .

~ Заголо во к ~

~~:~~i~-~-~~~~~-~~~---:

Рис . 3. 1. Создание маркеров с помощью фонового изображения

Ключевые сло ва l e f t и center задают позиционированиеизображения: оно будет

размещено слева от элеме н та и центрировано по вертикали. ПозиционироватьизобраЖеНие

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

НРОцентах.

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

относительнолевого верхнего угла элемента. Например, если присвоитьверти~

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

./дет смещен на 20 пикселей вниз и вправо относительно левого верхнего угла элемен ва

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

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

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

УIo ПОзиции равными 20 %, точк а на изображ ении , ра сполож енная на 20%слева и сверху,

68 ГЛАВА 3

будет совмещена с точкой эл емента, тоже расположенной на 20% слева и сверху от угла

эл емента (рис . 3.2).

Задан ие позиции в пи кселях

~ " "" - '!- ""' -' ----' -'-' - - - '- " "" ' -"-:

..; 20рх ..;

: •х (0.0 ) :

20рх

····

,····,· ~ A ~ ~ _ _ '

З адан ие позици и в п р о це нтах

Г· ·_·· ·· -1-'~~~ . _ . - _ ~ _.----1

, . , .

; •х (20%, 20~) :

: 20% ·,·····

··

,·······. _ . ~ _~ . W_ • . •_. A_A •__ . _

Рис. 3.2. Позицио нирова ние изображения в п и кселях и процентах

Чтобы в предыдущем примере с маркерами применить п роценты вместо ключевых

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

по ве ртикали .

Ы{

padding- left : 30рх ;

background : ur l( /ima ge s / bul l et. gi f) no-repeat О 50%;

Специф икация CSS не п редполагает возможности смешивания пикселей или п ро центов

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

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

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

единиц с ключевыми словами считается недействигель ной ,

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

многих совр еменных методик CSS.

Контейнеры со скругленными углами

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

уж "квадратно -индустриальные" , Н и к ако й э стети ки ! Чтобы обойти это ограни чени е ,

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

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

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

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

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

це .

ФО НОВ ЫЕ ИЗОБ РАЖЕ НИЯ И ЗАМЕНА ИЗОБРАЖЕНИЙ 69

:о н те й н е р ы со скругленными углами

I фиксированной шириной

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

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

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

Рис. з.з . Простой контейнер со скругленн ыми углами

Разметка контейнера может быть приблизительно такой :

<div c lass= "box" >

< h2> З а го ло во к</ h 2>

< р> Со д е ржимо е</ р>

</div>

И зображения, необходимые для контейнера, показаны на рис. 3.4. И зображ ение

t op .gif размещается вверху, а bottom. gif - внизу. Изображения и код контей нера, как

и все др уги е п римеры книги, можно з агруз и ть с сайга www.frie ndso fe d .com.

top.gif bottom.gif

Рис . 3.4. Верхнее и нижнее изображения для контейнера, покаганного на рис. 33

Файл top . gi f нужно применить к элементу заголовка, а bottom. g i f - к нижней

части контейнера d i v. Поскольку в стиле контейнера з адан а сп л ош н ая заливка, тело кон тейнера

можно создать, добавив цветной фон в дескриптор d i v.

. Ьох {

width : 418 р х ;

background : #e ff ce 7 u rl ( i ma g es/bo t tom. g if ) ~

no- r epeat l e f t bo ttom;

. Ь ох h 2 {

backgr ound : u r l( i mages / t op . gi f) no- r epeat left t op ;

)

~e Содержимое не должно примыкать вплотную к границам контейнера, поэтому эл е Нтам

, размещенным в контейнере d i v, нужно присвоить внутр енни е полоски .

70 ГЛ А В А 3

. Ь о х h 2 {

padding : l Opx 20рх О 20 рх ;

.Ь ох р {

p adding : О 20 р х l Opx 20р х ;

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

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

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

>

Lorem ipsum dolor sit amet,

consectetuer adipiscing elit.

' Proin venenat is tu rpis ut

•uam, In dolor..Nam ultrices

. nisl sol licitudin ' sapien. Ut '

lacinia aliquet ante.

Рис. 3.5. Более сложный стиль

конт ейн ера со скруглен н ыми

углами

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

повторяющееся фоновое изображение. Нижнее изогнутое изображение применя

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

. Ь о х (

width : 424р х ;

background : url (images /tile . gif ) repeat-y;

. Ь о х h2 (

ba c kground : url (images/top .gif) no -repeat l e ft top ;

pa dding - t op : 2 0 р х ;

. Ь о х . l a s t (

background : url (images /bottom.gif ) no - repeat left bottom;

padding-bottom: 20рх ;

}

.Ьох h2 , . Ь о х Р {

padding-left: 20рх ;

p a dd i ng- r i gh t : 20 рх ;

<di v clas s= "box ">

<h2>Заг олов ок < /h2>

<р с lаss = "lаst " >С одержим ое < /р >

</ d i v>

ФОНО В Ы Е И З ОБР АЖЕНИЯ И З А М Е Н А ИЗОБРАЖЕН ИЙ 71

Пол уче нный в р езу л ьт ат е этого контей нер показан на р и с. З .6. П о с к оль ку высота

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

зе рт ИКали .

. 1<iiii

IIII щLМtl,l ю- 0........... ,

Lorem Ipsum ]!!

LoremlPN'n dOIDr 'к Imц. conteC1.llCUllr \

.~ eflt.ProIn....,.t:tf; turpll UEquam.

In doior. Nam 1J1tr1c.,nl!lloIIt~арle:". ~

UtI&cIn:.~~.I ~ ."'"" м _' J',

ji,

i

I1

1 . .', "

Iг· '1 .~--'-.,.-,.,. "" I

i Lorem Ipsum !1

!. 11

!, Lorem ipsum dolor sit amet, !i

. consect etue r adlpisclng elit.

Pro in venenatis turpis ut quam. ; !

'n dolor. Nam ultrices nisl !!

sollicitudin sapien. Ut lacinia ~ :

I " ali.quet_ant•..•. . ,;,:11 14_.. , ~__...._~ . $

Рис . З.6. Контейн ер имеет фиксированную ширину и может

увеличива ться п о вертикали

Изменяемый контейнер со скругленными углами

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

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

и х ши р и на должна быть равна ши рине в ерх н е го и нижнего изоб раже ний . Для

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

о б: вм есто одного изображения снизу и одного сверху с каждой стороны п рименяется

по д в а перекры вающихся изображения (рис. З. 7 ) .

top-Iett. gif

top-rigllt.git

: I с ' 11, еинер div . Пр и и з м ен е н и и ш ирины ко нтей н е ра

.............................................................: ~изображение top-right.gif перемешается

г ~ .~~ ~.~.~. ~ --~~ ~ зОбражен и ю top-Iett.glf

~ ' ~~ . ~ _ . ~ ~ ~ ~ ~ ~

......................................................................................:

г..0 О • .• . ••••••• . • . о ••о ••••••••••••••••••" , •. •• . •.: '': '~

: «. 1:

i 1: : , 1: I -1 ............................................, :

рис. З.7. Чтобы ширина контейнера была изменяемой, изображения наслаиваются друг

на друга

z ГЛ А В А 3

При у вел ичен и и ширины контейн ер а открывается все большая ч асть лев о го и зобра.

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

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

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

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

ескол ь ко до п ол нител ь ных н есемантич еских эле менто в.

<d i v c las s ="box ">

<div clas s ="box - ou t e r ">

<d iv c lass="box - inner">

< h 2 > З а г ол о в о к < / h 2 >

< р >Со д е ржим о е< / р>

</di v>

</div>

</ div>

Для метода нужны ч етыре изображения: д ва в ерхних имитируют в ерхние с круглен гые

углы, а дв а нижних - нижни е скруглен ные углы и тело контейн ера (рис. 3.8). Высота

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

то высота тоже может изменяться .

top -Ieft.gi f top-right. gif

/ 1/ ~: !~

bottom-Ieft.gif bottom-right .gif

Рис. З .8. Изо бражения, необходимые для изменения ширины конт ейнера

к гла в но му к о н тей не ру div при м е няе тся и з ображение bottom- left .gi f ; к внугр

енн ему эле ме н ту d i v - и зображен и е bot tom- r i g h t . g if; к внутреннемуdi v Cop

- l e f t . g i f , а к з а гол о в к у - t op . right . gi f . Чтобы сод ержимое н е примыкало

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

в конт е йн ер .

. Ьо х {

width : 2 0еrn ;

background : #e ffce 7 ur l (i rnag es/ bot torn -lef t . gi f ) ~

no-repea t left b ottorn ;

ФОНОВЫ Е ИЗОБРАЖЕ НИЯ И ЗАМЕНА ИЗОБ РАЖЕНИЙ 73

. b ox- out e r (

backg round : u r l (i ma ge s/bo tto m - r ig h t .g if ) ~

no-repe a t right bo ttom;

padding-bottom: 5%;

. box- i nne r (

ba c kground : url( images /top-left. gi f) no - r e p e a t l eft t op ;

. Ь о х h2 (

b ackground : u r l (images/ top- righ t . gi f ) no -repeat r i ght t op ;

padding- top : 5%;

. Ь о х h2, .Ь ох р (

padd i ng -le f t : 5%;

padding-righ t : 5%;

в этом примере ширина контейнера установл ена в кеглях ( ет), поэтому при увеличеи

размеров текста в браузере контейн ер увеличивается ( рис . 3.9) . Можно устано вить

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

от размеров окна браузе ра. Э то один из главных ПрИПЦИПОВ создания "эластичного" ,

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

-~. .,.". ..-'Мi

Iг- .--- -...~......-- .--- --')

1! Lorem Ipsum i .

!I I.onIm Jpsum dolof" • .•,... <оn""",,,,,_, 1 I

11-d!pio<" _1<. Pro....ее..'" turpb ut \ I ii quarn. Indokк'. , Namukrt<:e$ nisl ,ofttcttudln i! ,'

l'i sapten.ut ladnill aliquet ante. I

!

\._~.__~_--J ,

! i

! !

;---------~--.---~

I ........".._...._._.__..... о • .• . I

!'f Lorem Ipsum !I

11 Lorem ipsum dolor sit amet, conseetetu er 11

'1 adipisclng elit. Proln venenatis turpis ut I !

11' i quam. In dolor. Namuitrices nlslsollicitudin iI

t sapien. Ut lacinlaallquet ante. I

! ! i I'1.. --- - - - - ..- ..----....../•!- __ I ..__. _-_ ._. _~_ _._-.."

Рис. 3.9. При изменении разм еро в текста изменяемый контейнер

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

по горизонтали

74 ГЛАВА 3

Углы типа "вершина холма"

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

бы ли разрабо таны Дэном Сид ерхольм ом (www. simplebits . со т ) , ав тором кни ги Web

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

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

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

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

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

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

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

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

можно создать растровые битовые маски скругленных углов (р и с . 3.10) . Маска закры вает

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

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

скруглены ( рис . 3.11).

Рис . З .10 . Растровая маска , закрывающая

фон кон тейнера, создае т

эффект скругления

Lorem Ipsum

Lorem ipsum dolo r sit атпе г ,

consectetuer adi pl scing elit.

Proin venenat is turpis ис

quam. ' П dolor. Nam ult rices

nls l solli cit udin sapien. Ut

lacin ia aliquet ante .

Рис . З .11. Контейн ер с углами

типа "вершина холма "

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

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

з аз уб р ен ным инеаккуратным .

Базовая разм етка ан алогична разм етке в пр едыдущих методах.

<div c lass="box ">

<div c l a s s="box-oute r " >

ФОНОВ ЫЕ ИЗОБРАЖЕНИЯ И ЗАМЕНА ИЗОБРАЖЕНИЙ 7S

<h2 >З аго