Стильный сайт с помощью CSS

uJifl l,.illrlil Ul\ilJ I J]Ur)] Uц1]JjUU]jj I Чapльз Уaйк-Cмrrт NT Pгеss Мoсквa,2007 ::: rr0.1.7З8.5 з2,973.26...
Author:  Чарльз Уайк-Смит
5 downloads 263 Views 50MB Size Report

This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!

Report copyright / DMCA form

DOWNLOAD PDF
< l-еnd пaln сonЕеnЕ'> зaкРъIвaющий div o6лaсти oснoвl{oгo сoдeP)lшмoго и 3aкPьIBaIoщ].tйнеo6я. -тeльньIй кolltментаPий.

xнтlvll rl nравtt'a ё'o l.ап!'ёнxя

35

стPoюr 35.37 . . , , d - ' n a v j q ё - i o - ,.' <р>не!e а!e soпe useful !:!ks fтom t!е пeb siЕе of t]rе !i<sup>3с (i"lolid viide шеb :.nsortiш), the guidiiq body oi the aeb.s de1tеtорmeлt'

с.Iитa€ т ся paзyмным въIделять сoкРацения из o6щeгo текстa' IntеInеt LaPlorer пo,toлчаlrиIo lrикaк lle выдeляеT aкPolrимы. safad oтo6paxaeт их Iq?сивoм (нaпplri(еP' кaк Ea Рис. 1'з)' Если до6aвить к aкРoяIrмy теI titLe, пpи нa. ведeнии rra irегo }т€ з aтеля мъIдIи пoльзoвaтeль увидит всгцьIваlolцFo пoдскaзкy с тeriстoм. Укaзaть пoль3oвaтeлю нa вoзl!o,кяость пpoсlloтPеть Рaсш]rфpoвIry aк" эoнимa пlo)t{нo'дo6aвив к немy п}тlктиp}Ioе пoдчеРнrваllие, ToчI]o тaЕ ){tемo)l{no испoльзoвaть и тer abb.. стPoIси з8-45 < t i > < a h т е f = , ' h Е t р : / / v а 1 i d а Е o ! , п 3 . o т g . > W з сх' sн т м ! v a 1 i d a t o r < / a > < / 1 i > < 1 i > < ah ! е f = ' ' h t r р : / / j l q s а l i . w з ' o r g / с s s - v а 1 i c а t o r / " > 1 ' J з с , сs s s ' 1l.da.о!.

o- ,

,>

< 1 i > < ah r е f . ^ b t Е р :/ / ] m . 0 з ' o r g / l 4 a r k u р / " > l н т ш LR е s o ц r c е s < / a > < / 1 i > < l i > < а h r е f = ' ' h t Е р /: / v Л , m . W з ' ; r g / s t У 1 e / с s s / ' ' > с sRse s o u r с е s < / а > < / 1 i >

<]+nd naviqaЕiоn > этa секция нaвиrации является, гIo с)ти' пPoстьIм спискoм Irз гипеPссьlпoк. oни пoмeще}rьI вt'тpь 6лoкa div с идeнтификaтoPoмl пoзвoляroщим тoqяo ссьг Jaться нa д Iный эЛемeнт пpй дo6авЛelrии стIflей, oбPaTиTe вlrи з.]eсь тaк]€ не тPебyются теги пePехoдa Ea воэ'1o стPoкy' тaк кaк эле}IенTьl спискa пo yмoЛчarrlrlo являlотсЯ блoчIrыми и pасnor'Ialaroтся нa oтдельI]ьIx стPo.

стPoкa 46-50 <:-iooLer-> <j ! v i d = " h o л e р а s eofо t е r , ' > < p > & с o р y2; 0 0 4 с h a f l i е ц ' k e s m i t h а n d N e п R i d e т s ' < / р >

з6

глAвA

'l. xllт|Y|L: tтttllятyР'Pyeм

ФAeРх{'иoe

Пoс,rедEип! эnементoм стPаницьl яeцяeтся div' сoдеp)l€ щ ий вtr

Pi

l(i.

тeкст нш{trеrо

J6 ьцa,

CтPoкtr 5l_53

Boт и весъ ltoд стPalIицы.

BoпPoсьt?

нет?

хopoшol

двиIаемся

дaльшIe'

иeрaрх1rя lqoЦylпer.тa: з!.aкoпrcтBo C CelYreйCтвolvl xнтtиL tt Еще oднoй вa)кнoй кoqцeпцией, с кoтoРой слeдyeт пoзIlaкoми,rься tlеPед тeм' кaк мь! яaчнeм Рaбoтaть с Css' является zф"Д11я doкJ,1ен|1|а,ИеP^P>|I'\яl\oчмegтa пoхoжa нa гeнеМoгическoе дPевo или нa диаIРaммy' сoстoяIl{ro нь1х хнТмLfeIов стРaницьI. что6ьI,т}чIiIе п а фPaгмеяТ кola тoльI{o чтo РaссlroтPенIroй стpaницъI 6ез сoдeprкимoIo' oстaвив тoль(o

, ., хomlёятарии


ъпеPь ltы четкo в!ци еroв, нaпPиi(еp, в кодe теI bodУ сo]еp]ш,r всс oстzlпъньтeтeти. МьI тax?ч.езaNrетили' чтo теI div с идеIrтификaтo. !l ]l Рo1t 1оqo втспtочaетдва теIa тег изoбРarкеllия и зaroлoвкa тРeтьeтo уРoвня. I Ia Pис. l.4 tr!ьIвидим иеРaPхическi1o диaгPамry пpeдстaвляlolqiю этoт фРar\ieнт кoдe тРaфичeски.

x!,!?ml * n'.33ла sro gа'!.'!аяl,|n

М

I

@

@

з,

!Е

Pис'] 4, ИeрархИчeская оpукrypадиагpам мЬ набoр начинающeroAля pабoтьl с xнтмL Если послe всeгo пpoчитаннoгoyвао pазгoрeлсяаппeтитjи вЬ|xoтитенeMeдлeннoпpи. стynитьKсoздaвию coвместиlиьrxхHтМLсаЙтoв,пpeдставляeМбазoвый шабЛoнтaкoЙ стpаницы (вь|тage мoхe]e зaгpузитЬeгo и t!аблон paссMoтpeHнoЙвыu]eстрaницы с Ldйтаvvw bdd сoг'/(lvl .), дoпolни leльныeшaблoьы Ч-lЙL i ХH-МL мохнo на,l/ пo а j p e с y v ф и e b s l а . с l r. с l с , o r оA/а ' r f lel a o d Ie s ' n о e /h t ф I п p o с | o и ] v e . / e j e . l | в ч y . pитeгoв tir1e нa нaзвallиeвaшeЙстpаницЬlидoбавьтexHтML.кoд вн),тpЬтeгa ъodI, < | D о с т Y P Eh с п 1 P U ъ L I с ' / / \ t з с / / D 1 ' l н ' l ' l . I t1 , c s t r i с t / / a N " ' ь t t p : / / ' д I , . w з ' o I q / т R / х h L m t 1 / D т D / x t l t п 1s1t r i с t . d . d ' > < n t m tш t n s . ' h t t р : / / I t r t r . п з o' l q / 1 9 9 9 / х i l t п 1 ' t а ! g = ,е n ' п 1 , 1 а . ( = ' e n '>

< m e t ai t t р ' е q u l v = с o n t e n t с y р e ' с o n i ё n L : l t e x t / ь t m 1 ; с h a r s e t = i s o 8 8 5 9 1 ' / > 6, ,

,,,p t

l

6q,jг

6E.ld6lo

t6t,

',

J ]6,l

ёё-'

'Ур.

',.'1

,

,,,


встAвьтЕ

вд]II x]]тцL.ioд

>

liтo тeIи 1nq П o l ч o I P e в н J Д i н t l l i o и c P а p х и ч c ( к y ю дишРaмм}.! l{ьl видим' а , f a l , " | L l ь n л я t г a a , . т J к кaк oни paспoлo,кеllы вн}тРи нeгo'

l8

глAвA,t' xнтML: tтPу'tТyP}Pyеfi .oдePжnмoe

B сBoIo oчePедь' тег div - podumе'Nъсх.1|й tля o6oих элемeнтoв. a теги img rr hз сесnpшc\tuе Дp1т l'ля tРyгa' тах кaк нLчoдятся нa oднoм }T'oвlJе иepapхии. этy иeРapхиlo мoжнo испoльзoвaть г!ри riалиса]rии пpaBиЛ Сssl div{1oqo imq {здeсь правша сss} Такая стPoкa пPедн aзнач аетl я тoJIЬкo ll"1ятегoв i л g ' Pа с пoлoженн ьlх в}r}тPи div с id= ..1оso . ( + в сss зaмeЕяет id) ' дрyrие тerи itng Irа стPaIiице rre пoпaда. Ioт пoд дeйствиe этolo пРaвилaj тalt кaк olrи lre рaспoлorкеньI в}IyтPи div с идeн. тификaтoРoм ''1oqo''. Tаrим сгIoсo6oм мoжIro зaдaтьi пaпpимеP, гpаницy тoль. кo вoкp)т oдIroгo изoбРaл{еIrия или с пoмoщьIo пoлей сМесtить изo6Pа]r€ н rre пoдa,ьlIiе oт oxPyжaюпIих элемeнтoв. БoЛеe пoдpoбrro мьI пoзнaкoмиl,lся с lIanисaЕием пРaвил сss в слeдiющей гЛaвe. глaвlroе хе пolta eмеятьI в теЛе док),.l{еIiтa являIoт. ся дoчеPIiими IIo oтIrollrенlrю к тег1body и в зависимости oт свoегo Рaспoлo)хен и я м o q т 6 ы т Ь д o ч е Р н и v и . p о д и . е л ь с к и v и и Л и с e с л р и н с к и N t ип o o т н o ш е I { и ю к дDyтим элeмент
Глegв 8. кaк pа6oтaeт CSS

,$

EI

'trй З t\

rЕ II

@ @@ @

Contеxtualselесtоrsarе veryseleсtive. тhь exшpl. йоqs how ф !.rgе! а '?eсit. t!Е цsiлg thе dф!шnt

hiсшhy.

та8s oпly nфd в ье dфеndаn* in фе otler Jйe.., iп фс *lфto!: о$rr tngs саD ьс in ьеrwе€o and фе w]фюr sti]Iwо*s,

B flpедыдyщей глaвe мьI IIoкaз;UIri вaм, кaк кoд хнTL{L сoздaeт стPyкryPrylo lleрaРxиIo тeгoв, пo хoду дела oтмeтt,r4и' кaк мo) ro испoльзoвaть сss для дo6aв. ,,]е!rиясти,rеЙ к этим тeгач. ] oчнoгo кoч |pojя нaд Pa]меткoй и внешним видoм э-rементoв (текстa и rPaфики) нa экpaне' TепеPь пPиlLцo вРемя пoзIraкoмиться

40

t,lAgA 2. xак 'а6.xa€ , сs5

с Css, Дoчитав этy rл'rвy дo Itовцa' вьI 6vдeтe гoтoвъI создаBать сo6ствeпlrъIе стши lr примеIrять ихj догryстим. к хнтмL.кoду' PaссlloтРетrнoмy l} пРeдЬI4щeй глaвe.

Tpи спoсo6aдo6авлeниястилeй

к дoкyмeнry

Есть три спirсо6а дoбaвлеEЙя сss к Wеь.стpaницe: лxнei'It1Ь1i1.влo)кенlrый ji с лoмoщьIo ссЬUlки I]a oтдеxьньIй фaйл сss, Мъl РaссмoтPим иx !се| несмoтpЯ зoвaние ссъI,ки lra сss фaйп, | ] 6 j и j l J ' 1 и . | F йн в r я аr с я о l л е л ь н ь r мф J й Л o ! , ' o J е Р ж a ц и N l ' o , o o o ' ' р , " - n сss. использoвaтЬ тaкoй фalLп tr{oя.етЕеolpаниЧeннoе числo wеЬ-сTPaI{иц, чтo :ioзвoляeт o6eспечитъ цеЛьный и oдиEaковьrй o6лик всeх стрaв,{rr сaйтa.

Линeйньle

Cтllл}l

A

-1riнeйньIе' или лoкaцъвьтe. стпли дo6aвляroтся неIтосpедственнo к теry с пo!to-

: . s l y l е = ' f o n t - в i z e : 2 5 p t ; f o в t - w e i g ь t :b o 1 d ; f o l t - s t Y 1 e : i t а l i с ; :.:o.|rеd;''>вy addIng ]ntinе сss stylinq to.his раrаqтарh, пe сan ovеrlide :1: ..fаutt stУles. ::>:'1c no, !,e аrе baсk tо а теgutaт dеfautt раrеqтalh iiiЕhоut аny intlne Pезyльтат rlьl видим lIа pис' 2,r. ПеРвъIй и тPетий a6зaцы oтo6Pa]каloтся сo .тILrсм аб3aцa брaузePа пo yмoлчaни!:}, Bo втoPoll a6зaцc мьi дo6aB'л|1лИнeй:r]ii стиль ',l измеIrЕпи еIo внeшний вид. B о | н е к о г o р Ь l е o . ( 1 6 е | I н o . | иj о к з ь н ь | х L т l и е й o к o 1 о Р ы \ ( - е д y е т з н а 1 Ь : .

oчеяь у3ка.я o6лaстЬ Дейс.rauя

.

примeнение лoI.а-rIь1Iых стилeй этo всеi.o лишIЬ eще один спoсоб дoбa. в!ть lтРезентaциot]ttыи кoд' что' пo сl"ти] ничеl1lrc oтличается oтyстaPев. t!еro нТмL с его влo'.eнпьIми Та6лицaми и пepeизdьIткoм nPсзeEтaциoннoгo кодa] ляются нeзaмеIlиr{ъIN{ив тeх Pe/]Itих сиryaциях, кoгдa тPсбveтся изменить стиJlЬ лишь oдно.o элеN{ептa' oднaк'r. пPaктически всетдa мФкrro этoго из6ежатъ' сo3дaв )'Irикaльныii идeнтификaтoр и пpи. свoив емy вy}с1ъlй стиль в та6лицe стилeйi

oни enияIl)т тoлькo нa тeц для кoтоPoгo

тр!r tn'm6a

(тgлeй

g06ав'энl{я

тhis рмgФph ]iлP|у btcs oп lьc bювя's

к яo{}!!e$?У

41

delаu|l

Bу aсliling inlina СSS stуIing this parаgrаph, we cаn ovеrridеthеdфult sфIеs. Aпd !oя $с m ъaсt ю a rсgdtr dсlаuп pзпgвph wilhoul

толькoк тery'к кoтoрoмy oнипpикрeплeвь| Pис'2,]'ЛЙяeйнЬеоИлИлримeняются локaЛьЕьIй стилЬ мo)кIro пPoвеРить нa пРaктике пРех\4e, чем дo6aв-пять в тa6лицy стшей' тoлькo нe зa6удьтe удaЛить aтРи6}т style lIPи кoпtlpoвaнии лoк:Lllьlloгo стиля из кoдa стpaницьl в фaйл сss; в nPoтивIroц сщ. чaе вьI гloтPaгиle vJсс) вPcvени, пыrая( Ь oбнаp\жи|ь оши6Ч в dашей тa6лице стилей, a виIroй всeму oкaJI(ется имен1{o style. oкaзaвшийся пo

оши6кев фай'IеCss.

лo'.anьвьIе нlr]liе), кoтoРьIе,

влo'кeнПьte

пеРед влoжeвEымlr пРиoPlJтeт {oписalrньIl\'и пePед глoбaльяьIми' в свolо oчеPедь, I,lпIеIoт пPиoPитeт

Cтили

мe)к. ГРyппy сTилей сss мo]ltlio пoмeстить неIloсPедствеrrlro в док}r!'eEт хнТМL' (r,ли Bлoжен. ст]rли стIrли стPatr[ць'. тегaми head, этo 6yryт вЛoжеEяыс ду н ы e ' г и Л и Р , 6 l r l J ю т l л е д } ю u r и мo 6 р . l J o v :

<:it1e>!nline stУtes eхаmрle ,6'

, ё'. h

р ёоl \-'сo."р..

,6''

'

ёr

/!r

-

orоUosa' ,ontёnL-'е,,Ls'

с h а т s е t = i s o в в 5 9 - 1 "/ >

.лA}A:. xa'{ 'а60rзer (s9

а2

<вtY1e tllpo=!taхt/cЕ6"> /t
16pt;

folt-welqhtl

bo]'d, J



Tег

tv-.

v к a з ь I в а еl 6 P ] \ J е P \ . ч л o п o . л с н e | o . , e j ! е

г I'o l сss' J не хгlтМL.

Если вьI хoтите дo6aвить Javasсript, yкa,Irитeд,Iя тегa style aтРиб)'т 'text/ javasсript ''примeчониe

зo(o*eвтиPoвoнн ыeто сDAтA {/* t/)п0м.ц16. нн вoкрy.силei, Этo грeдoтвpoцoeтиx o6Po6oт.y кoк xмL чтo мoх6fпPивё. стч к oцибкe в o6od6oтхe дPу|иx омвoлoв' кoтopь|оc хмL укoзь|вoютсяс пo. яoцью зoкoдиPo3oннь|x экви3oлeнтoв (нe зo6ывoйтe? чтo хнтмL oснo.oв нo хмt), tля влoxeнныx стял6й в этoм пptмepe мы нэ стoли д06oвлять '.rn сDAтA и никorдo в€ оoлк!вoлись с s6пPиятнoФями?вызвoннымииx oтcrlсви. eм, тём намeнeo. вь|мoхeтё сoми Pвщoть, дo60влятьих или нeтt пPoчитo. fio. тьD o хмL сDAтA Iww,wзsсho01s'.om/хfr|/хm| сdoto,osD).

rJoт lrекoтoPьre зaмeчa . .

o6лaстьдействия в,ro,€нIrы-ч стиr'Ieй oгPа}Iиченa стРаяиц€й, сoдер)кaщей !fi; если ваrrr€ a йт сoстoи'г из oдI{oй единствeннoй стРarrицьI' мoхцo ислoль. зoвaть влo)кeнньre стили' Iro в этo]!' с.тyчaе вы не oтделите сoдер}кимoe oт прeзeнтaции' так кaк и кoд и стили сoдеpжaтся в oдIroм дolсyменте; гтpи Pa3pa6oтке стрalrиц, oс06енЕ0 сo слoжвoй paз}lеткoй, мoт(tro внaчa. Лe yкaзaть сти]rи кaк влo)i{енI]ъlе' чтoбьr пPи oтлzдкe нe гIePеклIочaться мея(дy дв}a!я фaйлaN{и:та6лицeй стиЛeй и кoдoм стРaницьrj oдI{акo noслe oтjадки слeд}eт пеPeнести !лoженIlьIе стили в oтдeлъIrьIй фaйл сss; влo)кеIiные стlU1и иNIеют гIPиoPитет перeд гЛo6a-.тъilыми, нo yст}тaют ли. IrеЙrrъIм.

внeц!ний

файл сo GтПляПrи

Nloлtяo пoме.тить стили в oтдельнъIй фaйл (та6лицf стплeй), связaв егo с нeoгPaничеIlIlьIм числом стpаниц сaйтa. чтoбьI стluи имели глo6alIьнoе (вa ypoв. !lе сaйтa) дeйстBие. задaнjrьIe стиЛи 6уд}т вoздействoвaтъ нa все стPaIrицьI сaйтa,

три (|!lr.э6e л$6а@'!.! ! я dт'neй з A.!{yi{эвт!

4з

' тРа ||lцьl, ЭrU ё-iJ.lь( JнЬIii иJ тре\ Dас. смaтpивaеl{ьтх N{етoдon. кoтoPъIй пoдР.tзytIсBaет пo-!яoе PaЦеjlеIIие сТPу]rтyРьт и пРезентaции, с!едя все пpaяиla сss в oдtlн фaй-l. вы существсннo oбjегчите г и Р o в а н и с и t,J\lFIlеIlиe lи-айЬd (. i' l] Pеldк H а п P и м e P ' е L ] и п o I P c 6 \ с | . я o н e ' l I | и 1 \ | е | е I| и л в j и з d f i н в ' е l o ( J i l а / д o г г } с , тимt клиент I]опPoсил сде"!aть шPllфт текс'lа синиiI' a ве qеPlIьI\{)' мoжt]o пPo. чем менять стиlей' этo гoРаздoлегче. стo изп{eяить odяoпPaвlr]lo сssj}тa6nице а6зaцa (r rк !РoисхoдЙjo кa'qьIй aтP}Iбут .oNT '{,rя кiйдorо дo пoяв-.1еljия сss)' с пoМo]хнo дo6aвитЬ тaб-!иц1 сТllле!,l к лIo6oi4' кo.]ичеству хНT]{L.стРaвиц мoцькr всето oдной стРoм l(oда. добавrrеrпloй в Рaзде,r hеac кa'qo}i стРaнrтrlьI: '],,,
/,,.,.

л"",,

d

стt!]и 6!дут д116авлятЬся к кaхдoй стрaнпце, пoсЛе этoгo в хoдс зalPрш ,|еге вниNIaнис' чr.o в i:]k aтри6\] п.cia lказaн Iiак ' sсreen,. этo o6Paтите 1o o з н a ч , l е т , i { ro т o 6 л и I | ^ . Г Е q е й ' n J l э ч J , L | Я о o 6 | J Д \ r | и я ' p J н и ( ы ; ; - n б й е . '.eнlы и[+lтат. e.rьд-пя пpo{\to,lp'| Ь oa, vтoс Ufoе e|eрчы ,----,:-2-

ри6tтьln.ртвъ]бoре,JIр ha.dhе]d, рrint, aura1' гioлньIй ньIх вaРиatrтов естъ aтPи6)тьl a]1, lrojесiior' (Iдgцg3хhgqЬ{9щz!sq/ ]llorfrетe нaiiт]{ ЕIа сайтe uЗ SсЬooь сss mediatlPes,asР), ТeпeРь блaroдaPяте.у 1ink шPи o,гt(Ръlтиистpан,rцъI 6PаузeP 6)дeт 3alР,vяraть втoрoй Тег ilrn сo ]Irairerrием .pj::ci,' для aтpиб}тa и тaбл,'цy стйЛей.llo6aBl' . e d l а ' : и ь I ] \ t o , + i е \ t и ( п o л Ь з o в а r Ь в r o p y ю . а , l1l ц t с , и , с й , к o - Ъ i ? . 6 д " r з e д . ! : д s - r . ти,lеи ,ilя IIеча:и Yoжет скpъl истЦj!ggЦщдд-деI?Jд. toщпе смь!с,.iaEa 6i']1aге' вaть навиraциIо и пРo Еспи сo3дать втоPFo TaблIrцvсТилеi.Iдnя печaти, тег ] i]k бyдет вьlглядeть тaк: !'r<1ink hrеf.''nу_s:y1e.shеet'-рf:n..с!s' Iedla=.р!lrt Е y р е : . Е е x Е / с s s /' >

rе1.'sr:yiеsieеt.

ТепеРь мьl знаeм. чтo такoс тaбnицьl сти.jIей' пoэтoУу давайте ,vзнaе}I'кaк писать прав!!!a сss и тaкие кoнцеI1цlIи' riaк rrасIедствеrrl'roстъ|кaскaд и € I 1еци"

чтoтaкoeсss?

кacкадвьe таблиць стилеЙ - чтo такoe таблицЬ стиЛеЙи лри Чeм здeсь каcкaдЬi?Hа л6pвЬй вoпрoомьLoтвeтимоeйчао,a на втopoЙ,хотяя yxe и нal'leKнуЛвalиoтвeт, ч)ть итак' тaблица стилей- этoтeкcтoвьЙ фаЙЛс рaсшиpeHиeм.сss таблица стилeЙп peдстав'Feт сoбo; списo/ правиl сss, Kамоe правy.o .адаF ('vrь, -pvvе'cецьй кoпрeдeлeннoMуэлeМeнтуxHт[4L'кода. Правилo мoxeт' Hапримep задaвать pазМep

44

IлRE* ]. {a!{ oа66ra€ '

€5s

lrrpиФтатeкстаабзаца или тoлщинypaмKивоKPyгИзoбраxeния'pаспoлoxeниeзагoлoв. ! а , л и l , l в е -Ф o н а , , д , с , o v o ц D о с s s м o / н o ъ o . с о J д " т Ьv . o г и e ф У н / ц и им o щ р Ь/ дизaЙнepскихпpoгpаMM]валриМepАdobe |.Design, css пpeдлагaeтиочrрпывarощиe сpeдствa длЯ сoздaния любoгo диэaйHaбез пpиМeнeниятaкиx Улoвoк,как влoxeнныe таблицЬ|или прoзрaчныeG|Е.иэoбpаxeния.oтстУп

AнaтoшшяправилaCSS нaчЕеNl зпaкoмствo с сss с рассNIo,гРеяия пРoстoгo пpaвt]rla' вьтделяIoщеIo шPlrфт текста всeх aб3ацев докупtеIrтa кPaсньrм цветolr: i

]сo1oт: red} . TепеPь, ес,1и в хнTмL.кoдe

oчeвь oЕ бyдeт

вaяldй

тeaст.

вьIделeE

пPtмeчoниe

y llaс есть слeДaоuий фpaгмeят:



кРас}lъl!I.

d.

тolдo кoк в хHТмLтeц 69з ск06oк.

зo0ючoDтся в ylлoвь'e скo6Kи, в сss rcl yхoзывoeтся

ПPавилo сss сoстoит из двP{ чaсте!i: се!|ек||lф|l' oлPе/\eлЯIoIцеIo' к кaкoму Tеry (в дaнЕоIt с.тrчае этo a6зaц) пpиlrеняетс я Рa1\Иao' И o1ъjвлafuц yкaзъIвa!} щегo, чтo пРoизoйдет пoслe приNtеtrепия I1Paвша (текст а6зaца стnнeт кРaс. ным). само o6ъявлeЕие сoстoит !rз двух элeмeЕтoъ свoйmaa' вaзь]вaIoLцеIo oбъеItт пpимеIreвия (цBeт rcкcтa) И знац'н1Iя' )taзъIваIoщеro состoяl{ие сэoйстDа (кpасный цвет). ПoсмoтPll.ге lra Рис. 2.2. чт(16ъIтoЧIro yяснить к чeму имeнIro oтнo.я'rся,)ги

1ер!иtlЬ',

"i,".*

oбъяМeiиё

p {сolor:rEd;} свoйcтBo

P И с , 2 , 2п,p а в и л o с s s с о Ф о и т И з д в у х o с н о в N Ь х э л е м e ! т о в и д в v х п o д э л е м ё н т o в

Haписaниe пpaв}rл Css Базoвyo стРyктlPy селeктoрa и o6ъявлeния мo,l{tlo PасшиPIcть тPемя спirсo6ами. v пpавМo voжег сoдepжalь нeскo]ькo о6ъявлeвиi|. ....<--

напЛ.анge nравffл сss р {сotoт:тed; fоnt-si2e:1]]pх; tine-neighL:15!x;] этo пPавI'lлo зaдaет кPасный цвет для шPифтa тeксra a6зацaj PaзмeP IIIPиф. тa 12 пyнктoв и вЬlсory с'rPoки в 15 п}нItтoв. внимoниe

сss тpe6Ieт o6сoлютнoй тoчнodи - eсли вы пPoпуdятe, нoпPимePl тoчкус зo. лятo4 в.6 пpoвилo 6уд6t пpoяlнoриpoвoнo,

o6pa,rите вIlимaниe' ч,гo кa,цoе o6ъяjлeние 3акaнчивaeтся тoчкoй с зaпятoй' кoтoPая Paзделяст иx i1r'(дy сo6oй. гIoслi]дяяя тoчкa с зaпятoй пеРeд зaкРьIвa!} щейся ско6кoй является rrеo6'Iзaте,ъЕoй, нo в дальIrейlIIем этo пo3вoляeт дo6aвлять oбъяв"1еl{ия в nPa oм' чтo пePeд ними Eеo6хoдиМo пo. стaвIJть тoчIlT с зaпятoЙ. мo)кIro сгPyппиPовaть lrесколькo сел€ I стoPoв, с 1 пo 6IPoвеяь Дoпyстим' eсли вьI хoтите выдeлить шPиф жиРEьIм и с'iяимj тo }!o,i{ете сделать этo с гIoNroщьIo след}'loщеIo пРaвLпa: a h1 ]сoio.:bLue; font ,eiqhl:bold; ] h 2 { с o L o I : b 1 u e ; f o n t п e i g h t : b o 1 d ;] i 4 { с b 1 o I I b l u e ; i o n t п e i g ] r tI l r о l d ;)

Ли6o мo}"ro пPoстo сгp)тlпиPoвaтъ сeлектoPЬI в oднoм пPавиле, yкa3aв их L1, h2, hз, h4, h5, h5 {сo1oI:biue; font пeig]rt:bo1d;} Тaк ropaздo легче. пpoстo не зa6удьте дo6aв!rтЬ зaлятyto пoс,'iе кDl{дoгo селеь"тoPa за искJIIl]чеIlием пoсцедпего. ПРoбельr ста!ить вeo6язaтсльlro, rlo oни пoмoralrт сделaть кoд бoлее yдoбнъIм для чтeIrи,I. к oдIroмy cел€ к тoРy мo)кнo пPимeяtrть fieсЁoлькo пPшш. Если' нaписaв пРедьI4.lцее пPaвилo' вьl pеtnили' чтo xoтите сделать зaгoлoвoк hз эьцелеI'rым lTpсивoм' мorlсIo пpoстo дt)6авить: h : 1 1 , n 2 ' h t , h 4 , n 5 , h 6 { с о 1 o I I b 1 u e ;i o n L и e i q h L : b o t d j ) ь з { f o n t - ё t y 1 el i t a l i с ; ) пPимечсние

вoзяoxяo, !oм н6 тaPпится yзяoть, кoмe eщ6 знoчeнЙя свoйФв мor}т 6ытЬ, HoлPимер, мoxнoли yкoзoть цвeт. пoмoцью RGв/ o нe нoзвoния цвeтo (мox. яo), нo пorc A0в0йт6 .oсP6дoтoчимся нo принципe р060ты сeлeпoрoв. ч).ъ дoлеe в rтoй rлoвe мы o6судим o6ьяMeнyя пPoвил.

46

.лAaA 2. кaк ра6Фтa€ t (ss

Bы6op тe]oв в Пepapxи}|дoЦylileнтa

пpaвил дJrяпpиtпeнeния

Если въI уrке зa6ъIлt'l,чтo 3traчит иeРapxия дoR]'aleнтa' o6Paтитeсь к пеPвoй гЛa. в., Чг06Ьlнаv l]е пpиш lo(Ь пoв1пРяrь.я,

пpииeнeниe

кoнтeкGтньrx Geлeк'opoв

Если вьI сoздaдите пРaвилoj в кoтoPoм пРoсTo yкахитe тег в кaчeствe сеjlектo' Рa, oнo бyдeT действoвaтъ &!я эсех тaких тегoв. напPиlleР' задaв пРaвилo: мь! вьIделим кРaсIrъIм цвeToм всe a6зaцьt сaйта, A eсЛи неo6xoдимo вьтделить

.д"" дч9{P:чg8зgr3

.{ля6oлеeтorнoгo вьl6oPaтeгoвnс.

:|i:]:]y l*"-. по-!ъq'roтся кorrтекстEьIe селel'гoPьI. Boт пРимеР: ilv D {сolor: red; ) ,

lепеPьхРaсIъIм

6yд'т выдeлerrъIтoльIio aбзaцьIj сoдeР]I{aщиесявгry"rPитегoв

кaк в!цнo из этoгo пpимeРal кolrтeкстньrе селектopы цспoлъз!ют lie пDoстo ' l ч я o д н o | o г е г а ,T e | и , Р а . п о ' o ж е н н ы е о л и , к " к o 6 ь я в л е н n . ' r" дunn"" Ь *u. ,], ' гo

яв lяются це,1евь|!и o.тJвшийсятeгиlигеГиу1{atЬIвjюl'гjевкoдедoл.

,iен Рaспojraraться цeлeвoй теr чтo6ьI пРaвилo 6Ьrц0 пpимeЕelro. дaвaйrге 6o-.1еепoдpo6вo о6сyдим этl идсФ' примечониe пPoсмoтPe'ьприleдeняыйнихe кoд вьl мoxerq зorPуз,! фoйлсont6хiao|-3o. BзгляI{еMнa кoд: < h 1 > с o л с e х t u as] e l e с t o r s a т e < e D v ё r y < / e m >s е L e с . l v е , < / h 1 > тhis ехampte shoпs hoи !o targеt a <efl>s!eсiЕiс<,,eп>tag usinq сhe c..ше]t hlёJа!сhy. < p > т a g so n l y n e e d Е o b e d e s с e n d а n t s < s p а r > i n t h е < e б о r d е т s t a t е d < / е D i n . h e s е i e с . o r < / s р a n > ;o t h e x t a g s с a n b е i n b e t п e e n а n d t h е s е l e с t o r s t i l 1 o6a а6зaцa сoдеР,кaт т иInспi пРaвилo д2'Iятеroв eln' закпючelrriьLх вн}"IPи тeгoв p' oнo б1,детпримеЕенo li,1я o6o!ry этих a6зацes' Oднахo

вь]6з9 r€foa

в иepаpxnн д.'(y!вo.|та Aля $рt|'\rrle{r.'

'lpав!n

47

eсли мьt Irапишем пРaвилo длf тeтoв en вIIyтpи тегoв sрan вI{tтpи тегoв р' оIro 6)дет пPичeнeнo тoлькo кo BгoPol,tyа6з,L(\, пp,мtчониG

Еслв.'.

нoвичoкв миPe xнтмL o6Porиrёвнияoн,e.чтo sрan i!ля6тсянeйт.

poльяь|мкoнтeйн€ p oй. инымислoвoми, slan нe 0к0зыв6€ т влиянияho Poзя6ткудo т€ x пoр, noкo вы нe укoxeтe dилЙ. в oтл,чи€ o' div. блoч3oroэлэм6я. ro, koтopый poспoлoroeтся нo oтд€ л ьнoй сrPoкe? slan. лiнe;ный элём6я'. пo умoлчoяию, 6.з дo6oвлeниi dил6й, т6(d вчяpи s.. onq выдeляётсr 6poyзe.

тш(oй кoд в 6рayзеPе 6eз дo6авления Ha pис. 2.3 мы видим' как выr.JIядиT сTtr,!ей'

o htpl/*Ф.bь4.oл/ltYIho

Contехtual seleсtors аrе ye,y seleсtive. тьis exаФPlс shows l'ow lo Ercсi l lP?с'l. lаg usiлg lhе dФcmnt ьjФhу. Tags on]у nкd io ь. d.rcndшls i. tьe orаc. Jrа,el o 'hс gьсbr; om.. rДgsсФ bс in bеtweсnшd lье 9lфlo. sliп vo*s. o/с 2 ] |-аU d орd-и.d

ф ( /л*/и 6oаv]рРа гo Jчoг,аяl

o

нa pис. 2.4 гtoказaнaиеPaрхия этoй paзметхд.

щ

m ]!l Е l*\ tl

ф

@@

ф оpавицьl прeдс.аsлeвиe иeрарxиирассматpивaемoй Pис,2.4,графичесKoe

48

глaaA:. как }a6oтаeт{s5

}Ia давнoй диaгрaN,ме вIцсE пРинцип Рaсfloлo'{еяия Teгoв вE}тPи дPyr дРг га, TепеРь. eсЛи мы ЕaпиlIIсм пPaвилo: еm {со1or:qтеen] и пoмсстим еIo мe'(дy тегaми sty1e в o6лaсTи heаd пIa6лoEa сontеxtual 'еlei'о'' ImplhIm IoвЬ|lРлnvзеjеllь|ч,екlт.pаlпo|oженныи".".дy'.',"*.;

(рис.2'5).

Contextual seleсtorsarе ye,yselесtivе. lъis cхmрlс shorvsьo\t lo 1шsсtа J2..''. lаg цsiug йe ijФU@fl hietrьy. т!8! onry .eed to ьc dсяrпфnls in Йе .r./.. J,dal Ь lhс *|eloп офеr uss сs bt in ЬeN(п шd ш. *iс оr!l'U цoь

Conteхtual seleсtors aге yerJ seleсtivе. Iъь eiалPlс shovs hоя ro и$.l а ry".d. lа8 'sьg фe dФumff ьiеmlry. тags оniy nссd lo bс dепndmв iп lhс ?il.. JrzJ.? iп lh. slкtoп othert.!! сап Ь й bсrя,флMd фе яLтlor 'LU цort),

Рис'2.6 с пoMoщьюкoнтeKонo.оселeсopа мЬ вЬделилиtелeньмтoлЬкoтeKовабrацах,

в!i6!р

"э.ов

6 йepар]d;1л.xy!:e!.та

дпв пpиaвнe.r}'я

'Раs}t:t

49

р еm {сo1ol:g.еen} РезyлътaтьI дo6авлeния кoтoрoгo покa]alrьI нa Pис- 2.6' Тaк кaк пеPед еin мы дoбaBили селeктoр р, тепeРь пpaвиJlo IIPименяeтся тoль. пoд деи(твие правtuа' пPaвилa с rРiппoвъIми селектoPаtr!и !РиlIеIrяются 4nя все)( пеРeчисленнъrx теroв! а пPaвI,Ia с кoнтекс,гIrьIми сeлектoрaми тoлькo к l1oследlle!ry'xaзaтrlrомy тery' сoлеPxaще[Iуся эtltтРи пPeдьIдyщих' внeзaвисимoсти oттoroi имеются ли мfl{дy ними какиe-либo дoпo,яительньlе теrlr. Пoэтoмy нaпrе прaв[no 6ъIлo приIIсEеIro к тeгaм ea вьTтPи тетов sрan. несмoтPя i{a то, ч-.o еm IIе является пPя\1ьIм дoчеP}lим элеnteнToм &liя р' прaвlzlno все Рaвпo действyет, тaк r€ к eп ншtе

лPивeден пPимеP спoсo6a, пpи пoп{oщи кoтoРoгo п{orкнo }кaзaть нeоРе' qтo6ьI yкaзатЬ целeвoй тег eще 6с)лееIrзбиРaтeлъ}Io: f span em -----.-'-- {сotoт:gтёеn} Pезyльтaт пoказaл нa Рис' 2.7, i

Cоntехtual selесtorsaге ye,}seleсtiYе; тhis еtаmlk snows ho9 io lа'8el а фc.4]. !аg usin8 lhe dФo@!l hiе@nу, Tадs oltry noф lo b. фwndшLs iл !n. ,.?.J Jrdi.r' iд фс kl(lor; o0е! в8s сзл бс in ь€tweс! аod thе *lфlor $ vоrls-

P Й с . 2 , 7У 'K а з а в т р и т eвгсае л ъпeрь, сolлaсIio нaшеiry пpaви,q}iзeЛеnьIм эьlдeлeн тoлькo теI(ст вв1тDи тeгa ё] внqPи reга sod вI|!1Pит.|а р, ЗаJaнIloc пpави]o o''.no noo o,np.l"o., н е г o л o д п а j f е т г o , 1 Ь к oо д и l { 1 е l l г P а ч и ц ы . ( n o " " ц " ' r j n o " . ". n .]"''..,.n.o. Р o в м o ) ' ( н oy ] { а J ь ' в а т (ь к o Л ь к o ! т o д н o т e . о в ' ч r o 6 Ь | г а P J н т / Р o в а ] ь п p и ч e н e н и e пРaBилa именЕo к l,y,l{lrolту вaм, тсм Irе мевее, o6Рaтитe вЕимaние' чтo npи Ireooхoдимoсти пpимeнить лDa. в l u o l o Л ь к oк . j o B y s р е , : . i . , в ( е с г a н o в и т . " o .,o*.'.., kun *" ".'no' "nдn"

l

50

г,lAвA:. Kак рa6oтзsт{ss

яа Pис.2.5, пРaвилo р em t сo 1o. : gIе en; ] npимеIrЯeтсЯ к тerаii етп06{)их aбзaцeв, и мьr не мo'reм пPимeнить егo тoлькo к oдJloMy irР]tlroму I{aм теry lloэтoмy вмeстo кolrтекстнoгo 1тa\1пoтpе6уе.|ся aoчф11uЙ ce12хnф.

пpяireПeнrre дoчeрнПx Ceлeктopoв B глaвe 1 мьl1тIoiмнa]lи' qтo дoчeРIrий тег яЕqяeтся пРямьINl пoтoмкoNl сoдеp. )кацего elo тегa' ЕслI1 вall ЕРкнo сoздaть пpaвилoi пPимeЕяgмoe тольr(o к теry oпРeделеяIroro тeЙ' мo)fiio нaпllсaть пРaвилo: являющeмyся дoqеPниI{ I{,]тя р > е mt с o 1 o I : s , e е n ;] внймoн,|e

сA.oл

> м.xду Aвую .Ф€ t oPoяи

oзнoчo.т (дoч.Pний для)'

Taкoе пPaвилo 6yдeтпpимеIrятьсяв Ea rем сryчaе тoлько к с,oвy sресifiс. тerи emiтalt кaк sрeсifiс сoдеp)китсяв теrе em'являIoщемся Irевnияя lra дp),т}re дoчеРIinм,4''Iятегa р, a слoвa otder и sЕatеd - нет (Pi.tс.2.8).

ht.:,Rw'ьЬd,Фп/5tу|iл/

Conteхtuаl seleсtorsare yeryseleсtivе. тhь ехмpie shovs how lo tаlgеtа q..й.

mg us'пg oс dфtftnl

тags oп]yn.ёd !o be dеgеndшis in фе oга". !,ta ье iп beNфn мd tЕ slФ'oJ ыil Bo*s,

liе@hy.

in ьe glфtoл otherhgs сш

Фoво (5рес]fiс'с noмoщьюдoчeрнeгoсeлeктoр. вы6pатЬ Pис,2.8.Bдаsloм oyчае мЬ|смoгли пPе]кдe чеNt вьI зaкРoeте кtrйry и вaчнетe сoздaвaть дoчePнlrе селектoры' o6paтите вIrимajrие, чтo (нa мoмеflт нaписaния кtrиги) дoчеPниe сeлектoPЬl lre пoалеplкивaIoтся GpayзеPoм Internеt ЕхPlorег для Windows _ oн пpoстo игI'o!и. pyeт иx (хoтя Iпteтnеt Еxploтеr лля Мaсintosh oбPa6aтьIвaет ]rх кopPeктнo)' тeм rrе й€ I rее. если вьr okaJ'(eтeсь в ситyaциЙ, как eдинствеIrным сяoсol)oм Peшения п P o 6 л е м ь l o к а ж e т с я д o ч е P н , r йс е л e к l o P . и м е й 1 е в в и д ! ' ч l o е L т Ь с п o . 0 6 ы o б o й . ти эry непРиятнoсть. тЕ W:п, кaк вЬl вскope vв!{-лите'кjа.сьt и иден гификaтo. теraм' }ro взa}'еtr пPlцeтPьI тIo3вoляIoт пРимеЕlить стили к nю6ьIм отде-!ьяьlм кoдa' кoiпalстlloстью ся с,eгкa пo'iеpтвoвaть

3ь160Р тeгoв в яepархtl|| дoiyяexтa дjt'.pllnc*eнnя

nPавn

.st

тaким o6РаJov. пoка |ntеrnеl ЕхPiolег ве на!чnтся пРави,1ьнo пoнима1ьдo. чеPние (елeктoPЬI. в oснoвlloм вы 6vде |е иi пoльзoв2 t ь их дЛЯ сoJдаl1ия PaмInч' ньIх вaPиaАий B тz6л|1це стиjей лPи o6х0ждении PаJлиlrных неl oвмefi иЧьIх сo стaядapтaми стpaннoстей 6рayзеPa IЕ,

|lo6aвлeниe

клacсoв l идeнтификатopoв

пoxa чтo мьI-Paзo6Pали пPaвилa' в кoтoРьIx пPи }казaliии сeлектoрa с те.oм вРoдe p ,rЛи h1 пРaвЕto пPиIlеrrялoсь к ка,!дoмy экземп,rяpy эioгo тeia. МьI тaк. же l{ayчи"1и.Ьиспoльзoвать кollтекстныe и дou.р*'...,i*."рo, л"Я 6oлее тoч. oднaкo мo)lilro пpиvенить пPaвилa и ]! oпрeдeленi{ьIм oблaстям дolryмеIrтa, yкaзaв идerlтификaтoР или клaсс для теIoв в кoдe, ИдeнтификатoръI и,клaссъi rpeдлaлaюt дpyгoй пoдчoJ к дo6aвлению стилeй - независяция oт иераpхии

'|poсtoe''GПoItьЗoBa''''

е,
Пoзвo,тьтe пoкa3aтЬ вaм' как }rспoЛьзyется мaсс' !ентa кoдa:

с гIoмoщьIo сJlrедi'roщeгo фDaг.

тhis is a heading пith the <sраn>sаne с1ass аs the seсond pаraqrаph < р > т h i s . . . ! ahqа s n o с 1 a s s . < / D > <р с1ass='ёрeсiаltехЕ'>I4rhеn а tаq ' s . d e . - . i i . о ь..л J сl.ss' 'e -аг (a!qeЕ l L < s р а n > ! e g а r d ] e s s < / s p a n >o f 1 t s рos1tion in the nierатс]ry.



o6paтите внимaниe' .rтo мьIдo6aвIr,тиaтPиб}т клaссаsрeс i a 1Eeхt к дв}т те. |eлеPьпPименимслeд!,Ioций сrи,1ькд]ннoмyкoдy.вь|деливтекст Tм'да:aйте sрeс1а1сех.жиPньIм(pис.2,9)| yкoз!вoл .6л.пoP '. {fопt.ffli1y| ,sресiаtteхE

нelveЕiса,

5oс.q

нg з06Цвойт6 do.ить пвpёд н'м тoчкУ,

sars-se!if,

{j o n l - ф е i q h ! : ъ o 1 d ;

]

}

B pезультатe пpименeния пPав!tл текст oбoих а6заuев o1o6pD{ается rцoиё. г o м н е l v е r i с а ' а б з а r rс к , l a с с o м s р е . j а l L " х - в ь I д e л е нж и p н Ь I м . ГеIr.' вEtтplr тегa h1 oтo6Рaxaется ulPифтolt пo yмoлчatrию' Iro .o,Ь"'i" oн так'.e " ,вьIдeЛеIr )riиРIrым, тaк кaк тo]ке oтяoсится к Еnассy speсia]teхt. o6Paтите вllип{aнlie, чтo span' тeг 6eз aтPи6yтoв пo yмoлчaниro' не oкaзьIвает никiкoгo вoздeйствия на oбл'к стРarrицьll так r(ax мьl r:e укa3a'и д?'rянегo никal(oгo стиля,

г'!AB} 2, кalr ра6o?аёfсss

This is a hеading with thе same сlass as the seсоndрaragraph wnan a tаg is ldэпlifi€d wlih в сhss, }l€ сап tаЦet ft leqardloss o' its Dosiliопin thё hъlаlсhy.

Pис,2,9' MЬj и.пoл Ьзoвали .eлетр

Koнтe'
класса длF вЬдёлeнИя xирньjм двух развЬx тeгов

Geлe'<JoPb,'слaсca

Есlи тpе6уeтся пpимевить flPaвилo тoлЬко к oдIroмy aбзaцy клaссa' следyeт сo. з]aть селектoP, сoчeтaюций нуяrЕьIii теI и к-'1aсс(Рис. 2,r0): ,, -" ,.t е, ' , ", ,.,., г: ,:!.сlilrext {font пeiqnt:botd' ] ! . g ! e с i а 1 t ё х t t с o 1 o !l f ё d ; }

This is а heading with the samе сlаss аs the sесondрaragТaph Thislаg haino сlаss, Whgn а |а9 is identitiф 9ith а сlass, @ саn lавet a rcgardl.'s o' itg Posilion i! фe nьа:сhy' Pис,2 ]0 сoeAинивтerЙ юасс' Mы ioлучили бoлеe KонкрeтныЙсеЛeктoр.

aы6!p1ё'оs.

$ёpаРx&!N

!3

этo eщe oдIra paзнoвtцвoсть кoтlтекс1 нoro селектoРaj тaI( кaк Е!асс быть в кoятексте a6зaцаj чтo6ы пРaвtlqo бьUto лPимеяъно. N{oяGo сделaть ещс oдlll] lIIaг и пaписaть тaкoе пpaвlrпo (рис, 2.tl): р {.ont-famity: !e1vetiса, sаns.serif; ) , s p e с 1 a i Е e х t { f o n t h е i q h t I l r o 1 d }; o,,p6

jё

ё/.

!'вleciаlte*t

,.olo

,.ео,,

3эaп {font-Ety1e:ita1iс;)

This is а hеadingwith thе sаmесlаss аs the seсond pЪ'ragгаph Whеn а tаg'is k'gntliedw|thа с|а!s' исаnвrqoiil posпlоn Intne nюrarсnv,

гаgаrdlossot its

Pис' 2,]],Дo6аsив втoрoЙселeKтop'мox|o добитЬсявЬ]сoчайшeЙ точнo.тиiри выбoрeтeъ для прИMeнеHиялpавила Слoвo

reqaтd]ess

вьlделсЕo

)киPньiм

e к}Рсивoм]

тaк кaк пLxoдится

вE)тpи

тега spаn, PaспoлoжeяIroro в aбзaце с rсqaссoN{speсiarteхЕ. Ес-ли TепеPЬ пoтPе. 6уется создaть пPа!ило Дця пРимеIrelrия к sрan вIi)тPи тегa h1' мo'r егo дв}aя спoсoбaми. Са!1oе пРoстoе . Ire связывaть lсlaсс с кaким.тo oпPeде. ]еяIrьIM тeгoм (pис' 2.12). ,speсiа1rext sраn ifont styte: ita1iс} ТспePьслoвa sаrneи сlass в зaгoлoвкe тaкrкe вьцeленьl i'J,pсивoN{.Удanиэ p из селекTopa' пъI oткa3ались oтrye6oэalrия' чтoбьI клaсс бьIл пРикPеlaieн к опPе. le-!енIroЧ' теry пoэтoмy тепеРь пpавилo действyeт для 06oих теroв sрan, сo. :raснo этoмy nPaви'тy' тeт sрan п'oхет бьIТь пoтoмкoм l,o'D.o тегa с мaссoм spе. ПРеимyщесTDoм дaнEoгo пoдхoдa являе1ся возмo,{rroсть испoлЬзoвaть кJIaсс еIa' к кoтoРolty oт{ пPиltРеплeн, из6eгaя тaким o6Paзoм lrгPaничет{иЙ нaследyемoсти иеРapхии.

54

глAlA 2. ка|(рa6отаo' (s5

УKазавмевёeспeцИфичньy Pис.2,12, sелeпoр.мь|iриМeнИлиaравилои Kтery5раnзагoлoвкa Ь пРи\tенеttия (тl'lЛя Hедoста1кov дaннo|o vетo]a и к дPyгим н€ Ь y)кнЬIм тегaм, тaк каl. этo тIРaвилo является !{еrrее кoнкPeтным. Тb eсть, если впoследствии ьыдo6aвиTе sрan вЕ}"rPь дРyrolo тela с клaссoм sрe. сiаLtext, нaпPимеP: y . mayлoЕIn tnis div, the sрan tag <sрen>пaо s p а n >b e s Е y 1 е d . < / d i v >

Pис' 2,1з,чeм мeнeе кoнкретёвсeлeKтoр,темвь шe верoятнoоь неад€ к ватнoгoпримe!ения пpaвила

выGop

reгoв в )'€рархl.ll

до.{yffer'а

nFlrm€neкия

ялi

ilpaви}l

тeкет вtI}тpи spaп бyдeт тaкясe выделе!l lTPсивoм. чтo мo)кeт oказaться и нехe, лaтельIrьIм (Pис. 2.13). Если вы нe хoтитe дoбавлять сти,ь к Eoвolfy теry мoхсio испoлЬзoBaтъ втo. Poй, бoлeе тorllrьrй пoдxoд (Pис. 2,l4): p'sрeсiа1teхt span, h1'sрeсiа1Еeхt sраn {font.st!,1е|italiс)

This is a hеаdin g with the sаmе clаss аs thе seсond PaгagгaPh т h i s i a gh s s n o с | а * s ,

J:

ас]яд9, wэсаntаl,вtit.аga.dlass otl's l*?Lx1x''F"ж}Tж,1.h l! rьь d|v' iьe sPдD &я шy or мy nol ьr stуlсd.

Pис'2,]4,ИспoЛЬзуя двасгPyппиpoваннь|х iравИЛа, мox|oвыбрать oпределeнEыe тerи цeлевЬе ъпеpь пp.авIrЛo дeйствyеттoЛькo на д!а нy,(r,ъIхтeгa, а нa нoвьrй вe

стрalrяется'

Boзмo)кнo'

PаспPo-

вaм этo пoкaj*ется сли]IIкoм с]:Io){сlъI!! всelo д,я чeтьI. кo тaкие пPие}!ы. Jrесoмненнo' voг-lт пoнaдo6иться Baм пPи Pаooте с пoлнoценнoй стpaницей и 1^6лиЦet1 с rилeil'

3пакolпствo

G riдeнтифtiкатopa

ri

lfuентификатoPъI)rQзывaются тaк )ке, кaI(клaссьI,нo с дoбaвлечиeм# вместo r s р е с i а 1 Е е х L {f o n r , ! e i 9 n LIo o i d ; , Если a6зaц пoмечен

идентификaтoрoм,


|Рнljч

'| 'p'''.1,,:

и L e Ч' и ф и : , I o p ..,ц*' o'",',у1'" ''.",.L",'"'.''.'.;"'.",',,'r'p,сt.

l: ',и'IolРоiU

l lи

|я |,Ри!'

няЙ1c

|.nасс

o ' о в а | ь ! - ( я п P и к l l P п r ' e ' J и яJ а \ . D . г | p т D н I \ 4 L п P и I l а в Р Je l ! и и "нf,\lацr'i о,lPишl','IlJlvеl{v\' IJp.вш.\rv.],Pибп

иtгo

ис для этиx целей Рaнее' Cтoит отметить' чтo пРи ;"^". '.".,'-*'*.'yся идев. с rrим связаlIтrьIс o,.lьз.]вaпiJиJаvаsсriPt oсo6eнijо вaкrro orедить' чтoбы Toлькo одиtI Paз' ияaчe JаvasсriPt '"фи*.oры ,'.азъr.,l-',ись в rloде стPar'ицЬI Nю)(ет всс].и себя oчeЕIЬ непPедсказуеNto. нe лepeyсepдствуЙтe с клaсоами напpимeр,пpикpeп. PекoмендУeМваMдобaвлЯтЬUаccЬr и идeнтифиKатoоЬбeDet<лИвo. сss с пo. лятЬиx кdi', сoдepxaщиMoснoвнЬ|ераздeль|кoдаи затeМдобaвлЯтЬправилa идeнили клaссa yfloминания нуxнoгo с нaчина|ощиxcя сeЛeкторoв' мoщЬюконтeкстных тo пйlaраитeсь изоегaтьoасltrит.oв (как назь вaет этo явлeниeДдeффPи зeльдмaн)' к кaxдoмУ кoгда они в кoдe' дoбaвляются -*сoв и идeнтификaтopов . \ и п o o l / \ o e J е на ц и т"J* e N ,""p*"о** B е д " . , о O о . / L . с . /l и ' r v , e l v u t - r ' r ён ё . o \ c - a a ' ^ J ь р d с . M o o e ь н o и- в|r d в e l , д е p р ! a в\VA в.е

-o-vrённЬ A )н",,о, вы yв lДy P !,o довo-ьнo J р1 o мo.

oдooави

o нг<чЬ

стилй клюбомутегy' не приMeяяядoпoлHитeлЬнЬ|емaссЬ|илиидeнтиФикатоpЬ|' и мaссЬlтoлькo для указанияoснoвньx pазде. всли вьrиспoлiзуеie идeнтифиKатopЬ , / Ф l ц r ' о o вl'ьao oo"р др\|lм t -о(oбovf,"."9: -9:^1]' :o"р"."" -,'n ' * o-"с' n !р Y 9^ . d

рdв/,o.ov

пy /,

вь смorрl.

eцo и

a!l5oр

ielов

в яep'рx!'l''

go!{y'iiэиra

a':! nр*sslee..'

57

!!:!ави]!

Пoясним. чтo тiа стPанице мo)квo испoльзoватЬ нескoлькo aтРи6}тoв id. Еo I]Pи yслoвIIи' Что оlrи б}дtт иметь рaзньlе знaчения! тoгда кaк oдиE I(JIасс мoж яo пplrмeнить к лIo6oмy чис,тy тегoв. llaвайте т€ I rеPь взглянеI1нa дpyгие сejlсктopы' кoтoРьIе я&пяlo Ntoцньlllи сPсдствaми клaссьI и !{дентификaтoръI, хотя вы Ir lre 6yдсте испoлъзoваTБ их так чaстo'

yнПвepcальньrй

Geлeктop

селеltтoР 3вездoчка (+) oзнaчает.все''. Есjи IrаlIисать прasилo: , {сolor:q.een; ] весЬ tllРифт сTPaницьl 6yдет зeлeным, еo'r 1.oлькo вьl tlе зaдaдите дР}тoй цвет в пPавиле. .цалньlй селсктop Moж}to тaIсже испoльзoвaть йя вы6oра .ФдeлъIroМ недoj!ерниx элсмelrтo i е f r {f o n t . w e i s n t ;b o t d ; ]

c'

этим пPaвилoп! мьI yкaзывaeм' чтo ЛIo6oй тег en, нe явл'loщ!rйся , дoчеPним (a xoтя бьl ввyчaтым) для теra р! rrопaдaeт пoд действие пpaвилa' приЪтoм РoдитeльсI.иM теIoм &rIя eп мoжeт бьIть Лю60й теI.

Cмerкньlй GecтpПнFкrnй Geлeктop Taхoе ilРaвилo дeйстByeт I,Iaтег, след}'loщий зa oпРсделeEтIьIм сестPивским тe. гolI (сестpинские теIи Рaспoлo,(egьI lia одIloмyрoвне IrеРaPхии] тoeсть имеloт oдия PoдительсItий те.). Bот пPиNlеp: 1r + р {font -vаriаnt : snаl1 ъарs] пpимеIiив

этo пРaBилo I. кодy:

-lr11' .A

"tol:

o 1' 6,ё nl,.

b. а. l."s

гo

о, o.,,o 6 ,h6 ,ds

<9>тhe tаrqeted seteсto! шil] оn1y bе агieсEed ii ].есedёd by, t]rе one bегo.e thе + siqn.

PJ pи.,2'l5. ".Ь].:o.л'"rlv Резvльlат, покалнный ]oзaцeм нaхoдится сeстPиIrский ,reг h1,

iL is

a slbling

to'

аnс]

т"к I'ак тo |ькo леPcr lеPвы!

lлAaA 2, кa!( рa6ora!т (5s

AlI aЬout siblings selесtors тl@

мUf

вЕ Aт lж

No

sЕL

тhe иJgсtеdslеflor wi]]only be аfrфEd if it iJ д siьliпg to. шd P.tссdеd ьу' the onc ъсiot ltЕ + s'8!.

в кoдеlи oба исходяиз пPeдщeсгвy|oщeгoтeга бираюттeги' селeктopьLвЬ Pис,2.]5'сесrDинсKиe на oднoмypoвнeиePаpхии тe.адoлхнынaх9дитЬся как виднo' тег p, Распoлoхe}rньrй слeдon,rзa теroм hl' oтвечa€ т заданt{oмy ма.qенькими зaглaвньlми бyквами. yсqoвI,lю пPaвила и тloэтoмy oтo6Paя€ е тся BтoРoй тeI p. нe сме'(IiьIй с hl, не пoпадaет пoддействие пPaв,rЛa' (Bсе этo не oттloсится к InLеInet Ехрloге.,ryIя Windows)'

Ceлeктopьl

aтри6yтoв

сeлeктoPьI aтPи6yтoв Irспoльзyют aтРIrб}ты теIa. B oсвoвЕoм oни испoль3}roтся в xМL, яo таю<eпPимeняются и в хнTМL i'n r.i.rul

{lroldеr:29х so1id b1ue;]

yказьIвaеТ,чтo лю6oй тeт img с aтPt-r6!тoмt it le' нaпPимеP| аtt='i.ahinasunser' tlt1е="Lahinаsunset^>
aь!6oF'е.ов

в ncРaрхи,l Лol(i!i!ei|та яля прliвGt.eieя

лPаsnл

59

img Ialt=,sLyliл loqo'] ibordет| 2pх sorid bluе;) дo6aвЛяетPaм\T вoкpyl изo6pDкения' з aтPибyтa a]t кoтoPoгo явля. ется текст 'sty]in ."n"", .,."":1чeниeм trи' eс,и в кoде eстьзaписьвРoдe слeдy. ".,.,*" ющеи: < l m gs r с : i i п а g е s / s i y 1 i n - l o g э '

а 1 L = . s L y l i n 1 o q о '> этo пPaвилo стatroвится еще 6oлee l езflым| еслtr зватъ, что в кaчeствe знaчеIrия aтр'rбyтa мo)rоro yказaть тoльк qквъI тeкстa. но в этoм с,Iy. чaе приеМ сPaбoтaст, е."" ".u*"'" .,^.':::P.вые u,o"' *oo

leнa oт
.,.""#Т;'u,**".'*u,"u

ait='сar .cyO.а !r1us'> ' e1t=''сar-honda-ассoтd.'>

l в пpaви"IеGss: ltrq [а1i ='са!"]

{bordе!: 2рх so1id b1!e;J

*"* *yм-изoбРФкeниямсиIrюIo PaмrTтo,щинoй в 2 пикселa. il::::.:Y:пpи этoм ] ^стaти' Paмкa6yдетдo6авлeна и к слeдyloцeм} изo6paя(етrиIo: <:mqsrс=.iпages/сar_montaqe.qif ' а1t=' сa! >

-ill.]l] ]1l1*.. loгo РaсI]IирeнI'я'

пoпвeдeм

пPиlllеpeзнaчеIr,'rе тeraa1t не иМеетдonoлllитeль. "aннoм

итof пo сeлeктopaПt

.:"'ъsi...:,:,.fi Ц:3:fi.:il.#::"Т-.'."]*5:Н:;#i Т::

тo.o и дpгo'o, , ..,.* "opou,,'p't,дo", -i:vgинiцией

т{). чгoв.e oни ссьIлаются "",".тся :ff:: -:;:]:'.l]l]j:]jjJii;ilii

io чтoпрoизoйдет' есЛ";;;;;;.;;;;;:'"Р;Т::::::;':;#,:#ж:ж;

"fl*ilЫx.":',.fi fiТffij::il.##:Hff жrji:{l""т#

глAaA ?' ка!1ра6зraёt с5s

60

Псeвдoклaссьl к'гегaм кoдa. псевдoЕna{:сЬI яeпяIoтся l!пaссal{и' фaктIrчески нс IIРикРеплеI]IIьIми qa. нalrболее со6ьIтЙя, ши инoro тoгo oнll вьIзЬiвaют пpaв[пa пРи сoвеPшeпии или егo щслстo Taкипt с06ьlтием явJlяется Еавeдс}пJe }кaзaтеля мьlt!и ва oбъсlст кPoп!с (к сo}Gлепию' бРаузерoв чoк. гlDli сoздarrии стрaниц для сoвРеменlrых специL.1ъEoй ф).нкции lnrеrnЁt Ехрloгег. Iio кРaйнeй меpе.6eз ло6aвлевия <Eayчить" o6ъeкть1 pеaтиРoЕать яa лel.кo псевдorспaссoв пouoщьIo с Tal'aсгip0. *ыllrи. нaпРимеР' vожвo испoлъзorraтъ псеBдоюIaссьт д/tя l*""o'.," ""u"д""". нaвoдцт на nегo iтaзaтель, дo6aBлевия рayки к изo6pалtеяиro. кoглaпoльзoЕaтелъ

пCeвлoклaCCьt

Cсьr'toк вa якopь

(тегaми) д,rIята. нaи6oлeе чaстo псевдoЕпaссьl испoльзroтся с гиперссijлкaми qoдчеPкивaния гIpи на исчезtroвr}Iие или ких эффсlсoв' кaк и3меIlеliие цветa ведеllии нa I]пx укBaтcxя' тaк кaк ссьIЛки всеrда .цля ссЬIлoк qа якoPь имеeтся чeтыPе псевi]ouaссa' { o . l о я , r и ' нъo.яг.я s oдчo'{ иJ чerь|Pех Link _ пРoстo ссьlлкn, сидит и )rцст пoкa ее ктo Eи6,vдъцелквeт; пoльзo!ате]rь Р{€ щелltЕ)л э1у ссЬIлl.1lпРoсl'oтРеrlriaя ссьlJrка; visitеd нover - yкaзaтель мьIши в даннъIй момеtтт нaведев Iia ссшrкуl Е мoiIеEт ще]rчкa. Aсtive'ссьIлкa A !oт пPимеР сooтветствyoщих сenектoPoв псевдoI.]iaссoв д.пя эTих состoя.

. . . .

. . . .

a : r i n k { с o 1 o r . b r a с k ;] i a I v i s i t е d { с o 1 о r : q r a y ;} ; а:hоvеr {i]ext deсorat1о1:none; ]] a:aсtive lсoror:lalY}' двoeтoчиe в сeлёктoрo 06oзнoчoeт пс€ в дoиoсс.

итa(,

пе 6}дем вдaваться в сIтoPьI o саllьIх пoдхoдящиx

цветах ссьDloк' aлуч.

*. лu""o'. ,'рnu""i. сo',a."o rrм, изнaчa-!ьнo ссьIлкa oто6P;D{а. ,:,",,o.n.'p,.' кolдa l1oльзo е3с" uеpн-м tпp'фтoм (и пo умoдчаниIo имеeт lтодчеptiивaпие), подчeркIrвание ho!сr)' (с,]стoяEие на иее yкaзатeлЬ мыши uu'."o "o.oд,,' тeкс пIР'tфт Рt1ьIм' кorдa lтoлЬзoвaтс]rьIдeлкает }дaIяется, rIa сIrнl.rйи пoсце этогo oтaбРaкaerся ссьпь1 (сoстЬяние aсi!e), oна меняст цвe"

61 сеРьI\1дo теx пoPl пoка из бР.r}веPа не 6)дет 1:l]"leн и"lrи oбнoвлеII жiPпа]l !Рo. с]loтРeнньIx ссъIлoк, с пoмопlъю тaтrrDi псевдо(!aссoв \lьI !l!ее]I I]ojlrьIii кoнтPOль lraд !непlниi' видoм ссьIлoк, нo сa]uoс интеPестloe начиilaстс'l. кOlда Bьl 'iспoJ.rьзl'e,],с псеlJдoKlaссь] ссъг Joк нa якoPЬ кaк част oPoв, на Р'тlfeР' дnя сoздalilrя Рa3. nвпых эффеI{тф и о5лиIra paзньIx rРyпп ссllroк пaне-!и Iiаrt'IгaЦи '1oJrонтиryЛаj бокoвьIх пallелеil tl ссьr-rтоr(в тексгс и т,tl. NlьI г]одр(16нее рaссNIoт. пссвдoк]raссoв Pи]i{ llРиiIеllевие для дo6aв-1еIlliя стиrrей ссъ!rкaN! ч!ть пи"еj tr пoка orметиll слe'Tющие iloNtснтЬi: .

всr чeтьIPе сoстояnпя 3aдaвaть rleo6llзa oсo6свrroсти тoлькo сoсlrrявия link и ho\'еl.. . **' ".' пРaвпorоj вo llнo']I]t с-I,1чаях Ееr. сNпjсxa в oтo6Рaxении с!1oтРеlrllьIхi

.

.

-.*.

й'"". ссь!лoк Еai( пPo.

бPayзeP мo]кeт пPoryстить Е€ I .oтоРьIe Ез этEх прslr,' если вьl lт.2ке' те Iтх в пoPядкe' oтJIиaIEомФт Еarilero: link' visited' hovеr' aсtive _ Ntс,'lнo запoпlвитЬ этот гroРя/.1oк с пoмощьIo вoзr-raсa Lo!ъ.нA! ,l'1я сoздarrш всeвoзvo]мьгх эффе}стoв прtr Еs€ д eEriи yкaзатeля с этlr. мq псeвдolilraссa}rn !r ю6o!i сеneЕтoP ([e тoльхo а): рihо!er

1L]асkgтound-со1o.: qта1']

Б,raгoлаРя пoс'еднеNry llРавrl]r} лР'I пrgе/lепии указатеЛЯ }IьII]Iи lta aбзац сrо .ЪoнoвъIй цвет измеrштся l]a ссPЬl!i. не зaбьвaйте, чТo стaPъie 6рa1'JсPьl Ilс подrеР,киBaIФ эффектьI наведеrшя ]]lазaтеля нa любьlе oбъекть1 кРo]!lе ссьlлI,! нa люPь'

дpyгrrG пoлeзньre fа3начевиеlt jaсLтплe;ии

пGeвдoклaGGьI

l1сe9дol.tl oпределснfrъl!

lи' дoliaвlснlr' liлассoв кoдI пPи N{ьI }'с-пoв!ii. PaссIloгРе']'и ilРиiIцип их пРиNJеrIel1ия ]lя Paaпичных сo6ыт't;i: щe]rчка trIьппъlo п-ци I]aведеIlия }'кaзaтеля !a o6ъект, нo ::.свдoI!'Iассьi illoжно пp!ll'Iе}lять и llсхoдя из опpедсленIlьIх 'слoвий ! кoде'

!FIRsт.снILD ]:].sс-.n11d /: где sме.тox 0eд}ст пoд.тавпть н!ипьIii тeг +/ .lъкoй flсев;1otrraсс въI6иРaет iiсРвьIй дoчер1rий тег r, наllpиvеp' ]],,rlеaihе. sLronq:::тs. сLi1d {сo1c.]Iecjr

п1iaви;ro:

52

глA'A 2. ка|(рa6oта€ т (ss

&nя кoдa:

]Е,s <sLronqDv€rУ ho! and <st!ong>lnстеdib1y hmId'


слoвa vеry' (oтopoе вьlдe,дтся кРaсяьrм' 'io Еe д,я сnoвa 6yдеTприменeнo д"r1я iпсredib]y'

:FOCUS x I foсus /* гдeвмеФo х uедyеi пoдсйвить ь)}!ньlй 'ег */ Фoкyс тaкoгo элементa кaк lroле или фoРмa для ввoдa тeкста oзвaqaeт' qтo пoльзoвaтель егo щелкЕyл. нaIrримеP' кoд: iпрuЕ:foсus {bo!dет: 1pх solid btue;} дo6авляeт сиlrlоIo Paмкy вoкp1т'taкoгo

пoля' кoгда еro щeлкaет пo,ьзoвaтель.

Псeвдoэлeмeнтьl псeьдoэлемеIrтьI сoздaloт вIleчaтлeние' чтo к кoдy дo6aвляются дoпoЛнитeль" ньle элeментьI, нес],toтpя rra тo ' чтo ва сaмoм дe'e ндкaких дoпoлIlитeльньrx элeментoв ]reт. Boт нескoль(o пPимeРoв' гjPи помoци тaкoгo псeвдoклaссa: 1ettеf /* гдeвмeстoх спeдуeтпoдстaв!тьнiDкяыйт€ г 8/ x:filst ! : f i r s t 1 e Е Е е т t f o n t - s i z e : з 0 о з ;f 1 o а t : 1 e f t ; } сoздaeтся 6oЛь!raя пpoписная 6yквa в rraчале а6зaцa. A этoт псевдolt,та(с: 3/ х:fi!sЕ.1inе /* гдевмесгoх сведyо пoдставить Ц*ный тeг Jloзвoляет пРиl1еl{ить стиЛь к пePвoй сгPoкe (a6зaца или текстa): р: iirsс-1lne

{f o l t . v a r l ё n t : s п а l 1 . с a р s ]

.Даннoе пpaвилo )казьIвает. чlo пrPвlro сlPoкf следyет oтoбPancтъ ма,rень. кtrмй зalЛaвяымIr 6F€ a ми. нa стPaницaхс ги6кoй Paзмeткoй, кolдa в зависимo. сти oт Paз!'еРa oкra бPayзePa &Itrнa стPoки laPьиPyетсяt фoplraт слoв aвтoмa. тически меllяется и зaглaвньIми 6уквaми oтo6P&кaется тoлькo пеPвaя стРoкa.

бl Эrи два пLевдoI'лJ(tа: :;beforе

и х:аitе.

.]oбaвЛяIoт oпpeдеnеннъiй

текст гIеPeд элеменToм

и пocqе Iтегo. тaким o6рaзoм'

<]1 с1ass="agе''>25

:1.аqе i beЕorе {сontenr: -вoзраст: '] i1,a-сe:aflеi

{сon!ert: ' ;eт" )

laют вoзраст: 25 лeт. o6Paтите внимание нa гIPo6eлъIвtryтРитекстa,06€ с пе. qивaroщиеп{естoдrrявстaвки Е+l)l{нoгo кo}lтентa'эти селектоРы oсo6eliнoyдo6

lo испoлЬзoвaть, кol/]a сoдсpJtiи!1oе тегoв геIrериP}€ т ся] зaпРoсa к 6aзe дaннъш п pимёчoняe

нaпРиNIеP' для вьIвoдa

ЕФь .цe чeтыP6 псeвдoи6ссa | : tаЕФ пPимeняeмый к сoдеpxимoму с ухo3oн. н Ь|мoпP6дeлeнным кoдoм языкo l f,сeBдoиoссь| : : e f i, : rightt I f irs Е. nPt. мвяявмыe ( n6чoти сoA6рxимoro, o нe Х ero пPoсмotPy нo экPoнe. oни P.дхo испoльзyютсяи Ф060 пoддePхивoют.я 6PoyзePoми, пoэroмy мь|яe 6уд.в пoд. Pooнo lх onись|вoты.

oбPaтитe внимaние. чтo пoискoвьlе систeI'ъI не itоr}т вьIdlrPaть сoдePxи. ! oe псевдoэлeмеIrтoв (таккaкoIiи нe встpeчaются в кoде). нe испoльзyйтe псeв. :oэлrмelrтьI &!я Iказaния вa)кнoгo xoнтe!1тal кoтoРьIй дол]l{ен 6ьIть эиден ддя :loисI(oвых систew,

Haслeдyeмoсть :laс!едyeмoсть в сss oзиaqаeт пeРедaчY чеIl).ли6l) oт прeдкoв к пoтoмкaм. нo з отличие oт riaс]'Iедствaв видe зелеllъl! ry]lюPj l(oтоpoе вьl '!дстc oт 6orатoгo rrдюl.Illси' в сss пo нaс"!едству пePедaloтся знaчения рaзJичньIх сэoйств. кaк вьI пoмIrите изпeрвoй гЛaвь],тег body явЛяется лPедкolI всех oстa,ьIrьIх .згoв в кoдe стpaницьт' пoэтoм,v, 6лaгoдapя вaслeдуeмoсти сss, если мьI д06а. .:{мк 1еn,bоd! О илЬ: ]].У {font-fanily: vеrriаna' iе]ve.iсa-

s а n s s е r : f ; с c 1 o т | b t u ё jr

64

IлAвA 2' кax ра66тaётсss

Teкст вo всех элементах стPаlrяцы 6yдет oтo6pa]каться сипиv цве'roм и шРиф. тo}1\iегdanа (или дPiтим укaзatrньlм при отс}тствии Vегdana) внe з от слoj{!нoстIr иеРaрxии' эффективнoсть этотlr спoсo6a ва-'тицo|вмeстo тoтo qтo6ьl )тазывaть Ч,яrнЬIй rpифт д.пякa)кдoгo тeЙ' ]!iьIпpoстo зa]laдим eго oдl{tl o."ou"oro д,.Iявсelo сaйтa. зaтем вaм tloтpе6уе1.ся p* *i.'."'." ]:]'Y':.6" " виъ свoйствa д.пяTеroв, в кoтoРьIх йъi хoтим испoльзoвать дРуroй тпРиФт. Мнoгие свoй€ т вa сss вaслeдуются тoqнo тaк }ie. oсoбепнo тeкстовьтe aтРи. 6iть!. Tе]\IIrе менеe, некoтoPые сjss.свoйст!а Jrl Eaслeдyloтся' тaк каl. в этoм oтЕосятся свoйства пРoсTo нет смЬlслa. к ЕиN{' и oтo6Рая(eния 6,roчIrьIх элемеtlтoв: Раl'ки. пo]Iя' oтс!_пьI и т.п- trpедстaвьте' чтo мы xoтI,lм сoздаTь 6oкoв}ю пnI1ельстeкстoм. N{ожвo сделать эTo спoNloщьlo civ (пi)дo6ия 6лoкa) с нeскoльк!Б11r а6зaцaми и дo6aвить к dlv кPастflIo Рa!'Ч толцинoй 2 пIrксeлa- oдIraкo Eaм сoвсеNtI1етРе6yстся' чтoбьI этa p дoBалaсь д/rя ка]*дoгo а6зацa, и этoгo ве 6удет свoйствa Paмки Irе нaслeдук,тся. в 'лaвe 1 | P,l Б o | . ' п o д Р o б н o \ 4 ь Iп o г o в o P и v ,t с 6лoчв.}й мoдeЛью. пPимeчсниe

пoкo чтoпPodo noмнитe,чro Фили,o'нoсяци€ с r ( шPифтy' elo цветy,яoФe. кoми.ст'ли xe, oтнoсяцяeсяк вн€ ц нeму видyoлo. с лoмoцью di", o6зoцeви прoчиxалeмeнтoв,- Poмхи,aoля/ кoв,сo3дoвньIХ oтсryпьlи фoнoвь'йцввт- яe нoФ.дуoтся.

.гaкжe

6yдьте прeдельЕo oстoPo)tiвъI llPlr Pа6oте с oтr'oсителъIrъIми eдиницa. пРoцентaми и еп, !-сxи вьr vказали Рaзп{еP i'и yкaзalшя РaзIlеРa элемеllтoв i!Рифтa Равный 80%' д.l1яэле}!ента, paспoJloя.енEoro вIryтРи дР}тoro эnементa,

. i'""i'.pЪ".p"q-

в4vao.| в0%'Ре:L'lЬньIй РaзмеPпrpифтaпеpвoгoсoстaB|,|Т

6aзoвolo (B07oиз 807o). flРеимyществa и Eeдoстaтки a6сoл]oтяьlх и o IrьIх вe,1ичин I1ъl paссмoтpnм B Iлаве 3.

Кaскaд ' fiс.. итaк, тепеРь мы IoтoвьI o6сyдитЬ oдин из сaмьц слo)tсtьiх aс ектoв сss iad. Еспи вам этoт paздеn пoка]l(ется слиrпЕoм скlчi{ьIм' пРoщстите егo и пеPе. ходитe к вp€ 3 кe .Пpoстoй o6зoP кnскадoв oт чaPли", B ней пРиведеrro дoстyл. I{oе описаlIие. кoтopoгo нa пеpвьIх пoРax вам мoжет oкaзаться дoс,гаToчнo, a|тIoДPaзумeВa.eт как следует из нaзвaния. кaскад в xzztяaJlыr па6jшцaх с пo иepaРхии' в]rиз к э-rlемeтrтa дPутим oт oдногo дoкy|'ентa леDедaw стилей кoв oпpедеиз NlrroгЙ кaкой и пoзвo,,lяет бРayзеPy Решnть, тегa сЛедy oтIРeделеlrнolo лeEногo свoйствa

кaскад являeтся мoщЕъIlI }IехaIIизУoпl. Пoн]rltaЕие приlrциIlа еro дeйс'гБliя .rloхeтвaм освo1Iть Сssи пРимeняrъ сrо нaи6oлее эtloltoмиtlнo и]rоiично, Bьi :],!o,кете сoздaвaть доrq1IентъI' вьlгЛЯдящис B бPa}зеРе 'т\1еЕнo тaк' как Dьl зaду l:Lrиj пPе/roстaвляя пP oпРеделеIilь'n кoнтР.r-1ь над и\

Hстoчники стилeй ].ть нескo,.lькo исl.oчЕlltкoв стилей, вo.пеPвьtx' IIетР}днo пРедпoлo'тtптъ' чтo nРa}'зеРoв сущесr.Bvr'r .обс'1,зенна', nп6)шцa сn|?ллi, тo cсть тaбЛицa стIrЛей llo .Iс'лчaпи]o' спpятaннм вь}тРlr и автo}1а'rическ! пРименяющaл oпPеде-len!Ьtй :l]'rь к векoтoPьlм тeтaм гIPи oТс,!rсr.!ии автoPской тaб,rиц с,гиnей. нaпРимeР' ].!стваrтРитегa h1 oтoбpu{aется кPtпяьт\т и )rtирньI)IшPllфтoм' теги ?т вьтде' :lirтся e]Pсивoll] к спискaм дoбaB,rяк]тся п!aРкеРЬI' пPимёчoниe Бoлевп0др06ныeсвeдeн!яo вн}зPeнниxт06лиц0хстилeй6poyзeрoвмoxнo нoйтинd сoйтeэPикo мeйePo (www,m€ w ёмeЬ.сom/eriс/tho0.оhь/20otl09/ ] 5 /emleoIJvem.U ndoino-Ьtm|сs' ' Ес'1и t]a ваIlrем кoмпьIoтеРе поищи,rе фа!:!r htni.сss, устанoв,.теп 6РavзсP Гn€foх' :-]rеPжаlциl.i стшпи пo }'ri{oлчапиlo, BъI iioжете дajкe измеlIить сIo пРп желaEиикРoN1е тoго' имеIoтся 1?o|воваnIъdx| лlа6Lu1!ъ. .',L'lz1;, Пoльзoвaтель сatl Nlo. .l:т сoздaтъ тaб-.тицy с1]rпсй' aвтoмaтпчески пPиl{еt]яе!yк] тro всеN{ пPoс}laтPива.

j:lьi!стРaнпцaм'этoдoвoxЬlio)дoбнo.напРимер,,4liялицсoсла6лен

:::. тaк кaк oни llory'т }!еnlaчить бa3oвьIй Paзмеp lРифг:t /rщ всeх сaйтoв 'Iлll :j!енtlть цвeтoryrо IaNtI4; сделaD eе 6олсe коЕтрастнoй. дo6aвить п. ::trю тaблицl' стилей B бPаузеР Intсrпеt ЕхР]orеr мoж!o' вьi6Рaв в тлaвнorl меtllo rаlЗеРa Тbols ' Ilternеt оPtions... (СеP!ис > Свoйствa o6o3Pе!a,геlя, ', ) l] щО1к .n хIrollк} Aссеssiьility (oфoPмЛеtlие)' зaтсм l!o,кI]o !казarь фaй1 с пo"пъзoвa ]. rъскиМи тaблицaми стl!rей, налPиNtеР' дoбaвить тaкс,е пРaвилoi ] 1 ] : i : o n L - s i 2 е : 2 0 0 ti .rа'Iвaюrцее PазмеP шpифт:l всех эле}iеI]тo! oaс-!сдvемoстъ ! действЛи. Пo. j]O!у вa'!tтo укaэьrвaть pазмeР шРифта в oт а не в a6сoЛютньiх :Iiницaх' чтoбь! пoльз oдo6rlьIе изlтeнения, Более пoд. ::бнo i!ьI кoсflемся этoй'гспrьI в глaве 3. ll вc 6yдепl зa6ъIвaтЪ lrya (IвпфсхJю nа6'|11ц1.,ll,1d;' создaнн}-ю \4lеЬ.дизa]iне: ]!, l'1ъI y,тte 06суд14lи с11o.o6ьI еe /]oбanлеIrия с !o!toцъю ссьij]кl] : ::ач.-rIестPа1IицЬ' и JlинсiIgoгo /.ioбaв,]еIrия стш1сй непoсPедсТвепI]o

к lfl']ilrъtJl

56

гnAвA 2' Ka{ sa6oтаётdss

Boт гIoPядoк. в кoтoРoм 6Рa}зeP гIPoи3Roдllт пoиск ']стoqliиxoв стилeй: . . . .

та6лицa стилей 6РayзePa flo yмoлчапиIo; aблицa стилей] aвтoРскaя тa6лица стилeй; автopские влo)llеtiньIе стилиi aвтoPские стРoчl{ьie стI!пи.

этo o6щие пРnнц1.tпьIкаскадoв, I1oна самoм дeле ес1ь oпРсделенньlе пPави. лa' кoтoPьle кoптPoлиP}'loт кaскaд.

прaвrrла кacкaда пoмимo пopядкa пpимeIrelrияl.тил€ й следyет тaxxe пoмяить o несI{олъких пРa. вилaх Pа6oтъI кaскaдa' пPавидo кaскада l, найти всe o6ъявлerfirя, IlPимеEяeмъIe Iс з'eмelrтy иII свoйствy. ПPи зarРyзке кахt'4oй стPalrицьI бPaузеP пpoсматPивaет все ее тeги' чтoбы убeдиться' чтo пPaв61o пPeдвaзEaчeвo 4ця Eeгo. пo пoPядЁy и вeсy. БРayзeР лoслeдoвaтель. пPавIr,ro (aскадa 2. сoPт'Pов@ нo пPoвepяет все пять истoч}lикoв' пPимеI]яя пaйденньIс свoйствa. ЕОtи свoй. ствo задallo в}Ioвь в пoсЛедl.IoцеNI истoчник дo тeх пoP' пoкa не бyд}т IlРoвеPеtlьI все пЯть вo3мoжнъIх истoqниItoв свoйств для кar!(дoгoтеIa на стPaнице. нa экpalr въIвoдитсЯ действие свойствa с пoследним яaЙлеIlIlьIм знaчeнием' B тa6л.2.1 пoкaзан этoт гlPoцесс д,lя стPaницьI с lreскoлЬкими теIaми p. пPeд. пoлФкимi чтo к дв}r!l и3 этих тегoв р до6aвЛeны стрoчi{ьIе стили! задаIoII1ие их B дalrном слyчaе' тeкст эсeх теroв p oтoбРа]кaется сиrrим п.рифтoм, зa искnIФ чeЕIIeм имeющиx лoк2-qьEьIeстши - oяи oтoбpaжaloтся кpaсньlм. таблица2'1, пpимeркаокада

та6лицастилeйno yмoлчанию пoлЬзoватeлЬсGя та6лицафилей Апoрcrая ra6лицаcтилeй Aвioрc(иeвлoяeннЬ e стЙли

67 кolleчrro. не Bсе тaк пPoсто, С-Iедуеr.1?(ке ип{eть в вrtдy и 6,. о6ъявления, iloвьIситъ вaжпoсть пPa!илa NJoжнo ralrим o6Paзol{ (o6paтите внllNIaEие Itа вoс. ,,rи.rJ.ejЬРыЙ Jчaк]: : lсo1or:red; :inрэrta.:; icnt si2ё:12рЕ) Дo6aвив |illLрorLant чеPез пPo6ел после нужяoгo пРaвиr]a нo пeРeд тoчкoй ' зalтятoЙ lъr повъIси1'Iвa?тнoсr.ь !!rrи вeс этoгo flPaвилa. тепеРь вeс этогo пpaвиr]a loвьilшается rl тeкст oтo6Pa'Qeтся именIro кpaс. ]ЬIil' д ке если да-пее oн 6удeт леРeoпPеделен дPyrи\' пPaви,oм, ПoдyNlaйтe .эD&цьI пРеждe чеп! и |jmро.iani вeдь пo]!lеченное тaк пPавиЛo :1]ет иN{етьпРиoРrlтeт пеPед пoльзoватe,rьскими стиля\t! зaдalrпыми' вoзпtoJ{t' :o! пo весьNta вeскоjli пPичияе,

пpоcтoйoбзop каcкаAoвoт чаpля эoглаcяo yпpощeвнoйвeрсии oбъяснеl]иялpивципoврaбoтЬ|Kаскадalвам олeдyетэa. пpавило 1. сeлrктoрь| с идeнтификaторамиимeют пpиopИтeтпepeд сeлeхтopами .(ласcаМи, Koтoрыe в свoю очeprдь| приoритeтнeeсeлектoрoвтолькoстeгами, правилo 2' Если oдво и тo xe свoйство для oдHoгoтeгa УKазaнов каскaдe нeокoлЬкo .эз! cтpoчныeстили имeют приopитeтлeрeд влoхeнвЬ]МиKoтоpЬ]e,B сво|o oчeрeдЬ' ..иоpитeтнee пpочиxстилeй,пpи этом правилo 2 пpoигpЬjваeтпpaвилy1 eсли селёк'эpы бoлee спeцифичнЬ|. oни имeют бoЛеe вЬсoкий приopитет, пpавилo 3' явнo yказаннЬ|еcтили иlJeoт приоритeтпеPeд Haслeдyeмыми,|]апpиMep] ]:t/ id=''саsсаdеd.пc'> . ]d:,inheтl.anсе!ас.''>]]eслeдуеl{oсfъ 7гiеeт <ёn>nrз.ий
] этоM олyчae пpавилol :i

t]oеУ divii..s.ac.deпo

!iiг.!еrlЕаnCeiaс:

{сo]о.:nlue]

:/в0диr к тoму' чтo вeсЬ текот| включaя !t.5ц:]j oтoбрaxаетоя синиМ цв€ т oм' так кaк :. васлeдyeт цвет poдительскoгo тeга !r, пoслeтoгoкax мЬrдoбавим слeдующee пpави.

.:'..; вн),'тритeгa.г стaнe] кpaснЬ м, |.lаслeдyeмЬ й отиль имeeт низкий пpиoритeт пe. : i : я в н o y к a з а н H ЬМ о т и л e м ' ]:- и всe прaвила каскадa' He таK ух и слoxно вeр|o?

68

i,iA3д ?' !.ак.а6s?asr € 5 5

пРaвЙлo каскадa 3- сoРтирoвI.a пo кoЕкРетIrост[' кoнкРeт}roсTь пРaBилa oпPсделяет тoчнoсть етo пРи!!eIIеIrия. Ес-пи тa6nицa с'гилей сoдеРхит пpaBилo: э . : i . n L s i z e : 1 2 р x} !, ]а:get;xt {font-sizе:16pх) < p с t a s s = ' L a т q е t е l t ' > п р n Й e .т!. x с т a < / p > 6}деT oтo6Ршen шpифтoм в 16 пиксе-'1oв,тaк кaк втoPoе пРaвI,lo является 6o' xеe конкРетltЬlll' и пoэтoNry пмсст 6oлеe вьiсокий пРиoРиrе'l: A ч,ro прoизoйдет' ссли Bместo этoro мъI дo6aBим следyloщиe стили: p { f o n Еs i z . : 1 2 р х J ,1aтqеtext {fоnt size: L6!:] "з o6а эти пРaвила примевlilrьI к нarпемy теry вo пo6eждaет tlPaвилo с укaзaв тo6Pажaется iлPифтoпt в 16 пикселoв. и вот поqеlly: чис. paвва l, чaсс o6,rадaет кoяIiPетнoстьIo i-0, Boт Еaк тегa лoваJI конкРeтнoс,гь NtoяEo l1oдсчIrTатькoнкPeтяoс,rь лIобoro селeктoРa сдeлaть этo oqeнь пРoсTo с пo!1oщЬlo тpех зЕaчeвий: A Б ts. t.Ioдсчет пPoисхoдI'Iт сле.ц]тoщимoбРaзov, 1. дo6aвъте одв}'A к кa,кдoму иде}rтификaтoР)' в селекToРе' 2. дo6aвътe trдву Б к кa)riцoм}'Kqaссy n сеrrектoPе. З. дoбaвЬте oдЦ в к кaj{дoмy имеIiи элеl!{еЕта (имени тегa). .1. ПРo' r'гal,iте гoтовьтй РезуnьТaт кaк числo из тРeх цифP. нaпРимеP' вЬl мохсте пo'цчить РеЗ},ьтaт 0 1 12. a стиль 0 2 0 oкa,кетс,I бoлеe кoEкРст. BЗrлянеM нa кoliкрeтнoсть этих llPиl!'ерoв, въIра]ttеяЕyloв числoвoм видe: ! {сotor: red] /*0.0l кoпqетпo.ть.l+/ р,1argeLеxt /*0 1 1 кon{Pетяо.тъ=l1.|/ рiltelgeLeхt

./*10 ] кoпкPетнo.тъ=l0r+/

bоdy !iitargё:eхt

/*1 0.2(oякрфяoсTь=1021.,/ , . , , , t к o i 1 P (н| . ' ь - l , '

b c d y р + t a т q e t е х t u t . п У l ! s : t i / *1 l 1 к o я к P е т н o с т ь = ] 1 4 * / кoнк каrr''дьтйпoслсд'toщIrй пРлведeнньIй зДeсь пPимеP oблaдaет 6!rЛьшIе11 Pе

Рl(

ью, ''Fv ,'гедЬU\|j,l,:,

t6:ee*e,!;lr! rr;rr;

69

ПРaвiлo Eaскада 4. сoPтIrPoвкa по пoРядl(}'. Есл,I ес,rь двa лРaви"!a с оди:aкoвъItrI весovl l'PиoРитет иN'ееT пРавltloj Paспo]roniевIrое в дoriF1el1'rе я''кс, пPимeчoниe

KoнкPeтнofiЬ вoxнee пoPядкo Poслoлoxения? пo,тoму 60лee кoiкрeтнoё пpo. вилo, Pосплoxeннoe в дoкyмeнтe 6ыце, имeeт пpиoритeтЛeрeдмёнee кoнХрeт.

Boт этo и есTь кaскaдl пoвять с1ть кo,roPoro дoво-!ъно !lепpoстo' осo6е}1в0 ::е иУeя нaвь!кoв Рa6отьт с сss, ПоэтoN+' п'ьl пРедлaгаеtr]!ашеNo'внимaнию 1п. :oщеlIIDIo lepсlпо пРnвил каскадaj пРиItснrj\ryк, в 98% с,rучаеlr,Если. пPп!еняя rРощеня)тo веPсиIol Bы обEаР}:llите' ч,гo чтo тo пРoисхoлит lIе 'rак' o6Рaтитссь /rпьlNlпPавил.lм-

o6ъявлeния прaвид

слoва

Eаприl{еP|

с-Jloвo bo d в пPавиЛе foni iеight:bolc, чис,roвьtе зтiaчeния o5ычrlo )'кa3ъIвaются с едиrU]. цa!иизN'ерения' rlaIlРиNIеРвпрaвиле font sizе]i2ljх 12 я!xяе1.ся чисjo вЪIi' знaчсвиeмj a рх _ eдинвцсй !31tеРениЯ. цветовьIe зIraчeяпя цветoвьIе зlraчrния укaзъIвaюТся в шсстнадцaтеPлч вoм фoрмате. xailpпleР сo1o: |+зз 6699, loвoPIJ'гь o эIrlчeниях'сЛoвах : . ri цвeтовьте 3нaчепия

пока рaяoj тaк как }тъl их xРeктичlэски Eе ис. тся специфичIIьI[1и дj!я кждoй сиr.уацIrи, чис-!OвьIс l'oянo ,vкaзъlвaть Тo,'IЬко с,пPеде,rеннЪlNI oбрaзо\],

,o

rлAвA:. Xа( .''6эта€ ' с5s

чПCлoвьle знaчeния чисJoвьIе зIrачеiIия NIo'rIroиспoлюовaть д-пя},т(a3alrияPазмePa (высoтЬI, !rиPи. ны' тoлщиIrьI ит.д') всеxтипoв эJrе]lIеIrToв. Taкие з1{ачеIrияможro Paздeлить нa двe тPyппьl: oтвoсnтeльЕьle и a6сoлioтtlьiе' A6сoлloтIiые зrraчения \.Гa6л.2.2) о']исьвaтoт фa(тичeский РaзмeP (дoпyс. тим, 5 см)' тoгдa кaк oтrioсительяые пРедстaвляtoт сo6oйлишь РaзмеP' oтнoс'r. тельIro дp\тoro элe}lеIrта, .a6лЙ\a 2 ? A6сoлDтнoёзн.чэнив

oбoзнач6ниe

эxв,ваneнr вдюймaх

пpимep

2,54 25,4

пpи дo6aelеrrи'J сss,,lЛя эЛементoв фиксиPoвaEнoтo Pa3меРa, вaпРимeР изo6 ра,(еEий' мы испoльзyеl\I тoлькo пиксельI. BьI i{oя.ете вьI6Paть и лIoбoй дP}тoй вaРиaнт, нo yчтlrте' qтo rтиксел является единственIroй а6сoлloтIroi1 еДIaIILaЦей и J м e р е н ш ' и ( п о j ь J ) е м o й в п P / v е Р l t х э т o й к н и г и . к P o ^ t et т , { л e йJ - I l я кaк Рaзi(еP 6lмaги изIltеPяется в саlrти]!Iетpa\ ил,I дюймaхt имeет смьIсл испoльзoвaтЬ для Paзi{eтки печaтIroЙ веpсии стpaницьI такиe )кe едI]Iiицьr. Если aбсoлютвьre eдиЕицьl изilеРения дoвoЛьнo oчеDидны| тo oтнoситeльньIе (тa6л. 2'з) Tpе6yoт дoпoлIrитeлъногo o6ъяснеrrия.

raблиф2.3 oJнoс'тeльнoe зхачeEиe

Единицаизмeрeнля

прtмeP

!дивицьI еп и ex испoльз,vloтся &!я указa}Iия paзмеPа. Ein Pавtiяется вьIсoте тeк. стoвolo тIoдя д7]iяшРифтa' пoэтoмy егo РaзмеР зaвIlсит oт испoльзyемoгo пIPифта. Еx я&1яeтся эквиваnентoN' вьIсoте стpoчltoгo симвoлa х вьIбpаннoгo IIIРиф". пРoцеF ь|)д06нo и.пo4ыoв,] ь.lD }ъ,]JаЬия шиp'{Jlы элe.'cIЦ oв.кoнтейнеРoв. нaпРl{мeР dlv' отIroситe"Iьнo шиРиньI oкEa 6Ра)'зеРa' Чтo гloзвoляет сoздaвaть .ги6к],rо" pазitетч' a тaк]ке д?1яукaза}Iия paз!1еPa мg{стPoчньIх oтстylов. Бoлеe подpо6нo мьI пoгoвoР,lм 06 этoNl в rлавe 3.

a6ъяа'е!l'{я

nPавя,!

77

пoчeмycлeдyeт исгloльзoвать em для yказаllия размepа шpифта Есть два вaxнЬ]xпpeимyщeствaпpи испoльзoвaнииoтнocитeльнЬxедивиц вpoдe emj для указaHиярaзМeраLlpиaта: aслeдуeмoстЬи укaзaтьбaзoвЬЙ размep шрИфтa1еm,а paзмe. pы шриФта вceх лрoчихэлeмeнтoвуказЬlватьoтносительноеro: нaпримrp]paзмep шрифтаабзаца- 0,8 eпr,а разМеpшpИфтассЬ лoк - 0' 7enr;тaкзaдаютсяпpoпopциo. нальньeрaзмeрышрифтa;обратитевниманиe'что |Е не поддеpхиваeтавтоMaтичeс. кoе измeненияо поMoщьюепr пpи yказaнииpазмepaшpиФтaзaгoлoвкoвn1-L6 - дЛя paзмер]инaчeoни oстaнyтсяс фиксирoвaннЬ|м pазнихпpидeтсяyкaзaтькoнхpeтныЙ v.poмпovvolЧrнио: пгl v ] o l p a б ) e l с . } в е '/ q / | ь p d J м e p шpифтaвсexэлeмeнтoв,лростoизмeнитебазoвoeзначeHиe для ьоiy'указав' Ёaпpим е p '1 ' 2 e m i . eсли вь|не задaдитe pазМeр шрифтa с пoмoщЬ|ooтHоситеЛЬных eдиHиц|гrолЬзoватeли нe cMoг!т МeнЯтьpазMеpшpИфта,чтo пoмeшаrтлюдЯМсослaбленнь|мзpeни. ем пpoсмoтpeтЬваш сaйт; поэтoмyсoвеryем УказывaтЬpазl,/reр !rрифтаc лoмoщЬю em. a нe в абсoлloтныхeдиницaх,дoпустИмlпиксeлаx,

цвeтoвьte значeния -:я Yкaзания цветa мo (#RRG6BB и,1и #RGB). Если вьl звaкoмы с языкaми Iп€ с тIraдцaтеРичIrьIe г P a м м и P o в а t l и я в P o l е с - , P H P T а т J s .г i P | , в Ь l и \ a e е ] е| . P е д .т а s л e н и е o ш е . :.:jадцa,rеpичIro}IBЬIpaкении цвeтo!' Фopмaт зaписи такoв: +RRсGвв' B тaкoм знaчeнии пePвьleдвс цифPь! зaдaloт кpaсвъlйl втoРыедвe - 3eЛeньlй' эслeдниe сив'Iй цвea кoN'пьютeРьт испoJrъз}roтдвoичtaf'lo систeщv счис]rе: li пoэтoNfy шестEФ1цaтеPичнoе чиспо IrРaтЕo l 6 (2 в 1 степени) зa счет пPиме: '::llякoII6инaциI] цифР (0-9) иФкв (А-F - дпя чисел 11 16)). Taк кaк цветвдaн. : !: с4чae пPедставллется l1аРoй lпестнaдцaтepичlrьrх чисеr1' &ця кarкдoго цветa ]::rстиtr{o 256 (16x16) знaчeний, э целoм - 16 777216 цветoв (256х256Х256). нaи' ::ее 6oгaтый вьI6oP цвeтoвдoстyпсE иNreняo пРи !]спcлшовaнии l!естнaдцaте. ::tiьIхзвачeни'i. oдtraкo эaчaсTlю }{o)кtroо6oйтись и 6ез яиx' нe за6,!дьтeдo6а. :tr си\'вoл Peшeтки + Bнaчalle. :1так' IraпРимер' чис,гьIй кpaсIrьй цвет o6oзначaется знaчelrиeм +ЕЕ0000, :jlii #0cЕ!00' зeлсньtй *0000Е!, мo.{(нo тaкх€ исnоЛьзoвaть и сoкРaцeнg Р- в , фoPмJ : :l Pи испoльзoвaяии эвaчeния' в кi)тоРoм Irа*qдаяпaрaсoстoитиз oд,rнакoвьгх ::ений, дoпус.гим +ЕЕзз22. Ito'tнo испo'rъзoвaть сoкрaщепнъIй фopмaт: +Ез2' эiнeчoниe

|.lo iePвый взrля4 y.oдotь цвeт пo шedнoдцorePичнoмy знoчвни|oслoхнo. Ho eФq пPисмoтPeтьсяк знoчeния^4? тo этo впoлнe вoзмoxнo. дonуoим/ +?сA9вl прeдсoвлiёт тёмный си]в.J6п6ны; цв6т. дoвoй-в взrлянe4 Fo пeрвый <и{вoл ,, i o ц o ; ц в ё - o в o й] o P Ь | , l , , м ь , Е и д и м ч т o k P о с н ы ; \ л o н , + e г o л o в и н ы

't2

гл,lBA ?. i{a{ Ра6зтаэ! {ss мoк.имoльнoro знoчeния ]6. тorдo (ot 3eлeный Й синЙй Ймed 6oльuиe, nPЙ. мePнo oдинокoвь]e знoч.ния. o6л0д0я тoкoй инфoPмoцией? yroдoть цвoт ro.

ПPоцeIrты

RGB (R9o' Gqo' B7o)' здесь мьI yкaзьlвael! пРoцентнoе зЕaчениe

ДoryстиliьI зEaчения oт 0% дo 1007о.несмoтРя нaтo' чтo пpи этoNIмъI IloJly. иoв цвeтoв нa эъI6oP' для 60льшивства ситyaций этolo бoлeе чеl! дoстатoчrro. крoме тoгo' тnк тoРa3до Легче пoня,l.Ь,Чтo зa цвeт пРеднalrPиМеP. |aoEa' о%.0To oыlачae'г чистьIй кРaсIiъIй цвeт,0%' 100тa' 0% чистьlй зелеlrЬIй, a 46{a ' 76qо.807o пoхo'rе пa ollисnвEъIй во врезкe темliьIй сивeзеленьI'r IIвeт. Itлкlчeвoe слoвo, кaк вьt$пoняли из приBoдимьlх вьIцlе пp'IN{ерoв, yo)кнo пРoстоyкa3aть цвeт с пoмo1цью (fR]чeвoтo слoвa. oдIlafto здссъ есть oпPедeлeн. .Ioчlrьlх вьIе orрапичения, спсцификaций WЗС по псlвoдy отo6Pa,rения тoгo иxи ивoгo цвета (нaпРип'еP, .]1ive (ojrlr!(oвьI]i) или 1ime (лaйм)) нет, t кaхдьIй пPоизuoдитель бPа}'зеРoв дслaeт этo по'своеlty' BoтдoпyстимъIе звaчевия| аqual blaсk' b]uе, fuсhsia, grаy. giееn' 1ifie, naтооn, nаЧ1. o1ive, purрiе, red, si1./еr, tеa1' i'hite, Уe11oW, БoЛьпlинствo сolPeмеfiных 6PаyзeРoв пoддeр,кивaeт 6trльше цветoв (06ьIчнo дo 140)' нo eсxи ]}ьIукaзьтвaeтецвет с пoмoщъю к]rroчсво.o слоn ьlto I]а э,rи l.1, мьI o6ычяo испo,1ьЗyеl! пrестпaдцатеPичныe зgaчевт,rя'Чтo6ьl ваNI6ьIлoлrr че сopиel{тирoBаться j] шeствaдцaтеPичньтх знaчеIiиях цвстoв' пoсетитe саЙт lлiъlwеЬсoloгs,fгеesепе.сo.uk' там вы пaйдете пLцитPъI цветoв и сooтBетствyIo.

нe стoит oгра н ич иватьоя 6eзoласн!|мидля сeти цвeтами Если вЬ|ИспoльзуeтeМэсromedja Dreamwеаverили другoй визyальныЙWeb-peдaKтop, oбычнo выбop цветовогpаничeн2]6-цвeтNойпалитpoй'сoдepхащeЙ,в оcнoвнoМ,бo. лee Яркиe цвeта И лрeдлaгaЮщeЙсхудныйвыбop тeмнЬ|хцвeтoв' ИспoлЬзoватьзтУ па. лИтрyбезoпaсHЬxдлЯ сeти цвeтoв мoxнo иHxeнepу' нo нe дизaйнepУ,шeстнадцaтepичнЬeзнaчeнияислользуrоттoлЬкoзнaчeния0, З,6' 9, с и F, ТахaяпaлитрaoпrаHичeна вoзМоxнoстЯMи8 разpяднoгovGA.мoнитopa' И на пpoтяxeниимнoгих лeт MЬ|пoльзоl]o сeгoдня лишЬ 1% интepнeт-nолЬзoвaтелeй(сoгласнo дaHнЬ|м Www.theсounter сom) пoЛЬзyеrся8.paзpяднЬ|MиMонитoрамиlnoэтому омeлo испoльзYйтeлюбыe нyжнЬe вaм цвeта,

:j*ёige i!. Gтилrt для lшpифтoв и тei(Cтa абзaцьi' зaто-1O! чaсть \{IеЬ.дизaйEa с!язана сo шPllфташr iсtr!а-.raJт тoй l,laве сBоrjствa чРe3BЬrчaйвo ].нlo !I фoР{ъI, B Pезул вьп]цядяций с.t!'i1.,ltiРифт. е создa1ь пр.oфе(иollаxьнo .otrь]rrе чеii nк)6oii o сro itачествс , ГPафик.t св!тдетс-1Ьств!ет дP,!тoй фaк].oP. :з]яеrся лишь сLxаРпoй г-пазyРьIo. пoкРь!вalощeй тoРт, \оPoI]Iий д!зaйII Еaчи :ается с TипoгPаФиl(и. въI зaда-.lи се5е !ol1рос: .A Paзве IпРифr iraэвl Есnи' пРoчиra} .к' т чe UJ|,o и Inpuфnы яBJIяются Рaъ\|1|чнъ1N1||'||\лa\1\1 ,|1pнu|ll)pъ| i|цfuф]loв. кa*.Дъ|й 1J]Pифa ::,]едстaвJяеr сo61rй Еa61rP б]кв, цифР и с!Ii'волoв с )нIlи-.iьl{ъIN' вLlеIIrrи]I Brцo\f' o"вoсятся i oпpе:rеленньllr яa6фaи! oписъIваIощиnt их в!е]I]tтит|iвlц: зсе rприф'LIa6oPьт пIРифтoв 6eз зaсечcrt и }IoвoшиРlilrllьтй. '.й.,t6. нaпРимеP Тimes ши неtvеiiса.B сlolo oчеPедъ' семействo lxРифтoв N{о,к:o рaзделить нa pазлllчньте гаРниr}PъIj являIoщиеся вnРиацrимjr 6aзoвoгo семсЙ. сondепsed' Bodolli Itаtiс и т.д. :.;вi' нaприvеp ]imes Roman,.I.imes Bold, Неh€ t iса иJrи 3alo-повoк глa. пPсД-'1oжевие бI0' как этo 6лoк из этo прoстo ?{.Й,{е. !rPЛфтa' т испoxьз'!еiioгo к LliРифт)' ,гаtl и свойсr.!a. oтнoсящи. в сss сс1.Ь как свoйства' oтнoсящиеся BидoNI нaбoрa ся к текстy, свойсrnвa шpuфnlа сB'|эaнь! с pаз}Iерo]] rPифТoв. oвп оllисъIвaютj наI1Риr'IеP! испoЛьзуеlloе ссмеЙствo, Рaзllер. вьrдс. иJт!] J{iиPвы\L своnс|nва 1nасma oтЕoсятся li сп(]со6! oбРaщевия ]стIие ЦРсивov пoдчеp : шPифтoм _ oви зaдают вь1сoту стpoliи и Рaсстoявие ме'цу буквallil

'lиPEьr]\I Йnr lорс!Iвс,\l' i1o'{Ilo пPипlе. шРифта' lraпРиN1еp Bьцeцен!е с!oйства шп !e'tстРoч ::I!ть к oДroNry сиN!вo-ti а сЕоiтствa rе]rстa. яапРЙNlеР въlсo1)'стРoм к nбзaцу ll,lи загlrловqi EalIPиN'еР тoЛькo к 6o!+ текстa. ]]ь!i интсPBfur. пРиIletrяfl.ся и,гaк' нaчяе]t сс' пlPифтoв'

'4

г'Aaд

], {?ялtt л'r ti{Р}'фos ., тsк{Ya

rт(D

A seгifhеаdline

t

s.li|peа€l'rh

ф*

A Sans-Serlfheadllne 5enssеdlраrаqraрh tot,

A l{.эnosPace headline

А Cursiveheodline A гаntаsyhеаdline

rеr. is а Ioro Dа-аd-аD o. t.\с г аl tlsi Leе;щoiф

Ф-lв'.,na

eег"1.,5

фo оо'no, Ihr

bo\

, Aз you .а. *. irоm сhe wdl th" |,]aе;ьo, s d-а^.Jssf;*

ё:-!дэдlg-!gфдc!9цltgФt!'y

n

tфi

bro]\en3сror5seveг.l ]iлеs,l

Елjoymountаinsрr|пgH,o - it's 10,timesbettеrthan|ар(l)wаtёr| lmis nеёh'

water pфvtd.d

lh.oagh a n!ntс|pё| disЙbu.jon

sysam

3aдaeмшpифтс пoмoцью CSS б этом Paздeле мъI }зIraeм' каrt испo,тъзовaтьCss &!я вы6oPa шPифтoв, чтo6ы yка. зaть PaзмeР цIPифтa' вьI l{o)l{етеиспoлъзoвaть ,rIo6ьrеединицьI, а6сoлютlrьIе йи

oтIloситеЛьньIе' Ilo в цеnях сooтветст!ия пPи}tеРа.v, гJPивeдеяIiьIм в этoй lлaвe, Peкoмe}rдyем исгIолъзoвaтЬ oтroсl{тenьIlьIе едиtiицьI и3меPения' яaпPиIlеp еm' чтo6ьI полЬ]oэaтель }'оI легкo изiIенить Рaзмeр шpифa пpи нeо6хoдимoсти.

звдne}rl,,pЙфт.lroиoщьюсss

3ПакolUtcтвo G нa5opatyrи цtр]rфтoв пPимеР:body {font-fаmi1y: sаns-sеrif ; }' зlraчения:serif , sans-seiif , -cnosрaсe, fаntasy, сurs1ve, сaмъш пРoстьIмспoсo6oмуказaтьшPифтъIс пoмoщью сss явЛяeтсяlrспoль. зoэaние пяти 06щих rrа6oPoвtuPифтов:с зaсeчками' 6ез засечеlt.п!онoшllpин. :.roro.дeкopaтивIroroи кypсивa' эти на6opЬIшPифтoв сoo6щaют пoльзoвaTeлъ. телефoнy и т'д') о нeo6хoдимoсти .кoму arelrтy (6PayзеP}'.ItПк' !106илън{)му iРeдoстaвить oд!1низ yкaзaнньlxтиI1oвшpифтa. o6щиенa6oРьI шР1]фтoвпPед" laгают миIrима.пьнЬйyPoвeньстL!ей пIPифтoв,и, кaк въIвскoРeу6едитесь.Css вaРиal]тьl, :lpедoстaв-qяет дРyгие, 6oлeе пPивлекaтелъIrъIе IIIРифтьIс 3асечI.aми(seг10иNtеютilелкие дeтaли - зaсeqки пo кoяцам зле. \lеilтoв сl.tl!1эoлa'oсo6eняo зaметнъl 3aсeчки в зarлaввъIх 6уквах. в ка']естве :1Римepa тalrnх цIPифтoв !o}.пo пpивести'гimеs, Bodoni' Garamond' tпРифтЬI 6ез засечек (sans.sегi0 ве и!1еют тaких деталeй' flx вrreшний вид 6o,eе пРoст, пPимерaми тaкиx lIJифтoв мoryт слР{rитъ неtvetiсa' Aтial и verзanа (Dис.9'l),

TФ l-

ёг

I

Pис'].], шpифтЬ 6eз ]асечёкyорoеньlпpоце' чеtrlшpифтЬ сзасeчками

LjJрифтьIбeззаceчeк бoлee nригoднь| для сeти зaЙдитe нa кpУпнЬЙ'!асыщeнHыЙтeкстoм сaйт' напримep сNN' мsNвс иЛи Amаzon, выУвидитe' чтo npaктическивоe исnoлЬзyeмыeшpифты нe имeютзaсeчeк,дeло втoм' .rтoшoиФты с засeчками дoбавляют опpeдeлeннуloвизyaлЬнy|oинфoрмaцию пpи их иоnoльзoваr]ии для nечaтина бyмaгe, rrо лри oloбpаxeнии тeкстa нa экранe о oтнoси. pазрeшeниeм' зас6чки выгnядятнe oчeнЬxopoшo' oсo6eннo в тексте низким тeлЬнo о м€ л ким paзмepoм шpиqтa. Если вЬ|являeт€ с Ь нoвичкoмв Web.Дnзaйвe,peкoмeндyeMиспoльзoватЬшpиФты 6eз засeчeк,пo крaйнeЙмepe' дoтeх nop' п0к6вь|нe нa6eрoтeсьдoстaтoчнooпЬ|тадля pа. 6oЛeeчeткoи прoфecбoтьlсо !]DиФтaмиозасeчкaми' шpифты без засeчeк вЬ|глядят пo yмoлЧаниютimesнa шpифт бeз сиoналЬнo,noэтoмУ'пpoстo замeвив иопoлЬзyемЬ|Й зaсeчrк' вьl Мгнoвeннoулучшитeoблик вашeгo сaйтa' придaв eму бoЛee пpoфeccиo.

ri]niA

з. с'it!{anll

'xFи*тs!

"::c}G?з

\IorioшliРинньIe шPифты (monosРaсe). напpимеР СouriсI пли }IonoryРе' i:]lсют рaвtlьlс иEтеРв:uы !!с,{'д}' б}кваMи (тo естЬ, 4ля i oTвoди .]естаl скoлькo и:]'rя п) и 06ъI.1в0 испonByютс' пPиl{еpoв для oт06раrкепия ::o]a ! книraх пo прolp:iммиРoвапиto (кaк ll в IIaшей к!Iигс) или Дця ]rntитaциll -екстаl сoздaEнoгo l]а пеЧaтaющеЙ мaшиEке| ]:]

г!и!Ieр мoпoш,]рn]jEol. щэифтa, (а!доlг!

-:.сi!аEствэ

пo

с,м!oiy

отвcдится

oдинаi.вoe

ioр;jtо!!т;i7'

|\еpeкalvн!еnся uсoaм3o0anьtrекaуэ anubl'ьtеupuфвьtb cеmu ьэ'эa |ел?фсвфуе|^acmц uxomodPaжel]uя сoвeт

мы Peкoмeндуeм !.noлвoвoть шPифь с зo<eчкoми,6oз зoсeчeк или мoнoшяP! нныв. Е.лЙ вь' хoтtтe пPЙмёнитьдeкoPotЙвныe или куPсивяыe шРифы, 6yдьтe nP6д€ л ьнo oсloрoхны и нe пoлeнитeсЬnPoв6Pитьих oтo6Poхeниe в poзлизных сpeдox и 6рoузe.

Если вьт хoтите yкaзатъ тиI]oвой I!Pифт. испoлш)йте пoдoбIroе o6ъявлeEие: ..cу jf.nt.:aпily: sа!s-sетi:; ] B дaннoм слIчae 6Pа,vзеp пPeдoсTaвIrт tlеivеtiсa или Aгial для отoбPa{rения стРаницьI -qибo друIoй sьlбРавнЬiй 11оYмoлчаrIиIo и иNrеIoщийся lra пo,rьзoвa' -е]rъскo1{кol1пьютеPe пIpифт 6еэ засечек (P'с' з'2 3,5). Taкoй сп0сo6 лe.lяeтся саi'ьIr] пPoстьIм yкa3aниeм пIpифтa. нo Nto,кяo сделaтЬ это и бoЛее,roчво] зaдaв се}Iейст&] шpифтoв' o6ъгIвo иlrеннo тai мьl и делaеlr'

l

1"r]?.'.'J.'

('

с r'l.1oll..-

;..;

t! 5l.l Mrc

A seгifheadline

A Serif headlinе

A sans.serifheadIinе ten sais.ser t раraqrаph

A Sans-Serifheadline pаrаgrаph leхl, sаns.seni

A I':onosPасe hеаd1ine

A мonosPасё

head1ine

i,J.n.s!а.e

i?а:.gIа9h

€ф-

al,

rer:,

А Cursive heodIine с!..iva Paга9гdPhtсхt'

A гantasy .mt*У

headlitre teхt

рtr.€ г aph

2ис ! 2 тИпoвьjесёМeйствашрифroв в браузерегireloхдля W ndоWs

t..l'oх

Д fANтAsY шЕADLIпв lд]YIAsт РдlAcвдРlr тшт.

PИс з,з типoвыeсeMeЙФвашрифioв a бpаy]eре пt.lпёt ЕxрlоrerдляMас 05 Х

sJJтi l,2 ]

A seгif heаdline

A seгif hеadline

A sans-serifheаdIine

А'sаns.serit headIine

pаrа9rарlr |et' sаns.Saif A мonosрaсе l4onosPасe

headline

раraqrаPh

sаns-seljiраlаgаPhteхt'

A }.{onosPасe ьeаdline

teяt'

А Cursiveheod|ine сUвivс PaгagгaPьtсхi'

A F.аntаsуheadline PИс t 4 тиioвЬe сeмей.тва шрифтов a б.аytере ntеrnetЕхрiorcrдлnW ndоWs

A сursive headIine A Fаntasyheаdline г.ntisч PэёgЁPh tеrt

Pис з 5 тЙпoвЬе сеUeйсrвашрифroв в браузереsаf аr oбраrитe вlЙМанИ.' чтo для де(oратиBIoгoи Kyр.ивнoгoшpиФта oбЬ чвый шрИфr в зaiоловKаxиспоЛЬзyется

глAвA з. сrиn;i Aля шрйфт'вв ieRr'а

3нaкoмствoс сeмeйствaмишpифтoв .],rя печaтi{ дoк,vMeнтo лю6(rй шpифт. Yстaвoв'rть нoвъIй l ш и в ь | 6 P а | Ьo д и н ч а к o v | ь ' о е р е . П P l l в ь , в n Л ед o к y Y ё н г а l l а пeчaть этoт шРифт oтпPaвится вместe с яиl{ па пpинтеР, л,6() пPи сoхРaнении дoкументa з фopмaте РDF IРиф1ьI 6yДт lrPеo6РaзoвagьI в вектoры. ицьIми с.пoваМи'в тaкoЙ сиTвци'i въI мo]ксте вьI6иРaтьлю6oil из тьIсяч с-vществyющих ш P и ф ] o в , , , а ь { а ' {л o n н o ( Ь ю I . o н l p o Чтo кaсaется Wеь-дизайнa' тaкЪй пrиpoкий въ16oр y нас oтс)тствyеr При сoздalrии сaитoв следyет иilеть u ви/ц чтo вы olpalйqeнъI вь16()Рoм пIPифтoв, пpедпoлo)кительtio имeю]циxся Ea кoмльютеpe Iio,rьзoвaте,rе'i' дnя кoтopьIх преднaзнaчеп сaйт' IIIPифты нe явлЯ!,тся Частьrrr6palзeра, oяи ll."""u"уй'.o всeми устalioвлeнньтми I]a oпpеделевтroм кoltпьroтeре прилoжени темнoй папки, в нoroPoй oа(пo.|J JюГ'я, I|Ь' lIе ,'.',{.м тo ' 'о -нагЬ, какoй именв'o пIpифт (Тimes, Timеs Rеgulаr или ]]mеs Rотпan) 1сЬaвoвлеIr в oпРеделеннoй пoлЬзoвaтелъскoli сис,fi мe, Taким o6pаэoм, шaнсъI' чтo зaгoлoвoкj зaдаrпrъlй вами в шr]ифтe Uflivers 87 oЬliquе 6vде, olo;pDrеч в 6P"\ lеDе ,*" *. *p,q'."' с,'*, к т{yлю' Ha.J!oм

те-!Я (в wiтo$.s

дeje,

вьl lloхч

lе бЬlт" \ веP

|ивtиLте!епoлЬзoва.

и мaсintsoh) лIrшъ o.lеEь \Iafloгo чисЛa шРифтoв: Тimes, Arial;

verdanaи couriеr.

шpифтьI' oбщиe для шлdows и маc Hихe пpивeденсписок шpИфтoвс oдивaкoвЬ|Mи имeFаМи'пoставЛяeмыxпovмoлчaнию L o п e о а U и o * н Ь vсии L l e v а м и W , . d o w s/ V . с o s x , п o г а - а " м ' "-о э.и шpиo-. мo:нo испoлЬзo-ватЬ сопредeлeннoЙУвeренHостЬюв кaЧeствепеpвогoваpиaнта'но таrxe не с - о и | . з а б ы в а l ьv к a r a т ьв ' a a o j n - a е | v и в a p ' a n , ь с п о v o ц ь ю с в o й с в d . n " - г d f i y : AJiа|,Aга]в]аLl,A.|а|Nа'lowсеnILгусотhiс,сom-sагsМs,сoL.iРlNew'Flа.|'|'nGothi;' оеo.g|а, |тpасt Monotуpe,Pа'а||-о,svтbo|, тагorга, т тe5 NF{ Pomаr, -.eоuLhet \,1s'

.цалtенеlvеriсa, вoзмo)'rнoсa,мьIйпoIIyляPнъIйшPифт 6сз 3aсечек,нe гIoстaвлЯeтсяпo )a{oлчa}rию сWindows' Iroв этo,i систспIerN{естсяс06ственный пpaк" ттrческиидеliTищьIй шDифт - Аrial. B такоиt иnации п oльз" rь г з.rр1"'1Ь 1Р"6IeмЬlешРифтьIс вaше. ""те, гo сaйтa' несмoтPя Iraтo, чтo СSS3"oжe пoзвo-lяeтзaпpoсить Iпpифiс сЪpвеpалля oтoбрa]кеIr.ия дoк)wеllтa' в lraстoящeе вРеlIя opayзepь,неЪo!дep*"uuo' э'y o мo:*tетвoплoтитьсяв pеальвoсть ф'1rкциIo.oдEaко в 6yд (нo дa]ке тoгдa бPayзepы нe 6yдт yстапавливaть IIIPифт в систeмy, a все"o лиIпь стан}т зarр)'жaтьегo для oтoбPDкeI{иястРан].tцы).

зчакоnl.тв{]

t {eмeйtт!амfl

lllрt{Фтов

,9

пPl{мgчoниe сssз 'мя€ т сr Фeдующ€ й в6Pс,eйсss. сooтвёrdsуDщиoспёц'фикoцииwз с у^e пocвилЧсo, ьo гoto

ч.o )тo вeрс.9 чe 1oлYцnлo ш/ooхoй

в 6PoузePeoPelo' PЙмeнeния

Peoлизouии,

зo

до тех пoP гIокa шPифтьI Eeлъзя 6удет зaIP')1(ать пo тPебoвaIIиIo| l'ы дoлж. ]Iь]пeрetlисляТъ пoдхoдящие lпРифтъI для oтoбРa]кеIrиЯ стPаницъI в пoPядкe пPrдпoчтительIioсти, ts этoм пеРечислeЕии следует уIiaзьlвать ]o].Iъкoипlеiiа се]!tейств,тo есть llеhеtiса иrrи Тimеs, a не неi1€ t iса Condensed Lrи r'mеs ]trхpJпoеo, BЕaчa'Ie мьI )тaзьIвaем rrаи6oлее пpедпoчтительt{ьIй IIlРифт' a зaкatrчивaeм r5щ'м семействoм, 'aпРимеР' с зaсечкaми или без: :]aЕ-fаmily 1''trеь!сhес пs", heLvеiiса' aтiat'

sа!s seIr:]

Тaк кaк тrеьuсhеt мs сoстoит 6oxee чем из oдlroгo слoвa' мьl зarсцIочl,'лиего r кавьlчки. Есл!l {ьl yкa?ывaем rI]Pифт в стРочlloм пoРядкe в1r}'rPи).{re имею. r!flся двoйI.ьi( кaвъIчeк. тo исrlо,йэyем oдинаpllьle кaвычки: : . s Е y l r = ji o a L f а i i 1 У : ' i r e b r с i e : п s ' , l e t l e t : с a , а 1 i a ! , s e r s s e т i f ; ' > A слeд}ющим o6Рa3o\I мoхIro )казaтъ fiPифт с эaсeчками: : : r L - i а m i ] y : { с n a т с р a 1 ,Е : п е s , s e r i t i B пePloм пРlr}iepe мы 'Iспonъзyсм свoйствo fonr: fejnily и гoвopим 6Paузе. :\: пoказaть этoт дol'тl'е!iт с пoiloUlъю IЕРифта тrеbuсhеt Ms. Если еIo rrет, ис. -oльзyйте ilrрпфт неlvеtiса. если и этoгo IДРифтa неT, испoльзуйте Ariаl' а пРи в 1сo1Iце oбъяв::о oтс)тствии вoспoлъзyйтесь лю6ым шPифтoпt 6eз зaсeчек. -Ba,]снo pанrе upцфnoв ?н11я J1|а3ъlваm 06щеесuti|сmф шpuФт||oвнa чILай' е1'1u)х.1за1|нъLх е )сnaнoвлено' вo втoPoм пPиiIеРе исlloлъзовaниЯ свoйствa f ont - f алi Ly vьi внaчалe l'кaза-'lи -rPифт сhатсoal, дoст'гIвьIIt тoЛькo в сr!стeме Мaсintosh, тax кaк хoтим' чтo6ьI -oj1ъзoвaTели Мaсintosh NIoIли нac.тадиться эти'I пpекPaсньl}I ilРt!фтoм. Пoль. ]oвaтели Wifldows )ъидЯт стpа}lиlll со ilPифтoм тnnеs,

cтилeйк дoкумeнry дoбавлeниe

Л\"rшиМспoсoбoм наvчитЬсяпpиMeнятЬpaзличньeотили!lpиФта кдbKумeнryЯвЛяeтся . p a k - и ч do, | к p o n - еф d , л s а т p Р / | t n т d l ^ . o , , r т т \ е - o v о + н o з а , D \ з и - Ь с L а а й w!W. (допyстим' в N4асro" Web-peдaKтope и в вaшeм грaфичeскo[' в бpаyзeре obrl!aщ]!v]]!) mediа Dlеаmweave0,BылoлHитeслeдУюциe дeЙcтвия, 1 загpУзитeФайЛс оаЙтavlw,bbd,оom и соxpaнитеeгo нaxeсткoмдискe' 2, oткpoйтe фаЙлsаmр|e-хhtm|malkup,htmв Web. peдaгlope чepез Meню Fi|e(ФаЙл)'

80

l'l!*B& 3. стяfii?t.я !.р'фrё5 g т€ . {t'а

3 . такxe oткpoйтeфaйЛв брaузeрe,чтoбЬ]npоомaтpиватьизMeяeнИЯнa стрaницe пo

м e p a е е o е д . к | и o o в а t s ,вчW е b p o Д ё .l o p е Ka<дЬй pаз. внoся изMeнrниe в дoкyМeнти сoxpаHяЯeгo в рeдактope'пeреХoдитe в бpаузep и o6н0вляЙтecтpаницу'чтoбь видeтЬсдeлaнныrизМeвeния'

припrerreнПe влo)кeнньrx стилeй дJш прoстorЬI пPиNtеPa мъI lloка-чем вaм' как сoздaвaтЬ влo)кerl}rьтестили сss з нaчaпе дoп}a{ептaj a тaк}ке как }ца-'IитъссьUlкy нa вIIешвий фaйл сo с,rилями' кoтoрыи пoка чтo вnN{lrе лoнaдoбI{тся' Tакиl1 oбPазoм, все стили Лoкa 6удут нaхoд{l]т!ся IrеIloсPедствеEнo в сaмoNт нТмLдolryменте. Brroследствии пrьr сo. здaдиrl отдe,ДЬнь!йфайJr и переI1есеl{тyдa всe ДaвaйTе !oсполъзуeм.я нTмL'дoк}aIеятo\I. сoздaнньlм в D1aвe l' и измеЕим eгo' добaвив элel'Iеrlт stY1e: <:ittе>д sаmр1е xнп,lr оo",..n." ,,ro,". <€Еyle

Е!.рe='lLеxс/с6sll

)

,/*здeсьI{щем нyхныешp!фты */

в м e . , o п P и v е ' , | н и c .з в i,,.. vьrдo6,вим сs\. 'Pзвиj], ко. гдa 6раyзeР встPетит oткpъlвalolцийся тeI sLy]е, oн llсРeстапет o6i,"с"'-** кoд кalr хнTN{L и Eaчне'г oбPa6aтьIвaть егo кaк сss' CтoлкIryDшись; зaкPiIваIo. щиIIся теIo!1 st!']el olr снoвa начEет o6Рa6aть!Baть кoд как хнTМL. Пoэтoмy Bсcl }'кaзaнEoе вrI}тРи тега siylе! дo,JD<нoиметь син1aксис Сss. ТЬ есть, код втr.',тPитеra sсyiе фoРмaтиPyется сIедyощим o6Рaзov: с е i e < т o l r l с в o й . т в o ]|Lз н a . : ё a a e ;. в . й с т з . 2 : з н а ч е н и e ;и т . д , ] нe стoиr зa6ъIвaть o тoм! пишитe Ли вЬI в дarпъIй voмeEт ХнтмL или сss, и сooтветс1.всвнo фoРУaтирoBaть кoд, B нaшем oТчае хнTNIL.кoд стPaницьт гoтoв' a IraN,требYется -qиrnЬдo6aвитЬ элeмеilт sty1e и яaписать сss-пpaвила'

3iаt{o!i6.o

yкaзьlвaeш

. {€ н € й lrвaфrl

GeIYreйGтвo lttpt'фтoв

cтpaниЦьl

J,oliь' зi'lаjЬ.Ечc;. 'Дo шP/ф :.о для тела дoкумeEтa:

r&Pяф!6s

81

для вGeй

oL J Jя всей flPjницы,

вIJацaпeс |c/.\l'I J.'Дd,Ь

::].'.ё сvpё=':eяtr'сss > :эdy ifolt-tщi1yl

veidana, alial,

сoхPaните вт{есевirьIс измснеIrия ji б}.Цт вьllлядеr.ь. Iiaк Ea Pис' 3.i;.

6aпв-6e!if )

и oб нo!ите

стPaнищ

в 6Pavзepе, Pезульта.

s|ЙIт

@ 2004 сhаniе Wykё.sоi0l алd Neя R deБ,

P и с .з , 6 y ( а з а вi o n t ! а n i l y д л я э л e M e н r аb o ф , м Ь И ] м e н И л и о б л и к s с е й о р a в и ц Ь

гnAвA з, € t ял'

для шр|lф1oв r' r€ t {.ra

Тaк кaк ;oni- f emily явлЯeтся нaследyeMым.свoЙствoм. егo знaчeние перeдa' ется гIотoмкaм, к qисnу кoтoРьIх oтнoсятся все злеN{ентьIстРa}IицьI. пoскoлЬIlT bоdy -этo эneмeнт вeРхнеIo уPltrвня, тaким oбРaзoм' дoбaвив oдI{y стPoкy, мьI изменим 06Лик всeй стРal1ицьi. итaк' двигаемся дальIrrе.

Pазшepшpифтa |Рех lип.в. этo чт06ьl задaть PaзмеP tlРифlа' Vожьo испo,1ь /l ьа,,{€rl, пPoцеlг а 6 . о л ю п , 1 o , е( ] r o r п , . , и ! , | и к l c , l Ь ' v 1 и \ 1 o | 1 t ' 1 ыa) ,a , o ' 1 n u ь л } , всe тРIr aы Ши еm) Й К,11oчевы?eosa (нaпРипIeР' x.smаl]. small, laгge. !xlargе).

.Д:кффpи зельдмaн идPугие стroсo6aиN{erотсвoи rrедoстaткии гIРeимyществa. ьrзЬваIoщиe спeциалистьlпo CSS pекollендyют rtсI1oльзoв /sizеmаttеrs/). нo тaк кaк мeньше всеIo пPo6лем (см.\^/\ф.аiistaPатt.сomlа.tiс]еs ключевъrе слoвa тPе6y!rт 6oлее глy6oкиx noзнапий сss' чтoбьI oтoбPa}€ т ь и пРеrлaгаюГ,ишь oгpаничcнньIЙ и вo всех.6PаvзеPaх, шPифты oдиlIаковыV нaбoр рaзмеpoв' мы 6'дем испoльзoвaтьеm для yкaзaния РaзMеРaпIPифтoв. (за' и (пDoтив' испoльзoвания пpoaopциoнальньlx размepoв пpи сoздaнии тaблицЬlcтилеЙoдниМ из клloчeвыхмoмeнтoвявляётcявыбoр aбcoЛют. eдиницдля Укaзaнияpaзмepа шpиФтoв']ntelЛetЕхp|orerидpУ. нЬ|xилиoтнoоитeлЬньLх гиe сла6o сoвместимыеcо стаHдapтаMибpаyзeрынё пoзвoля]опoлЬзoватeлюизмeнитЬ pазмep ш риФтa'задаHHЬiЙв aбcoлютнЬ|х едивиLlах,пoэтoмyв настoЯщeeвРeмя нaблю. eдиниц,вотдoстoивства и нeдoстат. да6тсятeндeнцияк пpeдпoчтeниюoтнoситeлЬныx

.

. .

eнятьразмep urрифта,пpи этoм шриФт вceх элeмeнтoвотpа. ницы мeняeтояпрonoрциoнальнo'этo очeнь вaxнЬй мoмeнт пo пoвышeниюдo. cryпнoстисaйтa и eгoдpyxeлюбнoстикЛицaмс ocлаблeянь|мзpeниeм Илик noЛЬзo. ватeлям, paбoтаЮцимс мoнитopаMисo свepхвьlсo|(имрaзрeшениeм' гдe pазмep г и ' с e , а н e / м o в e p ! ov а г : в xoдe oтладxидизaйнa вы моxeтe лeгKo пoмeнятьрaзмeр тeкстa всeх элeмeнтoв' aвтoматичeс. измeilив бaзовыйpaзMеpшpифта'- шpифтвсeхосталЬнЬ|хэлeмeнтoв i и n з м e n , | (я г o o г o D . и о н a л ь н o , eсли вы вe будeтe дoстaтoчнoоcтopoxны' paзмep шpиФта влoxeннЬ|xэлeмeнтoв мoxeт oкaзатЬсячepeсчуpмeлкиМlтаK кaкявляeтcянaслeдyeмымсвoйотвoмi пpи пoпыткe пoлЬзовaтeляyвeличитЬpазмep шpифтa сУщeотвyeт вoзмoxнocть pазpyЦreниясss.pазмeтки' нe п рeднaзнaчeннoЙдля измeнeния объeмa тeкcта или paзмepа шрифтoвiпри зтoм тeксткoлoнoкили oблaстей Мoxeт выйтиза их гpа|]и. цЬ|'чтo кOaйненexeлaтeлЬнo;в главе 6 мЬ]coздадим pазмeткУ' пpeдycматриваlo. щy|oвoзмo)кHoстЬизмeнeниЯpaзмepa Urpифтaили o6ъeMa тeкстa,

8з Uтмeтимj чтo снaч:UIa em мoxeт пo(aзaться вatrt стрariнoй eди!ицей, нa сa. \{oм дeлe дaвньIе eдинnцьI явJтяIoтся пpoстo пPoпoPциoнaqьнъIм знarrениeм _ \lo,кнo oтнoситься х l{им кaк к десятичньlм пPoцеi{там, кoгдa 0,9 еm - этo тo же сa}toe' чтo и 9070 oт 6aзoвoгo paзмеDa. B 60ЛьпIиястве.бPayзeрoв пo )a{o;чaнию испoльзyется Pазмеp r em (эвивa. 'le!rт гтРимepЕo 16 пикселaм), Ir если вьI зaдадите Pазмеp rпpифтa в 1 еm, oн бyдеl тах,м жe, ЕсЛи вы хoтите, чтo6ьI tцPиф' * n o..i ,,."е нтa сoс л:rв. , l 1 1 т p и ч е г в е Р т и o г б a 3 o в o г o ' J a д а й т e e | o p а в"np.,.,. нllм 0.75 em' пojoвин) 6азoв0. гo' . pавllым 0.5 еm. сo.eY

вы яoxп.. 60лФ лoдpo6нoузнorьo пpo6лoмe PoзмoPoвшPифтo,лoс";". ruюpдo roпoрo М'с|ognut,сoф/ьloo/зa8, oтмыу, to eoи вьr ""*.*" зo6oитвсь o тoм, чт06ыпoльзo.oтoлимoгли po.йp,p,4. *;,' .""""; ,.;;;;;";; .;;: ".** фльфы..дин&цu tlлi yхo!oнияPoзм.Po щPифтo,

испoлЬзуя em, внarале слeдуёi зaдaть 6аз0вьIй PaзмеP uIPfiфтa для всегo Joку\lerrта с пoмorдъIo bodу t00%. посjе чегo мoжнo р{aзаlЬ pаJмеp urDифтoв oстаJIьньlх элементoв oтнoсителЬнo этогo 6аз0вoгo Paзчер], BначeIe измeним сeлеIсгoP body: i::Y1е Еyрe:.'Еeхt/сss"> j]dy {fопE-faпi1y. verdanа, a'lаr,

sаns.selif;

foDt-эi26. 1oo*']

llесмoтpя lra oтс}тствиe видимoгo эффeктa, тeпepь y нас есть 6aзoвый Daз. !еР цrPиФтa' oт котopoгo мo)Iснo o гIР]rчинoй, пo кoтopoй мьl lliaзывaем бaзовьiй paзмeP в пPoцeвтaх, является тo, чтo eсли IЕ в"д"' р**.р

o6Рa6aтывaeтпoсneдyoщ"".e".*'oрo,, де,* *р'ф.' :^1T: :I'] ::"!i:-'*. roльrЦe I']rи !{eньrцe}ry')r!яoгo пPи измel{еE'rиe.o PазмеPа. ]'oзмФl(нo' т€ b )

вы заметили' чтo РазмeРы rto )n{onчatrиюд]'iя PaспРoстpаяеlrlrьLч aпРимеp n1-Ъ., р. u , и ] :' эoвoльнo крrпные. и еспи нам

етсl Pазмес]ить

на сlPанице

oпPедeoенl|ьlй

o6ъеv

Ieксг' с этими раJмeDа

и

alелю прид€ " г(я акrивнo пPoкP}чиsa|ь ее ввеpi."'n"' со ,rаснo мaPкетин'o3ьIм иссЛедoвa'{иям. пPoкpyткa стPанLщ lJеж."",.;"',. -'.". 'гo. нa нaш вJгля4 гакoй 6o,1ыUoй лoPr ' г 06,'к ( 1pа';цьI' PазNIеPшPифт, ,й" D свoIо oчеPедь' пPи испo/1ьзoвании еm мoжнo I1o y\loлчaнию !еньIttий pазмеp lпpифтoв' ведь пoльзoваrc,и всeгдa мoг1т ",л,.o "р" егo yвeличить. предпoлo,мьf, мьl хoтиlI зaдaть I{oвьIй 6aзoвьIй в li тIу*1к1oB. Д'ля рaзйp i:огo )'l€ ) l(ем Pa3меp д/rя body. PasньIй 76% oт 6азoв0гo rдpифгa 6pаyJеpa пo 1 l o л ч а н и ю ( l b г . } l 1 к т o в ) ч' т o с o с т a в иг т р е 6 } e v ь r е | 2 r r r н кr o Ъ ,

a4

l.fiа8я

з, € r ;!5я

a,!:l gFi'фт8l

steнс'з

чтoмы nDимeчaниe A poзвё ]2 oт ]6 - этo нe 757". спpoситeвы,oтвeт зoш6чoeтсяв ro^4, пoлyчоeм6oлёeyстoйчивыйPoзмeP шPифтoв PoзньIx6PoузePoxпPи и.пoлы зoвонвичeтяыxзнoч6н!йldoэJoмуarPуЙяeм75% Аo 76%-

0'75еm эТo 9 пyнктoви r,д. ъпсрь, кoгда1 епt Равняется12 пунIrTам' paзмеpшpифтaв 125%(20цнк зaдaкrт вeкoтopьrе рaзРa6oтчики fuя iсгаrltml

тoф' а paзмсp rrтpифтa элепrелтabоdy 500/o,гаlir oбРазov' 'lЦЯ всeх дoчеРнtd.. j = 1'2 еm = 12 Pt и aд'' чтo qlцсствеEвo o6Летча. eпi 9 rоЪt, 0'9 l Рt. "-n' "".'""'o. . n д ' tr чe Г: |Чc)1, Пo\tниTе' чтo !не эasисимoстIr oт исl1oлъзусп{ьlxедиEиц 6РaузеP пРeoбPaзo пoтolry чтo иlreнпo так о'гo6paжaeтся иEфoРмaцйя ria эIipaнс, каr&1ь1й 6PаyзеP испoльз)'ет для э"oй oперaции с-псПia oтличпь]li Jlгo. pит\т. пoэтow чеNI боЛсe цeлъIпla 6}4т использyсlIъIе пРи BъIчис ния' теr, 6oлее цслoстньlt] 6vдет Рез\тшаa BaJr.Еoс,r.ьoдивaкoBoгo дo пиксеЛa оro6рaжсЁи,I стPalIицьт в 6paузeРaх пo.paзнo]!ryoцсвивaется РазньIми дизaт'не. palrli. во uостapаi?leсь нс 3а6ьтвaть o нaшиx сoвeтaх пPrl ,\iстalloвкс базoвolo РaзilеРa шРифтx. B целoм' eс-.тЛпРи lкa3aвlrЙ Рaзп!сPа IlIРифтoв вьl использyе,ге lтРoпoPциo н?шьlIьтезЕачеiтj!ядJlя отдeль]{Ьrхсeлек,ropoв' 1o мoжетс lIPедoстaBпть пo,ь3oвa тсляlrптpифтъl полхoляllliх РaзrrеРoв' !ьIrлядящие пPиBлекaтeJrьlIoив бoльruин ствc сЛучaев yстрaняющие нсo6ходип10сть пPoкРrтки. ПPи этot1 сoхPa1tяется Bозмo'fl oсть Iвеличения Paз\1сPoDiтIРифтoв B сJ]еД'nrlциa flPlli!еPax NЛn6),деI испoлЬзовaть 6a3oвый PaзN!еР шpифтa rto _ Ilpи сoздaнии сo6ствeвнЬ]х сай ,vмoлчaнию 1007.' а эпoсrlедстви1] жс,rе ,тзi'Iснить егo rry;Jrьпt o6Paзoм. итaк. oтталкиваясь oт l00 пpoцeвтlloгo знaчеIтия свoйствa 1.ont.si7е.зaдaдим с lтoмoщью em' начиная сo стPoки пoд рaзмеp шpпфта лля кDr.догo э-!eN'ента так tloтoiт|, чтo испoльзoвaяия 1007o !N{еслoтoтипoм (pис, з:71, мьI пoстyllим тo 1еm lloзвolяст пo{vчrrrь 6(,лсе сo',]aсoвalrньlй Pез}лIfaт пpи пРoсмoтРе j ' , ID а l | и ц о B| o в ' е \ 6 p d } r " р u , ъ М н . \ | е н e L ,r r o o L |) " , " d | ь P . " { " P U P J ф l Л , . ' i н и U е и , \ ч ,{ 6o,1еe lo6нoi ;,,".'"". ' , ;''.'',.."' t,"' "lг " - ' oTвo.иТся к зaroлoвIq тpетьeго !?oвн' f]' мьi з;цади}1,]цянее стРoкa /Inнfla' оа.!lPs'о,Bo'

ч .lы|lэ

|иU.ч

<sL!1e t!рe='tех:/сss' > ij.r]y {ior: i]

:аmit]r: 'ieтdаaа' атieL'

{.on. slzе:.веm]

sans serii;

foni

s!ze:

100*;]

в5

StуIin _'. а Nсrr Rtd€n ьook Ьу сhпles wJkе.smilь

Mоviпg to ХI{TМL ]/с з'7, это исхoдвая BерсИЯ]а.oлoвка примeра' расLMoiреннoгoв главe l'.oстилями Pезvльга1

Уь| в/диlI

а! ри..

по yмoлчаNИю

J'8,

WW ;;;-,.."

""

*,"- *.-.-*,

Мoving to xнтt{L PИс,з 8, тeперЬpазмeршриФrазагoлoвка "ANew Ridеrsboоk''," явЛяeтся бoлeелриeмлемь|м пlptiфт заro,roвкa ста,! бoЛee ]!Iелким, (ЭкспеpимеIrтальным

...Ijj:_]'3

!|..P""'.P lепеРьдaвaЙтe 3адaдим

Pa3меР цIPифта для o.'*u"ьi'

: : У 1 e t y р e = 't e x t / с s s . > ::jy {font fаФitу: verdаnа' атia1, sans se.if; :1 {tont-size,1eп} :: {fo!Е sizе| ' 8еп} : tfont.вi,ё!.8ф) :: {foвt-size:.?5ф} :1 {font-вt2e:.?5ф) 1{fоot-вize:.7eп}

путеNfмь,i oпDr'

пo ''MoлчaниIo сoстаЕця, 1.2еmили t6 x }.z= rs.z j')' "".".''o,

fоnЕsize:100ъ;}

pn"".'nl''

E6

rлAвA з. (t' ля дn! шpифтoв и тeкtlа

PезyльтaT пoiraзаЕ fla Pис. з,9.

wrf

**:i,:;!iil'i*ф . i.'

iи.в м* ф сn'n.. {vr..ftф

ji+:"i;:i.j.:idt *lТii{I$:If#iТ'::iltrJ..j:}:I.ji.::'f#ЁнTr;# *" -. t" *y.оr*..i"

ь. -

мы не зaдаем с,г'Lпьдля гIyllктoв гlaРy спoв o6 этих пPaвиnaх. Bo'пеPвьIх' д,"янyмеРoвalfloгo (o1) и lreflyмеPo. мo, *,".'. "'.,o "aд.,, "'.гo 6ьl мы laдали (тиЛь непoсPедстве}l. ""*ro.iiil, вaннoio ( r1) спи. ка, t oдeP)кaurих, r. Е.Ли a пpи нarцeм .тodpл"а-nись6ьr шpифтoм oднoгo Pзз:!tеPа' ij;а;;';;-" ;;;; o6oих тиI1oвспискa' ,,oo*oд. *o,""o PaзньIй Paз]aepдля "*u'o

тeraх Haслeдyeшьre Gтилli вo влo)кeнньlx

.тPаницъI' vже нe( кoлЬкo v,тv.{ш!t,lи oбЛик вo.втoPьIх. '{еL vo]Pя нa 1o. ч lo мьI |я Д"пяrtегo хo ма,.I' oкаJа-lся с,1ишкo\' nmvеo шoифта неt.уl'lерoBdннoгo списка ,"'' q гo и r1Ля чy\leP ;. *. *;,";' "'."eн'rе'

a7 пPo6лемa 3aклioчается в тoм' чтo эnемеIlТ ul имeет знaчениe ' 75 em,a влФ жeнныЙ в Ireгoэлeмeнта _ имeет знaчeниe .7еm. в Резyлътaтeэлeме'жа"'ся с Размерoм lпРифтa .525 em (.7*.75) ";;;; ll-^*;ry;;;;;;;;;;;;;;й;:;

*',

вaс'таl(и пpoтиввaс.К свастью, peпlитьэЬ

::j:'.!i9.]"'" лeгкol rryйнo пpoстo "a задaть кoтrтeкстlrьтй сeл.*'op < s Е y l е t y р е = 'Е e х t / с s s ' >

л"' э."*.,ryau"'.

щi.о'i,.щ,

bcdy {font-fФi1y: vеrdana, а!ia1, sans-serif; fonЕsi2ej100*;} rr {font-size:1eml .:] {fonЕ-size: -8em] . . {f o n Е - s i z e : . 8 e п ] r1 {fonr slze,.75eh} j1 {fолt-s1zё:.75ыr} ul . {foдt-5izзil!ьeltt} : {fonсsizе:.?еn]

.-.мь]

испoльзoэL'lи значениe inheтit'

r:::La

чт06

yяфта свoeгoРодите-тьскo!o элемeнтa.Этo нe тo-'1ькo oб.."";;;;;;

tпpифтoм lтlDкнoro PaзмeРa, нo ir пoзвoляет lrаi{ в 6Iдy. щем изlfеlrить paзмep шРифтa всех элем слxскa' пoдкopPекTиPoвaв 3нa. чеIrиe селеI.тoрa o], пo" -." a пРoстo rнaследyет l{oвoе """*.""o,.::]-..: г."y,*".',Jn; ;;;;';;:",,.мelrт ",,u'",,,". Eеre .rе фm6 Useful l|лks from the weЬ s|te оl th6 /с Мy ol the webъ dev.lo9m.пt. . . . .

Wсзt хнnll v.il.ьt.r Wсз's сss vв||d.tоr хlтl.]L Rфurcф сss RфUrc

Ф 2004 сhаr|le Wyke.smltn аnd N6w RldeБ,

Ри(,з']0' тeлеPьсnисoxчитается лyчше,таккаклрoблeманaслeдosавия vсlDавeва

ъпеPь мьI l'(o)кемлPoвePить мaсшта6иpyемoсть нartlейpa3мeтки,

1. B.меrпo 6PaрePa вы6еPитe пylrкт viеw t Tеxt sizе '. tаrgest (BIц D Paз. м€ P шPифта D. сaмый кDтIный). o6рaтитe внимание. нтЪ рaзмep шpиф. та всех элeмеlrтoвлPoпoPциol{aliьlro }вeЛичr-fiся'

l]lA&& 3,;]илидя'

8€

rrlриФo|r я 1e'.*а

дxя сеnеnтоРa body' ПoflPоEйте 2, измeIитс 3}rаqеIrиeсэoйствa iont-sizе ее Е фaузеPе. кaк vхаэa1ь 809c иЛи 12070;сoхPaЕите стPaпиц,! и oбвoвитe Те из вaс. ктo i"o"". o.. ,,.,.*."'o' oтo6pЬкalотся в зrrанвых пPolloРцi.tях. нa десяткax стPаt{иц llс|tяЛ з ачения aтРи6yгoв sizе для сoтсIr тегou fо.r! !IPифTa. сaйта ]roсne пРиЕятЙя РеIIIеi{ия1величить l.rлиyменьшить РaзмeР пoпPo.сит вa I l.пllент oцевяT /r.tflщlо uo;мo,rEoс,rь' l{orдa в cqe'Ц'lощпй Pa3 !сeгo сalJтa зa 5 с' изlIенитъ paзlrеp пlpифтoвj Bьi спto]l.ете сдеJraтЬ этo д7'lя А !ь

дв|',"evl

ь

|.r-ц"ше,

Cвoйствaц'pПфтa стРaЕицьl явлЯloтся кJпoчeuьiм всeх эле!ептoв РaзмеРа пJPифтo! (o.1iгаег.я 1:r tпo.o6o\I o'',6pJ.к' I|ия||FPJPхylj lсI{. 'Bаl|,е|oдoг!{eч,J.Э'l' c иеPэP\llи ыч ' do{йflв шPn{''loв lI p.,'.' "'i" ';, a.UP/фгoв, 'r . r о r' ' r е ч l а , z 1 l в а l , р p r ' ' v o , 1 r l с в '

ПРoпoPциJi

Font-style

onrrer,оbLiquе)' ПP!пlсР|h2 {foЕi 3tyre:i.аriс] (дР1пc iaпи нет. Ес,rи вьI кyРсивoм] этo свoriс,rвooпределяет,BьтдсленIи lпPифт хoтитe

вьцеnитъ

тeкст эJ1емев,Iа ьTРсtlвol{'

укa)китe !PавI'Io:

р {fcnL si1.te:itаiiс] ot,1rquе. llo o6ьiчнo испoльзoЕaть N'Io,iiнo 1ак'rс вN{естo iie1iс ниvи 3a]спioчает I'ежд,v чтo иде}'тичен, ПPедпoлaгLlIoсь' Paзница

peqиьтaт

яeпяетсj itariс прoс'i лефop*иPуeт шРифт, нaмotтяя еro вflPавo. a obLique 6onее этoгo д.'1я '.up.'"чсски *p"q,'o*, ф.*".,";*" .,д.";;'' " |IePJ6o|'T,кPo\|eгo|o.оo.оъевooбцeн.гаспoJ. вo..'"o.', ' и е ' . я . ' ' 1 , ы v ' с p ' ' " P а ч и ,I l j п P и l ' с PN е ' . а P е a , 7 лиrпь двa зяаче Tа.им o6pазo"i' .ь,я свoйсTвa iont-sty]е фaктиqесIrиесть : п p l ' t " o ' rо " l B.аннov ,:Ф,: sqai ifonг sty:е:.crпa:; ]

t e я t < / s p а n >i r < ! > т h i s ! s i i a t i с r z е . t t ё x r : l i 1 t n < s P . r > dp i e с е o f n o i i . a 1 i с пoJтуЧить текс\ !ьiде. мъI 3аllаем Pез}пыrат. пoкaзaнIйй нa Рис. з' 1r, тaк мoziнo текст, ,reЕIrьтйьfPсивoм. !н}тpи кoтоPoгo Pазмещея oбъI.lЕьIй

89

тhis is italiсized teхt with a piесe of noл.ita|iс|eхt in the midd|е' P и с , l ] ] ' з н а ч e я и еп o r m а с в о Й о в аf o п i n y е п о t в o л я eвi с т а в л я тoЬб ы ч н Ьй т е ( о в н y r р ь т e K . т а ' вЬIдeл.4нHoгo Kyр.Иeом замeчaния o значeнии ncIn.] значeниe n.tпа 1 oтменяeт ЛюбЬiе вoзMoхн Ьie своЙcтва лpиМeнeнHыe к элe0reвrv, вдан. ь o в o ' Д e. , / c l } o , l в l э v .е.o. .-" о исnoльзoвать эryoсoбеввoстЬ и для дpyгиx целeй' HaприМep| загoлoвки" o " ' ].i.r1r пo умoлч а я и юв Ь д e л я ю т с ях и р н ы M , П р и M e ни в з н а ч е ни e . . r I а 1 к ! ] ( ] j {:.!1 l|.iqrt:r.:i;r, ]) 'iЬl мoхeм] наnpиMeр| oтмeнитЬ тaкоe выделeниe длЯ загoловхов трeтьeгo Vooвня, Если 3ь|задали п рaвилo a i:.nL.Ieliaai:sпelL сals ] l тo вce ось лкИ будл oтoбраxатьоя Mа. лerrЬкИМиэаглавными бyквaми' чтобЬ] oтoбразитЬ oднуссЬ|лкyв oбЬцнoМ вaриантe c заглав!Ь|ми и стрoчнЬ Mи букваMи] слeдуeт добaвитЬ для нee лpав илo :i ' sЕ..: з L i i. }: Lt.li-

Font.weight

Firefoхo'a,O+

i

]i]]s is bo]qtе{t ln s |s

]

in 5 ]5 noгпа teхt

о o | d е rt е ' t .o der macе qhiег -h s is 100 welght his 9 200 W€ight

тhis is 600 lveight тhis is 800 weight

lЕ 5.2.з цaс

IЕ 6'0'2windows тhs s n.гm. tехt тhis is Ьold teхt

тhis is 20о Wеight

l т h i s ] sз о 0 W е ] q h t тhis is 50о wеight

тЬ 5 s .]Oс lre ght тh5 з 50! !е сht тh]s i5 бo0 weiQht

тhis is aoowelqht

тhis is soo v/еk]ht тЬis is 9оo wеiоht ]

ъ*..l,;

_'l

тh]sis лormalteхt тhis is ьo|d text тhIsisьoIderteхt в o ] d е rm а d e l i g h t e r тhis is 100 we]ght i тhis ]s20о weigh!

т h ] si s з 0 о W e i a h t тhis is 4o0 we];ht ] т!.s is 5oo wёight тhis is 6о0 weiqht тhis is 7oo weight ] тhis is aoo weiqht тhis i5 9oo w€ i ght

P и с ' з ] 2 т а к р а r л и ч i Ь е б р e y * р Ьo б р а 6 . т Ь Б а ю r р . r H " е r н а ч Ё н и я т o л щ Й н 5 ЦрИфта

90

г'AвA

з. сiп'!l. дпя шpяфтсr tl rg(Е'r

нa Pис. з'12 пoкaзati не6oлЬпIoй тест, вьIпoлtrelrt{ый в нескoлЬких бPayзеPaх. ктo.trиб}ць из вaс мo'(ет PaЗrЛядeть 60льrl!е дryх вaPиантoB oтo6Pа'(ения ЕРифтa в кa]кдoм 6PayзePе? и мы тoя.е rre мo)кем. Мы дa:&е пь!тались испoЛьзФ ватЬ рaзIrьIе lllpифтьt| нo 6е3успeпIнo. Удaлoсь дoбIrться тoльl(o двP( ваpиaнтoв oтo6Рaxенrr9 IrIPифта _ яrиplroгo и tloPмaльнoгo. пoэтoмy' вaPиaц'!и я{иPнoсти 1(oЦт 6ьIтЬ l{егIлoxим сpедствoм пoкaзать I-IеPaPхию доч,'I{eIrта, oсoбеннo eсли есть вoзмolкнoсть сгенeРиРoвaть Paэnичньlе числовьIe зriaченlur мaтeмaтичес. '{j1с пoмoщью пРoме)l(tдoчнoгo пРorPaммIroтo o6еспечeния (дoгIy€ т им, АsP и,и PнР) для aвтoмaтическoгo выделеIiия pезyльтaтoв' гIеPехoдящ!-IxoпPедeлeн. }rьIе IPаIrиць1. B с-Jlедующeм Pаздeле этoй глaвы мьl пoкФ*ем вaм oтнoситеЛь}ro пPoстьlе I-Iyдo6lrьIe сп0с06ы гIредстaвлeliия, кoтopые пРoи3вoдитeли 6Payзeрoв мoгли бьl пPедo.тавить нaм. дизаЙнеPaм,

Font-variant

? ,ont-var j а n . l s m a 1 t - с а о s ) . д o г r y с т и м ь t е J н a ч е н t ' lsяm: а 1 1 ЛPимеPlb o.
сoкpaщёнrroe .вoйGтвo font Примеp: ! 1foпt:bоtd itаLiс

smal1 сарs 12pt vеrdana' arial,

sans-serif;}

< p > я e r e , sa p i e с е o f t e х . 1 о a d е du р я i t h e v e r y р o s Б i b t e f o n Е р r o р е ! Е y . < / p > Peзyльтaт пoкaзaн вa Pис. з.13. мъI тoлЬкo 'rтo пPимеIrили к тексry вс€ вo3. чожlrьIe свoйствa IIРифтa'

нEвE's A P7E0E oF тEхт LoADЕD |JP wIтн Е||ERY PossIBLЕ FoNт PRoPERтY. всeгooднaстрoкасss таKoгoоиля шpифтатре6yется Pис,з,]з,дЛясoздaния

9t свoйствo oл: lloJвoляе] пpиvенить все( вoй,тва шPиф а в oднoм o6ьявле. lии. l l o J в o Л я Fг ( о к p а | и г ь o 6 ь е м н e o 6 х o д Й ч o г o с s i . l о j а и л u 1 ч и , Ь тaкoй P,|o хе эффeкт. ПРи эToм следyeт }казaть знaчения в кoРPектнo}I пoРядке, чтo6ы 1Рl)зер ( voг вFPPo o6P.6oта1Ь их, Jдесь дeиствyloт дэа прoстЬIх пpaвlrлa' пРaвилo l. Bсегда слeд,"ет ука;'aть ."aчеItия свoЙств tont-size и font. :i11y. пPавtIлo 2, г]o.леloва|elЬ|Io. ий ',вoйlтsrJчoвi:-ont, r l o 6' I. , пr o Р я л' i c , . " , . ' 'on. s.1l" в ;.";-;;;. /l-, -пl1v ".пPимeчoвиe

Heмнoгo зo6вгoя вnoрвд otмeтtм, чтo в свoйФвe font.si?eмoxнo тoe. уrc. -':::":ч:: heiqьЕ l-" -(кoтoPoeявляeтсятoксoвы"), зoдoв poзмсpв ви.

дe ]2Py]50%, БoлeёлoдPo6нoмы noloвoPим06 эto"

"

Ьuoу.ц""

p."д-"

LвoиCтвa тeкCта к а к в ь l 6 P J Ь I г )ж ч ь l й ш p и ф ] . п o г o в o р и v о л Р и ! е н e н и и . т ' L т е й , :Aкстl: Lсlи трeб)е г( я ',оJjjть oт( т!т Дпя а6JaЦа' веpхний ичдекс l вРoде I0)' ?е,,ичить ol ' т!л [le)кдv6!тrв"ч' l ъго]oвка и РrJитЬ чъo|ие -p) -ие Jадaчи фoЕ :,/Poвaния. вам lj)]ltныe i вnйt1ва |eк( тd Lss

бсeгo есть вoсемЬ связalrныхс текстoм сss.сBoйств: . teхt-indeпЕ; . ]e|ter-spaсing; . Wоrd-sрaсing; . -.х.-d.'o-a:io,j . text-aliqn; . 1ine.hе1ght; . text-transiorm; . vеrt1сa1.a1ign.

-еoбхoдимoпoнятЬoдиi вахньЙпpинциn oбpабoткитeкстав сss - сss дoбавляeт : змiy вoкpyгтeкставнyгpиэлeмeнтa'Haпoимe

.. .sа а'^;;й#il;%::li:: J:l"""Тff J:j;ffin#:xl "";"." "ъ."ц";' l-1ючeнн.oЙ в рам|(y' дахe ecлиФaктичeски pаспoЛагаeтся тeкст на нeскoльких стpoках, -э

pис,з.14 мы видимтeкств зeлeнoЙpамкejнахoдяuеr;ся внщpиэлeмeнта'гpiницii . ]тoрoroвыдeлeны KpаснЬ|M,

rлAaA з. с'&;rПдn' ',ряфтoв и тclша

n snаke € o ntаinеd llithiп trlе

й;tай;о box, bL,tсss аiso;рp|iesа DoхаJoUndlщ-!еIl!s:rj!sФ1-E.фщ " t\е tеyiis in 6Гtа niгoые-"nсs ьox 's ln red andtheinnеrbохаroL]nd q*n'ЕJ;,Ji;; s* from th" *av ф; inne.ьor i. d.а*n, сls-lrеaфqlEIl of ihe сoпrаinerсаusеs lt to be ЁЪiElйq_тБ;;i;;iБ;ffi;idth Фрoкаx на нeсKолЬкиХ Pис,з'14,текФзa0ючeнв длиннуЮ рaмry'дахe еслЙoя oтoбраxаeтся ИМeйтeв видy' чтo oбьrчнoo6eэти paмKинeвидимь|пoльзoватeлю'тeМнeмeнee' нeзримooни прийствyroт, tлядaннoгo npимеpамЬ|pазмeтилитeкстслeдуroщимoбpазoмj <р><span>тёкстабзaца,,, и пpимeнилиолeдующиeстили: ! {bоrder:2рxsol'd rеd; ] s р a n { b o r d e r : 2 р х s o l l d q r е e n ;) oбратитe вниманиe,что тeкстoвaяpаМкaрaзбивarтся пpи перeнoсeстрoкии заKpывa. eтcя тoлЬкoв кoнцетeкста. Зная 06 этoм' вь|смoхeтe 6Ьlстрeёдoбивaтьcя н}.'(нoгopeзyлЬтатa,Hапpимeр,€ с ли нeoбxoдимoсдeлaть oтсryл для neрвой cтрoки aбзацa, мoxнo испoлЬзoватЬовоЙствo teхс inаent. Kак пoкaзaнoнa pис' 3.14, к пoслeдующимcтpoкамoтоryпдoбaвлятЬсЯнe бvдeт' тaк как дJrясss вeсЬтeкстЯвляeтсяoднoЙстрoKoЙ' Если тpeбУeтсядoбавить oтсryn для sсeгo абзацa] слeдуeт зaдатЬ свoЙствo merq1n 1еft' иньlMисЛoвaми,смeстить вeсЬ кoнтейHервпpавo,пoмнитe, что тeкстoвыeсвoи. ствa пpиМeняoтоякдлиннoЙтoнкoйзмеeподoбноЙраMKe,окр!хаюцeЙ тeкст,

Text-indent П р и м е Р : р t t e х | i n d e n t I t e m ]' д o п у с T и теJrьI{ъIеили o rPицaтелъньie. пPlrмeчoниё

лю6ьlе чi{с,ra' пoлo,ки.

в PoсфoтPивoвмыХ ниxв пPЙмePoх дл' нorляднofrя oтo6рoхoeт.я Poмкo 06. зoцo, o6ычн9 oнo нe виднo'

Tак кaк мьl уrкс кaса-письэтoгo вoпPoсa Parrее' дaвaЙтенaчвем имеЕнo со сnoйствatехt indeni, этo свoйствo зaдaeтвaчL.lьIr)loпoзlrцlJloтекстoвoи Рaм. ки по oтнoпIeE ю к сoдеp)rraцем}ее элемeнry или пoпРoсry IoвoPя, oтстyп,

9з О6ьrчвo

пo }чlrлчaяиi]

llеРвая

стРoм

Irc иlfеет отст}'!Ia' Если эaдать 'aпя с!oй.

вIre|пеPваястPoкa сдвинетслвпPавo

lРис.3,r5).

Pис,з,,]5,уQзав пoлoхитeлs|оe ]начеlИе для свoЙоsа ieХt i..lеrt, MЬ сoздадиtr1от.ryп для пеpвoйФрoки УкJ'"lоlг/L'Ie1"|

v|J

lоJ,'

:fп. убсдитесь' .ть дoстaтoчl{o :;lступaтощliii

Lj|\|в'|' |),,

Г.Jj

cтo l{ля ЕъIсrvпan,цсй 3a пРeдеjlЬl кoflтсйЕеРьl пеPвoй стPoхIr NJестa] п oI1а ве б)дст !таlloлзaть на сoседв!п"r' Распo-,1о)кснньIй (рис, З,]6). Если тскст вoзлe -leBo;; кpo.'"" oкlla' Paспoлo'(cн тексr б)де'I o6Pезafi ,

ыф //tr

b b dФ п / l ! l o / o

ь o d . а 9 r а p h o f ! e \ tr h а c а 1 e 9 а l l v е i г d e . t , в ;. .;вL Ls see' h e' h е с о n lLаа;;.n| n | nоо e ] € п . eenntr o o .ееssп o t h а v e e n o J g q h s р . с р lroo : t \t '|eefftt ! . с - " .n9o ] 1n 9o ltee na l sl

о bVиe edgеof .hеb.Ьwsir''ьJ оЪ'J"1d. iь" сйiJ'.i

,'lс. зJ6, этoт абзац с отстyпr)M расnoлохен вoзлetрая oKРа,noэтоMyвЬсryпаюцИйтeко бЬл о6резaн ]136е,кaть этoгo riоniнo всегдa! 1казьIваJr flotr]o/ftисJrъI]oс левoе пo/rе' пpсвьг .:olrleе ]reвьIй вьiс]Ttl. нa pис. 3.16 въIс,rYп сoс1.а!,1яет l,5 еnt, a Iiа Plaс, з.1? :]II тaкoм jьe BБIступе l!ьi добав1l-]ти левoе пoле величиrloй 2 еп. вoт код дlя сoздaния a6зaцa. кoтoРЪIй пoкaзaн Еa 3.1?: Pис, -:хL-i.deni: Bь!сl.r-пalощие

1.5еnj пeтg:п I.tt:2еr, а6зaцьI l1o\тomют

!oтd.::

пРидaтъ

1n' s.1il

r.d;]

сaй]у пР.,фесс!oналЬi1ъIй

с,6ли('

94

гJIAЕA з. (тилn Aлr шp'фтoв t reкffa

u.-. qтo6ы oirи oставались пPoaoР" Pекoме}'jlyется зaдaвaтu o'"ф'""o"' изме. ,,o o,*,orneниro к длин€ стpoхи' если пoльзoBaтель Peвr,rт ц"o,-o'o,"' Еnть Pa3цсP шPI{фтa' oт oтст}aroB междy a6зaцaми' Есnи вьr хoт]rтe сэкoнo}rliTь местo и oткa3аться ilyлlo и испoльзoвaть вЬlстyпЬl йли мoxrro задaть веРхrree !t ни'сlеe пoлe Paвным oтсryпьrдЛялoгичeскoгo вЬцeления aбзaцев.

нaслeдyeмыe звачeниясвoйcтваteхt.indent слeдyeтo.ve]иlь'ч.освoйствo.e".lndфtнаслeдyeтсядoчеoнимиэлемeнтами,Flа

g'.,]"x,*Ч g:;:':.x: ;;j*'; j":;:з:.l': J.:Т :"l#;[:i:;ffi i ::fl .;;:fi вo- гoясн/телo.ы,npимep, з.а"e-'ie, 400 пикс9лoвс oтст)пoм ""р"Ъi",' ii;;;;;;;'."'" ""'"'",""""" ' *" *'Ь d ]' содeoxаtдийтe(с-' JиpинoЙ пихс6л0в 20 i5%из 400),внyгoиdiv p""мepoтстуnасoставЛq6; !;;;;;;;;:;"',.. свoЙ. " 2O0гиксeгoв Kа(дoчернийэлeмeнтa6за. нaслeдyeт .,p*",a poди. nодочeтa peзyльтатoм для являeтcя "o."ц "а""д,'|" -"-eдУeмoe значer]иe i;;' ;;?;;; ' а 20 пиксoлoв.в peзyлЬтатeaбзацтaхxe oтoбpaxа. ;;;;;;; ";' ;;с'; ;е 50,ъ ;";#; шиpинy.такиl"!oбpазoм'.вc-e нeомoтpяна eгoмeнЬшуlo zo .] нecмoтpяна' вoзмox. oтcryпaми, "*"eлoв' " о одинакoвЬ|ми "i"" ".'""l"Ъ"ю*u' -.бpаxаDтся ""i,J*Бй,"

Letter.spaсiп9

.2em;}' дolryсТимьiе з}ratrенItя лю6ьlе пoлo)к'пDимep:p 1lett€ r -sрaсinq: o'P"цu'eльные числoвьle знaчеriЙя. '*ь"u,Ъ ",и

95 зaмтЬ !npaсцн,'.|o естъ lleяi6yквеннoе -^?:: :_".т:::: ""*oлЯ..l Pa€ с тoяние. 1roJ:Io'(ителЬI{ьlе 3нaчения yвелtIЧивalот paсстo"ниe .ех.ду 6yкваvи, a oтрица" тeльные знaчения етo уметiьrllaloт' настoятельнo peкoме"лу.*,.,,o,o"ouuтo Ijапpl-lп!ер пpoцентьI или еm, чтl)6ы иIiтepва,r мeждy :::.Т:]"j:::: т**"ия'

пPи\ в :'l-".1"1::*-.: il.nopциoнД'Ьяьlм

".;"'' P,.'"

Pa дrPифтаlpис. J,lE),

htrp1/М

bЬd .om/ lry]'п]с

A | t е r i | 9t h e | e t t е r s p а с i n g с t l а n 9 е s! ь e s р а с еD e t W е e л| г d | l | d - a I с n а r а с r e r {s r u m b е r s . n d s Y m b o | sа, s w е | |а s ' e t r е r s ) , , ] h s parа9rаph hаs normаl 5oасino, Рosjt

ve

:i.-."":"

'".."..-.Dасiгq the sDасe

vа|Les bеtweеn evеry

N е 9 э l v e | e ( e r . s P а с : nvgа | U е sь n n q t h e € h а r а с t e l s с o s e .

}|ereis a regular hеаd|inе Here's а heаdlinе tightenеd Рис,з'18, Hа рисyвкеioKазанo' кёK pазличнoeмeхбyKвe!вoe 11ак 3идно и3 пPиltеPа.

.',l::l,ti""''"

рассrOянЙeизмesяeтo6лик тeкста

\1o,к}Io лPидaть ПPoфессиoна,.IьньIй

oбЛик зaгoлoвкal{,

p^...oянйе r'е)кл6!зrвaЧи' пPи tъelиЧ(ниlI pаз!еpашPиф.а

rlежo}кDенPoе Pа(.l oя|Jиf.лриveняeчocлo \

6"леeнеpiш.

дo|{1,]\tеtlIа нe гpё6\е,rизУeЧе}Iиямеяr6vквe}'нoго l.":1.':,].::: : Pасстo. , чия, tJднaкoэтo Jависит oт,,lичньlхлPc1 ,oчтFчий,и вЬI\Ioжeтепр*ui".'pu. IIIцe r]икdыloс ги тoЛькo Ja.чeт ч}r Ь 6o Jьш 6lтвeннoro эа.сloяниЯ, lr1]внoe - IIe пеPl слара,Ь' я, и6o 'oл.ri 6!де г oчень |p).1нo чита1ь

текст.o6paтите внимa""., ;'o u ;"*"е*' ,""oлoвке на Pис' 3.l8 мьr сoкpaтrr,и

96

г'AвA

]. (rялn дnя l!рtlфтoв и teкс]a

ме,itб}4tвенвor Pасстoян'{е всеIo нa ,05 еID если y6PатЬ бoЛьпIe' 6уквы нaчEут нaпoдзaTь дРyг !Iа дРyгa. o6ыqнo дo6иться )келаемoгo pезуЛыaтa мo'кI1o с пo мorць'o пrа,rьIх эlrачerrий, тaких кaк 0.l еm.

Word.spасing _ гIримеP:р {woтd-spaсi.ng: .2em}' дoщстnБtьle зEa.lепия лIt]бьlепonoхитeль. IIъIе l,r oтpицaтельrrьIe этo свoйствo сxoжe с пPeдъIдyщим! I1o oтвeчaеT зa PaсстoЯEие мe,lcП'(:!oвa' ми, aне 6yквaми, сss считaет слoBoм лю6t]й на6oP симвonoв, oкPPкеrпiъlЙ тlpo6eлaми. o6рaтитe вI,lимaвие' чтo odpaцarься с этим свoйсr.вo[! следyeт еще 6oлeеaкg?aтнo, чем с пРедьtду]цим. таккaк, зaдaв слиlIIкoм 6o,IьIIIoeзнaчеIrие' pуднитЬ читaeмoсть тексTа (Рис. з.19).

A|tеringihe word.spасing сhаnges thе sPасe between individuаl Woгds'Words аrе groups of сhаrасtеrs sёpагаled by spaсesThis paragrарh has normа] sРасing. Positive word-spасiлg yз|uеs inсreаse tлe spасe betweea Neqаtiveword-spасin9vа|uesbгlngthе words с|oserto9etherаnd сап redUсerёаd аbiIitY'

Here is a regu|аrhеаdline нere,s a heаdline |oosened Pис з,19,o6pащатЬсяс расооянЙeм мexду ФoваMи спeдyеточеi Ь oоoрoxio

тcxt.deсofаtion si]rikеthтough; }' дoпyс'lимьIе {teхt deсoratiоn: пoимер: . rеtailрrlсe s t r i k e t h т o u q h ' b]ink, значeния undeт1inе. ovеr1ine, текст пoдtlеPкивaпием' нaд. выдeлитъ мo)кeте C пoмoщькl этoгo свoйствавъI миIанис!{. ]nцn чеPк!вaн'rеп!' llеPeчеРкивaliием oсвoвЕьIм гlPедriaзIraчеrrием этoгo свoйствa являе1.ся кolrтРoль над внеlIIяим в4цoм ссьLIoк. Пoд}мaifjt /ра)l(ды пеPед те!l' кaк дoбавi]ть пoдчеPшвatrие к тексry'

97

Тext.аIl-gn

тhis is ten glаt |s |eftа|qned аnd js tne !sUаl1'аУ th.t tеYt Б аxgnеd, us eаsy to read bеcuse every !nе stаrts аgаifrstthe lеft edge of the сoбtаin]ngеlеment аnd thаt's Whу itls the defаu]t тhis ]s teхt th.t is Фntеrеd. smаl] b|oс]<s of tеxt |ook .ood сеntеred but ]t.shаrd |аrqe аmounь of tахt to reаd аs еvеry |if,estаrts a ditrerentdistаnсеfrom the edgе of thе раqе' тhis is tехt thаt is ri9ht а|Qпеd алd' |iиe@ntеred ten' |t.ап Ьe somewhаt hаrd to reаd ЬeфUsе еvеry |inestarts in а diffеrent рrасe' ]Ustf|еdte^ s both left аnd right а | i q n e dа t t h e s а m е t m e , т h ] s i s зсh]еved ьy mаthemаtiса]|y lпсreаs|пgWord spасe on а ]iпe ьy |lne bаsis' Ьut this саa resu|t in qаps of white spасe throlghout the teхl speсiа|lyif the сontаining e]еment ]s nа.row .r if there аrР o.сUrгenсes of eхсеpnonаl]у leпgthу words so thаt only а few iit on eасh ]ine,

PИс,з,20,Четьрe sаpиавтавыр.эвниванияте(Фа

98

iЛAвA

з. {}gли дii

r'риФтов й тёt{ffё

Line-height ПримеР:р

{]ine hеighLi

1 ' 5 ; ] , д o r y с т и N t ы ез п a ч е н и я _ л ю 6 o e ч и с л o в o e з н a .

свoйствo 1ine-hеighr- o:Гвечaет3a }!e,{дyстPoчEьпt пpo6eл' тo естЬ зa Paсстo. яIrие llОк,щ'стPoкaми текст.1. OIro залaeтся в качествe Paсстoяrrия мФi(дy oсrroвa. нtIем oднoй стpol.и и oснoвalrиeNt следyloщей стРoки, этo Paсстo'ниe дoлкнo 6ьlть 6oльulе высoтьl пIрифтa, пo )aloлчaни!о бPаyзеР зaдaeт ме,i4}'стРo]rнoе paс: стoяЕIre пpoпoPциoнaльнo PaзмePу rlrРI.фтa' o6ьrчнo oнo сoстaвляет r187o oт Pa3п{eРашPифта (пo моl]м пoдсчетaм). самъiм прoстЬiм спо.06oм зaдaния !Ie)".т'стPoчнoro Paсстoяния является исгIoльзoвarrие свoйствa foлt: длЯ yкaзarrия Рaзмеpa шPифтaи высoтьI стРoки: divflinЕro {io'1Е: l '2еa|1'4i J B д J н н о I t с - ' I v ч а е! е 2 r r y ( т P о Ч н o е Р l ] . с т o я н и е в 1 , 4 p a з а I I p e в Ь | ш а е тP a 3 м е P Ерифтa, paBпьIй r,2 еm' o6рaфlrтс вниN{aние, Ч,ro &rтязIraчевrrя этогo свoйства ве тPе6yется }'i.aзъIвaтъедиrIицьl измеPeIrия' тaк кaк в даяtтoм с,ryчaе сss пPo. стo подсчитывaет числo экPaнньIх ЕикeеДoв - l,2 eш и yмЕontaeт их на l'4' Если зaтем мъl увeличиv РaзмеP illРифта дo r'5 еm' пle)rдyстРoчнoe Расстoяниe все PaвI{o oстaнeтся РaвIrъIм 1,4 пo oTнoпIeниIo к 1'5 еm. Ес,rи yказaть высoтy стpot{и в ф!ксиРoвrfiirьIх eдиниц?-ч, пaпРиIIeр в г''Iкселa| пРи yвeЛllчeнии рaзмеРa lrPифтa текст стPoк 6)дет нanoxзalь дPyг Ea дPyrа. следyет oт}teтЙть' чTo въIсoта стpoки РаслP€ д еляется Eaд и пoд текстoм. .цaвaйтe pассмoтРим IlPосToй пРипtrp, 'IллloстPиpyloщий этoт nPинцип дeй. ствlrя' пpедгIoлorким' чтoвысoтa шPифтaРaвrra 12IтиксenaNI'а!ьIсoтaстPoки 20 пикселaN{(хoтя мьI tIе PехoпleEдуlt]испoльзoвaть пиксельI /qцяукaзаяия вьIсo. тьI стрoкlr IIo иэJтoжснIIъ!мвьтше пРичинall, здeсЬ ollи испoльзyoтся r'ля НaтJIя]\tloсти). B тaкolIсrт}чae 6РaузеP дo6aв"!яeт 4 пикселa п}стoгo пPoстPaнствa нaд текстoм стРoк1r и 4 пиксe]ra пoд текстом € т Poки . 4 + 12 + 4 = 20. когдa хе мЬr смoтPим нa тскст, тo не зaNtсчаeм этoгo. тnк как нa}I кaлlется' чTo в цeлoll мея(. дy стPoм]!Iи имeeтся 8 пиксeлoB свoбoд}roгo nPoсTPаllствa. вepтикальнoe цeнтpиpoваниe одинoчllь|x стpoк Иногдa для центриpoвaнияэлeМeHтовпо вeртиKаливн)тpи сoдeрхащих иx эЛeмeнтoв xеЛaтeлЬнoиспoльзoватЬсвoйствoтё.tiCalallEп, нoэтo нe paботаeт,oднакoeслитpe. бveтся вЬlpoвнятЬлo цeнтруoднy стpоку,3тo вoзмoxнo' y таблИцecть атpиб}т vа]iqn, пеoeмещающиЙсoдepxиMoeячeЙкитaблицыв цeнтp по вeр]иKали всssтакoгoxepe" зУлЬmтадля oднойотpокимoхвoдoбЙтЬся'задaв ee высory рaвнoЙвь coтe coдepxaщe. гo KoнтeЙнepа' Тaк KeRвьсoта стpoкидeлитсянaдвe чаоти- свeрхуи снизутeкcта'- по. лo вepтикали, л}чaeтоя'чтo тeкствЬ|poвнен

чтo хасаeтcявepтикaлЬнoгoвырaвHивaнияпo цeнтpутeкстoвoгo6лoка (вaпpимeр,aб. зaца) вн}тpисодeрхaщe.o eгo элемe!та]тo этo прaктичeскинeвoзмoxнo'хoтяидoсти. xиМo о пoмoщЬюдoлoлнитeльньхdi'' Пoдрoбнее мoxeтe в cтaтЬe(вepтикaпЬHoецеtr pиpовalrиeблoкaсрeдотваМиоss' (htto://хhim|'rUl 2005/05/24lvert са| сenterbox/), B цoлoм этoдoстихимo. !о за сЧeтгpoмoздкoгoKoдa,и лoчeмУтaкаяпрoстаЯ Фyнкция

нe6ыЛapeализoвана в css?

тext-transforlrr ПPичеp

О ,

]owerсase,сapitalize' nonе.

,]oпусfllllьh

J,|ачеIlия

,lpе-сas.j

C в o Й с| в o L " ; o ш е н и е п D o п и с t l Ь L их с ' D о ч н ь I х 6 и ( в . е к с г J , с е | о г l o м o Ц ' U P ч l t ' o ) ' { сг е o j o б p j . и , . . p o n у ; . ' . 'o,o*o ;po"".noi", " , t , I и. т P o ч н ь l I I и 6 ' l в ' v l l ' l д P r ' d| ь г е Р в Ь l e6 ' . " ' - o u tр,.' з'z t l. "",,un""' тhis |s tехt thаt is лot t.вnsformеd' ]t's disp]ауedin пе usuа| ваy that teхt is prеsented, тhis is Re90l3r lехtтhаt ls саpitа]]zedUsino тhe тeхс тransforfi сарitа|I2еvа|!e, тнIs тЕхт l9 SтYLЕD UslNG тнЕ тЕхт.тRANSFoRм UPРЕRсASE vдLUЕ; Iт ls rN ALL LoWЕRсдsЕ LЕттЕRs tN тнЕ MARкIJP,lNсLUOING тнЕ FIRSт LЕттЕR oЕ т|.]ЕFlRsт woRD' t5isiste{ l\а. s аcLа|v J.,ttе. ilа| rJDrlr the mаrlup ЬLt o'so|аvsl1 o*е.сase beфU5е o. tl1ete)Iarагsforг |o*еrсa* PИс,з 2]. свoЙФвоieхt tlа nslcrm мoxет меlЯтЬ GлиrалИзацИю6yкв

ПРиyкaзaяии зIЕчения саpi:alize все сЛoвa6yrг'тписaться с зaглaввoй5yк. эьI,этo oсo6епllo }до6ЕтоиспoJrьзJвaтъдxя зaIoлoвкou,Бoлеe тoro, eсли.oдeР

:]rl!oе € т Pаниц!,! постaвляется избaзь]дaнньlх иr1идРyгoгo истoчIrикa (ск кeм, ]i!IL). мoх|1to до6иться тaкоro эффекта aвтoматичeсшI. чтo6ы пo'1}чить 6oxьш ъIе б}квъI,вoспoльзIi;тесь свoй.твoм fоnr--Yarianr Для пoвь11llенияпРпLrrехaтеЛъности до6aвъте oтPицатель. : : o ез l I а Ч е в и е] e t t е r s р a . i . l g '

УertiсаI.аI!gm ]PимeР: vertiсai-a],ign: 50а, /.{oлvстимьIеэначeния _ IIPoцoнтвьI ] тaк)liе !сlllочeвьlе слoва s'.b. s]rp. toр' mlс]d1e, ijctr-оm.

l0о

глAвA з. iт ,rn Aл' шittrфfoз я lе"сrа

этo свойствo смеrцaет шPифт ввеРx или вЕиз oтIroсительнo oстroвaElrя стРо. кп. нaи6oлeе PaслpoстРaliеllвьI]ll пPиirеIlеl{иeм является сoздаlrие нaдстpoч' lrъIх и пoдсTРoчЕьlх сltмBoлoв' фop}'yл или мaтеltaтliческиx выР ltеtrий' вРoдe 11- !" 'rли N"o' х.нTмL-теrи suр и sub сoздают тloдстpoчвьlй и надстРoчный тeкст aвтoмa. тичссхи' r'o, кaк пoкaзaяo па pис. 3.22, д,.IядoстиxенiJя лyчпIеIo Рeзультaтa ertiсa1 a1ign и text'sizе, п D е ] r п o r r т и т е л ь н eиeс п

Еnjoy mountаinsрring t|!o . it,s 105times bеtter thаn taр(1)wаter! 1тhis f,eans watе. ptovjded thraugh a mФiсipal

distrjbutioл sуstem

PЙс'з,22.сsoйФвоvе:Liса1.a1ignулучшаетBнешнИЙвиднадорoчнoгoиnoд.рoчвoгoтекoа, ' сorданнoгo с nомoщью тегoвхнтM L

вoт кoд для дaЕнoгo пРимeЁi <sLyle tYle-' teat/сss,> b c d ' 1 { fo n t - f a m i i y : v ё r d a n e , a т i a 1 , s a n s s e r i i ;

f o n t s 1 z е : 1 0 о * ;)

h4 {margin: r'4en zopх .seп; р { п а r g i n : 0 2 0 р х ;] р ' ! a r q e . t e t t { f o п t - s i 2 e : 2 e i ; mаIgj.n to : 1em; ] s р a n . r а i s е d { fo n t - s i z e : . 4 e Ф ; v e r t 1 с a t . а 1 i q n : 5 0 t ;

]

p . с u s Е o ms u b { v e r t i с a 1 - a 1 i q ! : s u ь ; t o n t . s i z e : 6 5 ь ; } р.сusLоп s!р {veiЕiс'аt-а1iqn:65t; font si2e:65ъ;} р . с u s r o m s n а l l {f o n t - s i z e : . 8 е I i ; }

а1!qD <sраn с1аss='fаised'>сaц <р с1ass='.tarqе.ЕёtL'>ve!tiсat a1t tinds of inЕеrеstlng пays.
Ьe used 1n

.sub" аnd "suр'' < h 4 > т h i se x a m p t el s e s d e f а u l t s е t t i n q s o f t h e х h Е Ф t t а g s

i'!р!:'r€ ' .x'e <р>Еnjoymcuntаin sртinq !i<slb>2o

{!&л}ii il'rqфia

iL,з

сLassеs for сustom v..ti.ai

101

1 0 < s u p > 5 < / s u n >. i n e . q ъ e t t . т

. i > < s u р > & d a g g e т ; < / s u р > < е i > т L i si е a n s l r а t е т р ] . v i d ё d j]sLIibLtioп sуstem .'14>тnis eхаmрle lsеs

t{ тel{6.

thтcriq]r a fruniсipaL

а1igr]ae]t аcd tyре

:.! с1ass='с!sсofi'>l!joy пourLain spIinз:l<sub>2<',sЦ!>о . i.'s :j!> timеs Ъеtte. r:ira! Lар<suр>&dаgqе.;'а:еrI

i0<suр>5<''

i : r с 1 а s s = ' с ! s t o п s m a 1 l . l > < з l o > & d а g g e r ; < / s u D > < e n > т h .пs е а n s u r а t ё . р.cтided :..оugh а nlniсipal disi.ibfЕion sУs:еп<1еm>

Пpишeнeниeстилeйшpифтaи тeкGтa .1спoльз)'я рaзметry' сoздaнnyro в глaве 1' llосlloтpиIll кaк llo)l{tlo ltpeo6Рaзoвать :е в бoлее пpoфессиояa-IьIlylr' нa Рис. 3.23 м!i видим pазметкv бeз дo6авлеIrп' ПPt{менив тoльIto свoйствa' РассlloтPеI]тrьIе в этой тлaве' мьr r!o)кeм сдeлaтъ .тPaЕицy бoлeе IipIrв,скательIIOй (Рис' 3.2a)' Boт чтo мЬI д.)6авили' l. bodУ {tont.fami1y:verdana, aria], saпs 5еrif' fоnt-sizе:i00ъ; r.1arqin:1em 2еm;] 3десь llЬI зф{aеl!l6азoвьте стилII ддя !тPифта и yкa3ы. ваем пoля стрaницьI, свойствo fоnt fаmily lliслeдуется всrми пoслeдую щими элeмеxтaми, п пoля o,гoдвиIaloт сoдеР,!имoе oт кРaев стpaниць!, 2, m".о :0: о,oо,,9:0j -:чь| не'i ра-тиJ'.! "'е,Io'"""1iroлн,''ио /]Лявсехэjeмeнтoвj съсдaтoп!их сJII]шкoNINlrroro Mсстe пo 'Jеpтикаr.lив веp сии Рaзметки 6eз стилей, Mы тaкхе o6нyляе!l все oтст}тIьI|чтo lтoзволиТ .o3дaть единый oблик сtlисItoв для всeх 6Рavзеpo!, Удаr.Iиввсс пo,1я и oт. сryпьI пo yмоIчaнIJlr' мы дoбaвиv 'Ix тoлькo к ьfжlrъlм элеllеIlтaмЗ. hз {font-size:.?еп; liord s]]aсing:1eп; 1ette. spасing: '05em; maтgln : . 5 еп 0 ; ] - этим пPaв,I-.тoммьI зaдaем llеIlьt!ее yФl(6l квeEнoе пpo. стрaнствo и yвеtr]ичиваем'lPoбельl ме,кдy слoвaмIr. . 1 . h l 1f o n t - s i z е : 1 . 1 е п ; L е х t t r а n s i o r r i : t l р р e r с a s е ; t е х ! - a l i g n :C e n t e r i let!еr-spaсinq:.2еm; m a . q i n | ' 5 e л 0 ; ] _ в ь I P a в н и в a е мз а I o л o в o l tп o цellтPy и yвелllчиBaсм PасстoяI{ио мeждy бу(ваIIII' кoтoРьIсделaем зaгjaв

102

rлA3A 3. {'иnи дл' t*р'rфтoвt' tз'rЕ'а

StуIin Г*"***o,"nдrl""wуk€ - smitЬ

Моviпg to XHTМL смйg хllтML фпrрlипl pagеgrnnpiy Еquiвs lоllowьg а feя s'Ф?Iоru|es.тh* rulesmy sсm.oшlеrinfiinvе orju$ а ld оf eхatrvоtt fБl, but йe ъ.nei'ls ft siФinсaлl фd {fu!щ nиrc cоdjlg silеsmUсne*i.!, Аl9' хнIi,lL соdecln bе еrsnу !!lid!lсd oлliпе ю yo! сФ ф6!в yoш соde is сoNdy vftс.. Есre d lne k.у щцфmnв

lоr $ссes$ltl vаliфlio' .f yoш xtlтl'L

cфе,

l, Dфlщ а DoстYPЕ 2' Dесlш ал хмL пaftsp@ з, DфlaЕ уoш сonEп' l,Pе 4. сlоg еlery lаe. сnсьn.g o! лon{iс]оsщ 5. А11ln8s mlsl Ье щnеd соffitly 6. lл]i!с lавs сф\ сonmi! blф]r lс1е1ilgs .7, w.iф lagsjп lo*еE4я 3- AnriЬulesФun n!v. !l]!$ шd бus ъе qaоtd 9' U9 еnс.dеd equjvа]c!вiol letl ьmф Фd щPеМd mЕ $оu' lhеs rcqliIе@дд rсв Ф Фm щnrl 0л!s jiФn fi. wеь sitс of nЕ irJс (wond wide wсь сoмium), lhс g!id]!g ьody oi 'ie q.bъ dсvсlФmnl.

. .w]сlsсss w]с!хlrтмL 'а]d!Фr .

vа]jdnlоr

. хЦщдLдсsoц.сsl . сss'&еsgщс$

Ф ?0o4 сnil!е w}tе.smjф md Neq Ridеб,

оилeй 6eздo6авлевия Pис'з 2з, прИMeрразмeтки

1.75em;margin: слегкa)vёньUаeч PaзI1еPшPифтa,пoвЬ'шaеv 0.5еr 0 .-,eг -,.5.- j высory стРoки ri задаем oтРицaтельньй oтсryfl д/'iяпеPвoй стРoкIr1

5. р {fonЕ size:.?5ф; ]ine height|1.5en; t€ x t-indent:

fiр}tм.!.sн{e {тя,ёi

цp{ф}а и тe!(€ J а

l03

Stylin ьool 'ol

ry

сь6na

lt.lovING Г

wv!ЁsБitь

тo xнтtrl L

сreatinqxнтмL (ompliantрз9s shP|Y requ]res fо lo}iлgа l€ Ф simp|е|u|6,й* rur.smэу*m ФUntеFintuillveorjust. |otоlatrэ wo* аt firn, ЬUtthl ь.пefrts аre .lqi fсзпt апd асtUаl|YФаke сodingst6 muсh еа9ie. АlФ, xн]xl сod€ cn ф eаsilуvа]idzrenon he so you сa. ьё su@ уour сoф ь сoreсt|у

n

неre аr€ the k€y requiг€m€nts fо. su.сфslu| vаiidаtфnol yo0r хNт}4Lсodе, 2э4. 567, a-

Dесьrэ an х|4L nёmеsРacе Dч!ёre уour фntбI Iуpе сJosееvery tФ, еn.]вjлg or nonanсlo9jлg All tagз Фlst bе лвtеd фtft.||у ]nhnё taФ c.ot фntaiл bloсx lеve1tags wnIе |фs k lowе@ АtIJibutФ пus| h,vr vьluеs aлd nust bе quoted

9- U4ё фсodеn еq1l'dlёh|s |o| left ЙaФ and 1ЙFёeлd

5

;ere аle somr u*ful|inksfi.omthё weЬsile of с.nфrtium), theg0iding b6ф of the w.ь's

arg/r0

@ 23o. сh.ni

B$."smith

.nd мyпi'.в'

PИс,з,24тахе ораrИцасдo6aвленнЬ миоилями . , о 1 ( m a r q i r r - 1 е f t : 6 e m f;o n t - s i z r : . ? 5 e п i 1 i n е . h e i g h t : 1 . 5 ; f o n t siyle j ita]iс; } . задaсм 6oЛь'noeпone слевa д]Iясltещeвия cп|4скa.fu'я текстa спискalказьlвaеllк'iPсив и yвеличивaеNI l{О}qq,стРoчIroe Рaсстoяtiиe.

104

lлqB& з. с'яnя дnя u,trифтoви 'eRffa

7 , a ( m a r g i n 1 е f t : 6 . 5 e m ; t o n Е s i z e : . 7 е m ;] з а д a е м л е в o е п o л с ' ч т 0 6 ь I ссьrЛка пoд спис(oм paспoлalалaсь тoчllо пoд ниN!. r . r n d e r ] i n е ;} - п P и н a в е д е н и иy к a . 8. a:hover 1Lехt-deсoтalion.оvеILine вьцеляется rraдqсPк]iБallиеlf. зaтeля l!ыillи па ссЬiлк,v oнa t o n ! s i z e : . 7 5 eп' rinе height:1.?5; fonс9. uL imаrqin 1eftl6еm; тaR,€ . мeцен и вьIдeлl.н Ц'Pсивом, siyle: italiс; ] этoт сIIисoк _ п у н I f f a l { ис п и с к a я в л я r o т с яс с ь U I к и ' 10'uL a {font.size:1eп; margin.0;] пoэтoмyдля llих N{ьIс пoмoщьlo кoЕтeкстEoгo селекToРa задaеll сTиль. oт личaюIцi.lйся oт стиля ссьIлoк' .Iе вxoдящих в списoк' font.size:90t;} 11'suр (vегr-iсal align:35t; дoРa6oтка тera suр. fonЕ-Фeight:bold; } -сoздa. 1 2 .d i v + h o m е р a q е t o o t e r р { f o n t - s i z e : . 7 e n ; шPифт для oбЛaстIr ни'tlrеro i.oЛoвтиryла. eм мелкий,tиPEьй пoмEtrте, чтo пpи Paзмещеrrlrи этих стилей в oтдельнoм фaйле ot{и 6yAyт п р и У е Р Я г ь !я к o в l е t l ( г P з н и ц a Е . l o д e p ж a u r и v n ы л к у н a э г o г ф а й л смoжетe применить eдl.ный стti'ль кo всеIтy сaйn' yкaзaв стили дишЬ единo)Irды вo внеflIнelt сssфaйлe.

]яaвв ф. Paспoлo)Кeниe :)лe]иeнтoB С сaмolo зaРoждeEия интePнета дизaйвеPьI испoльзoва-!и та6лицьт &пя сoзда. rnя oснoвьt Pазмeтки WеЬ-стPaниц. Этo влетоro за сo6oй тaкие неxелaтeльпьlе :ioсnедствияj кaк пpиvelIение пр8зРaчIrьIх изo6рa)кegий'отстylroв Gl!., ,гeгoв .еРеtloсастРoки и llеРa3pьllliъIх пРo6e'rов. с пoмoщью сss мo]i.Irо Распoлагa].Ь \ttТМL элемеIrтьI с 6ольшсй тoчнoстьnr 6ез неo6хoдимoсти дo6aвлеllия пPс зснтaциoвЕьIх элемеrrтoв в кoд. ПPименяя тaкие свoйства сss' кaк lroля. oтстynы и гPaницьIj NlorlсIoдoс1.ичь ]aкolo яrе илIJ дa)ке ']тyчIllсгoPезyльтaта:ЛPи этoll вaш кlrд oстaпется Лorи(Iнь!!t ;] кoмI]актtiъINI'a сoздaвяьIe стили мo)ltllo 6уде'г испoльзоваТъ &ця всех oдпнaкo. :ьтх элеllеllтoB сaЙтa. BаIII yспеlr в испoЛьзoваlrиi.l этих пPиeУов зaэ:LIсLIT oт nс,gnмaнrЯ 6'|с'чнaй' 'l,,.n,' свoйств рosition и disр1ay, Блoчяая мoдеr.iь кoнтPoлиP1'ет Рaспoло)l{е. rие всeх элeмеIrтoв pазметкиl свor.lствo рosl'L1on задaет в3aиlrooтI]olllеIrия paс :тся ли элемeнт

стpаrIицьI' нa oдlloЙ стРoкe

a свo},тствo disр1aУ oтвечaет За тo' оTo6p с дP}тими IrJrи lra нoвой стPoке.

кa.

l}J*!!rая м6дsль

1o7

Блoчнaя IUIoдeлЬ Тaк кaк IraJrrдьIй сoздaBaемьIй вaми эJiемеlIт прсдстaвляет сo6ой 6-!o е'пo,т}чаелLя,чтoхHj\IL.'p"ниu"п".,oЪ;'.','яв,1я'|.q | : r 6 o P { r6!, 1 ^ l i o в , Пo laloлчaниnr IPaIrицЬl коqroгo блoка IiсDидимъI' a фoн я!ляeтся пPo3Рaч. ныy. с пo}toщьк] сss oтo6Рajкеяпе rрaIIt,Iци фoнa 6-цor.oвможнo легкo ilrпю. чить. lloсле э1.oгo вы yвидите стDкr}Py стPnЕицъI сoвсe\i в;rРутoNl свете' сoвёт

дoпoлнитвльныe свeдeняя o 6лоннoй мoдeли мoхвo нoйти нa сoйтe www,wз'oro/тR/

RECсss2/Ьoх.him|,

нa Рис, 4.1' мьl видим двa aбзaцa текста, д!я iraщдoгo из кoтoPЬIx в1спючеIro Jто6P,хение грaниц Ii дo6nвлен сеРъl]i фoll с пo\!ощьIо сЛед}roщсгo пРaвилa: : ibcldеr|

1pх soi1d t-1]з; baсkground-.oioт:;.:E;] re.s а рaгё9гарh.ltехt' Note the bordrr is turf,ed oп ап0 Iлe сkgгouпd is соlored, sо it's now с]eаг thаt the сontent is .ontаined !n

.s аnoih.r раragгaрhso t|аt you .аn s.e thet there а|e d€ f аult |i.s (sрасlng.rouid the oltside oithe boх) thаi сreаtёsvertiса| I bеtwеепthe pаrэ!rарhsthat сreatesthe еffeсtoi ап emрtyiine Рис 4]'orс1упЬtм.",цyабlaцамЙ.оздaЕ с ль o L о ц Ь ю n о л ! й

Чтoбьl Eaучитъся llе пpoстo испoлъэовaть ltlТML'РaзN!еткy' oт06Pая.aeпq'ю ,1Ра)зeрoм' неoбхoдиv ollтPo"тироваTь вi1сt'яий види Pас. ro-lo)rrerrиeблoкoв эleмеIrтoв' tlеpвый ]Iraгнa пути к этoil)'- пoнимal]l.'e пРиt{]ипa пoстРoeEия б,1oчвoй мoдeли (Рис' 4.2). нa этol"1Рпсунке гpафичeски пo' !aзalra стр'!ктyPа блoкa. c пoмoць]o Css llo.кнo ЕaстРoиTь тPи aсnектir б]roчнoй мoде,]тjI . . .

гPalrlrцy ' тoлщиI1'l цвет lt тип гРaяицьri nодя - paсстoянис ме,кдy 6л()кoм и сoссдниl'!I элеме!lтal1n; oтст,тIьI - Расстояниe }Iе)itдyсoдеP)ltиlIьINlб-.токaи етo гРaЕицей. oбPoтитeвнимoниe,чтoroчнЬIй Poзмeptnrl,nеcluп и Еniсk в сneцЙфикoции сss н. oпPeдeлeн,noэтoм, Poзныe6PoузePымorуттPoхтoвоть ,ти пapoм.тpы пo-свo€ м y. типылиний,зo яси6чeниём s.1ii] - npoqoй сdлouнoЙлЙнЙЙ'тoшe явto нe o6oзвoчeньiв спeцификoциях ФoндoPтoсss, пoэтoм, iyнпир. нoялияи'мoxeтимerьPoзныenPoяёxуткии пунпиPьlвpозличных 6рoy3epoХ.

104

глдзA4.

P/L, д,2, Pа P/.y

Рас сno)t<e!r'ea,.eвeя'!a

\a roiё)а

|a 6rочtsэ. voделo' с oqe.Jграв.6-yqдеиовия

| oлo/ и or.rУ]oв

-a

l loпPoсry гoвoря, тlоJlя Рaссчmывaются oт гpa!пrцы яaР}.i|T' a отст},гIЬt- вЕI}тpь. Т а к к a к v 6 л o ь а ч с 1 ы P ё с т o P o н ы . в с е с в o й . т в . r .. в я з а я ч ы е с п o л я м и ' г P a н и . цeй и oтстyпJ!и ичeют пo челыре 3начeния'

Гpаницa 6лoкa с IРaвицей связaньI тPи свoйст'a: . .

WidЕh - мo)кет IrмeTь знarrения thin. mediuтn, еhiсk или чис.]тoвоезIiaчe. ние B лIoбьIх едиlrIiцaх (em' рх' 7o и т'д.); с-y.. . мoжег non.. hidd.n. do( eо' d.shed, so] d, ,,

.

. Uu,"i-;

сo1oт rroзвoляeт )тraзaть цвет в лIо6oм фopМaтe (RGB. ЕIестIraдцaтеpиЧ. IrьIй фoРмат иЛи ключeвoe слoвo).

Мo)xнo зa oдиir Pаз зaдaть свoйствa.РaвицьI 6л0ка для всех qeтьIРех стoРoli: р {border sty1е: solid; } lUIи тoлЬкo для oдi{oй стoрoньr: 9 {ЬordетlefЕ sЕy1e: so1ld;} ли60 мoхIro испoльзoвaть сoкрaщенIrьlй фoPмaт зaписи и }тaзaть четыPе РaзличIrьL! стtrjя дr!я кa)кдoи и3 стoPolr зa oдиIi Рaз: э , o o , d ё . . s , r , е : , o ] : d d " s h e dd o j b , . i s . L .

109 l1Pи этoм пoрядoк сToPoн тaкoB: вePхIlяя. пp oдIraкo ма-'loвсPoятвol ч'гo вaм пoтРс6,veтся з4qaть Рaзлиqlrьте стиlrи IРaЕиц ]]rя кaждoй стoPoвьI, пoтoму cтo Рa3ньте гРai{'цьI стоPoн oднoro 6лoка вьtгля. -lят дoволъвo стPaнrro. с дР}тoй стoРoньl' дoвoльпo чaстo д]rя всеx стоpoп ука. ,ЬlвJюl.я IPаницЬ|oднoгo r ипJ и цвеrJ, нo. р а з н o й r o J | ш | t н o i tB, | ' Ё о ! l л ) l | ' с o. i |! кe |Jеvoго Pе, пo\lошью дв}.\ пгаuиЛ, B.,Jедy'oш.\l :тримеРе пеРвoе правилo oтвечaеT зa 06щие стI{r1и для вссх четЬlpех сToPoн' DтoPoc vllаJьlвает различия чс}с]y I'иvy :2.heаdbor ,.."dьо{

{bcxdеI : soiid

+futr,;{; laddiig

ьo dе, ^ , ,. :]р,

.!'

| 2px; }

-pf, ra^;,

Ro в гoPoy лPавилe ' o6ЛюJен . лer} юший 'IoPяloк t 1oPoн l|Pи JiJаниl ши ]инь1rPaнliцj вePхняя' пPaвая' ниxвяяj левая. Реqлътaт пoказаtl IIа pис' 4.з'

Grаphiс heаding Pис' 4 ], два разнЬ]хстиляграницoднoй pаMKи

o6ьIчяl) )ке трaняцa paIки зaдается oдинаItoвoй сo rrсех сr.oPoя, для чегo ,.oстатoчEo oдвoIo пPaвi'лаi : : : а т n i r q { b o r d e l : 4 р х s o 1 i d н ] F ! ] / * д o 6 a ! n я e тт o n с т y D к р а с t s У Dр а м n Уз o r р y т R хoде РaзРа6oтки стPаrrицъI дoвoльпo пoлезI{o вк.Jtlo.lитЬoтoбРa)кениe rPа. ::xц, чтoбьi четкo видeтъ стPуктyPy дoкyмelrтa и IlрименяellьIе стили (в тoм :;lсnе пoля и отсryпьI), Лo yмo"']alrию тoлщиEa IPaвицьт за*\aнaкaк mеdiшn. : ]:deт siy1e rlмeет знaчеlrrlе none' a цвет Payки blaсk. ПРи этоN!тРaницa не -;цtla' и все i1тo.гpeбуется сl{сnaтъ 4пя ee oтoбPахения - Iiaписaтъ гIРaвило Пoс'пе этoгo гPaпliцьI a6зацев стa!ryт вla{lrьI. o6paтитс ввипrаниe' lтo при ] ]otrtPaзl{еткa мoжe,г сдвинiтЬся' тa( кaк rРaвицьI yвс-]1ичивaтoт Pa3меP элеI'ен. ]rв..цР'.иi{ спoсoбoм oтo6Раxeяия блoкa Яв,rяeтся ло6aвпение фolroэогo цве. -]. пРи этoNI РaзмeР бл сoxpaщeния cвoйcтв foвoлЬнo ск}!нo зaдавaть oтдeЛЬHыeстили для кaiдoЙ стopонЬ блoкa, yказЬ|вая,дoгryстим' cлЯ' oтcryпы или гранИць, сss лpeдлагает болee краткий спoсoб сдeлaтЬ этo с пoмoщЬlo ]днoгo объявлeNия,B тaкoм oбъявлeниилoрядокстoрoн всeгда нrизМеннЬЙiвepxняя,

ll0

гяjrвA4.!,а.пoriйяi3*пo:!'!emefi7Os

пpавая|!ижняя! лeвая. чтoбы залoмнитЬ eio МoжнocpавAпЬ тaKOЙпоpядoк сo стpeлкoЙ ча. .oв' nooдeлo,ва|olеji l oyl , И|Jl, с'Lги v"| .o,/v rtdзdтa пoj q,,l. Jлeveнта, вveс,o прeвvла ]nafsin'to!:5pх;

nаrgin тight:1clx;

maтgin ]ro.tcij!2pх;

nаrqi!

1eft:в!Х;]

}'4Ь| моxeМпрoстorrалиоатЬ: i n e т q 1 n | 5 p х1 ! р х 1 2 р ] 8 ! х ] oбpатитe вниманИe'чтo знaleния yкaзываютсЯчepeз пpобeЛ,Еоли вь нe указализнaчeниeдля oднoй стopoнЬ, иопoльзуeтlэя зtачeниe]указaннoeдлЯлротивопoлoxнoЙ: , 2 . \ J , 0 o \ о-n| 5 ,r в этoм пpавилeoтq,r.ствуeтпoслeдHeeзначeниeдлялeвoй cтoрoньj пoэтoмy6yдетио. лoлЬзoвaнoзЯaчeниe!yказаввоедля nрaвoЙ. 10 ликсeлoв в слeдvоJev -pав,lлe: { m a . q i n : 1 2 р х1 о р х ] мЬ]Укaзализначeния для вeрxнeЙи пpавoйстopон,сooтвeтствeнно,для нихнeЙ и лeвoй стopoньlбyд}т иaroльзoваныoни xe, Haкoнeц,eсли указaHотoлькoоднфнaчeниe: пoля co в.eхстoрoн 6yд),1oдинaковогoразMерa.

FLли вь|хo|и!е задaтЬ -yлрвЬe -нa |aничдjя однoj или -eL.o-o

стo yкaзатЬ0 без eдиницЬ1изМeрения:

,/l c оpoн' мolJo

-oo.

]mаrqin:2!]х004рх)

Oтсryпьr 6лoкa oтс1)тIьl д06авля10т пPo6eлы llе,llдt сoдсР,{иNIьIм 6лoкn !т еro гpaницей. кaк ,Jflь 6,roка o гсl.Irьl гакЬе JJкРJшивJlo . я a,a пoкa. фoчoвым .rc|оЧ' н"ъ,., авъl двa а6зaца: oдин 6ез oтст)т!oв, a втoPoй - с пиNiи.

Pис'4.4,oтo}пь|сoздaЮтсвoбоднoе nрoсграново меу.дусoдeрxимЬ м 5Ло(aИ еГoграяицеЙ

6n,j{;аn *!aдg]rь

11'|

пpи сoзданI1и Paз\aeтки стРaницьI !з элсl!ентoв] иУеющ,{x нaпoлнеrrие, с пo. \toцью oтстyпoв мoхвo сo3дaть пIстoе пPoстРatrствo }'еlqT lIи]ш' Рallьlllе для этoгo испoЛь3oва-'lись тa6личнr'Iе ,Iчейки r' пPoзPачньIе сlF.изo6Pa;!сния' те. rеРъ эTогo l{o)l{нoдoстичъ с пo}IoщЪю сРедствa сss.

Пoля 6лoкoв C пoлями делa oбстоя ем с oтстtпaми lr rpаницaМи, Bo:1еpBьIx.бoлЬIIIиi{ствoэлcментoв блoчнoгoyРoвIrя (нaпРиrтеР. а6зaI]ъI'3aIo-пов. :l]l' списки и т,д,) пo )'!t пo,lя, Ha pис .1.5-4.7нетко видеri rффект пpимeнeвия пojсй.

P И с . 45 т а Kв ь г л я д я r п о л o я у м о Л ч а t ивюб p а y ] е р e

а

in dеmo with Ьordеrs

h s ]s tг]es'me hезJLлq.п] two р.г.gгаohs t]!t now thе lrоrders ,. il.Jc, ,.9,. ,.Lo.'L.d..", ..6.9рё.e

Рис' 4.6 в0ЮчИв oтОбpаxевИeграницабtацeв,мЬ видиМ oбnасjЬдейс|вияnолeй

агgiпdеmo with boгdеrs,without co tl.е е .mеnls

b.rdels

е eware th.t 8]mostеvегy е emеni hёs mаrlins bу defаalt' аnd yo! i citen Wаntto еlmiп.te оr аcllsi tile .eiаlli mаrо]nзёti no to

PИ.4'7'лoслеyдаЛе3ияпoлейвсетризлемeнтасoМKвyлисЬдрyгсдругoм

112

l,$Aвfl

4' Расll6л'!re*'l

Pекoмеlrдyем дo6aвлять след}Ioщес o6ъявлeние в }Iачaпo всех тaблиц сти: t l ' i o ' r o \ д d я е г в ' е п o j я и o 1 l т } п Ь |п U ) ! o 1 ч ] н и ю r a s ё . д . I' r J o ' н . ч а e Г , в . е ' {паrgin:0' !аdding:0] Пoс,llе пРип!свeЕия тaкогo пРавила всe пoля и oтсT}пЬI по yмoлчaниIо 6уд}т зaчaсцтo пPи 1тaзаяиr.rполeй тeriстoвьrх зJ1епleятoвтpебуется исIloлBoвaть PaзличньIе el{иlrицЬl измеРеEия. B тaкoм fiyчaе пРaвoе и lleloе пoле aб3aца \lo)кrro задarь ]l llикселaх' чтoбЬI текс1.яLr(oiился lia oдиtlaкoвoм )яаjeн,rи oт tipaЯ стpaнl]цъI и пaвe,l{ Eaвиraцl{иj a всPхнeе и rrи]riнее пoлe - yкаэ щьlo еm, чтoбьl IтРoстРaнстDo мея(дya6зацaми мeнялoсь пРoпoрц'Ioпanьнo Раз. t]еpу lпРифтa. делaеTся этo пpи пoмoщи следуroщero кодa: ' t p,:. s B aэ'lllov приv' pс p,' ' Ioяни€ ч.,tQ. а6,lnцJl и вl е|lJ plвьo IPе! четвертям oт въIсoTЬIшРfiфтa' пРл yвеличёI{ии 6]з()вoг() PазмеPa шРифтa д'Iя тeIа body }ъеличится нстoлькo Рaзмер а6зaцеn, нo и иEтеРвaцъI NIе]{дyвип!и' пPaвoeи xеuoе floле aбзaцeв oстair}тся IIеI,IзNIенIтъIп!л. Бoлeе пoдрo6qo этoт вoпPoс мъI pас. смoтPим в гла!e 5.

Haклaдьlвaнue

пoлeй

BрP\ние !| ни,{ниe лo l в a l o т lя , 0 P y гн а д p } Г J п Р . j . | l в и v , чтo y нaс есTь тPи а6зaцa' слеIг)фщих oдиrl за дР}тим' I. кDr\дolIy n сится спедiroщсе пPaвилo: ! { ' i d Е h : 4 O O p х ;h e i g n L : s o р x ; b о . d е т : r р ; s o t i d + O l ] Oh; ё ! g i п : ' 6 o p х o з b D x o ; ' .aсkqтourd- сo1oт : ]jссс; ] B o з v o ж н o . в ь r п р c д п o Л о ж и J | и ,ч 1 U U 6 щ е е P d | O j я л P < r d , т \ U r е Г oа б { " . , , гo' тo eсть 80 пикселям в наllтеll с-1,!чaе'нo этo нe ,.t.паJЬIваю|.я д P и н а д P \| a и o 6 ш F е p " . . ' "'",. чuнe 6oaъше,oИ3 э.rмх Дв1х пoлей' в вaшerr сфчaе !идим Рез)иьтат такoй paзмсткll, пPимeчortиe

а6lацaми 6vJРг *p'"..o no," ''o.,.a.*.. тaI.. Bеpхнее и вФкtreе пoле межлy iь""uа"и равr,o вeли. 50 irи(селaм' на pис. 4,8 мъI

вoтличиe oтвёPxнвlo иниxнeгo пoля,6oкoвьrвпoля нe нoюoдь|вo6т.я дрy. нo дpyro' gмeФo 'oro иx зяovвния сyммиpуются. B pэзyльтoтe po.do'н'o м6xдy двyмя сoсeдними пo гoPизokтoли 'л€ м eнтoми Poвнo сyямё их смexных пoлeй.

Pаt$еp5;6кэ

tlз

P и с ' 4 , 8в, е p Х н e e и н и x н e e л о л e н а м а д Ь в а ю т с я д р у г н . д р y г а llarс.rадыванйе пoлeй o6eспечI'вaет oтстyп пePвolo a6зaцa' зaгoловкa иnи эле. r!еIrm спиoG oт сoдeP)кащeгo ею эл!меtп-а д71япoддePжaliия лoпtirескoЙ стрy(ry. ]ьI док,l\'elтгa. .]Iдя пoследiroщllх oднoтиnяъгх элeментoв таj(oе oтдeцеяI're )'ке !rе -PебyeтсJI' сooтветствelnro' надo6яoст'r в дв}x пojlю. нс?' и ol{и l{ui]IадъIв:uoтся'

Paзпep5лoка fакoв Pазмер 6Лoкa? Этoт вoпPoс' вepoятIro' 6)дoРaxli.1)'l'tьl и прoизвoдите,1ей iPayзepoв' и дa'tе )^raстникoв world Widе WеЬ сonsortiunr (W3с)' ot{ oчеl,ь :lФi(eir дjiя I{ачинaющIiч' дa и дЛя экспеPтoв тorке. Дaвайте шaI за пIaгoм Paз6e.ем 6лoчl{',!o мoдeль и o6сyдим ее lпиРинy и }ьlсoтy. lпиPиlтy 6Лoкa мoжro зaдать с пoмoщью свoйствa !'idLh: {пidЕh:400pх} затем i,to)кно вкЛIoчить фoнoвьIй цвет, чT06ы paзмеPъl 6,'toкa 6ыли видньI: : iяidth:4О0pх; backqround. сo1о! : +ссс} на рис.4'9 мъt BI'дим 6л0к i]lиPnнoй 400IrиксeЛoв с фotroвьIм сePьIм цветoм.

114

Pис'4.9'ЕслиуказaiаширинaблoKа,oн занимаeт нeвeсьсoдepхащийeгoэлeментl кoтoрЬ м в даннoМФyчаеявляeтся body Бeз дoбaвлевиЯ oтст)пoв сoдeР)киNtoе 6лoкa зalrимает егo це,'1иком. пoкa qтo всe лoгичяo' вo ситyaция РазительIro ,Iзl(еtrIrтся' кaк тoлькo мЬr зaхoтим дoбaвить rРaницы и oт€т).пьI. итaкdдaвaйте зaдадим oтстytt в 20 пиксeлoв сo всеx р {aidth:400рх;bасkgxolnc сoior:+ссс; раddinq:о 20рх) пo лoIике, ес-!и мьI дo6aвLIи oтст1пьI lio 20 ликсeлoв с дв}'<стoрoн, блoк шиРиlroй 400 пиксeлoв дoлжеIr сoкPaтиться дo t60 пиксеЛoв, B стPaннoм и чyдеснoN1 trшРе сSs наtII 6л0к в pезyльтате тaIшх действий }вели. чивaется пo Iп].tP]rнeнa 40 п1rкселoв (Рис. 4.t0).

Pис.4']0'до6аэлeниe отсгупoв г|PИвелo KyseличeниюPазмeрoв 6лoкаnо Цrиpине Если тепeРь мьI дo6авим IPaIrицьl тoлщtrнoй 6 пикселoв спРaвa и слевai 1 п i d Е h : 4 0 0 р х ;п a i g i n : 0 ; р a d d i n q : 0 2 0 ! х ; b о l d e i : + о 0 0 s o r i d ; ] r o r d е Y - W i d t h : 0 6!t 0 6рХ; flbасkg!оlnd- сotоr : flссс; рaddlnq:0 20рх}

Рiзin8Р 6л$'{а

1tl

PaзмeP блoка пo lпиРине )велI,IЧI{тсяеще нa 12 nиксс]Ioв (pис. a-11). TeпeРь псходпый блoк шиРинoй,100 llиксeлов I'lIеет шIиРиЬ1 452 пllксr.!a:6 + 20 + 400 +

20+6=452.

y Б e i и ч e н И юш и p И i Ь б n o K а P и с , 4 ] ] ,Д o б а B л e Б игер а в И ц п p И в e л( o ,Ц.вiйте тепepь дo6ав oJ |L'ва вoкprг 6jо (, rгиi , 1' l2 , .

P Jля l oJ-4 |иЯ .Bo6oдIloГo пРo.

:iridth:.]00pх; пarq1n:0 ]0!]lj р:ddi]q:(r 20рх; boider:i0.. о 6!х 0 6-!х; laсig!oша..o1..;+.с.; ]

.:.n:

-

so]ic;

bo.dёr-

PЙ.,4,12лоЛясoздаютпyстоe прOсrрав.вoв.KpугблoKэ

.]o6aвив пoля пo 30 пикселoв пo 6ol{aпl 6лотia. \ъt eщс бoлeе }величI,tли € г o j i]эитry.чтo естествсннo' тaк кaк пor1я нaхoдятся сна|DJ!сuэле:rеНТa.Пpи этoм' ::\!oтРя ва тo| чтo пo ]roгике внi,i,рerjlrие oтс1)_пьIи гРarrицa 6JIoкa не дoл]кrrьr ::;lятъ нa еIo iIIиP!IьT' и\1евнo этo и прoисхoдиa .]aнЕьй мoмеI{Т мoжr'r окaзaться вeсЬмa с!!дeствеrr!IЬlм в пРoцессе oтлaдки ]oнlioй настpoйки сaйr.a. вьl сoздaМ Рaзметrry с Nпссoй э-Ieментoв. }alтя каJкдый

.,fiAgя 6. pаrn'nФжзfi*

''6

Cвoйствopositioй сeРдцeм сss Рaзметки яв-пяетсЯсвoйствoр.]siLion' oнo oпPедeляст l1схoдI1уIo тсlчк} для Распoлoхевия 6лoкa иJ!цoто элeмегiта. .цaBaйте Pаз6eР Cвuйс "

o.

вo р ., -ix.с]

чеlыpь\tя и

,"-iv.

зI|ачeI|иelI

'''.,.',' ""

,.

lнi'|.tlj,!и: 'в |я.|(я

s ..('

сj

'

,

,Дг

вайте с пoNtoщьIo lPиltеpoв pазбePем и1i дсйствиe- B кa*qrloм пp'IvеРе мьI 6}. деNt исllojlЬзolraть тРt,l a6зaцa: псРвъiй' втoPorj и пoследIrий из tiиx 6удyт oто. 6Paхaться сo знaqeниeм stаtiс, a знaчение свoйствa рosition ДЛя тpетьегo а6зaцa мьI 6yдeN! 1lенять. мьI до6aви,!я спeциaльньIй l0laсс sр€ с ialpara для i P . ] ь . г o : 1 6 . , | ц' . , | | л 6 ой.lваи|IeJJтp,Iиsaто',p/J|o\{ o', J"|

ь( a6lацЬ|,

position:stаtiс Bнaчa[е РaссУoтPим' как вьIглядят нaши a6зaцьI сo зЕачеriием statiс пo умoл. ч | и l ol Р и ' l i , ) ' , Укaзaв звaчсIтиe sEatiс] NtьtPaсполо;*!тл!l к?,ltдъIriэлеllеtl,rдPyr пoд дPIгoм' кa,кдьIй a6зaц яirxoдлтся пoд пРедьIдущим! oни pазделеI{ъIxoля}tи по yMoлчa чтo6ы сN{епить Такoй пoРядolt PaсIrо]roжeEия' с,rедует укaзать какoе.либo Jругое зllа.1евиr сBойствa рosrtion.

сзoйсrвo 'ositio.

117

Pис,4.1з.БлoчнЬeэлементь|pаспoлага|oтсяoдиннаддрyгим'раздeлeнЬnoлямипoyмoлч

position:relative тепеPь yкФI€ l ll ддя тPетьегo a6зaцa знaчеIrие re1а Е ive. Mo)кЕo пеpемещaть трe. -|tй ]6Jац oтнoси1ельнo егo Pа(пoЛoжеIlияпo yмoлчаниk,( no"Ьц"'."o;,i'u .]p' ]еft' righЕ, bottom. o6ычн0 'rелaемoгo резуЛьтaтa мфr}Io д06иться с пo. 1:oщьIooдниr. тoлькo top и ]eft. нaпPимеР, тaкoе пРавилo: :.sрeсia1раra {positiоn:re1аtive; toр:з0рх; 1еft:2Opх;} :joзвonяeт lraм пo,тyчить Результaт' пoкmaнllый яа РЙс. il.l4. Тёпеpь a6зaц смещеIr нa з0 пиксeЛoв вниз и Еa 20 пиксеЛoв впPавo. oднaкo , ::а( вьl зaметилиj noлo)кение oст:rльньIх эЛeмeнтoв не изNlеilилoсь. ПР'r этoм чтo пPи смeцеIr,rи элементa вьI дoл'.ньr Y6едиться. чтo длn ]тolo в paзметке дoстaтoчrro местa. B 'iallrем пPимeРe для смeщeнIrя тpетьero 4lаца не06х0димo лo6аBитЬ вPPхнeе пoле к чeтвеPтovy a6;аuy pазмеpoм ]0 пикселoв или бoлеe, чтo6ьl сдвиЕlть егo вниз''зтo гIРедoтвPaт :ие тpgтьеrо абзaцa нa чeтвеDтый' Bяtмoниe

мoxнo тoжe ,сnoльзoвoть dтPицoт9лЬныeзнoчeни' д/rяпepeм6ц€ н Йя элeмeh. ro вl.Px я иeвo.

ll8

Pис,4,]4, при oтlrоситeлЬнoм располохeЁИиMoxнoсмeщaть элeмeнть|пo oтвoшeниюк иx МестоiахoxдевИю лepвoначалЬ|]oмy

position:absoIшte Aбсoлют1Ioе paспoло,кeние пpиrrципиa"льнo отличaется oт пРeдыдyщих дв)т' тaк кaк oнo пoлtloстьlo вЬrРIjвaет эле]{eнт !Iз o6щeгo пoтoка дoк}т.Ieнта..Дaвaй. те oбPaтимся к пPи!1еPy| !flsр€сiaipare

{ р o s i Е i c f , ; a . D s o t f , t ёt;o ! : ] 0 р х ; 1 е f i : 2 0 p х i ]

Peзyлът4т пPимeнeния этoгo пPавиЛa по{aзal{ I{а pис. 4'15' нa Рис. 4.15 мьl вriдиi{' i1тo пpoстрaвство' Pанeе зaни}IaеNIoетРeтъим aбзa. цeм' исчeзлo, Элeмент с абсoлкlтнъtN{пoзицЙoниPoвaниev ст:Ц нeзaвисимьI}l oт oкpРкaioцих eгo эJleментoв Pазllетки _тепеPъ oIт Paспoлaгaется oтr'oситeль. Ilo элемeнтa вeРхIlетo yPoвня - body. Прt,tшIлoвPемя пoгoвoP\\.|Ь o хонmrкс'|E мo)flrio скaзaть, чтo пoумoлЧal{иro контeкстol! paзмещения эЛeмeнтa с a6сo. лIoтliьlм пoзицnoниpoвaниеl! являeТся э].Iei!'еIrтbody, кaк видIrо нa Рис, 4'l5' a6зац сN{eщается нa укaзaнt]ое вaми расстoЯние oтнoситeльIlo элемеIrтa bodУ' a н е o г н o ( и , ] е | Ь Р o v е ' I o | ' а х o ) r i д е н и .1а ч o г o d 6 з " u а п o W o | ч а н и ю '

{i].;tт!$р'Eitisi,l.|9

PИс,4 15'Aбсолюr!оe пoзициовИро!авиeвЬ]рЬraаетзлeментиз о6щ€ i о noтoкадoKуМеЁтa Tак кaк Itoнтeкстoм РaзмещeтiиЯ э,llеlfеЕIтa с a6сollo,rlrьlN! пo3ициoниpoвaЕи' я в л я e ] с я ] л е ] \ t е н 1l o с ] y , п o и l l P o к Р ' ч | , в J l I I l и , , Р r ь l U ь | j l е ^ I . l a l п е Р e ч е щ а е f . ::' тaк кax body таюкe пеPеNIeщаrтся, lrpея!де qем мьl i"зIraeм' кaк в ка!]сстве кGl]текстa поэиц}loпиpoвaниЯ для ]:з!ещeI]ия элементoв мo'tнo испor1ьзoвaть др1тиe элеIlентъI ltРoме body' дa. ;:irтe пoзIiакoмимся с лoслeдниl'I llо3}1o)кEьlм знaчеjlиell свoйствa рosition'

рosition:fiхed , : l } i с и P o в a н н o еп o ] и ц и o l r и Р о в J P ! | e ( х o к F . а 6 L o "',""'',..'.-"".''.,''.,", ::;o кoятекстo\l paзпIещения эЛе]{ентa явJlяется о6,raсть т1РoсмотDa (нaЛРимep, ::.чo 6PayзePa илll экрa1r кaРмaнIloгo кoмпьjoтePa)' пoэтolry э-lемеIrт нe пeРе. ::цaeтся пpи г1РoкP}ткe стPа!IицьI. нa Рис' 4,16 и .l,17 пoказalr лрип'IеР фикси. . -вaliтrolo Paзп!ещeни Taкoй эффeкт пoзвoляет и\IитиPoвaтЬ tстaPевпILIефреймьI. нaпPиi1eр, мо)к. ] создaть элеyе}Iт нaвигaци!I. oстaющийсЯ IJа IесТе lтPи прolrрyтке стрaницьl. oдпaкo имettтe в вид-v,чтo рosii]iо:l:fixёc не Pa6oтаeт в lЕlwin' нa сaйтe ::;soup,сom (ЬftР|//t!е!!!ul].tagsoup'сom/fiхed) въr мoжете нaйти oписaние yлoв. : a к] а l J т " ф i к с и P o в J н l I o . Р r i п U l о ж е l l и P в I г с | | е l | - . \ p I о nI J - ' н W ) d o \ ' s '

120

iл&},l

'. раrn'*n?энвg

зJleмa$l!:t

htp://яv

bЬd'.omll'у|in/(hi

is фe t]Бl Рmsnрh оf lhс losnjoning dсnю, тhс obiсi!с ]r h d.mп\mt of |iе !юsilonmg d.!ю' тhis P*aEi.Ph h&sм id ю N.

n .hd!с ils йsit;i i !. lо dсnюlsltilс

t]rеdii'lсЕnсс"ii]iо!l btl'шn

affс.йg lnt olhФi@йin'.

тn. оьjфn;с

drс iolr losinoп рrоPtlt.' va|ues: n!h. j

-s n tiЕ tсoпd pД!.qврh оl fiс pоsit]опiпgdem. тhe оbjссtilt h 'о nrmnsmI. dii]ъмсе hсlУфn lhс lo0r р.siiоn Proрсп' vа]!cs:slзliс,rclrtiv.'аbюluЕ юd вlо L].ф тhс оьtсU\е ьtо.j.mп' hв L\|hсtnuплPtrвPфрhоiфe diffсmnсеъсNeen thс fоur рositioi рropсФ v!|ues:shtiс' t]itiv.. аbюI!в аnd rl. i lс nddсdr lol of схпJ !.r1 inlо tьis pitадIaPh so ln фс latoul ь lоцg* lhaп

сroхe с абсoлЮтlЬM нoе P и с , 4r 6 l а п . р в ы йв з г л я д ф и к с Й p o в а н расnолoхенИe

diiitiсn.с bcl$фn th. folr losition lФPсlty vаlшs: sшtiс.tеlаli!с, absol{lc Фd I.!е nddcd а lol oI сitl

l.it inlо fiь рmgЙph

ю lhil lhс IауoUt ь longсr Ihап

Ьlо{et Nindov b ttnсr deпюпslтalоfiе ciiссl of firеd г.sniоninв' I.vеrddф a oi схtл lеil йb $Ь pаflliph sо fiаi lnс lаlout ь lоngei lnш t'е brовfr

пdo* tо bсllLl d.lфпstnl.

lhс сfiсd of nхсd pоsnioninr. 1 !т аddеd ! |ol ol ех!п

iлb Йis pшnlQрh ю fiat dlс !r) оui ь loпgсr lnм $c brоww вindow to bсlt.I

l1'а}а'i}ц'€

злe*!.1.!!

!l 'j*с?*s

121

вoi ('в -о,, . , , :, , o, вL| льнo дР}тoro элсMeЕтa] эToT !тoPoЙ элellеllт .я кoLITeкстoпI Pасполоя.elrия. кoнтeкстoм Pасxoлoжеt{ия элсментa с a6сoлIoт]ЬIlI пoзицllot{иPoвarlи Э,rсмент body сo;{еpжlrт всe oстanь]IЬ]с эJrемеriтьI РaзмeтЕи| :trrятекста распoлoжl1ния l!o)l{нo ,lсIoJrьзовaть и дРуiие :'леN'еIIть! j измeнив 3нa:ения их свойствa роsiiion на re]etit,.е. ,U пPи (!eщении

FtallPимеP'

/.lлЯ тaкol] pазмстки|

]lт id=.ou!еr'>внeпний civ ]]r

1d= '1!!ef'

:o.Ly>

>зьYтре!Еий div<,/div>

n

ЕсЛи мьI зaдадiM 'a!я свoйствa position вЬ}"l.pенвс.o div знaчсние abso]utе' :r будеT Pаспonoжен oтнoсительн.r body, так кaк body является пo )'N'oлчaниIo iнтeксTol{ PaсполоIiеI]ия, с r1oмoщью.вoйств tcр и 1еf ! nьI спtcстим вь}"тРеп::lii div oтEосиr.ельвo body' каI. пoкaзaЕo i]а Pис. 4,15, Если зaтем 4пя внeшнеIo d:./ зaдaть зlIачеI{ие rе1ative с!oйства рosition,

Цтeкстoм Paспoлo,l{еllия Дnя вн}'тРеIrIIeгo dlv стaпет rrвeшвц;т civ' ТeIIеPь :oмoцью свoйстn iop и 1еft мьl6}дем смсщaть вIryтРсЕний div гIo orнoшс]Ю к внeшне}{у' ЕсЛи вrrешlrиii эJемeЕт' вIllтPснЕтий :.!снт 6}деT сп{eщея в этa вoЗlиoжIroсть испoлъзоваТь в кaчествe кollтскстa расfioлo,(cнця л1.]6()й oстьlo кoIIтPoлиPoвать и сoздавlть стРaвицъI Paзпlсткy l1!I и облaстями содеP)r.иi1oго.

:эвёт

пPЙ окхyPoтнoм исioльзoвoнии пoлeй Й oтстyпoв 6 6oльшянfrвe фyчoeв дoФo1oчнo пP,мeняiьлишЬ сoтячнoe лoзициoниPoвoнte. мнorиe нoчинoюциe сss.ди3aйнePы зoдoют Poсnoлox.ние для кoxдoro !лeцeнтo и в PeзyлЬтoтe Фoлкивoют.я с трyднo. сrми кoнтPoлиPoвониявЬ|рвoвшиХсявo вoлю элeмeнroB' He оoитизмeнять зночёниe свoйфвo рos:Lion пo yмoлчонию, eсли в этoм нвт peoлЬнoй нвo6xoдимoФt..

Ппавaющиe элGIYreнтЬl l{ oчltcткa

глA33

6. расfi ',laяt€ l иe'лe!яe.'тa'

за нlrми эле!'ентъI пРи ltaпичиll мeста 6y$l. Распoлaгaться PядoI1. fLпавaioII!ие элe oтIroо]тельtrьnr пoзициoниРoвaяием. с 11eвтЬI vo)l.Iro срaвtить дипамичесI{!iI oзвoляет зaпPe'ги.|Ь эле}Iентal{ пeРeN1ецаться ввеpx и PасCвoйствo с1еar lаIoшиrlll],|(\|е',d\Iи.HапpиN{cP,еlЛи)н2(е.тьдвa |U|Jга,,ьlяpлlo\t.пl. аб3aцa, rr \lъI хoтиNт' чтoбы тojlъкo l1еРвьтй PасlloлaгLцся Pядoп{ с пjlaвaющlil( элеl{ентoм' несlloтpя Iтa тo' чтo та]f пoместrLпись 6ы o6а' нal{ следуе втoPoй. чтoбьI oн Paспoлara,.iсЯ пoд rI]IaвaIoщим элеl!eнтoм. Дaвaйтe 60лее пoдрo6вo поrolopliпI

oб этих свoйстBах.

Cвoйствo float свoйствo f1оat в oснol]нoм испoЛьзyeтсядля o6Teкaния текстoM изo6РаJкений, IIoвьI для сoздaEия Рaзмeтoк с rIе. яo тaкJ{€ otio пРимсн пPoстolo, скoльI(ими кoлoЕкаtrlи, нaчlrеN{ с 6(),1ее итaк, с пoмolцъ!] свoйст]ra f1оat I'o]кEo зnстauиТъ текст oбтeкать изoбраjкe. Eие. Bэтoм сN{ьIследaнвoс свolfiтвo мotкяo сpaвнитЬ с нТмL-свoйствoм а1iqn. Boт пРимеP: i m g { f 1 o a Е : 1 е f t ;п а r g i i | 0 4 p х . 1 ! i 0 ; ] этo пРавшo вьlРавIrивaет изo6РaжсЕиe Лo xевoм,v кPаю' а тeкст o6тeкaет егo (рис.4.18),

нe* is а p8rд8вPh of Еit' ]l яraps aould 1hеiМge Ьфаu* fie iшgсъ floаrP!оPсfty L\*l ю lсfl. 1 аьo .ddеd n .1PiхеI Мgiп !o ше.i8hl rnd Ьоtlоm оf ьс inи8e Ф фс lсх! dфsл l |ot.h lьe i$a8е ' onсе йс lсхl дcli ье]ow dtс iшge, it fnrms io irs пошl widф ' fiе floalф .tеmлl лlustаp!.a dircсny ьсfоЕ фe пan floаtсdс]сmnt in ile mlklP fоr thls effесl lo

текстобтeкатЬ Изoбрахевиe fuс,4']8'здeсЬс noмоцЬ|освoйФваiroаt мЬ|заставили Чtoбы свoйствo f1оat сPa6oтшo. koд paзмеTки дoлrкeн бъIть пРlrмePнo с.,lеqroшим tизо6pzжг lиF на пeрвov !a ,e':

!'!лёвi!iщirэ

i

3л€ i 1Фi!т9l n о{rr.?'tа

12з

BкрJтцe, сс п |iвojoшr. r']л6Dа,llе|jиё Ди ,|р!loй aлем.нг. |о эaзмещaеl! e.o кaк мo)кнo вьlI]!Iеи .Ilевее (илlI пPаBес д!я f]оaL i riqht) в Рoди. ]е]rьскoм элеI!tепте, э]reNtент, сjlедуюllий за пЛaBaюlциll' o6,Iекaет eгo' пoкa пе .\цет вЬIпoлI{еIrа oчисткa' посл€ чегo !oзo6нoв-rяeтся o6ьIчньrй пoтoк Paзметки, пPи..eчoниe

Дonoлнитeльныe свeдвния o свoйовe ito-t эPякo м6йвр0 (сss 2,0: спPoвoчннк прo|рoммиФo,. этo Gиlo являeтсяпo. л€ з нь|м спPdвoчникo'4 кoтoPый дoлxeн ицeть кoхдый пpo.рoммвФ'

с пoпIo'цъю

f1oat

пtoж

: : L o a t : 1 e f t ; п i d t h |2 0 c р x ; п а I g i n : ! ; ] .' {ftoet:1eft; mаlgin:0 4рх 4!]х0;j :I сoзда-Iи плавaloщес изo6PаJrtенlrъ :i noкaзaн нa рис' 4.l9,

и плaвalrцyю

кo-!o!iку с текстoM.

Pезуль-

styrifl'lr,;\iri,tri;H:ii:-"

ttr:'!;i!il {ii !;:i юlnm'..шмoгn.pр'g .lс\l U!n! шс llо]t

рФP.n}, lou сап Фatc пuфюus .oIuппs sid. Ьу side iл inь wа)]' !\ Ь.st lo яlар аtl lhe соtUш' iЛ ! dN *iln а! ctрliспwidlh'ю фе coiums don1 mvе !пdсr one лоt]rсr if ihс bbяsr n ЕI ю r llф} я idф, 9niлe lhr vidd! ol L]re j]оalс! сohms ь a ge.d idel

P и с , 4 T 9 ' д o б а в И в1 1 c e : к т e к с т ум' Ь п р e в p а щ а е м e i o вK o л o н к y :Ридo6авлellии свойствa fioat !t к изo6pа,l{(еIil,llо и тексryiъI ![lсстo o6тeкa. .:.о теliстa пoлгIaеN{ текстoвylo колоЕьT. этс, BoзNIоxнoсть лeхlrт в oснoве сo. :]:::lя Pазметoк с н€ с кoльки\!и кoЛoнriaми. Есxи N'ь! вoзьме\l тPи dlv с фиксIrPo. ]]oй шиPиЕой, тo пoл}'чиit тPiJ пjlаualоци! тroлollки.lLoнтeйнеРa| B кoтoPыe

124

l,U\aA 4, Pai'ronor|tC$fi6 ''te$G'|тов

смo)кем дoбa&lять o6ьlчньIe нe ruIaвaющиe эJIеме}tты.Бo,eс noдрoбнo NlьIo6су. дим этo в гnaвe5.

Cвoйствo сlear Bместе сo свoйствorи f1oat чaстo aaюке испoльзуeтся свoйствo с1ear. Мь! в!rдe. nи' чтo текст мoжет o6текaтЬ пjaваюцee изoбParl.евие. Если Ioвopить oб и3o6. PaxеIiиях' инorдa тPeбyeтся oqистить свoйство floal. нa Рис. 4.20 IиЬIвидим списoк' кa]кдЬt't лyнкт кoтoРoгo сoстoит Irз изo6Parrеtrия и текстa oписalrия' Ес,и текст описaния до€ т атoчlro 60льпIoй, следyющee изo6Ра,кениe Рaспoлaгaeтся lra вoвoй стРoке. oднaкo кoIда тeкст oltисаяIlя является кoPoтким (кaк y втoРoгo изoбpа)хения) ' тPетьe rlnaваloщeе 'rз06Ржение paсгtoлаIaется Рядoм сo втopым! тaк как тaм естЬ свo6oднoe месlo.

тhis ь а p@дrаPh oftxl аьolt мi.ююil ofijcе хP; tIь mi8ht ь. д dскnPdoп of lhe аll lhе woлdе.ful фin8s yo! сФ do *nh eМil. tсsls' сa].ndсБ dd Фв. вФ!g thь '.хl ь loпge. !hФ $с Pi.luE of lл. ьo& Де oen iшge sE]ts d а tея pmgвРh' rvhi.h is еiасlц 9Ьаl wе siDl тhn ь а PшgФPh of iехt аьoцtмфDюfr windows хP !iо.a и'sioп' вфаu9 n's n xnofl PiФ of l.tt' the nclt im8e шd вi ь trp heЕ' !ф] тhis ьсhаvio. ь ФGl, вфlrs. lbс PФioцs lехl didл,l сl.ц d!с im8e' йеЕ is фn for lhis вt i@ge Фd Pш3лrPь' lф.

Pис,4,20,в данlом лpимeрeдля oдtoroсвoйсlваfl дoоиxениявyхнoгoрeryльтата нeдooатoчlo Пoэтoмy' qтoбы испPaвить сиryaциIо, тPeбyeтсЯ дo6aвиTь элемент div д/tя oчисткtr сBoйствa float и pазмещения тPетЬeгo изoбPaт€ я ия пa llовoй стрorle. Boт t{од пPимеpa с дo6aвленlrьlм div: !s..le,ур6-'.6у|

ss

l2

p { n а r q i n : 0 0 1 о р Я 0 ; ] / + с o 3 д a е т п P o 6 е!лt еы, * д y э л e м е я mi /м и img {floаt:1elt; margin:о 4рх 4рх 0;]

' с l€ а lthefloat

9. tcдеarlьotЬ; }

.11

зrс= 'inаses/oЁiiсе xр.sif'' /> Fатaqlaph

оf

LёхЕ аbout lliсrosofl

s r с = ' 1 m а q е s / t 1 nb о п e . o i f is

а palngIaph

oi

tехi

offi.e

/.

about Цiсlosoit

иindoфs х?',.

< d i v с 1 a s s = q с l ё a l t ь e f 1 o а t s ' ' >
:т-o s'с=' inаqеs/пin:ртo, g1f ,' /'s :]ir thе neхt

iпage

and pаrаgтaрь

t?.'.

illv

и eгo свoйстЕо с1eаr

.''

знoчeниebclhдля.вoйdвo сlёarпoкoзывoe1чтodi'oчищоeтlpoспoлoloeт. <яни^e)Moвoюaий элeмеьr. в дoРяoя Фу{oe мь мo ниe 1еft, нo, 3oдeйФoвoв both, мы r6рoпиPуeм oчиdry f,лqвoюцих '0мeн. roв, дoxe eФe в д!льн6йшee фeнЙм вь|posнивoниoэлeмeнтo с teft нo right.

Teпepь стpaницa вьIглядит'кaк пoказaвo нa pис. 4.2t, Эlo,l ьoвый,oчищеннL|й, ,,i l.lцe!l. гепePь Pевllдичo

элемснг. Лo6аoJ.енны;' Nея(д} в|оpL|I. и 1pcrЬич РJсloлaгаеr ' Я пol втopо|! ' .o6p"^;' 'е', i"к к.к p,с""'."a. PРгье иJo6pа^ение иа6заU lлeл1ютrao\nце"ньll'|,J'.'ен';г,oIlи

и тРс6oвaлoсь,

при,!Gчониe

пoслe 5сeХ Poссyxдrний o вPeдв пР9зeнтoциoннoro кoдol вoзмoxнo, вь|yдив. ля.тeсь. пoчeяyм! с тoкoй л6Roстью д060вили н6вый элeмoнт в xoд тoлькo для дoФихёния-лpeзeнтoциoнвolo эФфekтo. oтвeт зo0ючoeтся в тoц чro rтo со. мь|и прodoи <пo.oo oчиФки плoвooцero элeмeвro Aля нoчинoDц6ю сss.ди. зoйнePo' гlPoф6ссиoнoль|PoзPo6oтoли спoс06 oчи6ки и 6eз дo60влeния лищних элeмeятoв, кoтoPый мы рoссмoтpим в lлoвe 5. Е узнoтЬo6,тoмyхe сe;чoс oтьe; ьo со;тe Po;itioл ь ЕYeгуihing (hto://М.DosilionьоYeryiьing,netlёosYсleoring).

126

i'AgA

4. рarfi Ф'nxe!r'e

Ж

-*--t

эiierne'rт'эв

тhis is a pшgriPh оf lсi аbolt мiсфft offlф хP: this лjghl bо a dеюliPtiоn of lhe аI tlte soЛdеrful fiings yo! сan dо вilh еФeil' lasts. с.lаnded аnd mt, вфдu* rhь !схl n loп8еr fiш фс Piсtш of Фc boх' $е nex! iMgс stlns as a new РшsIф' Rhiсh ь ехдсdyvhаt *е yaпl тlrь ь а раmgnPh оl l.t! aъоutмiфsn windoql хP яorc !еrsion. вссa!* i|s а shon pje.e of Ёxl' wс аdd ! с]eein! еlсNnt аiеr фe PФgrаph,

М

Now фе leхt imа8elnd P@gЙPh sвn to8eйеr аs {E сlеаreddi! we addф iп i]rеn.*uр is is Plпссd bс|oя (i.е, clсa oD thc flФфg сlс'i.nt.

М Pис,4,2].ИсiолЬзyясвoЙов

нтЬPасnoлагатЬся подплава|oщиMИ

oqисткa свoйствa f1оat явJтяется вa'(нъIil мoмеI]тol{ пРи сoздaЕии оss.paз. метoк' пpe]l(де чем NlьIEaqтreм ltспoЛЬзoвaтъ f]oa. нa пРaктикe' спедyeт oзнa. кoмитъся eще с oдrrиIl свoйствoм - disllaУ,

Cвoйствodisрlаy тa( ,rc, кaк кaj{r.цьDi элемснт o6ладaет свoйствov рosition' y кaщцoIo элемeriтa есть и свoйствo clspLаy' нeсмoтРя нa дoвоjiьtlo бoльДIoе чис.лo дoЕyстимьIх знa. чeтrий этoгo сDoйсrтa ' llaи6oлeе РaсIrРосrРaнeннЬIми яв,.1яloтсяbloсk пли inl ine' 60льпIинстэo oстalьвьI1 зliaчeпий сBoйствa displaУ oтItoсятся к тa6лицa,\l.Pаз. ницa ме'tдyb]осk и ini1пe дolronЬиo пpoстa: . .

6лoЧньlе элементьI сo зEaчеяиe1! bloсk - а6зацьl. зaloлoвItи и списки РaспoлaгаIoтся ка)ltдьlй lia яoвоi' стPoке; a, sрan' img - Paспoлalаются стpoчные элeм.еnTъI'сo зпачеt{ием inline дP)т Pядoм с дР)'гo!l и llеpеtloсятся tiа нoэую стрoкI тoJ'lъкo в слlчае lre. хвaтки мес].а нa IтРeдьI,{,vщсЙ.

Boзмoт*roсть гIРевРaщать 6лoч}Iъ!еэлeмеtrтъIn стpочнъIe и нao6oPor являет. нr'пpи!'.p. п oeo6PdJoвЬlвa1ь oяд с(ьшol{. ся !oUrJь.\{ l pе'].твoм

l (всn.т!з i{isltlаy

12,

oбычнo Рaспoлагaeмых рядoмi в BеPтикaпьЕъIй списoк, коТoPыil мo,*Io испoль. зoвaтъ дJrя бoкoвoй пalrели lrавиraции' не задействyя элeмеEт . кPoмe тorc, стoит yпoмянyть ещe oднo дoп1'стимrlе зr'ачеIrt.rе свoйствa :isplaY nonе. С еIo пoмoцъю мьI мoжeь{ сделaть Ii16oй элеIIентj и сoдeprкa. Циеся вlrутpи rrеIo эле\'еIттьl певид!!IъlN'и полЬзовaтелro' зaвимae rlемeвтaмir пPoстpalrствo oсвo6o]цaeтся' o6Paтите вниl{aниej чтo пpи испoль. o в а l ] и и . в o й f iв э , i s r b . . i , . с u J ч а ч е н и я ! и - c i о ] o и c o " n J Л е l { ; ч |п P o с т o 'liPъIвaется oт Iлaз пoJrь3oвaтeля' вo зaвиl{aе]!Ioе lr ! прoстpaнствo oстается, ] к н и г c ' { ь l P а ( с м o т P | l мп P и ч e н е ' l | t lе в o Й с | в а l o . o -riv.rrlеv nonедля ". joбaвлеEиЯ llaшим стрaницal.!j яaпPиIIеР' сoздaния вьIпада. фyrкцIroна.пьнoсти A тепеpь дaвайтe пPимеI{иII Ea пРaктике пo'ryчeнIfl.'llrивфоPмaцию и нaчI'е}i

:oздaзaть сssтaзМетки'

fяявв s. Бaзoвaп paзШeткa CтpaнПЦbl

5t.' 4. .|..n.!P фвpl.t..

w|th з|l the

5t'|..*.us.dtoЬ.]Pu!5P.Ph.tw.xe!€

l.p|а..dwl6eз.m.siyl.s*.u9еdопtьe .enterthetуP!Ь€ ф ее.dtфo|lп!' Add|.g t*

i9jФiй

to th. h.аde. div

ND!а.ekrisqo., sed liпdduni aui'qu. € u

плавaюциеэлёмeнъиoчиоY@

итак, мьI гoтoвьi тIристyпитЬ к сoздaнIriо Реа,ьнoй paзмeтки д,!я WeЬ.стpaни. цьl, испoльзуя сss дЛя Paзмeщен]rя элeп{eнтoв.здeсь мы сoздадим rrPост}'io бa. зoвуlо prзvегкy, C ее пoмolдью вьl нayчиrе.Ь сoзлiвarь пpивлекательr9roи лo. rияryro paзметку 6ез испoльзoвarтия та6лиц ц вспolroraтельяoй rрaфики.

пpиfleчoние

B PoссмoтPивoeмыx примeрoхмы нe 6yдeм сo3дoвoтЬФЙлЙ, (oтoРЬ|Фмoгли6ь| сoздoть для dPoниqьr B дeйствитeльн9Фи.HoпPимeP, oпyстимтoкиe шolи, кoк Idoнoв(o пoлeй в нoчoлe Po6oъ1и т,п, Poди лPoстoты ipимeрo.

Пpoстaя pаз]iIeткаC двyillя кoлoнкапrи J пeрвoм Paссмa,rРи!aе!1o]l нaNIи пP'NleРе сoэдф]'v гIРoс rylo и ottetlь РaспРo. :тPаIIeпI{yю paзметкi.l сoстoящ'lo изyзкoй Лeвoй кo,.loнки дЛя нa!игaции и пРn roli кoлoнки дЛя oсвoвнoтo кoнтента. B наIпем r'Pи{еpс кoлoякa Еaвl{IaL{I,lи :ltеет фиI(сиpoвaнIтr шиpину, a o6лaс,rЬ сoдеpюмlгo является 1116кoй, тo есть :е тrtиpиI]а измеlr'ется в зaBI{сиlIoсти or.шиРиEьI oкнa 6PaузеPа, Bначa,е начнем с Ira6лoна xнTмL stгiсt. ЕoToPьIй мorкнo зaгрузIaть с сaйтa r\rli'ЬЬd.сom ,/s.ylin. нам lry,]'eн сIсд},тoщий кoд дnя докуNtепта body:

]]!

id= '!аv'>

<|_вaчшo di]'нaвиrаци!_>

с.ылnа 1

1з0

rлAaA 5. Бё.osаs Разl'eт'{. стравl.4ь. <1i><а href='}' >ссылкa 2 <1i>ссДлкa з


ld=..onЕent'>

д sifrр]е



т1Jo'со1um

],ayout

<sс.onq>текстёце

тeiсf

a6зaцa



Ецe тexст

Ещ. тetст<1р>

Ецe тeкст



У нaс есTь дэa div: oдиIi - д"* oблaсти списка ссЬiлoк' a ЕтoРoй _ д'rя сoдeРжимoIo,

нaвиIaции' сoстoЯщeгo

oРr.arri'зoвaннoй в виде Iiз зaтo,oвr;r и вескoль.

ких a6зaqев.PезyльтaтгIокa3aЕнa Рис. 5'1.

hп''/w.bbd,.omдlу|ii/rh4

рo5l.о

p 1 ' No sl,l|ng yet . ф& the ddа!и иIoUL ln lьь cхшPIe ' wе ire goin8 !o u9 aьюlltе |iliо.ing ю @c а $,o фluш.Iаyolt' wьiсh is Pеrhа?sйс nюsl сoлfun pa8е щoul уou vill * !Ьс rvеь.тhls |оfui eмb|еs you lo iоloц, фе qiddy-ldoplсd сonvcлnonof PlаcЬg nlyi8аlion in vсfijсз]',s|!сk" o' $е kn sidе, сo!!eD|@i - йс *флd сoluш . Dф{s tо ьс пuсh wider iiдo &r шуisд6oл сoiuш' аs фis ь . Мs ФPoronl dФьioп in a dеsigв litc lьь ь: !vi[ onе, ьoй or nоnеоi lne соlufus сhdg. sizе fu фе { i n оi|h{ htц {l'

Pис,5,]так вЬrглядитнaша сrрaница6eэдo6aвления с.илeи

ГiePвьIм шaгoм в пРoцессе сoздaEия Рaзметтrr с дв}lIя кoлoвкaми явrIяeтся изъятиe oб]raсти t{авиrации иэ oбцего пoтока дoьfltrеЕтa с пolloщьтo aбсoлют. нoгo т1oзициoltирoвaния: ъ o d y { m а r g i n : 0 р х ;р а d c i n g :о ! х ; ]

o6Рaт:,Iтe вни}'Iaние' чтo тР€б}€тсЯ тaк:{rе зaдaгь пoлЯ и н}иeвьie oтст}тIьi для !ца-rIения3нaчений пo }aloлчairиio' ItPol{е тoгo' Irеобходимo 3aдaTъ lиРlrну 06. ласти }laвиIaцIrи 150 пикселoв и вPeмеЕllo вItлloчить пPaвyю гРaниц),1чтo6ъI мьi тotlнo вrцeли' Iдe зaкaнчиваеТся o6ласъ IrавIrгации (Pис' 5.2).

htp//wW'ьЬd,(om/s'ylin/Ф4-pontio

2 . the tPo divs !iе лoE digлed уеnьа!y. тhe па\igliiоп di! бiith iЕ ngllt bordеriп Ed ю уou *e NhФ il ь) hаs ьeп аЬюhtеly PФsilioNd ю n is rcф!сd tiолr фс iow of rhс dфUmпt. ш аhюhlcll losnjo!еd сlеftll, ils dоiaцlt pоsitiолis il iьс top hfi фmе. of iв сoпlаjninЕеlcшfl' ьоdye]емлl, auoqs lhе соllепl di! lo вke iu Plасс эs Фq fiФ сlеell

in lhо афunEпl no\y'

Pис'5,2,областьнаBигации вЬPЬваeтсяиз oбщeгoпoтоKэд.кyМeвтэ TеIIеPь мьI пpимепи,.lи a6сoлкrтнoе пoзLlциotr,IРoэaние к o6лaсти павllгaции и' o6нyлив ]rеPxнee I{ левoе пoЛя' oбеспечI!ц!I ее Pаспoлorкeние в веpхнем ле. эoм )т,Iy элelltеЕтa body. oблaсть сoдеPя.иltоro нaхoдllтся l1РяNtoпoверх Еaвигaц'Iи| тaк кaк o}ra вьr Paвнивaeтся вlryTРи родите]rьскoгo эле!IеI{тa body. I{oка стPalrицa вьIгл'д!rт ]oвoльнo qril6yplio, Тe]!l нe менее' o6а элемeнтa тenеPь !ьlРoвнеIrьI' тPс6yется -]iиiпьсдвиryть civ с сoдcРжиllьINt !пPaвo (Pис, 5.3). мы сдеЛaем эт{) с пoмoщъIi) b o d y { n a . q i n : 0 р x ; l a d d i n q : 0 р x ;} divнnav {рosiiion:аЬsoiuLе;{icth:15орХ' Loр:0рa; teit:0!х; f l 150pх} d i v Ё с о ! t e n t ( n a r q 1 n - 1 eE

boтdef.rignt:2pх

1з2

гЛдEA

5' Еа]'3ёл

Разпе'ка

<тPаз4ц!'

hftp://*w,bЬd..om/stуlin/.h4-positio

Simplе Trvo Cоlumn Laуоut з . b! lddiпg l ъfr.Мrgn ro ф. фnl€пl of rhс rФiваtion' {. hav. our tвo .ofuш.

diу lhаls еqa' ro rh€ giiIll

тhе nеll sleР is lo dо ф|rc srylin' md nlm фe Pаgе ь!o а mt

рIotсasion1l

wc lrd lo Pad йс сoпtоnlаrуay iюm drс савс оf lnr divs- сnа!8c Фe ryPefee iоm ьоring oш тifts. Фd nllс lhс nаvigаlion]фk a liп]e mE iDlitiп€ '

РИс'5't гoтовo- размеiкаизA3ухKoлoнoK, созданнаЯ всeгoтрeМя стрoкаiми сss TeпeРь яужEo сделaть стРaв4)' нeмяoro 6oлeе прив,IекателЬнoй. Bьl мo)ке. те дoбавить чтo{o oт себЯ' a вот наiliи пpеДцo]fuен'Iя(Pис' 5.4): bod fort:

ll.,o]л:0р\j

рс

:1emveIdаnа,

di!+nаv

'di.,9,

а!ia1,

р1j

sаns se.ii;

{рosition:abso]trre;

<| задaембaоьь!й шРuфт и егo pазмеР ->

<].}б!рaeмкРaснIIoryавлцy >

tеft :0рxj tор:0рx; пidсh:150!х; рeddinq: -5еtn 0 0 0; пarqiд:22рx 0 015рx; lrolder.:cр:2рi bordе.

< l { N с ц a с ! d i ! я a в л г a ц л ив н и з и в п p a в oo 1 к р а ' - >

sotid

bottomj!!х

tl];9;

sclid


,

Ё069;

' l i v + i a v u 1 { m а i q i n t c р | 0 p х ; m a I q i n b o Е L o m : , в e f i ; i < I - р а . Л о л a г а eсмп ! с o { л o civ+nav

1i

{Цarqin-bottcli:

ioцЕ Wеiq]rЕ:bcLd; foni

'5еn;



sizе: .7.еп' ]<] r] r] -oоo/; ,, l!' |,.! |.\.o.tl||чo|oвни,!|вreвo_

рaddlag:0

]еm; <]'oтодвигaе! сoдеРциvoе oтjевoй и пPanoй гPанлцьI >

.!рс{fen ра3$erx..дgy

]divtсonLеnt

i3з

n1{font-size:1еm; } <:_ст],итeкстoвLIхэлсмеятoв->

:]iv}сontent р {font size:'8e(;i

< | с т ! и п т с х с т o в ь l хэ л е N с п т o B>

jiviсontеnt

] < ] _Ф l п ! т e к с т o в ы lэ J е ! е в т o в _ >

1il {font-si2e:.?5eпj

() htrp7/М.ьbd-.om/ltуrnkh4.posпi Ф A siпPIе

тwo

сo|umп

steP4-аfew5tyleslаter.

Lаyout Nоw the lауоUt |oоks |ikе som€ o ле

. .тnё nэv gаtioi div hзs the top а . ]ъe nav Linkshаve b.ёn оp€ n ed Upаnd pGtioпёd withinthe d]v, . lъeФоte.t ha eft аnd ri9htDid.]пqto mov. t аlау rrcm tie e.!e . тhe tYpе hБ юme s]mрe styLes арр i€d, тhig simp|e |ауout wоrks wel|асross а lid€

variеty оfbrowsers,

Lor€ m ]Psum dо|or sit amеt, сoлsedetuer аdjPisсiпg € | j!. Aеneаn .dio, Qulsq!€ phаrekа а]|qUэй lpslm, N;||а sсe|*ьфe, sёd tin.йUлt, auisq!. ё0 ns|, Рhаserlus m' аrtе, з|iq0еt ve|, vestiьUIUm sit аmе su5pёid]sse .onsеqUаt.ondiФ NUn.]Ustо nl9|, !U]putate in' sa9itt|s ln, prеtlum sоdэ|es, m.qnа,

Pис,5,4'ГoтоваяразMeтKасдoбавлeн!ь]миоилямИ итaк' пи.e пePeчисliеrrъI изменeния д"rIяy-тyчшениЯ стРaпццъI. 1. мьI хoтeли вЬIPoвня,rЬ o6лaсти нaDигaди их nвиз oт вeРхнетo кРaя стPaницьl! пoэтoпt)' дo6aвил по-!e в 20 пиксс,1oв к oблaсти сoдеP'rимoгo. зaтем мъI пoEяли. чтo ну)l(Eoдo6aвить и нeсIroлък o п и к с c л o B t i I I а в и m ц и и o i . . , ч 1 o 6 ы ч o ^ ' п е н ( l I P o в а l Ьг o л ш и н y в е p х н e й 2, мы дo6aвии oтст,vпьl для нal]шации div сo rlсех стoРoE' чтo6ьl спlесrrjтЬ элeмевт Еlieвo oт.o6лaсти сoдсРжиУo.o Ll в!Рal]o oт гPаницьI окна, з, МьI кovпеIrсиРoвLiи дoпoлн']телъl]ьlе 10 п,rксе,roв lIrиР,Iньтo6лaсти нaви. raции' Д06авlrв 15 IIrкселoв к левoму пoлIl] сoдеPx]ll{oгo div. o6PaTите внимaние' чтo 6ьи испoxьзoBafl l{paТкий фopl{а'г )'кaзaнiя lloxeIi. чтo гto. звoлило 3адaть гIoля тРех oстаjьнь]х стоPoн зa oдив Ра3.

lз4

rЛlзA

!' Бn3oва$ рBз*'eтка с!?а}|яц}'

PaзшeткaGтpeПIякoлoнкaмП итaк, eсли вьI Paзo6Рa,ись с сoздаIrиeм PaзlrстItи с двуNIякo,1oнкal!и, тo oсвooлoEкaNIи для вaс lie сoстaвиT тРyдa. t5 этoм сЛучaе мьl исlloлъзye}' тy )llе стРyктrpy, дoбaвив eце oдин div д.ля тpе.

<1i><а href=.fl '>ссылкa <а href=''t.>ссцлкa <1i>ссыniа

.di/

id-'o'-r''

д siпp]е

тhтee-сohпв

!аyoui

< р > < s t т о n g > s t e р1 . N o s t y 1 i n q y e t . t ] r i s i s t h е d e ; a u 1 L t a y o u Е ' < / s t r o n g > ]п .his ёЕmp1e, пe аre gоiiq to use аbsotute positioninq Еo стeatе a thlee сo1uпп 1аyouL, thiсh is аlso а vёr:r' сomon pagе lаyоlt you пiil see on.he Wёb' тhis foIпаt enabtеs you to fottoФ thе пidety аdop.ed сonvеnriоr of 'sсaсk' on thе lefi: р1асing navigaЕion il a vetLiсai side, and using thе .igьЕ сo]uпn for thiлqs 1ikе Еestimoniа1s, рtoлotions, ads or other

In thls desiqn, we.lt fiх ihе пidth oi the side сotuщs аnd, Ьесause яё пoл,t speсifУ Lhе сontent dlv,s пidЕh, the сonteDt сo1!m Wili be 'f1uid' аnd filL the rest oi Еhe bloltsеr,s пidth'

тьiв 16 teбpoiаry f111ёf for tьe !1!rht сo1щ' вole iцtele8tiдg 1! hele 1аte!../p>

незvль,]J] сlPаниЦы

6ез ДФбэвления стиjе;

wё.u

Dut 6фething

пoкjзан на Рис' ].5,

i'аэ'.eткз

{ I'e!.!' (on6яl'fiя

'l з5

p.sitil) hср l7iW,bbd,rоп7srv|iлlсh4

. tjд!-.! . tidlz . Llrtl

Simplе Thrее Cоlumn Layout l . No sf|ing уеl . $ь rье dt.аult |дyoшl.Ir L'is с\amРlс. wе @ going Io Ug аьs|utс itioniлg lo cЕаrc а t. .o]Uфn lаyoot. wьiсh Ь atю a vегу сопmn Prgе l.yоul you wiU ye оп \'eь, тhis iоml .nrь]сs yoo to fouow фe widе]y.дdорlсdсonv.nnon of phсiпg nДтiдзliоDiп а "stасt. oл фe lсl1sidс. lnd uФ lhe фhl sidс ior фings lite I.stircпiа]s. Pюпюnons, lds o. this dсsigп' Nе'll iiх lhc width оi iilе sid. сo]шs

аnd lФ фc сon!елl соlшn {i]l tЬс !Еsl of фо

ь tеoponryidlФ for шс righlфIlm, wс'll Putюв PИс'5 5 гoтoваяверсЙяpазмёiKЙи]тpеrкoло!окбeздoбавлeнЙя стИлеЙ Taк кalr сoдeрхiимoе тPeтьей кojlolкrr Размечeнo кaк a6зaц| пPи oтo6Рajкe. нии в бРаyзePe oнo въIглядит пpoс,ro как eще oднa сTPoка текс1а. пoэтoмyтепеРь сЛедyе1.:(o6aвить a6сonютНoе 11oзЛциoнЙPoвaниeдлядв}х бoкoвьIх кoлo!oк' .ди т пРедъIдyщeй Pa3Ntетirи3десь 6уд е , г т o l ч т o д J r я л с в o й к o л o н к r i ! ' ы и с п o ] . l ь з y е м1 e f t : 0 р х a д Л я п Р а в o й :1ght:0рx. вни'.oниe

в в6ких Po3яeткox, nодo6iыx этoйl слeдуeт Poспoлolo'ь iPoвy|o кoлoнку сo знoчeниeм .iEIl.:0рх тoк, чт06ы oнo всs.дo oФaвoлoсь в пPoвoй чodи oкнo 6PоyзePo.

Boт тРебyемый кoд: .ody {пa.qin i 0р*; !аddi.g|0рx'] j i v f l n а v { р o s i с i c n I a b s o l u t e j и i d t ] r : i 5 0 р х ; t о р : 0 р х ; 1 e f ] :: 0 р х j b c r d e r .iqht:2!х so]!d 'еd; ) .v"".о",.о

,т o!dё: Lёl' :.l х so

: "6o,

Pезi'nьтaтпoказaв нa Рrтс' 5'6'

",

.,,:,,,,

,,,

o,:

':

..gl,

ру'

Jз6

l'i!,1*j1 i' $.:.з;;r

р,.:tlrtl:

rт}r..'.ill

jffin,.hree Cоlumn Lavоut ' ] . I h с L h г m d i \ s h l e n o \ i q п e l ]t e r l i а I r . , n " n . ! , - . l , o п o , \ ( h | l ' . " с , l 1 { r \ h . - l i , h Ф L . , п , D о | J t с h ф . i | , o п с ds I l , { п l F \ с a I l o л . , с 1 1 o iгi.o]Lnш \ 1 ].|l Ьоl ьl 1 rd..'тd ]onсо xп| tr( пgntяюl{fl] Ьтllо zftn,

l,л

сс \1L,. n i,'п''. l|Ф Ь11' Joо|Jtс|у

l. wе яiцE.lфе n*зins опrhссonlслtаr! so n пo bngеrо'crliуs dE sidссоlumls,

Pис 5 6,тeперЬ бoкoвьe KoлоlKИ вахoдятся]]асвоих Мес.ах \lЬllоlrJви |и (p:l' ILе c|тpl | н и е - P i I l | ' U L , ; a к o в " l \ к o , ] o l . o |. Ч г o 6 " | 6 " | . | o четlio Bидяo их рaсxoJrохение. дfuleе тPебуется 3aдaть пРaвoе !I Jlсвoе Iтoле дrrя oблас!t{ содeР'киiltoгo, qтo6ы oна ве пах-!aдьIва,.laсь xa 6oкouыe o5лaсти: ioсy

{rаIqin:Opx; iaddirq |0p:; ]

dirtia' {р.siLiо!:ab;o1Lte; тiqni:2рi s.ti.L r.d; }

пidt|.:150!я,

dlv+соntenЕ {mа'qi!-1eft:15opx' il1a+.iqL:.c1lnn bоrde. ief::2pх

1eit:cрx;

tc!:0рх;

boider-

пalqin'тiqьt:125рx;)

{р.siti.niа.sоtutе; soti.r. т.d; }

i.]Lь:1.15рr; :сPjc!х'

riqnЕ:0рх;

PезUIьтат NIьI вI'lд!Iм вa p'Iс. 5'7, .lёxеPь зaймеliся наведеIII{lз]r I.РасoтЬr до6aвиll стили' дxя этoй Pазllсткп llсrlo]!ьзoва'rисЬ тe же сssa]PlвиJa, ч,ro !j д,rя раз\1сткJI с двyNtя l{o J!чия въlдс]lсньт xирllЬlУ, ],Iтaк, вoт сss.кoд.t)rя РазN'еТк!r с тpе\'я кoлонr!а\1и: ээiy {паrgin;clx; рec.inq:c!х; fDIЕ: 1eп .,'..i:r.' аriа], s.is's.rit; i ]i'l.аf {.)osition|аi:]s.1lЕс; LerL:!рх; .cp:c!х; ]dr:h:1.!'i; .!аddirq:,5eп. c 0; пErqir:22р! с 0 1.!]i; ..rd.r

io]r:2p::o]id

+069;.oтd.j |OIi.r:i!х

s.tin

iг069;l

::viI]аa J] {п:Iqin.:oр:c' п:тgin.bot..л:,Bеп;] :l]'ri]]а'i1r inalgir ::'+с.!t.г.:

bоi:cп:,5еn;

f.ni

нei!-ht:!o1ii

i.пс

si3e:'75en;]

1 n а т g i n : 2 c i ] х 1 5 о р х 0 L 6 5 ! x ; р a c c i г ] q ; 0 ] ё r ; i < | п o r е j L 1 яс o з д а н и я P 8oii|,оo' ,,'|

1t7

htp ,M

Ьbd,tofij !tу|in].h4-рosniФ

SimpleThrее Column srep з . ьI дddй! а klt.mr8iп tо lh€ Фnlo dit thаi s Фsl] tо 1hеsиrl o( llt. lavjgаtiоп' dd . riфl Dа.вin t h J ts е q U а | l ol h е s i d l h n f l h eг i ц n 't o I U m n{. e ь а l с о u r тhс nеIl $ср is lo dо юm sФin iлd г0m lhс pig. iпlo а лrоЕ pю]cssiоoll]фkiлg]а!оUt, wc !осd lо Padфс сonЕЛlаsaу lrо|nlhc .Jg. оl $. dils, сnшgс thе црсt.iсе ftom ьоring o]d тiпгs. aпdлаkс Inе паvigа'o' Iфk i1п]с mIе i|lvitiig.

ьjР,*ч!!1:91],tl]"liiii!::l']9 A simlle тhree сoIumn LаYout . ..*

styles |at€ r . Nоw the |.уolt step4.аfeg ]оokg]ikesome.ne асtuа|lуdсsiqnedit, . тne nаvi9.aondiv has the top and Ьottom . n]е oаv l nБ hаvё b€ € o

оpeЛеduDаn.

. тne 6ntent has elt аnd .iqht pаd.rnqtо . Ine rightсo Uфn d]vhаs top алd lе1| паrginsto mаtсhit цp t*h t|re|oftФumn, аnd some фdd nq hзrьфn аddedto.eep . тn. tуpe hаs Фn€

smplе sryre5аpр ёd'

vаlietуn'br.wsеб.тhenуnаml. .epositiоnlnq оf the гi9|rt.о Umп is а lit]e je.ky in IE sI b!t}orks smоotnIy Lп тE s,5

P и с ' 5 8 г o т o в o P] а э l i e т к а И з т р е х к o л o н o к с д c б а в л e н н Е ] [ i и с r и л я M и

1з8

filAaA

:lviсontent jl'+сon.еit I

'. 6aз!'gjl'

pi'x.ini'r'rа

с'р?}l}!!!ь!

h11fonL si2e:1еa; j !

ifont

l -on."

o.

si2e: 'aеп;} '-:.

div*lilrьtco1щ

{position'abso1ute; нldthl125рx; toр:opх; liqrht:oрx; 15pх 0 0; paddinq:1em .5ё!п' bo.de!-toр:2рх Ao1id *069; ъо!der- ьottоп l 1pх solid *069;} пaФinl20pх

dlv'fIqhtсolш

!

{fоnt.siie:.?5ф;)

<]<тпnь/Ця те(.Ta пPавoii кojoвltи >

l,езyлЬтaтпoказaн нa Pис. 5'8.

Pазмeтка и3 тpex !{oлoнoкGзаroлoвкorvI Бoлъцrинствo Pа3NIеток I,IзтPсх колoт{ortтакяe и\,еют свсРхy oблa ка, .&Iя этoro мсl]{iнo пРoсТo дo6aвj,lть ещe oдив dl! дnя зaгo,oвкa Рaспoлo)l(ениe прa!оiI иxевотl кonоIrки' чтo6ъI пРедoсr'aвитъ пPoсr.PaEствo для зaгoлoвкa. Тaк кaк зaгoлoвок и o8,laсть содeрxиN'oro !Iс вьIРьIваloтся из o6щeгo пoтoкa дс'кyN'eнтa]пoмсстив эaголoвolt ввсРх}.!вы а!roматичeски смсстите o6лaсть сoдeP)тrимoIo вниз, испoльзyйте кoд PaзметкlI с тРемя !oлoнка1;и, т{oд()6авьте эт! стРoЦ сPaзy пoсЛе oт(PьIваlolllеroся тeта bоdy: < d l v ! d = ,h е a d e r '> < n 1 > т h . ес. o i l m n t e 1 ' c ! t l l i Е h n e a c е . < 1 \ 1 > < / . i i ! > зaтепr дoбавьтe эти сти,и сss, Размес:ги! их сPa3y пoслс сти-1ей bodу: di'нhеаder clf}lreade. {hеight:60рх; t]aсiqrоutrd.o1or:l.сс;)div+heedei h1 t i e т q 1 n t o p | 0 р х ;} PeЗyльтaт liьI ви..1llмпа pис. 5,9. нeo6хoдиN{o o6тrулиТь вePхнeе flоЛe з"rе!Iевтa h1. тa( кaк в неltoтoPых 6Рaу. 3еРaх' пaпpимеP в safari и Еirеfox, верхнеe полe h1 с']ещaеT зaгoловoк вниз' сoздaв2я IrекPaсивый пPобе-.1'в Intеrпеt ЕкР1orеr для Windоws этoгo вe прoис"

Bдoннoм пPtмePe Po.смoтPивoeтся сoмый пpoФoй слoсo6 сoздoяия Poзметки язтP6Х koлoнoк.для сoздoния ги6кoй Poзмётки вьlмoх6т6 д06oвить кoнтoйн6. Pы c:v для 06лoстЙ с9дePхимorо и 6oкoвьlx кoлo"oк и пPимeнитьдля них oт. ioситeлЬнoe пo3tцЙoяирoвoниe. тorдo эти элeмeнтЬ|всeгдo 6yдyт рoспoлoгoть" loлoвкo, и яспoлшoвотЬ фиксЙooвoннoe 3нoчeяиa в 60 п!ксёлoв нe пPидeтся.

Разпeтlrа яз ise]r '{o,t.иох.

зeloilo!кoll

1з9

htp://ww,bьd,..лдtY|rn/.h4.polil с9

. !з:,l!t!!зr

Adding

а ьёаdet

m.*UP. steP 1. a6d а ь€ i ierdivtоth. Itъ the lirst thing oл the Pаge sо li it9 thе lirst thlnq in the nаIkUр, |t фл b€ pа.о' the ln the mаrkuP, аdd аdd а dl! сoпtaiлiпg а h€ a dlпg e|eme.tl.r tЬe teхt. ln the сss, з.t thе hеight on the div а|d со!o. it!ray s0 we сan see it. dеаny, those side.o|UmG зrе gоing to have to move dоwn,,. Lоr€ m ipsum dоloг sit аmеt' .o.sеdеtuer аdipis.ln9 € | il' Aеneаn !eIsаP|еп сongUe DUIs p€ п епtеsqUe |асus fiiп9i||аЁ!€ r a. sфа|es odio, QUsque phаreйа а|lquаm Nu||a sсeьnsque. sеd tjn.iduni. QUlsqUeeu nis|- Phаs€ | lus mi апtе, а|iouetVё|l

Рис' 5 '9. загoлoвoксмeсrил в!иr о6лаоь сoдерхИмoгo' so ве бoкoвыeпанeЛиса6сoiютвЬ|м

oбЛaстЬ сoдеP]r.пмоro пoсле дoбaвлeния зaгoлoвкa aвтoматически смецae} ся вtiп. Iro Aaм тPе6,vется вpуЧнylo llеРемeститьдBе 6oкoвьIе o6ласти с a6сoлIо1' нъ!!1 пoзициoниPoвalrием, llеo6xoдимltr дo6aaить вьIсoтy зaгoлoвкa к иx текy. щIrм зrraчеIrиям соpi iivilnav {рosition:abso1!Еe; 1е:с:0рх; toD'60D*, viidLh:1509х; рadding:.5еп 0 0 0; malqiпl22ря 0 о 15рх; boldет-tор|2pх solid *о69j boldе..bott oi: 1!х sоtid i069;] j i v 1 i т i q h t с o t u m n{ p o s i t i o r : а l r s o 1 u t e ; \ ' i d t h : 1 2 5 p х ; t o p : 6 о p х ; r i q h t : ! р х ; m a r q i n : 2 0 р х 1 5 р x 0 0 ; p a d d i n g j 1 е i n. 5 e m j b o ' d е r - t o ! | 2 р х s o 1 l d + о 6 9 ; b э r d еr - ь o l Е o m !: ! х s o 1 i d f l 0 6 9 ; ] ъпеPь

стрaница нaчивaeт flрllнимaть нtяощo нaм фoPмI (Pис' 5.r0).

140

in&8.:! :. $.3.i;;'il

i}я;ll9r!r€ . ?lrа}f

'B,rпp

ц''

/ ] я h Ь b d , . о пъ D и k h 4 р o l t . Q

steр 2. mov. thesid€ сolumвdow.. Еither mсdifY th€ top prоp€ r ty or th€ mаrgin' toD proрer./ tо plsh t|rё.olumG dоwп Ьу аn аmouni еqUа|tо tn. Ьe|ghtоf the heаdёr. In thrs .аse, t ad]Usredthё tоp рloPertу оt tье . o l u m п 9 ,N o w | е t , ss r y I eа n d ( ё n t e r l h е l у p e , Lоrem iрsцm do|or sitаme! .о.seсtеtue. аdipisсlnз e]ft. Aeneаn ve sаp|en .o.9uе aсU5 frIn9l||. viУe'а, Duis pe||entёsqUе sоdаI€ s оd]о, QUisqUe pьаretа aliq!аm Nul|а 9сеleJ:qUe, sei tln.lduпt' alkque еu sUspеndissё .onseqUat сопd mеitUф eniФ. м o l b i v e { ' ь U l u m | o r е ms i t з m e t е п i m , N U ! | a

Pис 5.]0,тeneрЬ6оKoвЬe кoлoiKи распoлoxёвьlпpавилЬвo lalее дo6авим стили,1ля тс(стa заroлoвка. мьl хoтипt сделa1ь ЦРифт пoi1ель. чe и вьтрoB}rять тeкст пo цеrrтРI чтo6ьl oti oстaв:L]iся пoсеpедине стpaницьI пpи иJrleнеItии Рa3!IеРoв oкпа. Для этot.o задаДйУ тпиpинyьr, достaтoнryrо l:ля вме' 1цевия тс(стa' Пoсле этoro тuиPинa о6jасти загo]loвкa I'te Eе 6удст пo,vilo,]чa. нию paвga 'IIиP'jне загo,.Ioвкa div, ъrrсPъ дo6aBиil зпачение auto лелoltу и пPlвoмr- пo-пIo для въIРавlIивaвия зaгojloвка !н}тРи загo,!oBкa div. Зr]ачсн]Iе аLLto ознaчleт
tsот неoбхoлимЬIйдЛ,]этoro кoд:

r]vihеаder

{I].lql L : 4 8рх ' <:_иNсl!яе! с 60 длл кo[пrспсац!и веPхнe.o oтсlYлa->

t.асI!:rtourd сo1o;: lссс; р a d d i n g t o p : 1 2 p х ; < | . с y с п I a е !з a . o л o в o n в ' ' и J ,

Ра*erка

яз?}?x ':1t$з

141

div+nёаdel n1 1пidth: 18eп; <]-кogтеiiнсP&rяз]гo'овкa> '

narqir

tcр:0рхj

< l ! ' д ! r я е ! п o л с п o I ч о q ч x н l j ю>

< l - ц е н т p и P у е ! h 1в d i ! _ > пalgin-1eft:auto; ''cопiс <] стnль,a, тeкстa > ва!в l4si, сufstve; 1.2еп ьo1d

nа!gi!-!ig]rt:аlto; fonl:

<| цсптpируе!тскствhi

tёхt-a1ig!|сёnte!; bo!.le!:6o1id;



) тeпеРь нalra pаэl'еткa 'ьIIлядит, кati oкaзarroн;tpllс' 5'11.

htp ,vw,Ьbd..om^'yL n7.h{ posiliсй

ftl:ii:--.-*:-li:.1 steP з. stуle аnd сёnterthe heаdlng ёleпent' v'e set а width 'оr !hе е|ёmeпt go

we аlsо Use the t.хt"аijgn pr.рenу to.еnter the type yrithin its е|епent, апd sсle.t a differ€ n t fontfol а |iRle variеtY, тn€ h1 Ьоrder ls tеmporаn|y оn so уou сап se€ tne e]emеnt,spоsit]оп and thс teYt.entered Uilo.tunаtelу, iEs doesпt supp.rt аUto mаrginsi so tЬс h€ a dеr is notсenlсr0d ii IЕ5 . we1| aх tЬаt in о!r.lеan'Uр phэse, NUIlа sсeIerьq'e, sеd tп.idu.t, Qulsq!€ eU n | s | 'P h а s e i U sm 1 a n t е ,а | i q U e vt е | , v€ s |lЬU|Lm ыt аmetl сoпseсtёt0еr nоп, аnte,

PИс' 5.]]'загoлoвo( вьrровleн по цевтрy Пoсqe J

U|^,'Jго,loв.

в' с|lJ 6\Ле| в JРoo|l.I| пo Ur I P\ Bllе, lвl'.и!o'

lи nl

пIпРинъI oкIrа 6PaузсPa' Bсе чтo нatr{oстLпoсь сделaть- этo измепиTь стиrIЬ блo' aг lьI сдел?rqиэ,гo с 6оIioвь]r1!loблaстяrтl{: Boт Iтоляьlй сss.tioд: bccУ {патglг:0рx; lar1dif,g:cla; :on.: 1'!.т 'erdаnа, nтiаt, sanэ sеr]f; ]

rлAaA 5. 6Фoaaя Pззli!еt!{асрa*;{ць' jiv+ьeadет {hёiqht:4Eрx; teх!- а1i9п: сeoter j паf9ii.toр:0; padding:о!|l2рх;] jivilheаder h1 {пidEh:18em; ftaIgin.toр:0; mгgi! right:auto; maтqin'1efЕ:аuto; folt:

1.2еп bo1а 'сoпi.

sans I1s.' а.iel,

рaddinq:0 о .1еп; bo!аer.toр:,!х div*nev {рosition:аbso1uie;

sаns serif;

.o1id *069; bo!tle!-bottф:1D*

1ef.:0рх;

ioр:60!х;

bcrder to!:2рх sotid

ii069; )

ditfflav

u t i m e . g i n - t o р : о ; n a r q i n b o t t o п l . 8 e m ;]

iiv*nav

1i

l-,s,o"ten

вo11d +069;}

шidt]ri15Oрaj

раdding:.5ёп 0 о 0; паrgin:22рx о 015рl; ]rordeI -Ьot toп: 1рх solid

teх.-

{пa!qin-botсоm:.5ёm; folt-пeight:bo1d;

,,а,о:,,|,0o{ r, oх 0.d,o>: { div+сontелt h1{fonЕ sizе;1em,]

рaJo,

iont

: 0.6

size:.75eп;] -,

btp7/!w,bьd,.oп/ltyпn/.tr4 рositlon

тhгe€ сolumn|сyoц+ with heoder

step 4 . сl.ап.up tomp|эte. w|th al] the 'uпdionаl issoеs r€ s оJved, we са. turл off tЬe sv|еsше !s.d tо hе|P !s sёe whаt we wer€ тhe bасkgюlnd сolоr l9 removеd hоm thе d|v. 5nd th€ ьoх аrauпd thе h1 e]eme^t is rёр|aсed wjth tl]e sаmo sF/l.s w€ us.d o. ti€ side со|Umns, w|th а tiпy Ьitol top pаddlng tо с€ n t€ r the type b€ ф еei tлe two |ihеs' Add|n! ь*-diФ!e"|{ tо th€ heаder d|v с€ . te.l t€ hlh o|derveвiоn of lE. NU|]эsG|erisq € , sеd t|nсlnuni quisluе eu пis|. Phа!€ l 'u9 ml аnte, а||qUetve], vlstiьU|om sit вm.tl.оnseсtetu€ r Лоn, а.t., susP€ . dlss€ фnseqUat.onniбе.ruh enim, моrb|vest{bo:uп |o.еб sitаm€ t eilh. iluIl.

Pис' 5,]2 готоваяра3Mетк.

ilo69;

Рar!r.q!t{а й] трe:{ tofl'Ro!{

14з

с njr:tsaющцttlи зnefle'{таt!и я }Чи.т{aй

div*сo:ltenL p {iоnt-size:.8emJ ] diтнronLeni

1l ifcnt

divi'!iqhtсollmn

sizе: ,]5em;]

{роsiЕio!:absc1xсe;

widr:h:125рa; toр:60pх; rlghL:0рx;

пarqin|2cрх 1ipх O !; paddin-o:1ёf, ,5em; borcer ioр;2!t b o : d е r - l r o Ес o m :1 р х s o 1 r c * 0 6 9 ; ] civ+llqhiсo1umn !

solld

t069;

{ront sizе: '75em' ]

A Irа Рис. 5'12 мьI видим гoтoвьIй Pe;yльтат ЛPoстаJl дoвoльнo легкo' Ес тaк ли? B Резl'лътaтr Y нaс иI1еется пРиятнaя, кaк в ЕoвьIх' бРayзеРeх. вo всех !I надежrraя paзметкa' пPскPaснo oтodPа*iaeмaя пonyэleмeнтьl. стP)'тffyрные таIt и в стapьж. к сo){tа-!eнию,яeкoтoРьIе дР)тие тa6]rиц, с tlо[Iощью ляРвыe сP;ди мвolгll\leь дизайIrеРoB !r легкoдoстиxtиl'ъIе нaЕРимеP' aвтoматически вЬIPaвнивaемЬIe кoлoвкд и o6лaсти н!l,кнеIo кoлoнTитyЛa, aвтoмaтичeски РaспoлalaющIтeся вяиз-y, сoздaть с пo!1oщью сsS ч}ть с л o ) { ' н е eo, д ч э к o ь ] t э 1 о | l ' | ) , г а е r '

Paзшeтка П3 тpex кoлol|oк C плaвaющППlll 'лelпeнla]пП ri oчliсткo}| B след}'ioщeм flpимeРе мьI испoлЬзyем пять виз),альIrьIхэлeмeнтoв: зaгoЛoвoк' тPи I{oлolrки и I]и'qn.й (о,]oнт'J1)Ц, PассiцaтPивaeN{aя в этoм примePе стPy<тy. вoвa для сoздaнlrя слo]кнЬIх и пPиPa PaзметкIr ]цo)ке1 6ьI Ыекa"е"ъньrх 1\ъЬ стpari!щ. наrllа стРaн'Iца будeт иNIетЬ шlиРинy в 450 пиксе. лoв. rrrиРинa кa)кдoй кoлotiки сoста!ит l50 пиксeлoв. pядoм целъIo в данIioм пPимeРе яв-rтяетсяРaсIloлo)xевie тpех ltoлoнoк дРyI с дP}тoм nol{ зaloЛoвкoм и дo6aвлеrrие вirизy o6Лa.ти ниJкlreгo кoлoнтиryлa' иvеющегo д]иPинv. lPjницъI. Bнaчaпe сoздадим PaзпleтliT:

u п n 1 ' ' > T h е sdel v s п i l 1 i L o a t s i d e b y s i d e t c c т е а L e с o 1 r ] m s ' < d ! v i d = ' с o 1' 1 йiгh a 1itttе teхЕ Еo gi?e it sолe he:qh!.. '

,|44

lлAвA

5' 6аro6ag Pа'tylerка сrpа 'цьl

тhe objёсЕive .j.s that no паttеr :s tоnqеst, сhe fоoteт sits belotr it...


Whiсh ot thе three divs

, d.r - |-р-d
тhis

is

thё footёr


зaтем мьi дo6aвим liекoтoрыe p а з J I и ч а l Ьи t ( P и . - 5 . l 3 ) :

стиЛи дЛя BьIдeлеяия Фorla

d i v # h е a d e i { п i d t h : 4 5 0 р x ; b а с k q т o u n dс o 1 o r :* с A Р ;} . d",J.oл,елL"t.",Wi

lLh:,'орyj

od.<о-oшо-,o

o,:]с(с:l

d i v f f с o l u m 1 { w i d t ь : 1 5 0 р х ;b a с k q r o u n dс o 1 o ! : + F с с ;] divffсotum2 {WidEh:150pх; bасkglound сo1or: +сrс; ) div}сotшз

{ idth:150рх; ]rасkq.or]!d.сo1or:]iAд!; )

o.v, гooF6r l'jor|-'lьOр^j

oа,Iq'oL,d,oto!:!ЕAсj

Pис,5'1з' БаэoваяразмeткасгpанЙць|.кФ|'дыйэлемeнтвыдeлeнфoнoвыMцьeтoм

ра3$*r}{а tlз тР9x !{lt'о!.l!iк

с ялaiаюu!и'nrr

элee€sтаllв

и oч't]'{Еli

t{5

o нижниxкoлoнтитУлах HиxниЙ колoнтиryлпoxoхна загoлoвoк,нooн paсполагаeтсЯвдoль нихнeго края отpa. ницыи зaчасryЮсcдepxитвтopой вабoр элемeнтoвнaвигации пo сайтy,мeне; вахн;x' чeм вoснoвнoй oбЛаcтинaвигации,ЕолихeстpанИцЬ длиннЬeи иxлp;xoдится пpoкрy: q q y { н / й х 0 - o н т 1 r y л д o бodсво в ol в о а J а , Ь ' o б p а - - o , и o o г a с DJ а г o л o в к аo,д , а . o е L л иб o . o в а я roтораявoбь]чвoмслучaecмeщает кoлol]тиryлвниз'.o э.а бoкo"* rrа"e* наl.o,ъ;";
в нaPуш6ни6сл6цифtkoциисss в 6PoyзeP6 lпte.nвtЕxP|oler Anя window9 div ух6 oкPухoeт плoвoюцle элeм6нть|/ и рe3ультoтыyxe вьrлядяткot нo Pис. 5.15, нo в дPугих,6o,"" с';"дoPтoм' 6Poy3eрox,этolo ".""".,""', ";

146

rj.!дa.i

!, Ё;:*1ээ;'1

t]l.1?'l!l!]'1

}*l.ir;l!I]]!

Pис 5 ]'] нихrий (.лoHтиiyл oрel'lЙrcr зsерr !.HтeilHep d]'rпoKачтo Hич.го !е.oдерхит пpoстьlN{ сгJосo6o\! .леjaтц.-]то jrвJ'етсjr до6авJrеlirlе !rе]'Iаr]аroЦеIo l].!.l.ioJ11сi'lеPa тa сраз,v пос-че lroлoljoк .]]!. I] з1iте]1 пP'l\lенепrlе д вpеJ\,lЬlа.Ро,

clv

Iol

'F'l

:]

.'''ч

''lP

,

l i 1,||l|

эJlе.!1еп.

'i: |^rlo'J,,и:

id=''сonLеiLarеe >

тiеlе i].,s iJil f1c.t si... iт si.i. .о.Iсat. сcluпns, тhis is di! :l ljitL i tiLtiе ::)l. Lo :.i!e ]: s.ri гl.i!:iL,, '
:t. , o,s.

..njесt:!.

]s Lh.. r.

].ss

п:it.I

iсIi гiiсf,

::. iЕ's ot .ie

а dj'ffете!. Lhrеe divs


.o1.I] i.]-. ; ]

ir'i.ti]:]j.рхi.a.r!:.rii:.ji.r:+...i

t]..iёr: s.1li;

]

rT

':t*сo1urл1

i,idt]rjiэOpx;

]:тdсctunn2 {ilicihl1jr]!x;

bёсkqro!л'] .cloI:l]сс;

;ioaL:iefr:; ]

iа.]rg.oun.] сo1.r]+сЕ.j

ft.e.:L.:L,

]

:]'*сo1umnз {иidt]l j 15cрх; bасtgrLrurc ..tcт |i'1.ц]; i1cаt :1еr: ;] ::'|AtoоЕет {'inthi450рx: beсkg..u!c-..loт:i!]!с;} ::'/.с1ea!f 1oatв {о1ea! :botь; }

,!48

с.&** s. rаri|l]зr: р.зx1e:I* с?!:.а:t'l1ь]

Pис 5 ]6 ка( видим, нИхвий колонrи1yлвсeгдаoоается в саMoм нЙзy !

Cпoсo6 oчиGтки oлGeттa ЕIазвaFнь1й ! честь свoегo создa1сxЯ..ънп o-тсеттa (TЬn} Аtse.t' }afl\.'сssстeato. сalц)' зтoт с110со6испо-тъз)'ст гrсelrдоrспaсс:ai!eт для Bставки скРытoгo фРarI!ентa всxIaBaюrдетc кoвтсвтa (вместo дoпoлвителъIroro crv) в опРeдслевнoе N{естoв кoде, Затeм oч'lстк.l пPlNlеxяется к этoпly кoвтсвтx примeчaвиe

тoкoй спoсo6 прeдnoчтитeльнee прeAыдущero, тoк кoк нe тpе6yoт ввeдeния

Псе!дol.laсс : а f t е r пoзBojlяет зФ]aтъ стРoк'Y с!мDoJ1oв д]rя встaвки пoслс сG дePжиtrtol.o эjel{ентa. }Iь1 зaдaеtl lry)titrъtй.хoд сSS в качестве к'laссa тl зaтсм дo ни,*iе пРивeдeE пo,tIьIй кoд для стРанl16aвjlЯем uaсс к э,rеNtеijT}"кogтсiijrсp[ цЬrпPиlllеРa с !тспo-пъзoвaп'ем Nlетoда o-1сс,rrа' а pез)льтaт пoтrnзaн на Pис.5.17j < L D o с т Y P Е h L п - P L I в L i с ' . / ' , 1 ' l . ] с / , , D т lх l : . L l i 1 , 0 s : r i с L / / Е N .hL.p]//lil'."r,ii].orq/т]/Х[.a1L/DlD/xntfrt1 stтi.t'cLd'>
Lагq='en, m: :tаnq= en' >

сLeаrinq <п.Lа itt

f tcaLs ceпo .ёquit. 'сor:elt l'ре ..ntenL=..ехt,,L'.тL;


],.rq!аgс'

сor:еnt:'еn

us'

сirаrsе:=iso в859 1'' /> />

Рnзйeт'(а и'трel

t{oлaиэ!{ сn'inяаючПrnil

booУ {mаrgi!|0рx; раddilg:0pх;

font:

зnэ

e!*аl'!l' ii oч!'.iя'|i

1.0eл vёrdаnа, аIia1,

1dg

sans.serif;]

.]iтthеadеr {пidth:450!]x; baсiqтcund сo1or:iiсAг; ] .iv+сcntеntareа {пidth:450р: j baс]rqround-сoto.:+ссс; ] .]7+соtumi

bасkgIound.сotcrjiFсс; i1оatl1eft;] j .]ivнсо1umn2{!r1dt! t50рх; baс]iq.cun( сotor: tсЕс; f toet :1еf .; ] . ,1, '). aо,о .d o'o-: -.AЕ, г o . ., i1vtfoоteт

1'idth|150рх,

{ ! i i d Е h : 4 5 0 p х ' b a с k q т o u n d .с o t o т : $F A с ; ]

/.д,1ее !цeт спoсoб очистк" Тoни oлсстa *//* прoстoдo6аsьтe..Iа.с deаrfiх ккoнтейпеp!., кoTopь'й.oдсРж!тп,aвa]oщreлФrяты+/ .c].earf lt:afte! { ''''', сonten!l /+ тoчкaдoбaelяется в ковцe перeд саNьш зaкpьtт!еMdi! i/ /+.тPoчпьle э,eменты 'е Peaгируютнa свойстьo сlеаг */ heightl 0' /* дeiaем тaч{l_яeвидимoй*/ сtea!: both; ,/* кoEтeйнеP oчищaйтoчч' 1/ diE!]ay:

visiьility:

ь].oсk;

hiadeц;

/+ !аPаfiтл' вeвиди!oст'тoчки "/

'clёаlfix {diвp1ay! iцlile-ь1oсt;} /'rтpюкдiяlЕмас*/ ,. тpюк Д1я испPaыeяия 0ши6кп IЕ6 +//* сryъIваeтф ]Еjnас Y/ .с1ea!fi*

{diвplаy:

ъ1oсt'}

r htпl

.с1еа!f1*

lЕ.mас *//+ коне(oqистки oj.епa /* кoяецскРъ]тия'ц,1я

:liv

id='hеadет'>тhis

is

-j:n

ic='сontentaIea',

с1aвs-''c1ea!fix'>

tnе heаder
.jiv id.'сotDmnl'>т]resе divs roп t1oаt side by зidе to сreatе со]umns. тhis :r d1v 1пiЕh a 1i.ttё teхt to gi,е it sone hеight'..
::]:' id. 'сo1uпn2'>тhis is diт 2 Nith a littlе тoте tex! so it,s a diffеrent .ight Lъаn thе otheт iwo. '.сhe tniтd со1umnnoп is thе tonqеst so i. sеts :re tоotет lcsitioD'
::irJ id= 'сoilmnз '>тhls veтsi.t uses сhe As1et. сleaIinq пеthod шniсl usеs ::. сss lаtteI рsuedo.сlass io ёdd сonсеnt aлd foтсe tlе сcrtаinеr .o :].tcsе сIie floats, and oliУ requlres a сtass to be аdded to tъе паrkup, ].s.е;d oi а 'сlеа.iiq" etеФеnt'



*/

<: еid .criеr:.:тrа
id= .oO.'.r :].l.

i:

i Il]е :с.:..]<]irri



P и с ,5 . ] 7 g l r y а n Ь H oр . з н И ц . l э з : v . r r э i . з д e . : n P / ! е i ! ! . r о . о 6 o ч И . к И o л . e п а с пoмoпlт'кr кotl\tен'гaPиев \lьi пoя(.нr![! дaнlrьlii кOд' ЕсIlt въI хoти,fе 6oJrее пoдРо6rio уЗIтeтъ с)6 Этor1 спoсoбс и lteхi1пIз\le с1.o lе'rс нa неNt !ЬI }toясте нaйтIt (rilr.qPositbnisеrеlthing.сolr), гosirion rs iтечtlriпg мaссу пoлез]Ioй пнфoPм.aцln{. да rroвсе яеo6язaтельнo звaть, tla сaмor1деnе. для !r.п nova!Ц o]I Рa6oтaеТ. мoхIro пРосro встasllr.ь етO s 1а6лrrry с,.]flей 'l дo6aвитЬ lLr1aсс Е Eу)tolo}ry' эnе!1еI]тrl для Windoт! Bo псPвЪiх. в 6рaузеРе lDtеЦrе! Ьiрlorеr Ешe парa эaire""",lri' этoгo и lle хoтя 6ез oч'i.т(l{. эjiе]lенты п-!aваrолцre в сс6я 6,vд!"r вюrючaтъ div при рa6о'гe с lr:raвaющr]]1l! э-!еI!еllтa\]'t t} 1Е и}тer:тe сu''', в р."',-.a,rc лo,*"o .''o д-пя фdхnuчеL 61'1о тalirl]t niе в дРvги16Pa}зеРaх. 'u'i"лит{],llе 'o' ' '"ду_ oдин из;iв\\ 'rспojlьзvйтс ъiонrсiillel) n эЛеrlен].оrt плaвarolциx tro?oдo6aвлснйя вo-втоРьIх' lЛiегп.t Еtр]огеr дoвoльнo в даrп{oй l]llэве сiо.o;o!, эr.llс!!-r.Lt1rr' инol]да oтРсзaя !l,'яlt{юlo частЬ странво !едет сс6я . пixsа|rпl1!I!l

Ра3мe't(а

иr rPex хо'otloх

с n'ngat'Ч!'*!}l

!'*.l!ё}тairi{

!,!о'|'tткoй

151

lлемeн Ioв. сojеpжаl{tц ганJ г'o.г'Bпpltvёp( кnдa. Чeтoдoц oл. l eтlа мы пPедvгtr'о гp.ли l пeциа,1LчьIй 1Pюь ,1ля o6чo)A.qе;иq . Гoгo дефeкта tЕ. чтo являeтся еще oдIrим aРт}a'eвтoм в пoлъзy дaннolо спt]с()6а, o6Da;тe вни. v]llие, ч]o две.'IPUки l {oA{vрЧгаPиямиrак;{еявJ|нюj.яЧаl.ь'a'JтoIoгРюка. .гaк чтo Irе yдaляйтe их из кoдa'

l

fжege 6' Расщиpeннaя pа3шIeткa стрaниЦьl ttа)чившись сoздanaть пPoстyю Рa3!tсr.l{i пеРейдсм Ii следующeмy этa.ry. Bвa.la.

. l е | I c w | ! . ч l o l f а в j ' , ' и P d . . , 1 е U и| ' ё ^ | , o в ы e и i ' б P a , ь F I ' и л ' к J ' ' . р ь | c t ' o г ) л U ж и . q t. {,{" vьr l tнrЪv, к'ь дсЛаГЬ jожчь|'. ,.oJ.oнк|' и |и6кие pJз!.г. l1poпoРции aдаптиPуеl'ъIе -"лaвaтЬ '*' ','; Pa;метт{иj ltеняtoщис "*..-. |и ol P |INPPJUЬнJ 1,!авn вь! 6)дс1.е o6Jaдnть зrlaниями, яеoбхoд'lп!ьтм1r Дrтя сoзда. Пpoчитав:эry и б,.rетe гoтoвьlе пe сss'сnйтoв. ния дoвo,rьвo сno)кпьrх и oчсяь пPaкт!гlllЬlх ( ' , l Р п n u l i : , | а q е ,в х o 1 o P o l t v L , ' o J : t а д l | мP . J I L н ь I й( а й г , l I l Реl'

Pазпtьlшлeнияo фoнoвьlx вo6paП(eниях

два спoсo6а д06авлeнияlpафики сss и гpаФикив кaЧeствe фонaдляd'! с помощЬ'о с тoЧкизрe|иЯдизaЙHа' добавлениe

сл\дrae. в Ka}(доM KoнкpeтноМ в видeсoдeрxиMoгoв diт XHтML иМeeтсвoи пpеиMУществa HaлриМeр'npи дoбавлeниибИoгрaфИирУкoвoдитeляФирМЬlна коpпopативньйсaйт' eгo фoтoгoaФиЯЯвляeтcЯнeoтъeMлeMойЧастьloкoHтеHтaи дoбавляется в paзмeтку с пoмoщЬютeгa inq, с дpyгoЙ стopонь|'ecли гpаФИKаявляeтсятексryрoЙ,испoльзУe. мoй в кaЧeствrФoнa, ee слeдyeтдo6aвлятЬс пoМoщЬЮсss,

тiБ

qф*

AFщ

ф

ФG

"-

.qэ

cl.

@

Gь'

E щ

d,.-, b ф;'-

.;;;r

l;йй;ф..

!i ddй;;;'.l

*l l"*rшeниялoгичнoсти cтру(туpЬi peкoмeндуeтся хpaнитЬ грaФиl: ::^:.uз:::.Y' iу-сoдeрхимoe и графикy с.ухeбнУ|o paзличнy|o

в *"-*-", B"д; ';." ;"йъ;;' р e u ] и v / - м F d / т ь o б л и . ( " , r а с о \ o a н и в с o а e p ^ и v o . н : м ш"р, ",-.'661дg1д6. | ] а o ч н o J а м F . / т a . I a p y о в с п o v o г а | e л ь п y юl о . /и. у овои, дoбавляйтe Фонoвыe изобpахeния с лoмOцЬю (jss, 6сли мы

'l14

глA8A6.ра!:I*!{Pr8нa'рnзйв!i{асра'lиl.lь'

oснoвьl фoна llесMoтPя нaнanичrre нескonьlrЙх свoliств ' свя3aнlrьIx с фoЕами. вамлoнaдoбяT. ся лиш! двa| baсkqround ii0aqе и baсkground.тepeat' сoвe'

URLк 6oнosымйзo6рoхeниямследуeтyкoзoтьoтяoсиleльнoсss-фoйлo,o нe x|.lт]ЙL.

Cвoйствo bасkqj.olnd з РахеIIия' сnнтaксис baсkqround дaвaйт€

_ URL ima-ое мoжeт имcть Toлькo oдlto зIraчeние

iпаge:!т1(!тУi:

( ,!зo6раяe;иD / и. oбраxеnие . Jрg)

Дo6aвиrr изo6PахеlIие

с пo!1ощьто э,гoIо свойствa

bodу {marqin:0рх; рaddinq:0рхidiоntj dlvtmaindiv

div*паindiv

1,Oem 1.етdana, аilai'

{bоfdeI: ]ря sо1id +fзз; 9addinqi25рx;

ьасkgfoцld.image

: uт1 ( inage sjrёE

р {сotoJ: нЕ!l;

I.шо6.

/ luсy'ьlu!

iori.пeiqht

v-sпal1

:bo!d; ]

. j рg) ; ]

в кaqестqе sans sеrif;)

фolla

Рr:ff

l.l,r|'!;g!l';ji'

*!!i}'ь}i('вl}6Раltjaн'!nх

155

Pезyльтaт п1ьIвlrдим нa Рис, 6.1' Ес.ли фoнoвoе изo6Ра]кеlrиe ilе}l!шe кolrсйяеPaj пo in1oшaнию olro мoстит. .я и зaлonЕяе,I ltoIiтейIIеР по гoРllзoнтijпt и вeРтик:rпи. чтo6ьi кoilTPолиPoватЬ Jтoт тIрoцeсс пРиlleняется свoii.твo baсkgro.ind repeat, tIто6ьI изo6рa)l.ениe 6 дин pаз' т{у,{нo oтклIotlить 3a. !oстку' yкaзaЕ свoйствo baсkground rереat сo зrraчeниеrя no rеpeа.: ] l v Ё m a i n d i т { b о I d е r : t p х s o t i d ] i E ] ] ; р a d d i l q : 2 5 D х ; b a с k q r o u n dс о 1 o r : # 6 6 б ; . a с k g т о u n di-m а q e :Ц r1 1i п э q es ! . е s / 1 u с y n i ! т . v s n а 1 1 - j р g ] l b a с k g l o ц f l d . :epeаЕ.no.!eрeat; J ъпеpь

стPаIIицъI вьтIлядит !aк Irа Рис. 6'2,

:ис' 6,2,Указавno lеpeatдлясвoйсгваhaс]rgтolld

оKyизо6рахeвия

TепеPь изo6раJкeние пoЯвляется т{aстPaницeлишь oдlrн Рaз' пo 1rtoлчaниlo .нo Bь1вoдIrТсяв веPхIiсм,eвoм yг,!}'oкнa! llo егo пoзициIо м :}l. ПРилоrкенrlе A). Есл!r мь] задaдим 3яaчеlrиетереat l..спя свoй.тва baсkground-rерeaЕ, изo6. : ц€ i rие 6yдетNtoститЬся 1.oлькoпo гoРи3oнт&т!i (Pис,6'3). Ес,rи )ilе '-"""'" :етrие rерeat.y' """ пo веpтикa,ти (pис. 6..l). Фoнoвьtе изoбРa,{elrия \{oryт пРидаlь вailleй стРaницьI I-T,би1rJи oТкPывaют :Pод вa]!1иl1oвъlй I'IиP PеаJЦзnцпи тDорчеспtх вoзr]oяЕoстeй. oдЕaкo слeдyет

155

глAзA 5. PасшиPeяяая pa!м0ткa .rFахllц}|

Pис 6,з,сnoмoцЬoзначeнияreрea.

х мoxЁo tамoоить изо6рахe!иe пo гoрИзoнrали

пo вepтикали изобраxениe тepeаt.y,мoxнo зaмостить Pис.6'4.указавзяачeниe н}'rnro oче1Iь oстoРo)кi{o' Tак I{ах уч!rTывaть, чтo вьI6иPaть фoновьle изo6Pajйerия ч,геl{ии сoдeР)кимolo вaшеЙ стРaницьI. при rать пoсeтlrтелям oвlr мoг)т гIoп'е кoвтPaстнoстЬ сltизив пpo6леп{у мо,кrlo, иiioгдa pепrить эт} фoнololo изo6pa)l{е егo яркoсть. lrия и 3aтeм сnelкa пoвьIсив

{'}зiа''€ г i:з.ni'x'.'i*]?)i*,a}&iр'!!!.'1tl!фi.a!{el!a

1'7

Coздaниe paзмeтки G пoлнoрaзпIepнbllvIи

кoлoнкaми ?ассI!oтрев :i сoзлaни}o

6nзoвъIе вoпpoсьI о фolroвьIi изo6P,LЯtепиях' vьl мoя(е\t гIеPсйтл стРaIIиц с пo'llIoP;iэiцePI]ьI}ц l(oлoнками, несмoтpя нa тo. чтo , 6ьrть6'' ьшe. lеtt ||х'oleГ)n/\|lf vы'tn^PvlU',,. oи.I ]юзию тolo' Чтo oни rlPостиpaются вllllз дo самоrо кo-.rofiтитуnа- ПDи эToм вaм o , I J д n 6 и r . я ! | .г o , r Ь J o в ' | ь l р а ф и ю и | | . P е L , а . U | ! ' ' 4 . " ' ' , - ' ' ' ^ " , ' i . ' ' , o , . , . ' ' rJмeEять цвeт пли l!иРиIr}l И'aк, воuРrживши' ь r ш ^ ; ,( " \ l s . ' | р , ] o n l г \ к o r ^ n u t i

Лorкньre кoлoнки ]rссматPивaемый ни)ке пPиeN{ 6ьI-,lиз()6pетсн /{vгoм БaуvэнoNl. д ]l','lеli'испoльзolaть сoэдalrнyю в llц9дьIд'1щст|iглa]re PазI'етry с тPе rr' кoтоPylo гIPевPaтиN{в шa6,]он с лоr+tlrыI!иIroлoпкаvи' нa 6aзе дaявoгo пIa6 :oнa вы сiтo){iетe со3да1'ьпoлIioцеяЁъIй сajaa пPимeчониe

вьlмox6тe зo.Pyзитьщo6лoн плoвa6щeй рo3мeтки с тPeмя хoлoнкoмя с.oйтo www.ЬЬd.сofi/svIin'

BIrа.Iaпе изменим шиРинy стPаяицьl Ili 774 пIrкселa. сТРaвицd Taкoй пIиРи :ы lrеплохo смoтР1Iтся яa мolrитoРах llPактичeски с лIo6ъlп! ра3pсшением. зa]:\l Pаспoлo)ким сe пo центРy oк1rx' так кaк пo 'nlojlчaвиIo стРаЕицa 6r'\ет oтo

lrвolo \I IJ oк|JJ;P/'-еР/, ч гooЬI JаJатЬ шlIPiю с1P,аиj|ЬI, viанем Uиl,иь] в?7| lи,,.. л | Lrc o6j, . 'и oлoнт!IТ}na' DiиPt'lЬT кoлoвoх, чToбъ! : сI}INIе ot{а сoстaвллла 77.1 пикссла. Тaк как мьI сo3дaeм тaкoй шn6лoII в первьIii Рaз, 6}дсм псI]oлъзoвaТЬ солек. rP с.J звездoчIto,i (+)' с пo!'oщью кoтoРотo (кi( пoказанo пи'{е в пPимеРс) ]вулим пo]rя ,I oТст}пьI для 3..x эjlеlleвтoв, ПРи lleoбхoдllмoстli мъI !к.1,(eм i 'tIJьlе lloля и oтсn'пьl вpуЧEl'lo' дo6ивпri{сь' тaкnNl o6Раз011. oдиIrакоloгo oтo. :treхeния стРaницы во всеx 6pa1зеprr, тaк кaк пo-ця 'l отсТ}nьl по D{o,чавию ь по.гаJьо\п B. t к Р,l|,г l|nu Lo.l: "ыr :iI {п;тg1!:0рХ; pаdn1nq:оDt, font: 1,0сл vеrd.na, аtieL, :als.sе.iil] ' {пarqilr:0; эaddtlgl0;} ''+neаdеI { ! ' i n t L : 7j 4 р a , i r e r q h i : ] 2 р х ; L ] e . k q I o ! n d ' с о 1 о ] : + . i ! . ; : . х t . : : g n : с е г ] t е т ; p а d i i n q t о р : 6 p х' }

'18

IлA3д

$. Рё(ruнA9N'*ая рaз!!3'4э

.т}а''ич'|

c i Y i с o 1 u п n 2 р {i o n i - s 1 z e : ' в e п ; ] (ivlсontеniaтeа

{ п i c . t h : 7 l 4 р x ; b a с k E т o l l d - с Ot o I ; н г Е F ; ]

oiv+сoi!пn1

{иidtn ;150рx; naсi-oroln. сoLoт :]iссс' f t.EL |1еf t; ]

div+сo1uN2

h i i d L h : 4 5 4 р х ; t ] a . } q т o ! n d с o 1 о . : t Е F ! j f 1 o a Е: 1 e f t ; ]

divtсotuпnз

{'ititL:1?0!x;

bасkзro!nd-сo1cljЁDDD;

i1oас:1eit']

divtf оoteт {пidtь: ??4рi; ьас]iEIo!.d-с.1cr: +гAс;] /* д;Lпеeсjeд),eтс!0сo6 osисткn ъ!! нa Pис, 6'5 изoбPа]кеira

*/ oлссттa' o!!саниe кoтoPoгo .одеpвmся E г,aве 5

пo-ц}чи3lIIа'ся

8 hпpr/ф,l,ьd,.om

стPalrиц:t.

/lп| п^h4.Oos ioiingk

dl

m. keУ сnа.q8 Ь:1ъ ьeеn mаde theфdфlгq.o.JПe. "rd."rl

тh€ ; lddъ

ф|umл ь фw фt bп

.ditiner thаt ]ro|dsthe сo|lmnэ, wс wi||сr0atet|re]||0'on thаt

PЙс,6,5.г]o(ашаблoн вЬ глядиттак

TспеPь нaN! г1oЕaдo6ится сoздaтъ в .A.dodе PЬоtoshoР или дРугoм rpaфичес. кoтoрoе мoжнo испoлъзовaть в кaчeстве фoнa. кoм РeдактoРе изo6Рarr€ н llе' {ir гopизoч| Йыlыи oтDeJoк фoча для тPех И з o 6 P а J к c н и еl o , 1 ) к кoлolroк. сoхРaнllTе изo6Рa'(еi]ие в фoРмaте 'gif в кaтfurorе' ва кo,roPьIй мollo пoNт€ с ти]rи иэoбPа'I{еIlие в кa. )'ria3aтьссьiлIty {:o стPа!!ицьi. B дaпIloм сл'чаe llьl чTo и хнTN1L.дoI'TNIент. нapис.6.6 пoкaзa. тanoг fuagеs.pгеs' пaтoм'rеyРoвве' нo этo nзo6pахeние' ]rзятoе для вaDrядвoсти в ч9Pную Paмкy

P и с , 6 . 6Ф o н o в o e и з o б р а x е Ё и е д л я т р e х K o л о н о K

'oзда*t!"ра}!|.!n'l..ir'l$*Ё*з!eрI.:E!n:'lя*'e}iram'

l59

так кa]{ 6Рayзеp пoвтoPЯет фoнoloе llзo6paжeErlе стoлькo рaз! oб!oд'IN{o. мьr мor+iсrlиспo]rьзorr]тъ изo6Р;L,(енtle вЬIсO'гo;Iвссri' l гIиксeл. Bдaн' нov слyчae мЪI со3дaли иЗoбpfuкеllirе вьlсoтoй i2 IlLlкселoB' чтo6ьt oнo дo!oльIJo быстpo заrPy,кajo мелкoej чтo6ь] 6ра,vзcP достaтoчнo 5ьiстРo смoг пPoсчитать чис'o lloвтoPя!'циr.с' "зo6Pa*е!i;й. rеперЬ вРl{пo измe}!ить сss' дoбавtjть э,i.oт эJеlleliт к diт соnteniarea, сo-]еP)Iiaцel{утpи кoЛotlкт,r'i] з];1aть DсРтикаjьь]ro замoсткll ba,kо o, d

o o :.,

b a с k g l o ц n d - i п а q ё : u т 1 {: п а g е s р д е € / f а u J - с o l ф s .

gtt J ;

bасk9tou!d-tepedE : !epeаЕ-v; Тbлeрь IIra6лoIr !ьIглядrrт, каlt пoкaзaнo

iltЕ/,М

нa рис. 6'7.

фn'фm/sryrn].t-4.pшnb1и9GъI ll

rи(, P и с ,o,7, 6 , 7эJ.месив ,амесивф lров о в п. зeртиGли, МЬ пoлy{lЛи ил]]ю]|юлpЙ.yrФвИriр€ x (oлoнoк сPaв}rив Рис. 6,7 и 6'6' ltьl ЕlIди\т реa'riьнl',о !ысoт\' бoкonьIх пalrеЛей, нo' зa. ]oстив фoнoвьIе и:]()6l веPтпкал1l trlJ сoзд,rи илnю3'IIo пoлнoPaз' ]сРвъIх кo-тolroк, Тrк кali дл,r Iioвтеi,lтleP2 ilо-'r.,"uк за,lа", oви.'кa, orr' рели.rиof.яjr,i{ДЬlй|''Ь,,t]Ь..,(n.Ры||l'..Uдl'oj ъпeРь rIPиlL.lo вPеп{я вьiРовl{ять Ра3I!eтку пo цeнтPI в окrIе бPayзеPa. пo. ;т}Iol чтo oтrlеп].pиpoва!нaя Pазметка шиpипoй 774 шIIiсе,]a oтлично отo6pa.

::treтсядаJ{еrrа ]тонитoPaх с pазРе]Ilением8001600]rикселoв, flля вьIpaвнивa-

160

IлA8&

g. рЁr!:j$рe'|яая pа.lR€ т кa

oран*qьi

нпя пo центРy вail пoтpебyeтся дl)6авить ещe один div' вмeщaющий B себя все

2005 /D€ с omьey' les'PЬoнo пPвмeчoн}le пo дoнsь|ясoйтohtto://vvv.theсoUпtol.сom/slois/ пo.пpexн€ м у Po6oтoDтс рoзPe. weЬ.пoльэoвoteлeй 2005 .oдo 20% д6кo6Pь шeниeм800160o i'(сeл06.


Lemp1аte

с1аss=.'сLеarfiх'>








@inЙa!F>

впимониe

Boxнo эoдoть lлo6oльный (oнтeйнeP div, PoBный пo щирин6 всeй Poзм€ f le, чтo6ьr пo 6oкoм oсз,oвoлoсьлpoоpoновo для дo6oвлeвия ioлeй. 3oдoв osтo. мoтичeский PoзмeP пoлэй, мы смedим Poзцeткy в цёнтP oкнo.

пош пo 6oкaм rлo6aпьнoгo div' Пoслеэтс Зaтeм vьl дo6aвим aвтомaт{ческиe гoра,NlePo6oих|loЛеЙ6lде,vrк.има-тьньrvвoв.ехoчнa\'ч|oIlPиведе|квыPаB. сеpeдине oкпа. Такrкe пlы дoбaвим к тe$J ]эody свoйствo ниsallиlo стРaниць!пo tеxt.а1iщ &ця вьIРaвнивa}Iия стРaнIrцьI в бoлеe РаlrнIdч веPсrяx бРa}веpoв. body 1паrqin:0рх; рaddilqj0рa; text.а11g!:сelter; )

fon.:

1.r]еfrverdanа, атiat'

sans sе!1f,

прияlёчGниe

o6Poтитe ввимoн*e, чтo IE5 дЛя Windows вe лоддeрхивoeт фyнкциb oвтомdчeскиx пoлeй' BыРoввятьfiPoницyпо цeнтPy для |Е5lwin мoxнo с пoмoцью к сeл6ктoPy bоiу, нo тoыe пoтрe6уeтся дo. дo6oвлeяЙя iсIt а1iзf,|сеriеi 6oвить ieхL .tigf : 1:f . кdi!паirl'.a!, чтo6ы nрeдoтвpoтитьнoФёдoвониe .вoйфво всeй Poзмeткoй,

5i7еshаVeьeeordiedtorePъct

Pи.' 6,8' пoмeс1Ивoблаоьза.олoьха' три xолolКи И обЛасrЬiЙянего KorrовтиryлаJ мoхно P Ьp o ь i c l Ь с r D э n и ц n y o ц е н r р yo l н а o6рa|l e !!иilатn,ie. что ,1IьIмo'-liеil пРoстo лс,6ав111ъ о rс1]тъ! к сaмпм div' iв]rjlется а]rьтсPн.tтивны]!I с110сo6.,!l !!tР:lвнивariиЯ' llo пРп этoм nсплъlвaют !'tшя 6РaI3с]Pов в o6Pa6o11lе 6лoчEo;] мoдели (сIt' ljавI4) ' в сoвмести

ч'гo раз.

.]Ртаltи бР1lЗеPaх к !lир!tЕс iiпи вьIсoте до6aenяется Рaз]1сP лo-пеli rl oтсryilo! 1]е ента, a! 6Pа\зсРс jnl егпеt ЕхPlorет 5 (и 6,i] в pе,ки]Iе Д]я \^riпdoliБ пplr Quilk) orстiпов Li пoле':i Раз[IсР o6]]aсти tiotlтеllта 6)'1сf сl]тraться' loбaL.1епиll

t62

сoвёt

rлAвA

6. p*!цнРз.|t.аg

pазfler-вa

fiрal|ltq'l

нeсмorPr нo нoличЙ6пРoо,oй yлoвки, пoзвoл'юureй o5xoд'тЬ эти pdзличия,зoчoсry6 roPo3дo лo.чe и.пoльзoвoть nonя дnя влoх€ н нoro элвмeнтo вмeсo oтстулoв для кoн. тeйнePo, чтo пoзвoляeт пoляoстью из6exoтЬ вoзя!кнoвэнlя вoпрoсo o6 o6po6oткe 6лoчнoй мoдии'

Boт 'oлпъIй

сss.кoд

eIя liaшeй

стРaвицъI

в тel'yдеп{

сoсTo'нии:

<]DoстYPЕ httnt PUв!тс'

//iiзс//Dт! tвтlIL 1'0 stliс.//ЕN' ''httр://ш,п.из.org/тR/xh!ftl1/Dт!/x]rtп11 stтiсс'dLi]'>


| 1 а n q = 'e ! ' ' >

a'.6.а

1LI o-6q

<sЕy1е Еyрe: !сeхс/сssi > body {цarqin:0!х; teхt-a1ign:сentef;

раdding:0рх; tolL: ]

1.оeп veтdana, ariа1,

sаns 5eтif;

* tfrargin:0; рaddinq:0; ) divimаinwтaр {фidth:?74рi; а1iq!:1eft; ) divthеadeт

п а . q i n . 1 e . Е :а u . o ; m а r q i n r i q i t

{и1dЕh:774рх; height:з2рх;

dlv*сolumn2 р {font-sizе:.вёm;

:eutc j iext-

] r а с k q т o u n d -с o 1 o r : ] ]с д ! ;

Еехt

f,аrgin:1еfr ]0рx; ]

div*сontentаrеа {пidЕh;?]4рx; bасkgIound сo1or:+FЕF; baс'.g1oxпdi m a q e :u ! l ( i m a q e s ] r e s / i a u х с o l L m s . g i f ) ; b а с t q т o l n d ! е ! ] e a t i l е p ё а t . У ; } div*сo1um!r {width:150рх; baсkground.сotcr :flссс; f1oаt:'1efr:;) divflсo1um1 ul

{па!qin:

20!х 0 о 26рх;}

div{сo1m2

{widih:454рх; bасkgIound сoloт:+ЕЕЕ; i1oаi:1еfi;}

div+сo1ш3

{иidth:1?0рх; baс]rqround .oloI:*DDD; f1oaL:tёii;]

dlv*cotumn3 p {marqin: 2орх 10pх 0 10рХ;] oi'дioo.еr

ri-d,h|]

4рхj b",\g oulo.

/* дa1ee Федуeт кoд .пoсoба oч'ФRи Tonи onсflа чnalььd.сom^ryliп)+/

,,."-:9n:,...,,":j D".d,.о (см. глasy 5 илЛ зr.p}зите шаблoя с сaйта

с3з&ё'{'e р*aиerя'l ( г{8,!l.opазйeря

'

'63

<р> <1i>I,ink 1 <а Ьrеf="s''>!iпk 2 <а href= 'ff'>!ink з


ф


">

2р, 'сoдёpfшoё а6.аца,,,, р ,

< d i v i d = " с o 1 u n m з '> ,,,сoдерaш.oe aбзацa.,.<,ip> < l --еnd

сontеntaтеа

->

dlv id-,'fooFр"'..ъ.s i,

,r.


паinwlaр

too .!

о,

>

Кoлoнкш дrrя rи6кoй цeнтpиpoвaшнoй pазшetки ъпеpь дo6aвим лo'.rrьlе l.oлoflки к г!a6кoй РaзMeтке. Если вьI задa€,гесь вoпрoсoм' как цeнтpaльqая кonoнкa кoцтeвтa Mo]iсет меIiять Размep и стaтъ ги6кoй пРи нa-rичш! фoнoвolo изoбpfuкевиЯ фикс}tРовafrнoгo paзlrеpа' oтве.raем - никaк. Ho, с пoмощьIо прoстых измeнeний 'тмеIoщейся p здaтьIи6киe

164

lлAa,r 6. BeЕввРзgtiэ' pаэмe?'э tт!аfia{&l

Bнaquе

.oздадим д!a orдеJlЬtIьIх изoбPa,r€Irия' ка'!дoе из кoтoPьIx будет ис. е фoнe 'qпякoлolroк, зaтеlt дo6aвиl{ втoрoй кoI{тейIrePdiv, !I!ещаIoщий всe тpи кoлoнк!l' с llдевтификaтoPoм сonЕalner2- задaдим фoн Ле. вoй кojloнltlt B l(aчествe фoнa oднoгo кoнтейнePa с пoмou]ью свoйствa bdсkground_рosition со зваqснисм left' a фotl пPaвoй кoлoпки дo6aвиl{ It дP)тo}ry сo зпaчеllиеi{ тight' тепеpь oбе liotттейнерl.сo свойствoм bасkqround losiiion 60кoвьIе колolrки яeqя o ид€ I 'тиtlньIMtt и llе за PLlяьI цснтРальнoй кoлoпIш' нaкolrец. изNIеIr,{м Рa3!lетьT тaк' чт06ьI цelriРaць. ная (олoEкa мeнялa Paзмep пpи изменelilrи oкнa 6Pa}зеPа. B дaннoп{сrDчaе пPoи кoд, l,с!

ULЕ пPив(l

o|.иl ь|ватьI|еo6хoдимыедeй.Гвия'

1. дo6aвипt втoРoй кoнтейяeP div вoкpуг кoJloнoк. o6РатI.rте внIrмaниe' кaк | | o в Ь | йк o j l г e й н е Р в 1 o } r е н в и ! е ю щ и й L Я :
6,

р,

o.,

с1as5='с1еaтfiх'> с1авв=''с1eаlf ix''>

<р>





< , , d i v >
еnd сonЕелtarеa2.-> >

This is < / c i \ , > <1

end meinпrар

2. Tе!срЬ

the footет
>

сoзl{адиr,{ lrзodPa)кеIrия,arlя

испoЛьзoвaвия

aзаЕo пa PIrс.6.9'

э кaчестве фorrа в 6oкo.

}'nяoж*ая.вб..аярaз&!€ r !ia

t69

rtt:rr :t:i,.:..,. rl:li::l:a:li:t;:ii:i:ti:it:].r РИс' 6,9, два Изoбрахeниядляфoна бoкoBь|хкоЛo|oK

3' лo6ави'{сss rUIяlB)4{кoн |eйнePoв: div+сontentаreа {width:??4px;bасkqrошdсotoт:+!гг; baсlgIould:

url 1ifrаgesjres

/ fаrrx_t е iЕ . qi f ] тeрeat

y ioр

lеft;

}

d i v f l c o n t е n I a . е а 2 { w i d Е h : 7 7 ц р х ; b e с k g I o u n d- с o t o r : f l F F F ; bасkg!оund: urt (imagеsjrе s / faux-т iq]rt , qi f ) lepеat y top riqht; лзo6Рaке!ие' тип замoщeяи' и пoз!цЛю в oднoм nравше+/ } с пoмoщьlo

этoй кoнцeтrции

ltoжнo

/+!ьty(aa!'

сoздaвaт

Haдeжнaяrи6кая ра3мeтка ПPи пpеобРaзoвalrии фиксиPoвatrиoir Paзме,rки в rи6кyтo неo6ходимo сдeлать oпPедeлевIrьIe изменeния в paзметке. BoT тpи oсвoвяьIx изI!евения' l- пoтРeбyется yдaлитЬ Irз кoнтейllеpoв o6ъявл€ в иe Wid.h: ?74рх' тaк как тепePь olrи бyд}т п{еlrятьpaзI{еP пPи уBеличении окяa 6Pa)ЗePa. Пo ).1{oлчa. нию (oнтейIiеРьI исгIoльзyloт width: euto, Чтo идеajъrio нa]\'пoдхoдиТ. 2. Тaкл.е пPидется rrзмеrrить с11oс()6рaспoлo,<eЕия lroлorroкс плаваIoще.o rla aбсoлютIrьIй/oтнoситeЛьньIй' Эле)1ентьI с а6сoлIотньIv paс!oлo,l{сниei' в дaннoм слy.rаe 60к0вьIе кoлoirки' испoльзyloт кolrте(ст l1oзициoниРoва. ния их блФкaйlrегo adсoлloтIro PaспoлoяtеIrнoro лPeдкa. BыPoввяЕ лев},lо ltoлolrкy пo веРхI'lемy ,!евoмy yIлу' a пРaв}ю - гIо веРхне]!ry пРавoмy' мo)i{нo рaсп еPхяпм yглац сooтветствуIo. щих i.olrтейlrеpoв' пpеиNtущестBolt такoio ЬIeтoдa являeтся тo' чтo iцъI мorкем lrзllепитЬ opIавlrзaцию рaзllеткIr тaк' чтoбьI цептpа-'Iьия кojIoflкa с oснou}lьIм сoдePкr!мьIм Рaспoлalaflaсь }Ia пеPвoм ltесrе, ПoскольЧ. 6(:) кoвьrе кoлoвки испoлъзyют aбсoлютIroе пoзициoниРoвaн'Iе' их п'естoнa' х o ) d , l е н и ев { o д е P а r м e Г к и ПРl| '|o^'гo,1Ьloва е,rи с м o г } т . P а J v п o с л e J r г p ) J к и с | P i н и ц ь t o б P d U ь l ь i я к e e к o : | т . t l| ) 1К Р o t | . тoгo' пoискoвые слPt{6ы считают сoдeР'rиNlоe. рaспJto,ке!ное 6ли,iе к яx ча.ly PазчетI(и.6oлeе ваrкнь'м | Рo/чJ.к.иPoUi, ь сoдeР,tимoe вarleгo сaЙтa' 3. нoвaя ги6кaя Pазметка o6Iадaeт некoтоРьINIи о.Рalrичеijиями. Есл'l пoль. зoвaтель сильllo yмеяьlltит PaзмсР oкнaj Рa3п{eткa llо'кeт Развaлиться сoдеp)киiloe центpальнoй кoлoнки РaсTянется пo веp,rикLци. а бoкoDьIс

166

rлAaA6.Рatr'tnрelti*ё'рa'ttcткlасrрn}'иliril колoIftи яaчЦ.г нaЕrlaдыва].ься дP)т нa дDтa. Есл,I ,i(e пoльзoвaтель силь. no )ве.личит Paзмеp oкЕIat сoдеРl.и]!loе цептPaпьrIоЙ кoлo}Iки мокет пP€вРaтиться в oднy длинIryo стPoкr: oгpaниЧив маl(симaпьIryio и минимaпъ. ltую iltrpинy РазметкЙ, мъl Мoхe!! y6ерeчь сaйт oт этиx rreприЯтIroс?сй.

в сss: имeют.я (вoйmвa m.х- il. п o J в o л я } o щ и eн a м F { a ] a l Ь максипIа.дьIrьlйи миIrиManьньll"l PазмеP элеiIеIIта пo lIIиpIiне. пpимевив эти свoйствa к main,',iraр, мь! смo)кr!1 контpо,!иPoвaтЬ rи6кoсть pa3Meтки. B дorrеP. шeниe ьl т2Lк're испoльзовilти aвтoilaтиqeсmre'поnя! чт06ьI в сЛ}чae слt{шкoм сйльнoгo yвeл,Iчеяия oкEa! пРи кoтoPоУ oIro стaвeт 6oльшe мaксимaпьI'oй ilIиРиньI Рa3мeтк,.l' стРal{ицa вьIPавнива-пaсь6ьI пlrсеРедине. дaвaйте взIлянeIl нa lrзмelrеIiirьiй кoд:

c

.o х

.iсl ol.

]',гл

d,v

г

?his 1ayolt uses аbso1x.e/ie1аtile !о.L|]s

4

,\j,

t.е,r

<р>You саn сontro1

J,,р.с.:.,

.".i

lositioninq

the па:imum and пinimuп

onсe thе talorrt rеасhеs its maxiпuп width, as the liindou geЕs widei. ,p'l\Lt]o s.eL .i,qu.' s"о ,qj v.l , v.,, :b L' п , : "1:q!е. сonsequat сondimеntuп епiп. l,lorb! vеs.ibu1uп vеnеnаtis fementш рurls. < p > N u n сj u s с o n i s 1 , v u l p u i a t e N-.]". r:.i: d-"г, b:b.nd г
to рosi.iоn

,oI,,л,сo.,'a,.ё:

.!

InidЕhs of the it

сentетs

f1uid

itself

сenter

area.

in the browsе!

.аsеl,,(

ёL rj, lcr€ m

thе side

р,

sit

n а.,ё slsр.no.sse aпet enim. Nulla

in, sаgiLiis in, preЕiun sodales, mаgnа, ,О, ,: 1"sj", \Ll о., ,l ,:', dL, ""'

сolumn2..>



<1i>!ink i

на{e'к'a, L- ,с r,ег-'l'.,.-

rtl6кai

рa3шёfl(a

15,

.,

2, а,,

<1i><а h.ef -'';|'>Llnk з

d-\ :d. 'o1r

.) .

<р>т!is temltate

uses the AsleЕс .]earinq

пеthod.

,a^,ёоaLёa2
сonLеntатea

тhis
is

> the fooсeт

ftainlitар-->

bod\

I l|тo .or

UеI{тPaльная кoлoпкa( сoдePжимьiм. paс. UoР'r]и,ч "пл.], кo]roнкам сo1umn1 и сlo1umnз. гIoлor.енa в кoдe пеРeд бo(oвьIми . к o д : ^ вo. ooгвe|ств)kJU]ий сss внимlнис,

< s L y t e L y p e =l с e x t / с s s " > */ /* 06ций пPиф и Pа]м€Р д/ /+ центpируeтpазмeткув IЕ

bоdy {fоnЕ: 1,Oem vеrdana, аria1, teat

а1ign:сеntеr;

sаns serif;

] . {патqin:0; d,," ",'., 8\'plвaц / nаrgln iе,

раdding:0;

} /* )дuяeм пoj' и oтсiтпьI вrх лeмФmв

+,/

o ,, '1-', d'.: ]в0рч' f'y.Iio.,,оo0pч:

tеlLIalto; -а jo.: ё'.j

marqin тlqht:alto;,/*цeы!пРitмPаэ!fi9,всoвPеме!шбpа}зep6х*/ n е l I I p и Р o 0 d t | л я 1 е к 'Ь! d ) . , ) s , Й я N l н d с , l . , ! o s i н иU

divtteаdет {hеighr :]2рa; baсkgrоund сotor: нсAf ; LeхЕ а1ign:сente!; } J.изaroлoвм */ /* !Рсмевньlйз,мен'тe,ь.тия divsсoEtenLarea { bасkqтound.соto..flFFF; коjoяoк не зeгрузmся */ bасkqтolnd: !r 1 (inаgеsjтes

/* 6e,ый фoн есjи фoнoвм гpaфикa

/ fаuх lef..qif)

repеat y top lъfЕ;

/* фoнnевoй

168

г;iilF,l

6. Раill.я}е!i!'а!i

р;]i*:!!'!!]l1

{.i.3illi'ц]ь]

/'.указъIвaековтeкст пoзDц!roн!рoвa!ия для diInевoil lloлoпки+/

!ositio.:Ietative;

1i!+соnLеntаrea2 1baсkg..und со1oI:+.li;,/*бе!ыiiфoн.с!игPaфtпiа!е3тPr.пФ*/ baсkqIou]dIurt(iпаqes рositicn:re1ativё;

lrIеs1:aux !ighL'gif

l т.g.аt.y

to! .iqnt j /..фoя

/+(оmеtФ!о!lциопIрованиЛaIлdiYпрaBoiitoлопt't/

I di!iсotuпn:L рosition: toр:0рх;

/. шлр'на jевой tolol шl-l

i'iitn:15.рI; absоtute;

*/ /i кogTeкстЕoeлoз!циoя!Рoвaние ioлтейiеPA сo!tеntaгеx

ief.:0рХ;,ur.paспoлаtаемкoловlqвьlтрпкoвтеiiнeрасoпtеntartа+/

b;с'(q.оunc сolcт | +ссс; /" фо'oвьrii цiсг nсcol к !po.мотра раслофхeпия {liv) +// оlelitoф:n]ccё!;

-,l

/l. 'редo1вpащаO paзвL"lхOloнfu !l.a OrеPхllР}ппьi\ тос-m

a

rгляrP..тгJ'

тзr 1r

l d1v+сo1шnз{ыiciir:i]0рr j oo

'

l

o

:"ь

о

L,.:

'l

|''lo| i| ,l |,oP,',iР.l,.

o|'Р,l

?',

toр: 0р:; right :0рхj /+рxсloiаreeмto'онryвнrrри гонтеn!еРасontсDIагса*/ bасkqIound to1o.:нDDD; /* фoяoвLIйцветjевoi1lonоgм . (изЦеяяеIцвeт,1iя

I r o r ! o P ' P , ' . , 4 . F " ' , ,J ' , \ \ оve.flо':hiddеп; /r пPедотвPlцaст PазвtЦ(ojoяк'r лзз. свeрхкрIпнь]t Iфtяфв l

dIv+iooЕei {baс]rgfouid-сotor:]iFдс; tёxt.а1igr:.еniет; */ /* пpсмсппьlс стяlи !пжпсго хo,oвтитYлa

рacdin

to!]:6р:; ]

+/ /+ !рo.тыe с fuлl ,!.qлкoнтенга эамooпdя div{сotuпr1

u1 {mаi!]in: 2орх 0 0 26!]хi] ,, p, . ' 1,гn7 ,o, I ' ":,o p {nаfqli: ]]0ря iclx 0 10!х;] ci,gсotum] /r.спосoб oчпс1Iir Toн! oлсeтa. см, г'ав| 5 rlat ш^бnoяна саiTe laa:bьd,соm/sryhr ]./

',/

l : r : : } : i n , r r:,r i . i n r . ; : j " ' . 1 lrазмсткa.

169

пoliазallllая

нr Рис; 6 1{]. It.гIяе1: рзJмсP в зав1rс]!Iю.тп oт PазlIePa loii jj-!i }в!oй, Тaкм P ]rпчrrо Рабo1эer !o всех сonPсiiсннЬlt сo"r]с(:rrt\!Jx .о .'l.1iн'i:lРтаr1ti 6pavзеРaх, и не iraзв:|u'B|1стс,r прr] дoбairr.виI] rl riо:logiп .J!llrr!оrl (P!rllЪ;t o6ъск1!в. tiа. rlри!eP цз1)бра,ке!Цii,

,Iакжс

o6РtLтrтте !rltц1аEлe rii IIс!il]]]!зoв?LнlIе lio!rсjiстn noзIll1t1о!t,Ровaния' ]Iа xPи\!сненllrI rloroРo.о леP)nllr.! !ся Fnз\'!еrne, Бoкoвnlе lio]loнкri 'тспor-Iьзv. ,,a.,,.nr ru. .qиРoвa 'я д{я !цr яв-rJется ]]oф'. Тaк хаli i]ьi хoтrr\! ч.oбьr ]raзl! r]сь посеРедшiс экРrrlа пP!i.го !I ''loс1l''!снтi! стPaII!J]сй lвеrrlЧсIпul n:lкспмaль1l.,и шпРпtlьI. Pi'сuoxаraть tl1rIotIi.!l o!вoстrтеnЬ!ю btr.i' (Е.еrд! Рaвнo. Гo tIlltpl,r. oкна бРa1'trсРi) в нlrтllе]\' с-1\чaс 1]еiьз'. noс(опьк1'в .|зliоr] сryчae 6o. ]io!ьtс кoлoнки б)/дуг Распojaгaтъс-ч лo l..-!a]r orJtа. :]lдaв njя сloit.твr positicn rOятсйEеров lio"1oнок з;тaчеrlr,iс ] !iiiil,'е' 'rnl обсспсчите д!и'k.qilс доtioBьI{ (o 'lч|',i,1,,,,| '|l |.lримeчониe

ддя кохдoй 60кoвoй кoлoвкЙ мЬ]yкс5с]1Чc6ъявлёние .r'eri1.]li:.icd.., чтo. 6"' ов-oмот".eс.y о6'.,о1a.pё ?,. l и.1,р rie )лevt-.D ]рegь,JоФJliе гo ш,Pинe кoлoнк:l и нё дoлyститЬ иХ ioклoзs|во!ия но

вьI ]iо,{rе iс lrРов.-Рить Э1.оj вР.\tеннo 1'jаjlrl! с9оiiствo !.5iti.n Ii.е1а-i'e, ]t зaте)1 сохPав1тв rl пеРсзaгРvзr]9 стРаililц)-, L,iеri]iiте.liнo 6РayзеРа lllиРе

t70

.,лA8д 6. рa{$яrф:'ая

разliiётIа

j;}a!''lli.i

i'l Paспoлaта. Bь] ,vBllдl'lте, чтo 6olioBьrе кoло !r,IР,iны максиltrа-!ьIioil Размeтки. oт. lloзициониРoвairьI а6с()лютвo ок!la, тa Ioтся пo угдaм нoситслЬчobо].. на\пi Рaз. сoздeнtryю i!:tк исlioJlьзoЕaть Iлa]rе мъI Рaс.ltoтpим. B с-ледyloцeм нJ г'PакTике' метn]

Ж mФ.grжfrfi Щa6лoж с ФтриIдeтefit!!ЬE[v!вE 3 а к o н ч и м ] , ] ' r з y. o J д " | l y е ! { , Ц е o J l | о l U ш , 6 . ' o I | а ] n , t Р , ' l o ' | | I r } I У . i . ( . v и г . , с .rPеN{я lioлoEкa. Мьl долгo д}.},lали flад пPoстInx спoс(16o11 сoздaIIиЯ РазМетм

ми, в кoтoPoй втoРaя к

ira пePвolt месте. этo и химoе, нaхoдллIееся в вa'rа-'lе кoдa.6о,rее l ы.|ок

yл',

искoBЬtе с!IсTе!'rj счит]toТ сoдеР. Flaчиlraть lioд Pззl,Iет. суrдестBсllrьlм'

лРUl,ll,{ Еl пo1|''lJ'r.|ь|

ы\

M l|.IlиU.'

в в э|oй

сиryaци! qe сoвсеNl целссooбЧ'зE.), кpoNtе тoгo, Ес с.roит зaбьI;aть o вolrРo.e дoсryппoсти. Еслlr no,rьзoвlтeлЬ пРиi,'евяeт flpolpaмNry 'фnясЧитьIвnния тскстa с экPанa !ли испoлl'зyет 1.!а!иa. .ry,pу L1Iя aaqЙIaЦ|\|\ Iraмяoгo бoлее Рaзумнo разl1естить вlrачаiе сoдeРжIlмoе' пPo6]rpaться сквoзь ле]ryю бoItoв'vюкoлопкy. чтoPt!цетсл 'lЪгда I.aк дo6aвлеlltlе onци skiP стРaiицьl, 6ьI дo6Рaться дo сoлеPхимoro из6e'iаr.Ь этoй пРrбJrсмы (дoпorrв!г llovoчь (Пpoпyстить ссьt,lпiи) мохст Liлrts нx стPаxl,пIe дки5ia фетчeрa мo)lolo нaйти пo вoпрoсI этor{y тeльllъlс сведения xoчеlry 6ьI пpoстo 11е Paспoлonflc,rь кoлoвtiу lw! jimhаlфе!с9]д*!rpщ.цЬчц)' с сo,леp}к|'!ь|1| B ( аNloм Ьn,|:L'lё:

Итaк, кaк Iiaписaть СS}tioд дJrя РазN!е'|ки с тaкoй пoслeдовательяo.'rью:

. . .

цeвтРа,'lьIn' кoлoв1{а с сoлеРжипIь!м; левaя коnон(а l{ав!rгaции; nPaва' кoлoяка'

чтU6ьl в 6P]}]ePс он't BьIгл'Л( ,l .

Лeвaя кoлoiJкa навиrации;

.

цен ГРальнJ'q кo.totlк.l,

.

пPaвaя кoлoнкa-

.кoй |

ll'д.P;к/чЬlrI:

Boт чтo IrPи,т)^aш \IъI- Е}'rкAo испoJ.iЬзoвaтъoгрЙцaтелънь]e ionя дnя oбltе нa пoзиций цеEтРaliьIroй и rтeвoй хo,roнки. Мьi Рtе вlrдeлп. кaк nir]l телЬllьIlt звaчениeм (пpевъtшaкlшиlr 0) пoзвoляют l]сРеllецaTь ЭлCilсIl'Iы. Те' пеpь узrraе}!.пaк исroльзoвaть tloля с oTР'IЦaтeльнЬIми зпaчениями (NleнЬше 0) д7'IяпеPемeщения элeмeвтx B пPoстPaв.твo, зal1имaемoе дРvги!! элеI{ентoм,

d

d d

d.

d:

di

g136л'lr с oФe!ra!€ n ьяьt|t!.! лonяiii'

171

дaвaйте взглянем Еa пРoсToй lrРимеp Paзп{етки с тРе]'!я кonoнi.aмIr, Boт ее кoд (EIaбЛoн мoжlro зarPyзить с сaйTa wl!\i.ьЬd'сom,/st'vlin):
сohпh з, тhis is tirё thlrd ,сonЕenЕатeа, wтaрpeт round the tnтеe .otums ,,-..

is

,oi

f1oated ieft л

),

вр

lL(р

iite

сotuпn i!

t]re Lh.ее сotuins'

the па!k!р,

to foтсe it

тhe

tо еrсiose

ihе

o{

: .i'- ot -n< / d i v > <| . . e n d с o n t ё л E а I е a - >

d >

тhis is МъI вtцим.

the lootет


чтo в этoN! кoде Roлolrки

слсдyRrт ! noРЯдlrе 2, l, з'

A вoт Сss.кoд для этoй Paз!Iетки: .ody {font: 0'8em vеrdаnа, аriаi, sans serii;] ' {G.q]i:0рх; paddilg:0pх; } :iv{hеader iпidih;650рх; ьасkqround-соtor:+сAf;} jii+сontеntaJeа {ftoаi:1еfL; width:650nх; baсkqrouлd .оtor:+сссi] ]ivff сo1uпnl {f toаЕ : ieiL ; width: i50рх; bасkground сotor j flFсс; ] triv'сo1!m!2 {f 1oаt : 1ef t J Йidt]r j ]50pх' baсkgIouг.d'сo1or: #с!с; ) jiv+сotumз { f 1o;i:1еft; йidth: L50pх; ЬaсkqIound с о 1 о I :i l ! д r ; } ] i v f f f o o L e r { q i d t h : 6 5 0 р a ; b a с k s f o u n d с o t o r : + F A с ;} ,.1еa!Еhis {сtеаr:both' leigh.:оj J ! o й д л | | н н oкno j o | { o й ] /

1 i n e h e i g h t : ! ; ] / * o ч ! п Е e тк o ' о п п r y лп o д

PeJy lьтат пoкаJан Ilа Pи' , 6,J l. нaм тpе6yется ли!rь.пoменять п{естамIi пepвylo и втоPIlo кoЛol{кy. IlaчI]ем сo смещeEия кoлoвкц 2 в нyжнoe пo,']oХeяие' д()6авиэ l.l.Iей Левoе пoлe сo зIiа. ]еIrlreм 150 пlrксeЛoв' чT06ьI сместить еe в цеIттР и дать местo левoй ltoлoЕке !aвигaции' tмeюцей PaзNrep 150 rrиксeлoв,

,112

!--....

:,

*..L.,Drr

.t lI а]5lт:?d
Pис 6,]], пo(э чro ра]МeiхanoвтcрЯетпорядокраспoлoxе!ия кoлонок'у(aзавнЬй в Koде

{

d i v i i . o 1 ! m n 2 { l L o а L : 1 е : t , ! i c L h : з 5 ( ) P x ; m a ! g j ' п1- e f t : 1 50 р x ' b a с ] < g r o u n d ' сotor: }сFс;] тепеРьв со!местимov дит; кaк ва Рис' 6.1:,

сo стaEдaРтами 6РаyзеPе вPодe sаfаri стPаницa вьlгJI.я.

в нухнoeрaсioлoxeниe KoлoнKу Pис 6,]2.с noMoщьeл.зoгопoлЯNlЬсмeщаeMцен1ралЬнyю tlo пo.{пите. ЭI]PBмIЕ] Iпtстl1еt г,хР1oтегдлЯ ш-indows стoлкE}ися с пРoбле. мoй при oто6Pа)Rевии такoй Рnз{етки (Pис. 6'13)'

!

Е|

I

til

;l

"l

i

i :

l

l ,

Pис,6']4,примeнивrрюккэслона'мьrдо6ились нyxнoгоpeзyлЬтата и в ]пterпеtЕх|orer

i l

l i

114

rлAвA €. ра€д}rрe

пpимэчониё

}a, разFnё!r{а{тра!lв'lьi

Бonee пoдPo6нo 06 этoм д€ ф 6ie Dosiiioпisevervthinn-nёt,

6PoузePo мoxнo узнoть нo сoйтo ц!!!4

1Ък roрaздо лyч!Ie, TепсPь кoлolrкa з съехaпа вниз, тaк кaк мьI еще не oсвФ 6одtrли местo для Еee. пePeмесTrrв пеPв)ao кoлoнкy мевo.

нaм требуется смeститЬ кoлolrкi t влевo Ira шиРиЕy цeнтPaльнoй кo,'iolrки (350 пикселoв) шioс ее сo6ствеEнyк] ш]{Pи}ry(l50 пикселoЕ) - всeтo на 500 !Iиксслoв. Для этolo дoбaвllм oтPицaтeлЬяoе пoле к кoлoнке (Рис. 6.r5). L.

р , j m а l g l n - l e f t : 5 o o D хо' " , \ q . o L d .

o :,.i;,.o,t:

a

(oлoнку2 клeвoмyкpао,гдeoна oтpицатФЬнoгo пoЛямь|сMецаеNl Pис'6,]5,с помoщЬ|oлевoгo и долxнанаходитЬсЯ Пoс.лe этoгo кoлolrка з aвтoмaтически встaeт яа свoе пtестo, итaк, мьI пPeдстaвиIи вaМ пPoстoй спoс()6 сoздaния Раз!rетl(и, внепIIiий в'rд кoaopoй oтличaeтся oт riopядкa paспoлo*tенI,lя эЛемeнтoв в кoдe.

.'й*** il. € m gЖажв*e ;{ФМffi Фgf,eg€YФв

шяквтврфeйеа

iiъЬ-стPaтr,IцЬ!,'сoздаIr ]-1с!!снтoв иllтсРфеIiсa' o6ь!ч11ooдиlrакoвъiх для всех сайтoв - ссЬиoк. фopм, :I1ис!oв и Тa5,rиц, ]:tэroй тлaвe мъl пока)кс]l' i.air сoздавaть хIIТNIL.кoд д,' "'"" i:oупo1lептoв и пpllмснять к лиrl СSS-стили..Io хoлy делa мъI сoздjдuМ 6И6J'Йo.сr] Сss{oltпoнеIlтoвl кoтoРrтi въl сr1oжeте l!спoльзo'aть кaк тoчкy oтпРавки ::Рrt созда riи собс.rпеtяьIx с,rPaниц' дoстaтoчIlo 6)'iет пРoстo oткРъi* ф^*". ::Pиl!еpouj с(oпирoвaтъ кoд ! (oд ваllrих сТPаIrиц' a Сss прaвl{na _ в файл тaб. i.Ц .тилеи 'I за,'.eм пoдкoPPе{тlIPoвать Llx дтя кolll(РетlrьIx ну'{(д. этo o.IеIrь ::roбпo и пoмо;ltст вaпr сэкr,нoitить вРемя] испoльэуя roтo!ыс зaгoт

*mffiсвgs{ ..,!щест,yет

ТРи в!Цa списБoD: IlyмеPoвaнньJе. пеlryмeРoваfiвъIe и списки |'чийf"и\'UJ"ч|'|''l|-||'-\ё,'н|,U\o},иi','',,,,o,'P'''.,'",',".'.,.дi"' ::.хoд' из лРедlraзliaчеfl ия: .

o з

oпpе.

в нelIviIеPовaIJньIx списка! п0 уN1oлчaниго для ffiJlrдoгo lyЕктa истioлъзует.я мaPксР' вьI xloхетe изп!сяитъ мaРкеР Ira tlyстoй кp)я{oк, квадPaт, иro6

Pа'rеIlис лл,] Тlпьд,v ('); в lrtlreРовafiн0ll € п исrс пFrктьI гФ yмo'цчaEтJlr rг/i{сP}roт.яl для чеIo мo;r' Ito въIбРaть в Toil числе ла,.инские цифPьт Ir 6yквыi спискlr oлРе/.iелеIlии (и,и llлoхеtlllыe списки) сoдеРкaт пoдгoъкты; тaкoй o,lrЬзoвать' яaлPт,ll{еР' дл,r пPедltетнo.o

yкaзaтe,я.

176

f}!;|$;1 ; ' laзё.я!ё

l.!'iriзrr}::

;::!r!}*r1l:i

сoздаем npостЬ е фop Ь|

f ] l t l r i 5i n I mа п d . р r e ss5u b m i t

]тhls

is

tЕхt

q!еe

qllоlj

1qht

сэn

lre

ror

all

vislble-

Ф сt'o се r

П.hосе1 E сht]сe

йd

кoд дrи сoздаilия

nij

";

сI1tlска дoЕor.iьr lo IIРoст. Е1п}ке пPl1rreдеli Iioд дJ]я IIеII\'IIерo.

(ot.xи

<1i>Riсkenbасker i!ъsъъurn

1 i l r i s : s t y r е r у р e : . i r с i e ;] 1l {rist sry1ё |уреisqra.e;]

1! {ris! sryre Fosftion:.!rside; xidth:200Рх;)

gцtrв iФ tha r^hmrc jаФ|ic lolsEa.п*J4rcd6i9а06

'

liсiЬ:200Fхl)

1j { r i 3 i . s t y r е . t y Р e l u Р 9 e . а i Р ь а ;}

ri lrisi

s t y r ё t y 9 a : d е с i л а r ];

! 1 ( 1 i s t . s ! У ] e . t щ e : r F Р e . - . o ' э п ;i ri {rist siyle iур.:ro!e! roмij)

PЙс.7 ] лpимеpЬlсписKoви нeo6xoдимыйдля ихсоздания кoд

177

1,a

глAаA

7. й3дa!{к

l(зlln6rcl.тo.

!rв'epфёй!а

llенумeрoвaнньIй списoк oткPьIвaется с тстa r.rl.кoт{)рый сoдeр)кит irескoль. кo пr1rктoв сIrискa (1i) и зaкРывaeтся тeгoм u]. нyмеPoвaннЬтй сnlrсo YмеPoвaнвьIй' нo дnя lrегo ис. пoЛьзyются теги o,t' B такo\{ ( пи( ке кd}iдЬlй ггiнкт поt-Леlouательнo пpoнyмеPo. вatr аPaбскими или лaтlrнскими цифPамI] ].lибo б}тФaN{и,в зaвисиv чения свoйства List.sty1e-tyре' пoместиTь маPкеp Iтlllктoв спискa мoяtЕo кaк сIraPРки' тaк и вн}тРI] спискa с пoN{oщьIoсвoйствa 1ist-sty1e-рositiоn. нa Рис: 7'l пРивeдeньI пpипleРьI РaзЛичI]ьIх типoв спllскoв с пoясняющl{м

|]o6aвлeниe

стилeй к CпиCкапr

Cписки являIoтся oсt{овoй пp'l сoздaнии менIo и o6лaстей навигaци'l ведь элемeятьI }raвигaции 06ьIчнo пРeдстaвляют с06oй списки сaРaииц, кoтoPьIе мox{. нo пpoсмoтpeть' a меll змo}сrьIх вapиaнтoв' Лoэтoмyв нa. стoяцее вPемя на6людaется с,гpеl!I-]тeниедизaйнеPoв сoздaвaть эnемеltты Irавигaции и lteнIo пa 6aзе спиcl.oв. oдниv из пPеимyщeств тaкoro пoдхoда яв ,ьзo}aтель пPoсvaтPl]ваe,f стрaницy в aгeнтe' нe пoддер. )кивaloщeм CSS' вaпpиltep в пto6илЬнoм телeфоне' х}IТмL.Рaзмeтки списм oкaзывaется дoстaтoчEo для вьIвoдa Eавигaц!М или менIo в пРиe вятнoм видe. итaк, нaчвем с дo6aвлrния стилeй к списку вaвигaци noк. кoтoРьIe кРасyются в левoй пaнели пpaкти.rе.ки Любoгo сaйтa. llшкe приведeн код paзмeтки ненуIIеР Paспoлo)ltенlioгo вЦтpи div' To естъ сoдеpхtaщеro нaBиIациIl) элeмента' в дaIIнoм случaе этo левая l(oлolцa Рa3мeтки.


<1i>Ri.kёnbaсker <1i>viаshb!rn
Bнaча"'IeoтoбРaзим rРaницьI div. в ltoтoрoм нaxoдится нaпI списoк (pис.7.2)' body jtоn., -,0-l ..d"л" ,".,, ,"r,, ,..-г:] " div+tistсontаlnеr {Ьctdеf:1рх so1id +0c0, пieЕh;1ri0рх;fcrt size| '?5en;

сn'.!tt|

179

зaтeм вклloчим IPaIrицы дЛя элeмеЕтов ul и 11' чTooьI пoяять paспoлo]{te. Eие oтдельньIх эЛeмевтoв спискa (Рис- 7,3), ul {bordёf:1pх so1id rеd; ] 1 i { b о I d e ! : 1 р х s o l i d q ! е е n ;]

Pис,7 2, нeнумeрoваiнЬ Й спdoк внУтрИdivс в0ючевнь|мИ гранИцаMИ

Р и с ' 7 , з , 8 к л ю ч игвр а i и ц Ь | д л я u l иi 1 , м Ь в и д Й м ,ч т оs а f а l i B в e р х y и) Е ( в ! и з y )п o y м o л ч а н и Ю

180

гJi'lsA

?. с$:дirэe

ljзll}r}fiaзfi};

'l|i;eР*e'i'e

нa pис, 7,з rРаница ul BьIдL'-,irEa кРaснъI\{l a гpalrицa ]i _ зеЛеlrьINl цветol{, кalrвиднo' 6рayзеP sa|ari испoльзуeт oтсryIIЬr д.lяu1' чт116ьI смeсштЬсl1исoк (зе' лсньте эле]!fеIrты oтoдвиiаютсЯ oт красlloгo кoнтeйнеPа u1)' а ra('(с дo6aвляет небoльllIIIе вePхнсe и E]rr{нее пoле' Ч1116ьIoтдeлить спrlсoк oт oкР}яraюпI'lх эJ.lе. меI!тoв. Inteгnеr Ехplol.ег дo6авJiяет пoля к u1 (o6pатитlэ вви\'ание| чTo ut iIJlо]' rlo o6хвaтьIвaет элeмefiты lij и о6a oви с11еще1rы oт civ)' а r.аIoliе дo6aвляeт 1олькo ЕФкtIее пo-!e. эти Paзличия заr.p!дняют сoзлaЕие oдI'I!]акoвorо о6л!rкa спискoв в Paз-!ичвъIх брaузеPах, !динствeнньlм спoсo6оi! o6oйтииj. нaчaлЬ!ьtй сбPoс 3нaчеIriri,i llo-!сй и oтст1Iroв пo }]toлчaЕиIo 'I пoс-Iед}'iollrее я! итnк, зaдaдrlм пoля tl oтстtпI,т дл,I ]r1 !I 1i о6(rих элеNlептoв сllliскa |') lP' /|jи( 7' l'. !]

{borriёr:1рх soLid rёd; mаiqin:c;

tr

{bo.dет:iDх sotid gfёеi;

паIqii:0;

PaвнъINIll

раddlig:0;j .Dadiing:0;]

Pис.7,4тeпeрЬиs.fаr ' И ntеrnetЕхp|оlеr ото6рахаЮr списKиЙдeн чнo,o6ратИreвнимаiИei чтoкoгдав ЕмаpKерЬсмещеньlзапpедeль|!1, онИнeoтобpахаются

{i!!.!{!1

181

TепеPь списк1r вь!т-1ядятoдиllакoвo !t в safari' и B Intеrnеt Ехploтel, O6рати. те D}Iиl{аlJlIе'чтo мaРкеРьlj пРиlaдJlежaщ е эrеltентa\1 ]1' теxepь нaхoдятся зa пРедслаI1и d1../'Если d:v Распoлo'lен IIРямo вoз.пекРol!ки oкнa. tr{аPкерьlпол' нoстью Ес видвЬI, пoэ'rоlry" нeo6хoдпrlo Ir:1 дoба!итъ левoе lтorrс !t ro Paз}Iерa. чтo6ы I1аРкеРЬl oстaвaппсь вн)тP! div и I]е llaю14liьtв седIlие элеN'ентъI или. каIr ! с-rтIчаес Intегnet ЕхРlorer' пс,llРoсry н итaк, зaдадим,.lеBoe пo,1е (Irис- 7,5), .it+1istсcntairer

1 b o т d . . . : 1 P as c 1 l ! i + . . . ; т r d t L : 1 6 0 P х ; : o г : s r z е | ' l 5 е п ;

' t { ! o т c е r : l р хs o 1 i d т е d ; m a l g i n : 0 0 0 1 . 2 5 ф ; 1 i 1 b o т d e r : 1 р s: o t i d g r e e n ' п а I g . n : | ; 1

e d d i n i ] : 0];

иаркер5|обраiнoвciv P и с 7 ' 5 з а д а в д Л яr l л e в o e п о л ер э з м е р о l / ] , 2e5Й ' M ь l в е р н y л м вви1!aниe' qТo все пo-!,r YкaзaнъI B oдlioм llpaBиле' Bедь ес-lи не знаЧепия Bсех полей' 6Ра)']сР IloflьIтается дl)6авит! всРхtlиe или 6)цст въIгля. стиля.Ir списoкснoва llfoсти oт вEутРсявсгo в лt,6oй мo]leвr при пеoбхoди тoгo, теr!еpЬ }1ъI l{o)тielт ilo.PазIroмy' кPoмe rетЬ \!oсти ).riазaтъ зrтaчeEjrя дpyгtlх пo-.ieй. пРoстo 3aп!енив 0 lll rцжIloе зIraчеEис. \]eя(ду пIвltrами спискa. тaк кalr сeйчaс oпи paсстo'ние давaйтe поi!r!яeм слиInкoп! б-rLIзкo дPyl. li дPrгr.: Рaспoлo)кеllЬI o6Pатите oбьfпптьявяo

::iv+listсоr:аiiеr

ibcroer:Llr

sclitj

'1 {bordel:1рx sоiid red; пar!in:!.0 i

{bofder:1рх so1id qтееi; паrqi]:c'

i]c0c;

idtl:160рх;

font s!?.:,?5еa;

c r.25Еa;.!аddlnl]:0,] paddiDq: '3еm 0;]

сJ\|ЬIипРo' |oi,(l.''U6' L.,'J|ЬJ1o:.]эrg i n -]rо l t om для элеNtеIIтoв 1 1 . нo УьI пPсдпoчитaе:\l oтступьт свсpху t,I сIlиз,v.

loй.|sJ ,:,.- 9 L и гtPlIIIеt{ять идeнтrtt lьIе

l82

..AaA

7. to3Aiвi.з кэt{r'orianтo" иare}фenса

чт06ьI noказarЬ вaм пPеnмFдествa этогo lloдхoдa над исгIoльзoвaниeм пo. jе,l| 3aмеяим лиllии п,{е)liдyними PаMIси вoкPyг элемеlrтoв тra гopизонтaпьlrые (Рис,7.6)'

Р и с 7 6 Д o б а в л е r и' oeo , 1 o

ервь'v'а.ovrа-lт// бo-e4ди]эи-"O.'ooоoл/"

Дo6авив веРJ'ниеи ни)кние oтсDпьl j-пя }ъеrичения вьI.orь| элементoв 1i вместo пpименelrия пoлей' мьI пo.лучили pаспo/rФкение элемelrтoв ]i Тo.rнo пe сePедиllе каJ4дoй стPoки. тепеPь слelкa пoд

1' Улaпиммapкеpы'

2. дo6aвим пoля &'lя ul, .ттoбьI вЬtPoвtiять спи€ o к 3 . с м e с т и м п ! н к т ь l м с t r ю ' с o з . ] J во | L r y п Ь I .

вн}тpи div'

вoт кaк'Iе trзмerrеIiия кoдa следyeт &rIя этoro эьIпoлнить: b o d y { f o n t : 1 е mv e r d a n a . а I i a 1 , s a n s s e r i f ) ) div*1lstсontаliет (berdeт:1рxso1id ]iоr]o;пidth:160!х; ionE-size: '?5aт; пarglnl20pх; ] u 1 { b o r d е r | 0 ; m a т q i n | 1 O р xз 0 р х 1 C р х 1 . 2 5 e п ; р а d d i n g : о j l i ' в t - в t y 1 e . t Y D e : ! о n e , ) 1 i { b o т d e r . b o t t o f t : 2 р хs o l i d * 0 6 9 ; n а f g i . : O ; р а d d i n q : . з e m0 ; t e х t - h d e l t : . 5 ф }

lla'6oлее зaмeтньlе I,lзмеIlеIlиямы внесли с пoпfoщъIo свoйствa 1ist-slyletyрe сo зIrачеIrием nonе' yдa,'IивмaРкepьI' с пoмoщьIo свoйствa ]-ехt-indent мы смeстIlлитeкстoткРаясIтискa,идoбавивпoлeкэлeментyu1рaспoл . o к б o л е e п Р и B , 1 е к a r е л Ь н oв Р т t rР и { o н г е й н e Р а ' OчевIцнo, что слисoк 6vдет вьlгЛядеть ropa3дo лyчше, есЛи мыдo6авим пер. вoмv эr1еveн ry всРчнюю гoPIJJol{та-!lьн!1олиI,L1ю|PуI<.7.8I.и EеaJ,ьa"" p..еn". eм в дaянoм с.пдaе 6yдет исгIoльзoвaниe bordеr-tор. сдeлaть эto oчeнi прoстo с l i o v о щ Ь ю п ( e в д o к r l a с ( а с s sI f . s L - с n 1 ] d . к с o ж a п e н и ю ' э H P в М I Е . l п i е l n е t Ехploгеr не РaспoзЕaет псевдoклaссьI,

18t

Pис,7'7,тeneрЬсписo(вЬглядиrлучre,oд!э(o с лИниeЙнадпервьM элeментом 6ылo6ы 6олеe прoqессиoнаnЬнo Этo знaнит, втo мьr либo мo,кeм испo 1тoт спo( o6 нe сPа6or j "e в Inlсl ||е' .-,,;:;:xТ; caпа

испoлЬ,tvеv

пL eвдoк

|al l , а Ji]ём

lloll

;:::;:::::]Ё:Т";

"lаеч

o тoм,

кJк

o6()йти

";: "

э (or дефcкт

в моieе сoвместимoм сo стaндaРтailи! нo тIoпiияPтioм 6РayзePе Inteгnеt Ехрlo. rer. Boт кoд: .ody 1font]1еп veтdаnа, aliаt'

sars se.i!' l 1iv*1istсontаiлer {bordеr:1pхsо1id +оc0; oidLъ:15oDх;

: 1 { b o r d e : : 0 ; m а r g i n : 1 2 p х2 0 ! х 1 O р l ! , 2 5 e m ; ! a d . ] i r g : 0 ; ]1 {bordeт-boсton:2!х :i!ft!вt-сЬ1ld

so1id #059; nаrgin|0j

{ьo!.le!-toр!2px

Ёolld

раdding:.]eп

о; .€xt

*o69;)

:'rс'7,8,мыдo6авилизeрянlооли!июдnяпервoгoэnеMеHldслoмcщЬю.сeвдoиасса:liIsr сnitd

1a4

глAB& ?. сФ.*аяilё nsяol!ё}]'с6 яйэr*эйiа

A TспePь дaвaйтс пo3i{aкoмим.я с пpост6й },oвкol:a для Itr|егnсt ЕхРtorеr. кoгда мьI удa)iиjи мaРкерьI, элrMент ul сlзился дo [IrrРиньI элeмe }Iы ito'{еv сoздaть липиlo' пPипIениu стиль к элеllснтy u1' сoдeРя{aщеllу всe п1I{ктьIсIIискa' Bместo пРиведеiIIIoгo вьтпIекoда дoпустlrмo исIтoл ].oloщий' oтoбPаJкaIoщий верхIllolo линиIo l,t в lпtегnеt ЕхРloтeг| b.dr, {ionE:1еп ve.dа!а', ariа1, sans-sе.if;} c i v + 1 i s i с o n с a i n ё r { b o r d е т : 1 ! ! s o 1 i d + O 1 ] оп; i d t h : 1 5 o l x ; i o n L s i z ё : . ? . e m ; . . . . : 2 0 i x ;l D ] { t , o т d е I : 0 ;п а r - с i r : 1 2 ! х 2 0 р a t 0 p х 1 . 2 5 e п ; р а d d i t q : c ; 1 i s t . s t y l e tурe:nonе; ьo!dё!-tоp:2Dx вou.l *069] or

о

о

i0

oj

с о,:r],

о rJ:,,ё,

оj'ё,,

инoгдJ \loжIIo н |й |и пPo( тьle \oдЬl дJIа Prшения пPoблем IIrteгnеtЕxplo.сr, Iro 6ывaетl пРихoдится пPIrзIr,*ь] чтo tle Bсе .Ioльзoвaтелиy]]nдятстPa!ицy в oдиIraковoм oбxикe. ТепеРь нalII списoк rlaчинаeт прио6Pстaть чePIы пatrejltl нaвиraции. oстaлoсь ЛиII]ь пpeвРaтитъ пРoстoli текс,г ll ссьIлки - и пеРед нaми привлекaте]rь' Льlй и ф}arкцnoн:Llьньтй эxеMонт вавиIации (Рис. 7'9). сделa,Iь этo пPoстo с пo}{olцьF1 L.леjryюUr.I o кolа:

>

].
,о,o,

,,

Fеnder

PИ., 7,9, MыдoбавИли.сЬлки' тeпeрЬiекстотобpаxаercЯс пoдЧeр@ваяИeМ

( .r(x

185

<1i><а href =''*">Riс!enbe.kеt .1i>и.si]]lrn

стилeй к сCьlлка'Jr

to6авлeниe

внимониe

PeхoяeнAуeтсяпoдчePкя6oть сoФoяниe элёмeвтoв нe тoлькo цвrтoм. B дoннoм случoe пoмимo цвeтo пPи нoвёд6нЙЙyкoзoтeля нo с.Ьrлхyмы 6уаeммвнять eгo фoрмy сo dPeлки нo .иявoл Pуxи, чт06ы с00бщит6 пoльзoвoтёлю, чтo пeрeд ням ссылкo и пo нeй мo,ёнo щeлкн}ть,

тaк как этo пoс'IедtrrЕi этaп нaс,гPol:lки нaвптaц!rи. следvет пoдчистить кoд: нaстpollть ншкнrс по,1е u], до6aв!{ть кoIIтeкст к ссле1tтoPaм' чтrrб и дoбa' пPl]меliллисъ тoлъIro к элeiцентnпl вЕ}'тP'r div с иУeЕсv Iistсontainer, витЬ тP!ri. (a тoчг1се, двa тpюкф lто6ьr ливиЯ н;lд пеР!ьIм элемeнтoNI oтoбPa)ilпaсЬ в Intетnеt ЕхPlorеr aпя $Iindo1's, Iroд l1,!я коiliпoяcнтa Itaвиrации яa бaзе списJia: Boт oкoнчательнъIй nocy {fo!|:1ёn

leтdаnа'

clv+1istсor.ailer пaтgin:20pх; }

атiаt'

sans seтif;]

1bc.der:1pх sо1id it000; iiicLh:150рхj

ioni-s1ze:.?5eп;

u1 {boтdе.:0J пargin:12рx 2c!]a 12Dх i,25€n; ii!+1ist.or,taileI type:nonе; ] 1isi.stУtе ti div+listсоntаinеf c; tеxt-indert|.5eт]

{boldrI-bo.tom:2px

s.lid

.liv*11вtсontainе!

1i:fi!вt-cьi1d

div*1iвtсoDtaiaе!

a {teхt-deсolation:noпe;

div#1iвtсontaiпeт

а:hover

,/+ тpюк д,1я] Е W.in \*/ r htп1 .tiv#1igtсoltаinе!

{ьo!de!-toр:2рx

{сo1o!: +тзз

ul

+069; пaIqin:0; вolid

#069;]

сo1o!:*o69l) ;}

iьo!de!-lo9;2рx

sоlid

#069;}

раcdirq:0; рaidiг-с:. jеп

186

fлAaA

?. сo.даt'иQ l(sяrt'&е!i"ss

l''l!ёРфsйса

Pис'7,]0, гoтoвoeMeAюс вЬlд€ л eниеМ элeMeвтiлри нdaедевии нa вeгoуKазатeля

тpюк сo зseздoчкoйи o6рaтнoйкoсoй чepтoи o л ь r o в а - Ё ес s s

a в.лe.{ифи^аци. -.-,--."" \,aЧасryютр|оки лpименяютсядля oбяФqения дeфeк.o" rnte.nЁtЫpro.er' тр|oк сo звёздoчxoй как мЬlзнаeм' пpаnрадeдyшкoйвоeхэлeмeнтовpaзмeтки явлЯeтсяhtml;воeдpyгиeэлё. мeнтЬ|.oгo нaоледники.oднако 1nternetЕxрIo.eryн, калe" тe"' чтo сoдep*ит'oeзьrм",]. ',ьЙ-злeмeнт'являющийсяpoдитeльскиM .0ляhiml, о""',"""" тoрe мы сoзAаeм пpaаилo' noнимаeмоe толЬкo litelлet "; ".";-;;;;..;;;;;. Еxplo.e,' та; ;;;;я.y';;; элeмeнтaoтоyrствyeтlоoшлeмся ]raнегo о лoMOщью звeздoнки"' напpимep,тai: d1! * !1 {,,.лрaьилeсss',.] в эJ€ м пp.а€ и лe !1 нe бyдeт выбpar, eоли ot яsлЯется дoчep)rимэлeмeнтoм д,1яdiv, и oyдeт' € о ли являeтоявнyЧатым,п,1ыиспoлЬзуeмзвeздoчкy' чтtlььrуказать,чтo нам нe Рь€ элемe- lь rаroд]i]с. меюу . v и .' l o е с т Ь ,U r o o ь | с o з д а тпDр a в / л o in o r / м a e м o eт o . b < o| n ! e r . e т Е x p ' o l F .м ' ь'^иUeм: * htп] '.6onее тoчныe селеKтoрц.' {,.прaвиrа сs5'.'] oi/.oох oo!о.,:.рy 'o ,d b -е'J 1hЕп1 divibox (bоrdeтj 1pх so]ic.edj) в э т o м п p и м е р eс и н ю юp а N t r yп o t а } \ , тв с e б Dаy."оь, roo.'e ]nier.eтЕ}р|orel,\o.opь'й o |oорaзи- ^pаLнУюрамьv' тeм нe мerree'бpаyзep|ntеrnetЕхp|orel для Мaс болee сoвMeстимоoстандартамии мo. 1' таK и нeкoтoрьe с сss."р"",,",;;;;й;;;]Ё,v;i;. ::]."^:|:.б."]:]:-ч "p*илa

l;1"]#J-:1ryТil,т::н"*чтoиспoлЬзуемыйвaмитpю*сoз"eз

сoэдаem сss.мe.iю

1a7

тpюt( с o6pатнoй кoсoй чePтoй кoммe"тарий с o6paт|roЙкoсoй чepтьЙ пepeд зaxpьlвающeЙзвeздoчкoй: вЬи м"' "аn,шeм /* кoшeвтариt \*/ |ntrrnetЕxp|orerдля Мaс пoсчитaeт,чтo кoМi'eнтаpийнe зaкpЬ|т'и вoспpимeтвeсЬnoс. лeдующийкoд как коммeнтаpий'дo тex поp пока нe встрeтитoбычнoезакpытиe Koм. мeнraplrо сoс.oядee lrз звeздoчьии кoсoй чepть| / * т р D кд л я т ! W i n \ * / * h t п 1 d i v * 1 i s t с o n Е a i l e l u l { ] э o f d e !t о р : 2 ! х s о t i d f r 0 6 9 ; } ЗдeсЬ lЕlMас игноpиpyeтстpoкyc селектopoм html,таKим о6pазoм' мЬ|мoxeм коМбиниpoвaтЬтpюкиco звeздoчкoйи обратнoЙxoсoЙчepтой,чтoбыcoздать прaвилoтoлЬкo для |ntеrnetЕхpIorerдляWindows'

CoздaeшCSS.мeню пРи Рa6oте lraд сoздaние\( Paскрывaюцихся менro нa бaзе сnискa мЬI хoтим пРoстo взятЬ сЕIrсoк с aлo:{(eнllьiп'и сtlискaми Дqя РaскPьIтия и зa Рa6oтaть 6eз дoбaвлeЕ!и дolloлнитenьнoгo кoдa лиlIь пРoстoй xliТМI-сnи. сoк и стЕ'1и сss. нo кaк я(е сoздaть Paскpывaroщееся меIrIo из свo6oдIrьIх oт лиЕIниx ,rдеIrтификaтoРoв и rorассoв списItoв? Bсе, чтo дЛя этoгo тРe6yется' кoliтекст, кoвтейнеP div с идeEтификaтoPoм' чтo6ьI н}жIrые Css стили лpnl{e. нялись к rrPкнo!тy спяску. Фaктитески, сoздaть тaкие менlo с пoмoщью CSS пеРвым шaгoм ria пди ( сoздaнию PaскРывaющиxся гoPи3orrтальIrolo NIеl{Io с oснoвяымtt п),I]'<тами-

гop.Boflтaльньle

кo lпoнeнтьl

l(енro стаIreт сoздalrиe

нaвПfaции

Pa€кPьrвaioщиeся меr{lo содeр)кaт пoдкате'opии. кaJtqдаяиз кoтoPьlх РaскPывaeтся из сoдеp]кaцегo егo прктa. oви 6oлеe эффeктивяы 'т зalrrrмaloт меньпIе меtIю.Пo тPадиции тax're меlrroсo3дaются местa, чем o6ЬrчrrьieвеPтикaльIrъIе с пoмoщьюJavasстiрt, чтo ведет к Рaзд}тиloкoдa. кaJкдoe п0дo6н0е менIo трe. с пoмo6yет oтдeльногoкoдa,ioтoрый при неodxoдIrмoстиизмеЕить с.тo]rоro, rак как veню, дл rьIoсss Уo)кяoзнaqителЬнo )пPoстить.o1дайиe пoтPе6yeтся лиФь кoд сrrискa !r кoмпaктIrыl] СSSкoд, упРaвляющий пoвeдени. ем мвo*€ с твеIiнЬrx pасttDывaloциxсяпIeню,

r88

гnAaA 7' (.lAniнР

Дaвaйтe взгЛяlIем Та-'1ьь1'io навигациlo'I

Для сoэдания div:

кol.пosegrG' я'lтoРфе;tа

нa этll пPeищ,lцссва в дc!iствии, зaтем дoбaвIcв PaскPЬвaтoщ}Iеся

этoгo

кo]\lпoяeEта

сoздaв для нaЧzlпa lopизoтl. пoдкaте.oPиti (Рис, 7.ll).

lt,м пoтPс6овaIся

пpoстoй

списoк

nнrrPи



  • <а hтеf.' ]i'>сus.of,eIs ,

    ,с

    4.''',,,.,lё,

    .,D.

    1-...

    ,,

    .{

    tb-o..

    "

    нo aiя пo,.ly'lсния lopизoнтalьнoгo }1сню (Pис. 7,11), N,ЬItrспoЛьзoвaiи пpo. стo],l веPтикaльяьIй списoк (Pис. 7'12),

    Рис, 7,]2'вoтс(рoмное нaчалoroризoнталЬвoгoменю

    нaчвеiIс дo6aвлelrия пPoстьiх стlrqeй д,'Iяdiv _ линий rIо веРх}Iей ir нихяeй гpajrице| задaдиII PaзмеP l!Рифтa и цвет фoва] I1Рип{еIIимtoр пaIgin qтoбьI смeстиTь eгo o1.вePхi{еЙ гРairl{цЬl oкна 6РayзеPа' Boт кoд: <sLтle tyре="teхt,/сss'> body {fon. гeni1y: verdana, ari;1, sаns seтii' * {пaтqin:0, р a d d i n q : 0 ;)

    fc.t size:100*]

    пid.h: 100ъ; /+ зaисм шлрпIry j,rя div */ n c т с l e r t o р : 1 р х s o 1 i d + 0 5 9 j / * р ! t . r с Iл ' я л ю п o в с P хd i v* /

    € с ]даir$

    с55"&eas

    t89

    +069' /* Ри.Ye!jпниФ свnзldi! */ ']/ ionL s !ze: '8eл; /* зцаeм PаNс! шр!фъ */ bа.n!]Iolnd сoior:+ссF, /* фoяo!ьoi цвeт div - oтoдв!гaс! diY oт гРa!пцьI окна *rя !aгj'дяoст! пarqln toр:20!r; /+ BPЕIЕII]lo Ьoт.1er botЕcn:1рх.о1id

    !pи!сРаi/

    \ э-.1е\тевты спискa бсз с,rl!.iе'I РaсIloлaгaloтся oдиll Iтад дp}'ги)i. Пoумoлчавиlo пoэтoпl,v lIа}1 Ei'хяo из]!iенитЬ их lтoРЯдoli na гoРизolrrаJ.IънъIй (Рис. 7.1З). :]aoд. oтлевоIo края iiт ! 3адaди\т фoнoвьlй цвeт для етo эnе. !i

    i]iv+tistmeг]u

    {ae:qin:c

    0 0 ]!!х;

    /]. oтсПI ul oт края кo'тсiп!еРа+/

    )8 t1 {

    civ{1isiпеiu ftоat: Lef:; baсkgrоund

    i/ /+ рxспoлагаем.I rcoк пo гoРизoнrfuтl *,/ сo1or:+rЕАj ,/+зaдaeмфoпoпьInцвФ эreмеш ф мфю

    . сU5t.mе{sldеrnЬЕ''qDPn|Е'5D

    6tr]"hui.Г5

    Pи..7']зтепер5списoKрасполoхенгopЙзo!талЬнo (хoтяэтo и нс BпиN'aEиe'.Iтo гpaницьI div Еellс4цеtrнo 0ъ!(aются o6рaтптс элe W3С п]raвaющие так мк по ЕхPlorег), в Intсгnеt зal{eтrro Реlrollеlцaциям их элe\Iентoв, ься lIз содeР?Rащих в иllетъ 1tсrпъI дол>iвьr Тaк как в этом div есть тoлъIio ллaвaющие элсi1еtlтьl' пoлyчaeтся' чтo oЕ tlе qlrствия кollтентn как такoвoio, стили этo' что6ы )'стPaIr,тть lдaпипt маpкеРьI из сI1искa и нaЧllем добaвлять ПРoстoй спoсo6 сдеЛaтьтaкi эТo сде]rать кoнтеl]нсP r!eвю, iiv+Listmenu liidth:100t; f1oat j1eft; b.j.]еr-:oр:

    сoдеРк.-rl плшalolrlие чтoбъI ci!.все;кe Таюке п-laвaloiliиl!,

    { .../ /.: задaемшиРин}'div /*ло6aшяе!сппсo(вdiv../ lр]

    s.tid

    Ёc69;

    */ ,/.' лPoвoдIs! lинлIo повеpхvdir

    пlПtiтъl

    '90

    rлAвя 7. (o3eая.re !iэ!'пoне тс. 'rштзяф€ й са

    bordei- bot tomj 1рt so1id #069; /* пpовoдиN.lиE'Io пониз)'div +/ font-size:.вёm;,/+зцaeмрmмepшpифта+/ baсkgfound- сo1oI I i|сс!;

    /+ фoнoвыiiцвeтdiт */ /* BrЕМЕннo.Фoдвmeм divФ ryшlц6! oшaдляяа.1ядвшл f,PшeFЙ*/

    mrqin-toр|20рx; I div}listпenu

    ul {marqiE:O 0 о з0рх;

    */ /* oтсryлu| oт краякoнтейпеpа

    l d . v ц| i ( t пe n j

    l

    f1oat:1еfЕ;

    /* Ioрrrзoятuьпoрaамещaем сп'сoi */ l13t-вcyle-t}Фe:Done, /* уДыяе\м^pкеpыr/

    ]rасkgтound сotoт:#ЕFA; ,/*заяaем д,1япуEпoв м€ в Ф */ фoв dl tёxt-d6сolatlon.пonё,

    с o 1 o ! :+ 0 6 9 ,

    /+}дerяeмЛoдsеp!!вая!ессылок"/

    .зj4Jev ц в ( |ш p и ф ' a .

    1 ft1!.i|liвtшёDu a:hфe!

    {

    Ъ п е p ь о , v p а с к p o e т r я и в ] \ t . (г и т п j a в а I o L д и еэ л с v е н r ы . п и . к а ' t U P и ф т . с ы . aвeдeнии вa flиrr )xазaтeЛя мьIIrти oll меI]яетс" .p*".н "i \P1'1с'7 .|4) .

    Pис,7,]4,Мы yказaлЙцвётссЬлoк для пассивнoгoсостoя!Ияи пpи нaвeдeвииyказатeля мЬ|ши нo IrРи этoм y нaс oтс}тствyст эизya.цьEoе Pa3делelrие скoлыto }Ioвых пPaвил изп{eliит сиryaцию.

    f 1oаt : 1ef Е; /* roPизoE?iльнoрa3Nещаем сп!сo(./ ].s, , сy е .1о":,on.' ,

    baсkqтound- сo1or : *.IA;

    \jДп(мУdp\еРь|* /{задаeЦ фонд[я пiвшoв моrю +,/

    элементoв

    меtllо. нe-

    (оздaeмcss"йёя}o

    19l

    +./ /iсoздaем лpoстpa"ствo с о6е!х.тoPoя тe(.faлунюaменю ьorde!. right : 1Dх 5o11d *o59; /* сoздaемРsдeлптФьЕьIenивпи ме'(дyэjеNеяfrми li*/ рa.tillпg: о 6!*;

    ] dil+l1stмnq

    11 : ii!вt-.ь11d

    ьo!de!-1ёft:1px

    {

    'il во1td *069; /-лерsш веpтиЕaьнм линпя в !евю

    ] div+1lsЕfrenxа 1 teхt'deсoIat1on:none j

    /+yдa!яеrtподчеpкпвaЕЙессь'лок"/

    сotor:+069, /+зaдaеN цветшpифв*,/ аюивя}ю о6лaстьmьикп */ bаckglound. I+DDD;/* вPЕNIЕнrio . пoкaзaть . vc::.

    ( 16,t

    с,I o, ё.

    l Pезyльтат мы видим Ea Pиc. 7 '|ь.

    pаздeлевь] сnискачeткo Pис'7,15тепepЬэлeMeнтЬ для сoздaния paзделителЬньlх "1иний мы ввачerе дoбaви,}r гIРary'ro ryal{ицy .oздачиЯ nolледяeЙ Lrл каж1oй (' ь| 'ки, пo,DЧив чегЬ|Pe paJ,е левylo IPaвицу И Дo6aв1aлI'1 чеpты ислoльзoвали псeвдoкJiaсс : firsL-сhiLd !t пеPвoмy IDтrктy I{енIo' .цля Еaгляднoсти мьI выдe,rlaпи фoя ссьlлol. сrРьIм цветoм, чтoбы пoказать яюT всe nPoстpавствo, въIдeлernloе для кarкдolo пylrктапpoблемa, тaк i{aк еllrти пoльзoвaтеnь 6yдет цeлкaть lreпPиятнaя этo дoвoлЬIro olra нe сpa6oTaет. чтo и пoкa3aнo нa Pис. 7'15. }laм ссьIлIrи, o6лaст; пo ,ltеЛтoй все oтведеrrlrоe для неe пРoстpанстso. запoлнилa чтo6ы ссьIлкa ьy"(!Iо. в тo!!, чтo ссьInки являIoтся сTpoчirыми элe зaк,'lloчaeтся nPodлeмa oднaкo вЬIсoты и,rи oтст}пьI. чтo6ьI свoйствaшиPины. * ''e"p,'ltенимьl ,,с""u"*'o ","n' все пPoстPaвствo' riу,кнo преo6paзo!аTь еe в 6-!oчвьIй эле. ссьl,rкa запoлвI4]1а rreнт. 3aтем мolrнo дoбaвиfъ oтст1пы: ] i . / + 1 i s t f r е n u1 r {

    192

    lJlAвA

    ?. d'!да'|ue

    ri )l .с ,lё-

    o6,,o,ё,

    к.}!l!'!'"э.:i'sё

    я!'!eрфsйса

    bасkgIound .o1or:+FFA; boldеr'тight

    l 1 p х s o 1 i d ] i 06 9 J

    ) div+tistmеnu1i:fiтst-.Ъi1d { borde. 1eft:1рx

    sotid

    ] i о6 9 ;

    ) I',6, L

    d.vв

    раitding|0

    о

    6px; /+.o3'1аетпPoстpа!ствo пo с |oРoпа[!те(ста л.rвктoвllевю r/

    .eхс-oeсo.at1on: none; bасkg!ound: *DD!;

    a

    dlv}listпenu a:ьoveI l

    TепеРь ссылIrи зaпoлняlJr. все IIРoстРавствo ячeет{] и мъI мo,кeм целI{aтБ мьIпIьIo в Любoй ee тoчке (pис, 7,16)'

    Рис'7.]6,тепеpьэлeмeнтЬ мeнюзапoл!яoтв.ю oблаGьячeeк итaк, все, чтo oст:Lцoсъ сдe,1ать]_ этo yдaпить вРемeннъIй серый фoн и зa. стaвитЬ фактичeский фoE п),1п0ов мeнIo изNIеrIять цвст пpи нaведен; ва негo

    у к J J J l с | я r \ ' ы Ц и , д U б а в и в п . e в д o l t , т 2 .с : l о \ . dtvд tisЕпeдu 1i:!ove' !асkgroцld

    {

    сo1o!:*Егr;

    l d;..

    :.

    ,llля T) нк |o; спиl ка.

    .-.

    " L рadding:r] 6рХ; Еехс dёсoration:nonе;

    |4',elф',||пнь ф'.r|.,.;

    €.'зl|аэB!{ss.tieкю'9з l div]i1istпenu а:ncvёr i l Pезультaт вtцeн на Pис' 7.l7'

    7 17,тeпeрЬфoв пyвхroв мeню Meвяетцветnриваведе!Иина ieгoyказаreля

    MышИ

    сейчaс пpи нaB€ д eнии lкa3aтеля мыцlи на пупкт меlrкr еro фoн меI]яет цвeт вo всeх 6РayзеРaх, крoме Internet Еxplогеr для Windows' TL Win pеaлиp'"l на п.РвдoUаь{ : ov. IorькoпPиcгoдо6Jвnениикl.ьlл. к e . т o г ! J к a к o o л e r l o в м . . 1 и v ь ' е' 6 l n н J а P ' r v и 6 P ] \ з F P ч l р , . п о J н а l о l c г o д r я лIoбoгo элементa, Пoэтoщ.! пе.l!oтPя тrа roj чтo ItъI зaкolrчили paбoтy наn сss ь I л o r ни l п r p | . l c L l . . u ';' o. o Ь l , б е Л l l я г : r ,I n ' ' . | e l L х P I o l t l д - l я l v , n d o \ . o . o 6 P a r f "r .- r u " ' . * - " , у -" , " . " "\{eвю. y. ""P тiaведeниe yкaзaтеля \1ъItцина r}нкт Blraчaqe pа.збеpемся с всРтикaIьlroй чертoй. Мы мoжем реIпитo этy пpо6ле'1, с пoмoщьIo тРIoка сo звфдочкoй и /.loписaтьсss, Paслoзнавaемьlй тoлo"o Iв7win. Дo этoгo l{oмeнта мьI u1 тo1rькo lt-,Iя зaдaвия левoгo пoля пPи сoздalМи o,rсryгIa o,I кРaя div' Taк как ur сoдсР)'{ит тoлъкo плавaющиe элементы (п'riкты списItа) oя тaк х{e сoмкь}т, кaк и аivв нalале этoroyпpaхпе Itия, дo6aвим вPемeнвъIe IРаIrицъI div+listпenu

    u1 {frаIqi[:O о 0 з0pх;

    u]oт кPа, {oнтейвеpа*/ /* смeU]аст

    ь o r d e ! : 1 р x в o 1 i d * o 0 o 'l

    чтo6ьI пpoсмoтРеть гРaницьI ui (Pис. ?.1B). .. ll сu., оne..'tgгrЬ".гsТй;;:-ъ;ъ];;т_ .

    Pис 7']8, нихняя и вeрхняягpаHИцЬu смЬ Kаoтся

    tlaIu нyхrнo сделaть ui nлaваioщиNl, чтобъI oн ntm1 diтn1isЕien! ul { ftoаt|1eft;

    /* зaстaвnяeт !1 вмeстlть все 1i */

    t94

    rлAЁA,.(oздаtltiе!.osff3!iё.f.oe*R]eрф€ й са

    в Peзy-!ьтaте нaше N'eвR]6)цет въIгпядеть, кaк пtrкaзaЕo вa Pис. 7,r9.

    сu6tолrrr]iг{emЬers l DeаЕrs I D strib]rt.rs

    _ тепеРь дo6aвиI' 'rеIryю lPaнlrцy д.пя пeРBoro п}вI{та меIrio )да-циlt вPе.lен. ' o 6 p " 1 | I | е oпoбolчь|ч \ . . t e в a ! ' l |U'oЧeP nюрам'(\и:onавr ( я и.пPавить \ , п P ' | д е v о l l i P а j с 1 , ' n Д в o е ч и ' o | . г щ J I U o яв 'eниeм ]Pи Jlotl и Jlo). Boг кoд: * htmt div+listneгu u1 { f 1 о а i : t ё i t ; , / * з e . r a в n я сuтl в м е с т ' т ь3 с еl i . / b o r d e ! - 1 e f t ' 1 p х в o l i . l { o o о i / * д о 6 а в л я e т л е ы т в е p т и к a r ь в } r о чк еu рl "T/ зaJавяоезяачeн!с*/ М!!riв-1ёft:15p*; /+ IЕ)двaивaет

    ls * htп1 a idiвplaУ:ь1o.k;

    |/ oтст,vп /* ]Е 5 и 5,5пpиялlaф задaнвьIй

    нa Pис' '.20 Nlь1видиl! NIенlr в lntеnlеt ЁхРloгст' oста,roсь тoлько сoздaть эффеIiт изменеЕия фolla пРи нaведe;rии указ

    Pис.7,2OЛеваяs€ р тЙкаль!ая чeртaпoявилa.ь' Ao фoн все eцe нe мeняeiсяnpи нaведeAииука]атeлв

    'ффeкт

    rrавeЕeния

    в lntefnet Explorer

    yкaзатeля

    т{lьlцlll

    вaведеliиl{ )изaтеЛя мьr дo пoявления сss2. дo6aвлять лзменеIiие oблЙка Ilpи :h псевдoKЙссa испoj1ЪзовaEис ши мo)i{lro 6ьrлoтолъкo кссьljlкaN'' ylia3aтеля мыши д7lя тllвсдеllии при floведевия тopе lтoзвoляет зФ1aвaть пIa6-пон сNIеньl сивегo сss.кoдa д1я фoнa вa PllзнЬIх 06ъектoв' }IaпРlr!ер. вoт фPаIмент div+resрo!d

    {baсkqтоцnd-сoior :btle J ]

    div+тes!on.] |1r..iсr {]Ja.kqrc!rd-сctc!

    i rеd; ]

    этo oчeвъ пPoстo' Еo 6PаYзeРIntегnet Е)iPlorеr яе пoaдеP)кивaетэффектъI iraведеir!!я у]raзaтeля для элементов

    ссЬIr.Iriи. ollичall]щихся

    oт a. К счaстью'

    (озяte!n.ss-яieа!o

    l9s

    п и 1 е P н e д с P l o ф l P е | е г \ е d e r i o l ) с o , l J a | . ь а ' д j o в е : . с н/ я j j я I n | е r l е( Ехplolе|. кoтopьIй IстРaняет этoт дефект. Файл lraзывaется сsshol'сг'lrtс и.зa.pу"""o е.o мol{tнo тIo адPесy httР: / /!t.!{.!t1хs,1аll.n1,/-pеternеd,/hoverсгaft'htm]. Boiкaк мoж. нo дoбaвить ero к CSS: b o d y { f o n с : 1 e mv e I d а n a , a r i a l ,

    sаDs.seтii; behavio!:ull(свв/свэhove!.htс);}

    B дaЦ{oм сryчaе мьI сoзда-!и IroвьIй кaта-,Ioг сss в тoм )rre кaтaцoге| где Paспo. лaгaloтся фaйлыдnя этoгolтРимеpаl и пol{eст,IЛи в негo файл сsshoveгhtс. всли вьl Рaспoлoжитe фaйл в дP'том кaтar1olеj пPидeтся.испРaвитЬ URL. с пoмoщь'o фaЙia сsshо!€ г .htс' дo6aвлеrrпoro тaкимЪ6paзolI, 6payзep Inteтnet ЕхРloгет смoжeт Pearиpoвaть на нaведевие yl{азaтeля мьrillи нe тoлькo rra (сылltи, ТапePь фoн п,нкгoв !!еню 6\дет \!eнягЬся вo в.eч 6PаtrеPах, кPoме lntегnеt LчpIorеr 5 д,тя Maс, нaшe гoPизolrта-.тЬнoel{eню гoтoвo. Boт пoлЕьlй lroд. bоdу {font-fапiiУ: verdаnа, атia1i sаns serif; tolt-size:10cъ' b е h a v i o . : u r 1 1 с s s / с s s h o v e r ,| ' t с ) ; } 'lmатqI!|0j р а d d i n g : 0 ; } / * в a ч u oг o Р и з o н f & l ь в oNr o е в ю* / widt]r| 100t; /* задаеvшиpинуdi!*/ f1oа.:teft; /+вмеIцае[tсписoквdiI*/ bordе!-Lop:lpх

    so1id +069; /+ создaeм,ивпю лoвеРхdiv +/ border-bottoft:l1рх so1id +069; /+ создaeм,1ип'ю лояЛзIdiv*7 font.sizе:.8еm;

    /* заJаeмPазмеРшPифта+/ b a с k g т o u n dс о t o . : l с с l ; /'зэдaемфo!div*/ maтglл tор:20ря; /* смeUraет +/ di' oт ве!хвeйгРaвиoкяa6PаyзеРa l jivilisЕmenu ul {fiа.qiп:0 0 0 з0рx; /+ oтстiп uIoткРаякоIqeй!еPa*/

    ftoаt jlеf.,

    /*юpизogfuьяoePaспoлoхФиеспшm+/ lisL-sty1e-tУpe:nonе; /*yяa-lяeмl'apкepu,-7 b а с k g т o u n dс о l o I I i F l A ; , / * з ц а е Й ф o ! п l в ю o в м с в ю + / bordеr.ignt;1рх

    solid

    {059; /+ сoздаeмpaзгpанлvитши!е,{дi-э,lементаvи ]i*/

    глAвA

    l95

    ?. € ' iq.аg..s

    .iv+1istnenu 1i:firsL

    вsi1il!вQ}|т8в tit.iёpФeй(;:

    сhi1d {

    чеPтав меяю].,/ ior.1еr 1eгt:1!x sо1id f069; /*первм верт!ю-tьная )

    a:viltisine!!

    ii:hcaer {

    */ ьaсkgтolnd сotoт | +rгЕ, /-задaсмфов пуяктoвмeяo l пo стoрoпаNтекстаryтктoвмеяю*/ /*прoстpagствo сс}Iлo("/ .eхt dесorаl:ioi:none; /* )дмяe!tподчеРкuван!с

    рaddirq:! ,

    6рх;

    L.Д'Р!U8P

    :.0oo

    Lo

    ||P|'ф1,'i

    l di;+listпenu

    a:hover 1

    d

    } /+ нaчfuloгopлзoятfu1ьяoгoмсвю "/ /'.|PЮКL1* / */ * hiп1 di.lfl1is.Iеn! ut { /* трюк д,1яlЕ /L1ясоздаяпя веpти@1ьвoй чеPтьIслевa . iioа::tеft; / * в v е ц а е ! в u l в с еэ л e ы е в т ь]Ii 3 l */ so1id ]i000; /*дo6аfo1ле! лprryIo вертикdьЦпо чеpту кut bo.dет-!efЕ:1рx пeтqin

    1efi:15рх;

    зJ'1шнoе зяaченпе./ /* IЕ -1дваиваст

    ]

    CoздaниepacкpьIвaюцПxcяшIeню гeп(Pь

    вoJведеv

    J,ше

    гоРlJol|гаIlьнuc

    !l.llю

    нJ .л' Jyюший

    l Poв.IiЬ

    - Л(,бJBиNl

    paскPъIвaloщиеся мснIo' PaскРыBаIoциеся мепIo Еa 6aзс сss Irе 6iд}т Paбoтaть ltaк испoльзo в 6pаузеPе Intеrnе. IхPlorеr &''Я Nlaс, ъм lre ме!Iее' IIьI Iтoка;кеN{t 6pаyзе}a.a'1 СSS и создaть paбoтaющее менIo и &rтяэтoгo B сJlедyющeм yпPаrltЕеEnи пPедпoлo)ltим' qтo кa'qoму гryнкт,Ylla]leтo IoPи. зoнтaпьЕolo меню сooтветствуеr ollРедеjеttllaя стРilrlrцa. нaм пРoстo пoтPе6y. ется vкa3aть URL вь!ес.l.oсимвoлoв * в Tетe href кaхдoй ссылки.

    I '*.}qЕ&!l3

    Рас,(ръ16ающt'x€ *

    fi з!''to

    197

    Ри.' 72] вотнашeгoтoвoeвыпадаюЩee меню

    I.Iи)кепPивeден пoлный кoд Дця мeню с четьIPъtr{я пyнктaп{и'каr{(дыйиз ко. r oPьIх сoдеp)китPaскPъIвaloщиeсяёaPиaнтьI.
    с1ass='с]eатfiя'>

    cuslomers
    пenu items

    >

    <а href.' fr''>оlт sеrviсes <1i><а irеf= 't '>FAOS     < 1 1 > < ah r e г = ^ в ' > s i ! ] ! с < / e > < / t i , i"lembers < 1 i > < a h r е f = , i ' > в e n ё f: t s < i , e > < / 1 i
  • <а hrёi-' +'.>PIogrаms
    fлAaA ?. сззgsii.ig коф''|.€ : .roe

    lga

    ',,.О.!a1

    с

    я}'еt!{'eg.n

    ]

    < 1 i > < а h т е f = ' + , > O u e s t i a t ! s ? <| 7 1 >

    <1i><а hтe;=' it' >'ealетs


    dloр

    dO'Ф пenu 1tеms >

    <1i>Join us -"

    h,".-','._

    r

    o ra.'

    :l'

    <1i>
    ,D,с,..o,оLs,

    ",

    <|- drop doпn frenu lLeпs-> < 1 i > < аn r e f = ' ' * ' ' > Р r o d u с t s < / а > i<>/ ] '1o"r . ."h-e-. ",. "]e < t i > < ah r е f = ' ' + . > с o п m i s s i o п s < / ё > < / t i > < t 1 > < ah l e i = ' t ' > с u s t o п е r s < / e > < / 1 i >



    Cледyет oтметить

    нескo"пЬкo !toмeнтo!,

    связaнвьrx с эT],lм кoдoм.

    1, нtr oдин элeмеriт i;l Lци l! Ire испoльз,vет идентификaтoPьI irли к.'taссы. Цципствeнньlм oтличисм этoгo спискa oт o6ьr гroзвoляIoцxй пplr сoдеp'rащий diт с идeвтифиxатoРoм 1istсoniajneI' спlJсkT. мeЕять l{y'rньIe сss-пРaвила к цеЛeвoity 2. ЭToт кoд схФк с Рaзме]хoй гoРnзoпт&qьноro меню из тIРедъIд)пIlегo 'тIPа'{t. Еerrlrя, нo здесь дo6aвnefl списoI( втoрoгo yРoэtiя' влo)кеEIrьIй в кaждьlй

    (otдаtrietraсцpьrsа'oцrrxfffia{ю

    .t99

    Iryнкт менкJ' oveнь ва:кнo пpaвильнo вЛoж]iтъ списorr . н?o бхоalLмona1arcmumъве,съ aлoэ]се|I1|ъl,i' сtutсoЕonnl no h7 внJnpь цнlсmа pоauп.|ъ ' нnoфaсmвraнa nфеа зa1.Fъoo.щ*, ^no. iti. сiucкь Roт пpuмep: "1'omа
  • пyнtт

    1 вeрxцero Урoвц

    <1i>    Лyякт

    2 вeрхвeтo !.poвня бeз !ыпeдающ,х пyвnтoз

    <].1><arilef-'*'>п,ъхт

    1 Dасiр!вФqe.oся

    veш


    • .11'..

    2 рaсEp!вaшIolocя

    иee

    ьr"t="1''n*"'

    . , 1 : , ' - з d к р " в а ю ш / a. 6 <1i><а hIef='*^>nyвкт

    '/r1-

    пyР.,q

    бeз вьладающи7 !Ун(тов

    вeохU. о урoв,о-,

    з верхвeто ypoвiя

    без вьlпадaoЩd пyя(тoв

    {

    3. знaчеIrия hтef пPoстo зaNIе}lевъIнa tri в Реaльнoм миpе нeoбxoдимo зaмe. нить * фaктичeской ссьLrlкoй lra имеIoщ)'Ioся стpalrицy. дaвaйтe нaчIiем с лPoсъIх вeщей. Blt€ с тo тolo чт06ы сРaзy Paбoтaть с пoл. пPиведенIrьш Рalrеej нaчнeм с roPизolrтальI,toгo меIlю' в.кoтoPoм списoк втoPoгo yРoвня дo6aвлeJr тoлькo к пePвомy п1'Irкry зaтeм вы пo аналoгии смoжeте дoбaвить все влo)r :e}Iныe меIilo д2lя oстaдьI,Iыx пylктoв. Boт кoд:

    ' ]. *" l-.eI.,.' ,м.пoе!s, ",,

    ?. сo:&nlrtle

    rjlA6A

    2o0

    !'oljn61e..!'3ll

    fitiтsрФe.!€з

    <1i><а hrei= +' >Dеаieтs < 1 | > < a ] r I ё f= . + ' > D i s . т i b n t o т s < / a > < / 1 r >


    Давайте'rепеРьвзrлявeм нa Pис. 7.2:, ].'t

    sco;з;

    5]!n U! ].,n9]# lшlrаt.. Ne

    FAos

    n о д м e н o n o Kнае р а с к р ь в a e r с я , а н а o e д у e т с r и n Ь р o д и т е л Ь . к o г o с n и с к а Pис,7'22 tleo6хoдимo дo6aвить стт'1и к PaскPьiвaющеlfyся l{е}IIo' ч roбьт пPивести eгo -B.сiтo

    ltьI мo)кем ис. классa&ли идснтификaтoPa к пoд}1еt11o! дo5аlлeн'' uL 11 селeктop нaпРиNIеP' э'гoгo сnискa. лoлвoga,гъ сeлскToP спец!Iалъ!o для сoдeРя{aцеroся ul, элемснтa тoльIio &rтя u1 {..'сss щaвиra,. ) пРедпазвaltается *".* вн}тpи эnементx 11Рoд"'"-***. Pа3 тo, чтo нaм Eyя(ll^окак вид. .гPи"aк o6ъявлеяlя Сss flol'oг,vт пpoстьrх кoдa, Bсегo u-.".дy'oш.' фpi"мептe "" дoстичъ IIРкнoтo рез},ьтaтa. divi|tistпеnt u1 ii trt {

    пojя ul из гopизoптaъвoгoменю*/ BPе}lеннoгo яаслсдовaнlte maтqin.0; /.| 3aпpе!цaeт

    l00уoдает яаl' i{idihl10emj /*за!ает шиpflяу мепю. в сoчстаgил с пIирияoй li B вepтпкalьяoe мспю"/ l div+listлenu иidii:i00?;

    ul

    1i uL ti

    {

    (ul) эnе!с!тaN! слпска./ /1. запoj!яeт кoнтеiiнep сп!ска

    ] Pезyльтaтпoкaзaн xa pис. 7'23'

    PИс 7'2з MенюнaчЙнaeтooрeтать фoрмy

    € * з'аl{яe}iсярb!8ающ''x{'mе''!

    2o1

    LUи vы JадoдIlvJиPиP) ,,l влo)\еньoIo( . 1i вьfтРи Irег., зaнимaть t00% шиPинъI, oви o6Pa3уют веPтикаltЬнo. ',""x,. ;;; этoгq кoPoTкие слoвa б)д}"rpaспonaгaться нa однoй стPoкe] и шиP,Iнa ,ia,кдoгo llyнкта 6yдет Разrloй. TeпeРь IIеo6хoдиMo пРaвIDlьI{o Рaспor1oхиrъ РaскРьтваютцеeсяменю oтltoси. тельнo Poдителъскoго' дляэтoгo зaдадим дoчернеNrYмeню aбсojютнoс пoзици. olrиPoваljиеj a Poдитeльскoм)'- oтя B тo хtе вpеlIя llьl пРимi}нп стили li,пя сoздaliия гpаниц PaскPьIвaIoщеIoся менlo, Boт неo6хoдимьй кoд: .О, ,.

    !l:,

    L

    float:1efсi

    /* гoPизоE]мьяоe выpaвяшЙшt Фшм *,/ posilion.lelative; /* кoятекстпoзицлoпиpoвапп,дqя paсkРьIвaющегослмеяю с абсoltoтвы}Iпoз!luloвиPosавием */ tist

    sЕy1e type lnonё;

    i]aсi.q.ould-.o

    в

    L or : {iIA i

    l r o r d e . - r i - с i t :1 p х s o l i с il'/+tistfrеnu !t

    li

    +069;

    u1 1

    рoвit1on!аьEolute;

    /* pазясщаeт выпaдаФ!иn ul oтяoслтo1ьяo Poд!тсльсioгo ]i+/

    l :.iv*tistmeru ul ti

    ut 1i

    i

    l r i d L h : 1 о о t ; / + э " t с м e в a ы с п и с к а з a п o л Е ' ю т к o ! т e й ! е Р ( u+] /) ьorde!-1efЕ:1Dх bofde!.bot

    вolid

    *o69; /+ тP! Фopo!ц {аj{цoгoqъпa pасltрьlваlrщсгoс'vеяD +/ *o69;

    Еoп: 1рх 6o1id

    ъofile!-liqht

    : 1px вo1id

    +o69;

    I .:wr1i.Еmeдu цl 1i ц1 |i:f:!Et-chi.d ъo!de!-tор.1px

    вolid

    {

    *o69; /*верx!пй край peсФьIвaюп(сгoсяltевю :/

    I

    .IелePь

    дaваi;тe э3гляI'еNtEa pис. 7'24. o6paTитe внимaliЙe, чтo РaскPьIваloцееся меllю вa 1 с]'lсщеI]o ."Ьа. "иксел , d I {к r к o t I o в Ь l P J в н и 8 пo eтo IРанице' нo 1aк

    202

    rлAaA 7. (olдаD.te кoмпoseв'6в ',lнiePф€ й са

    Pис 7,24'HашерасKрЬ]вающ кaк кoнтекстoi1 пoзIIrlиoниРoвaния тепePь являeтся PoдиTельсr.ий эЛемeнт' дoстaтoчнo зaдать lrе6oЛьшoй сдвиI' чTo6ьI I1oставить менlo нa месTo: div+lisLпenu ut li

    u1 {

    пaтgin:0; р o s i t i o n Ia b s o 1 u i e ; width:10em; paсфывающеeся мeяю*/ 1eft. -1рх; /+ выPавяпвaет ) пoсмolPи lс нa Pи.' 7,25'

    Pис' 7.25' PаскpьвающеeсяM€ н ю pа]Мещelo тoчнопoд родительскимпyнктoм

    зa исIспloчеIrием тaких пpo6лем с oтodPат€ I rиеМ lteItю в Intеrnеt ЕхPloтer, кaк oтс)тствyloщaя веРх1rяя гРaн,rцa и нaсцедyемая oт пРeдьцyщегo тPIoкa лr. вая гPaницaut' pаскPьIвaloщeeся мeню i'oтoвo I.lмьI l(o)кем oбPaтить вlrимaние lra тo' кaк сделaть eгo види\,Iъlм Toлъкo пРи нaведеllии )тaзaтeля мЬIши I{а poди. тeлЬскиЙ .IFrкт меrrю. B гoPизo1rтa!ънoм мeнIo пРи нaведеlrI.tи )'Itaзaтenя мьIrIIи нa гI'rrкт егo внeменю н}э{сro' чт06ы в этoм с-.тyqae Iпний вид измeняется. ,цлл paскPьlваroщеloся oткPьвa]loсъ влoxенI{oе меIrIo' .цoстиqь этoй цели нaм пoмo}rteт исклIoчительl]o пpoсToЙ сeлектop' BвaЧалe, спPячем Рaскpывaющееся ме1r]o' кolдa yкaзатeль мьIiIIи нa нeгo нe b o d y d i v s l l s Е m е n u u 1 t i u 1 { d i s р L а y : n o n е ];

    д

    .gздa}rte рa

    ръ!l'nющ'iхri r'oяr'

    ТепеPь меню o1 oбРа".кaетсяпРи iraведel]ии llx Рoдитeльсклli в-lloхtеннoе мeню (Рис. 7,26).

    20t

    лylrкт и нa сaмo

    d

    PИс,7'26,при ваведевИина родителЬсKИЙ ЛyнKinoявrяеrсядoчернеёMеню' noзвoляюцeесдел.тЬвЬ бoр

    тeпсРЬ дoбaвим тploк Дця lnternеt Еxp]oгеr| ' htпl dit/*1isLлеnu ut ]i ui { /*до6aш'фвеРхн0ФгpмиIryрасn!L!ваюIцею&мeнюд.цIЕ*/ Doroer-top:1рх so1id +r] 69; bcIdeт-left

    )

    ; 0pх; /*устрaвяeт вaстeдoвaвиeгРaвиц ulpa.кPьiваlоlIимсJI меню +/

    ъпcРr, lп|егllеl.F'{plol е" o,u6pз;ае1 Р j с h p ь в а ] o U r е e (! ' : i p \ l и е б P а I l е Р Ь I , t s o | м о , I ' н o , в ь | { r 6 D J| и , 1 и d н и У n Ь l l е , Ilо т' ксГэ|o o ченю вь1 :lе,ястся тoлькo при }rаведевии на сaм тeкст' lкa3а1сiя Д].iя lстpaнеIrt'и этolo r-едoстaткa нall пoтРебyeтся сдеJraть 6лoчi{ьlм]' э,емeптaltll все Poдитeлъские

    di6р1ay:Ь1oсk, раddilq:0

    6рt;

    etoяеяяoгo !eяю вьlдc,1лФт.я!Pи наведeн'л Iказателяi/ /+сo3,1аФлрoстpaнствoвoryrт tекста !i!ктoв усню+/ /*п)!fьt

    204

    orфё;(. l].tAвA 7. сorд.!, J ',с,,' 'Lч,.Dlо' .,н.

    .e':.dесorаЕic.:ronе; сctor:Ё069;

    /,*lдfulястподqсlnивlн!е.сьIлo(+/]

    / ъадaеl текФ шp!фта|/

    l нaп,е п{еню nРиняno

    вид, пPедстaвлепiiьIй

    Ila Рпс, 7.27,

    iа пyнKтМеnю Pис 7,27'теnеpЬссЬлKИвздeЛяютсяпри Heведевииyю]эreля мЬ щи LtP]orеr из упPаrltвeния с гo. Cделaв этo,lrьI lroхеlr удL-lить r РIt)к &,iя Intelnеt эToт ссьIj1кп NteIпо бJtoчньIпlll. oкaзьrвaется' Dизorrтfu.lьньtм lleвю' дс,raкr!$ii и3 кодa стPoку нrxtro,vдaflить 6РaрeРoв. ioд ''"* *ц'*"" д," "..x * hiit a 1disрlaУ:b1oсkj ] NtеrIю' сoздaвнoе <с lll. естъ paскPъвatoщеeся итaк, B нaшем РaсnoРяжеtт!!]

    ля" и 6ез испoЛьзoвaнияJаlasсrjPt.

    CoздaниelшнoroypoвнeBьlx paскpывaющихCяшeню Nt.нJo ПPи,loж'lв sь Пoка чlo vьI сolJJли oД| 4)Рoв |l'doР Pаl крь'ваloЦ{fя !лoхleflIioe nIеIlю' 6oльinс Yсилий' мьl с r1егItoстЬ]o сo3дадиtr4 NlвoгoуPoвневoе па pис. 7,28. пoхo)liсе Ira пpивeдепнoс

    rra pис. ?'2Ъ мы имeем РoдитeлЬскoеllrРизoн

    в негo мellю тPетьегo и чeтверTоro уPoвItя' llля IJхдooaв. * '""ь "".*.""'. " измениТъ кoд PaзмeтлеIrия наv 11е06хoд'п!o въlпoлlrить двa nрoстъIх дейстD'tя, пol{oпlъto вЛoженrтьIx спис1ioв. rtи для дo6aвлевил Рaс(РьIваIoIц!1хся э-1eментoв с э-rlе и Irе зап}тaтьсЯ вo влo'(енtiьц пpи этoм слeФeт сo6людaть oстoРoхIloстъ с,vсrсхot,9'ю стP!(тi Рy' мЁнтlх, нo ес,rи пprr сoздaвиn сIтискoв въI 'iспоJтъз!етe - тРе6уется пРoс,Lo сoзДать !'oвь]I] всe пол1чится I]ас poйствolI бaз ланньIх| у сп],lсoк дr'IЯ кa'iдоlo пос-'lедvюще.o lrункта \'еEю,

    .озaafi}'6r!нo'.yр0sl'ss}l!tРз!'(р'lsа!ощ"].!яire&$

    .!sio i9ls lvembrls

    06з€6

    2o5

    Olrtrb!t]E

    Pис 728' Mнo.оypoвHевоea ольtoваrелЮналрямyюo6pатЙтЬся к нИxiим yровням ЙераpхИИсаЙта BEaч:Lre ltьl дoбaвим
    тoлько

    одIro дoIloлвитejr

    id=']is.nёn!.> iU <а hтef =. +'>оur sеrviсes<,/1i> <а href =''+''>FдQs sisn

    U р < /t 1 > < 1 i > < a ] r r е f= . . + ' > s l p р o l t < , / a >
    втoрoe:{eвo

    >
  • <а hIef =.'*'>Gotd рIoq.ап

    silver

    р.ogтaп     < t i > < a h r е i = ' + ' ' > в т o n z eр I o q r e < / e > < / i i > l ' ! ъ а ,ts N e a < / а > < / 1 i >

    :11><; nfеf='}'>меmbeтs,',л дaлee дo 1оiца бeз !rзч.rё!ий "aк Bo втoPьlх дo6а!иNI двe стPo1tи в сss: :...У div+tisЕпenu u] li !l ti ul i vlsibitity:hidde!j /*!дентлчпоdisРlау:nonе*/

    205

    rлAaA '' сoздэн'. xoмпoнegr!. икrерфейса

    d i v + 1 i s t п е f l u 1 1 l u t 1 i I h o . / е ru t 1 v i s i b ! r l t y : v i s i b r е ; } / * ! д e н т и ч в . ] d ъ р l a у : ь l o с l * , / с пoмoщЬю тaких длиilньix сrлектoРов мьl въ16иPaем списки' влo)кснньIe тРетьи. дo. в дРyIие списки' кoтоРьlс' в свoю oчеpедь, яв пo этoгo селектoPa кoнкPeтrroсть мьl пoвьIInaе!'I спискy, к пepвoму 6aвив bocУ меню кoду наI1Ie тaкo}ry yРoвlrя' БлaгoдаPя вePхнelo с селеьтoPoм сpaвяeнию вьlI]Iядит тaк, как покaзaflo нa P!tс' 7.29,

    вo тэ*e смeщeнoiа oдинпиKселввeРх вающеeся мe!ю фyнKциollЙрyет, вторoeрасKрЬ Pис,7,29, несмoтpя Iiа то, чтo левый oTс,ry зaдaн пPавt4lIьIro' ьfы видим' чтo втoPoe вьIпaдaющее меЕю смещеIro вниз oтtioситeлъEo пуIIкTа' l. кoтoPoмy oяo oтнo. сится..цeлo в тoN{'чтo orro }traсп{.дoвалoсдBиг poдителъскorо мсrno, rreodхoдrr. мьIй д.[я еIo Рaспoлo'reвия 'oа гоРизoнта]rьЕIЬIмменю. чтoбъI испpaвиTь ситyaцIlIo, пoтpе6уeтся всегo oднa сTPoкa сssкoдa. j Ll ]' I b о о yd i , " s . , . . *,/ visibi1itУ:nidden; /* иде9тичgodispliy:no!е

    l dlv+1isrmеfl u1 1i ut ti:hоvеr ut {visi]ri1ity:visiЬte;] /*идентячвodisPlaу:Ьloсk*/ TепеPь втopoe РaскРьIвaющerся !1енrо на-!oдится нa свoем месте (Pис. 7.30). Если задaть для свoйства toр знaqerrие 0рх' мeЕю бyдет вьIPoвяенo пo вePхy спискa' a нe пo €гo веpхrreй rPalrиrre. rryIlltта . влo)r0в в спirсoк !тoPoro PaскPьIвaющеIoся мeнIo ещe одIrI{списoк и д06а-

    эив пaPустPoк сss.кoдai

    {o3даф$slt3o.$yрo&liesь';.!.€ x рЬ!зающиt!!'].cю

    .Jstomlrз

    llh.iil

    N;]

    M€ п 'Ьlrj

    oЕЁtri

    zo7

    D !n,bulG

    л

    Р И с7 , з r ]с'л o м o ц Ь о с в о й O вtao р м ыв ь р а s н и c d евМ r o p op e . с к p ь l в а ю щ eмеес вя ю . i v i i 1 1 s t m е л uu t i i u 1 l i : n о v e . u 1 i i u 1 i v i s i b : 1 i r у i ] r i c d е n ] civ+iistmenu !1 1i !l il ut 1i:hover ul iтis:bi1itу:!isib1е} чы JoбJвЛяеv

    eUJF oл|tь )гoвёчь

    I|ечю'

    Эффeктьl авeдeния yкaзатeля C rpафичecкиПrи фor.аIvlи

    мьlцrи

    B Ра{смoТРетiнolt пPимеРе сoздaния lltеt{rо пРи паведении Paскрllsатoщrrхся :naзaтeля !'ьIlпt.I !]a пyI]кт мевlо uвстегo фoпа изменяrI.я. для эт'tr;o мы изI{eI]я.

    .rrr зrraчerrия свoйсТвa сolor с t]омoщьro :hоver, ъм xе п{енее' ивoгдa в\leстo rlеньI цвета фoна тРе6устся испo-.Iьзoвaтъ фotloвoе и]o6Pa,т{еtlие, Palrьlie нaм пpиllпoсЪ 6ьI изгoтoвить и3o6Ра,Ii"""' д* nn'.цo.o .o.'o"'"' нитьJavаsсгiРt. Есnlr вьr ст&1кивL1ись с этим] тo зEaетe' :кoлькo тP}да нeoбxoдимo для дoсти'(eяил этогo дoвольнo пРoст1rlo эффектa. вaм б'дет пpиятIro yзнaтъ' чтo 6oльIIIeделaтъ :ется' тax кaк есть rоPaздo 6oлее Jеrкий сrrосо6 поni'чеI]ия "'.;; "'". тaкоIo ,кe эфф;тa : I1oмoщЬю сss, o6ьrчIro кoд pa3метки дjlя I(t]oпки NIен!, вьrrлядит пPимеpllo так: ;1v сLass='bu.tc]'> 1 сlаss='.ot1" href='r''>сrарhiсs чтo6ы вся o6лaстъ dli илii дРугoгo исЛo,]ьзyсмoгo кoEreйнePa бьIла aктив. --]й и oтKllикiшaсь нa наведение yказaтеля !!ьIlли' требyeтся эaставить ссь'rь1 ;:1oлнить контсйнер' чтo lIo)ftЕo сделaть с l1oмoщьпr следутощегo CSS-кoда:

    2o8

    fлA8A ?- с'3дa*iie i{s.'.6n€ в тoв liti:€ р Фэйla

    b o ' d e I : 1 9 х i o O Os o ] i d ; ) а'!o1t {widЕь:120рx; disptay:b1oсk; l

    paddirq-to!]:2рx; font: bo1d 10рt; t ё х L a 1 i g n :с e n t e r ; bo!.le!:1рx 6o1i.t !ed;

    /*вРемeяпo

    Дпя пpoвеРкп запoлнеяия с.ъ!rюй

    div*/

    o6Ратите вниМaние, qтo N{ьIизMeнIJли ссЬIJlкyЕa эЛeмент блoчEoгo )Poвlrя' !rт06ьI oqa oTIсцикалaсь lra задalrные РазмeРьI, и вРсмепirо дo6aвили вoкРyr нее кРaсIrFo Paмкy, чтo6ы пPoвeРить. рa6oTaeт ли этoт пPиеrц (Рt!с. 7.32).

    Pис,7.з2,ИзMеЁивзначениeсвойоваd1sрlayссЬ|лкиваbLо.k'MЬМoxеMзaсгавитьeeза (ь сoдеpxащиЙ еe div 6ь вeсьdiv, Чтo6Ьактивнoй пoслетoIо, кж div 6удeт зaпoлrrеrr ссьIлкoй, ссылк'a nсРeхoдит в сoстoя1rие :hover. кaк тoлькo мъl нaвoдим yказатeлъ мыlllи нa dlv. тепеРь веo6хoдимt) )'xaзaть свoйстla сoстoяний ссьIлки: d i v . b u t l o n a . r o t 1 : 1 i n k { с o 1 o r : b t а с k ; L е x t d е с o r а t 1 o n : n o l e ;] div.buЕton а.rot1:visitеd

    { сo1or: green;}

    d i v . b l t t о n а . ! o 1 1 : ь o v ё f { с o 1 o т :+ 0 6 9 ]; d : . . b L с - o nё . . o ] l : a с ' \ . " , . o o . | н h : L . : Мы yдалили пoдчеPФвaниe no }'r!{oлчaник].в!1естo этolo ссьIлкa стаaoвится пoдчePкя1тoй' кoгдa нa неe lraвeдсIr ),riaзaтель NIь'пrи .

    I {.'rяni]r6д $}.'r9yFrrnllegslx

    irёi.nFbiяatr'{l.*'!'

    irё'*

    z09

    Pис' 7,зз. ФoHoвoeизобpаx#иeдля всeх зеть реx сoоoяний ссьлки исIloльзуемьiе ЕavЙ изo6pa'(ения 11меют pазileР 12Ori00 пиксеxoв, Pазмеp nfuхдoй кнoпки сoстa]]ляeT 120124 пиксела' ТёпeРъ дo6авим э1у гPафикrЕ видъ фoнa д'тя кtIoпки: :iv+bttton a.тo11 {iridt]r:l2cp{; ielqhtj20!!; раdcir.q'.oP:4рxj jisр1ay:btoсk' io.E: bo1d i0рt vе.dаnа, sаrs.sе.ii; LёlЕ atig.:сеnLеr; bасkqroцпd: цr1(.1пagesjrёs/fou! ТепсPь

    напIа кнoпка

    state lo11 ьg'gif!)

    0рх 0!x пo-!ереat #oo0l]

    вьтт]rЯдr!т тaк' Itaк т1oказаяo fla pис. 7.з.l.

    Pис,7,з4,Длякаx\дoгoсoсro

    yxваЯчaФЬфoяовогoизoбраxения

    B даrxloм с,.r}чaесвoйст!o baсkqrouncяl!!яется сoliрaщение1{ дnя всех сtsойств фoнa. с помoщью этoгo свoliстDa Mьl в oднt)й с,lPoке lъaзrilт фoнoвoе изо6Ра,,xе. ЦJlеj erо pасIloлo)кеlll{c oтtiосителЬIto кoятейнeРa' пoBтoРяемoстЬ и чrPньтй фo ФоEoвьIй цвет всe.дa paсп{rлalaетсЯ пoд фoнoвыil 'lзoбPaл{еIиeм. пoэ,roNll .сли вдPyr тpaфикa не заrРyзится, фoil кIloпкrl б1дет чеpяьIм, TепeРь Nъl roтоBьI к пoследнсIry шar.'!' *"."""-" .!"q*-. кollтсliнер иготoРoс MЪl видиN' тoJIькo чaс1ь 6oлес кРYпlloro фolloвo. :o изoбpaкeвия, Bсе нтo or нlс тPе6}'ется этo с!сщaть rРaфикv в".р; '' ,"""

    2l0

    г'iAaA ?' {Фздsa*e хФ!.ilto'.e!.тas:rfti€ р фэй.а чтoiь. сorдJ]ь и | |юJию .меItы фонoвьlх

    и3o6раJкений.

    Boт нeo6xoдиn'ъIй

    d:v,tjuttol а.ro1l:tjnk dесo.аt1on:norе; ]

    I.oд:

    {ъасkqтoцn.l-Doslt1on: oрх oDx' сo1оt: Ьtaсk;

    div.buЕton a, f o1t :vis!ted

    0pх -25рх; со1or: gтeen; i

    {ьaсцg!ощd-Do6itiоt|

    div.button

    а. тoi1 :hoтeI {backqloцfld-рo5itio!|

    div.b;tton

    а' тoi1 :aсtiYe

    1ьасtlrlound-рoвitio!:

    Еeхi-

    0 p х - 5 0 p х ; с o 1 o ! : * 0 6 9; ] 0Dх -?5р*; со1oI :пniЕе; ]

    мьl зaставЛЯeп' фoпoвoe lrзo6pa. с floмoщью свoйствa baсkgrоund-рosition жениеРа.пoлагаlЬсявJавlt.иtloсгиoгсос|oяния''Ьlлки'BPеJtлЬтaтеIlo,тyча. !r oтс}.rствие испoлЬЗoBaIJия JavаsсIiPt Ilенaдo6нoсть ем oдIro изo6РаxeЕt.tе, вoгтaк создается сt!ена фoнa пPи на. пPeдваPительнoй J 'lPl{ки иro6Ра}кен/й

    ведeнии vкaзaтеляс пoмolцьIoсss.

    Paзpа5oткaфoрм ФoPмьI являIoтся oдниI'r из нaи6oлеe llвтеpaктивIlьlх элeMeнтoв Wеь.сaйтa. WеЬ.сaйT пpeдoстaвляет иtlфopl'aцию пoсетителям. Если хiе вьl xoтиTе' чтoбьl пoсетители тaxl{(епPсдoсTавл*пи кaкие тo свeдеilия вal{' чaщe все.oэToделaeт. с я с п o м o щ Ь ю ф o Р v , ц c л ь i o д а н н o г o P ] J д e л а я u - ' I я e тяl l l o к a l a | ь B a м п p o с т o Й спoсoб сo3дalrlrя фopм с пoмoщьIo I'rинlrr'r}тra CSS кoдa.

    3накo

    lcтвo C 'лeШeнтoм

    form

    пPи сoздaяии фoPvъI oбычнo внaчаJlе NIЬIсoзда€ м кoнтeйЕер div' в}гt'тРи кoтo. polo 6yдeт Рaспoлo)кен элeмевт foтm' пPимеPrro тaк:
    < f o l m m е L h c d = . р о s t 'a с t i o n = . , . / i o m s - Е е s t s / р а g e ' h L m ' ' >

    кoнTейнep div lloзвoляет дoбaвлять связа1rlrьrес фoPмoй элемеrrтьi зaroлoв. кa фoPмь] и"!и тeксTa, PасIтl]Лoxeннoro llaд или пoд вeи' a тaкжe пoля. BмGro пoнять пРсднaзI'Iачениe эЛемснтa form. кorдa пoЛшoвaтель целкаeт вo квoпке srrЬmit (oтпРавить)' данньIe пo,reй фopмьl oтпРaвЛяются в URL. yкaзанt{yю aтpи6yтoм aс.icn фoРмЬI. сп0сl)6 oтnpaвкlr дalrlrых в цeлeвую URL

    разрn6oт& фоР&

    211

    oпpедеЛяется знaЧенllем !оsс (не oТобPаJкaеТся в URL цeлевoй стРaEицъI) или qеt (oтo6pDкaeтся в URL це,rевoй стPaницЬI атРи6}тa mеt hod' каjqдьIй элемент ) фoРмьI сoстоит из э]rемeнта вloдa traпPиltеP еlпo) и тeк. стoвoй мeтки' yкaзьтвaJoщeйпoлюoвaте"!!] тиrl вBoдиl{oй шtiфoP}tац!и (нaпpи. t{сp' "имя'' и-'1и..Bы6еРитe тип aвтoiloбиля>), 06ъIннo при сoзлании фop!! oп!сaниe мы Расrlojaгасl1 сJIсвaj а пoле ввoдa спРава, пor]ьзo9aтель сnroг пpoчитaть' чТo oт негo тpебуeтсяj и сдeлaтЬ 'чтo6ьI этo, B хнTМL мы Pазмещае\' эти эJ]еlteнTъIтoчво так я,iе] BtlаЧaпe yкa3ъIвaя элeмент ]abe1' а зaтeм элeмепТ irrluL| < d l v с 1 a s s = " с i е a r fi x ' > < t а b е l < E n i e ry o u I ! i т s t

    n.пe < i n p u .o n f о с u s = ' с i е a . т е a L 1 : Ь i s ) ' n a n е = ' i i r s : l . ] e п е ' t y p e = ' t e х ] : l s i z е = ] t 5 . ' . , а 1 u e = . е n t efri т 5 . n e m e| . e т e ,,> l'/. гIoмeстим o6a э"цеN{еlI,la вн}тРь div с тiпассoм с1еarfrx qтo6ьI вяe 3ависимo. стл oт вьIсoтьI дв}x элellеEтов следytoщий элеMelrт фoрп'ьI PаслoЛaIался пoд nиМи, зaтeNI в сss сдеЛаем меть1плaвaющей с вь!рaвIIивавиеl{ пoЛевovyкРaю' .]тoбы парa "мrткa-ввoд, PaспoЛaг:Lnасъпа oдEой стPoкe, 3ате!' дo6авим вер"' !lюю IPaIrицy к кoвтейIlep,v div. Paздeляrощ}ю PaспoлoжeEньiе oдин нaд дpyгип! э-!емeIrтьIфopмъ!. на pис, 7.35 мьI видиi{ пpl{lteР фoРмьl с пPиvевeнньтми прaвlrлarrи CSS'

    Pис'7.з5 гlрooаяфоpмасo стиЛвми и rраницаМи soкрyгкoнтейиеровci! ни)кe пpивoдlттся СS$кoд' исrloльзoванEъiй д'я этoй фopмы. body {ionr fаmi1!': nеrdara, sars sеr:f; сc1of: ii00]з66, font.size:1eп; - {mаrgln:!, рaddinq : 0 ; i /i яaчuo сss 4lя фop.ы */

    2.l2

    l;&i}& !. сgздз$яe кl'iri'$e'тss

    я'тфф!йсn

    dlv]iЕormcon:eiler

    1Wldth:]9l)рx' паrgin

    div}fofmс.n.ainer

    fоrп

    ieЕt;.10рx; пa.gin-to!:20pх}

    {b..def : 1!х sc1id

    {ссс, ]

    li:]ofdеr toр: 1!х soiid div+forпсoEtаi!еr с]iv'сieа.tix jиll пo над кФliдol.i секцпе;t и o6еспсчп!ае r Dертпкaьвьпi oтстyп 3/ div+foтmсon.аine. fora tabet /.na к ' ','.Di o| "d..|^ ЬвоJ1' A вo1.хttTМL{од

    д.пя фoP!ьI'

    fссс;}

    {яidLh:120 х; f1oat:1efL; xРи!едeriной

    iort

    /* дo6a&1'Ф sizej,?5еfr;}

    Ea Рис. 7'35:

    < l.-06ций кoнтeйнер div.->
    aсt1on=''.. /ioIпs-сests/рagё,

    EЕп'>

    тenстoъoе пoле с oднoй стрoкol1--> ,o.

    ./

    о."|i

    bф-.oоФ

    size=''35' v.1uе ='еnteт


    тe{стoвoе

    пonе дnя яескoль{f,:

    ',6ёds

    .!por-'>

    <1abеt>Desс.i!Lion

    < t е l t а r е а n а m e =f 'i I s L Ц а m e ' r o п s = '6 ' с o 1 s - ' 2 6 " > т ! r i s i e x t а f e а а 1 l o п s пtr]tiptё 1ires oi r:ext, its heighL сan ie sеt аnd пi11 sсro1l if u;ет' entered tеxt is noL аt1 visibLе,


    >

    гone ззoдa naрoля

    Рass'crd
    tyрe='subщit'

    vаtue.,submit

    this

    Foтm' />

    vа1uё = 'en.eт it

    hёrе' />

    I 2't3

    Кoвечнo' нам еIJ]е пРсдстoит l1PoделaтЬ всila"]тo Pа6oтьl. пpe41е чеl{ l1o-!)' чить oкollЧaтельпьtй ваРиаlI,г фoРllьij lr.l y,ке сейчa. эффект дв}х кoлoнoк дo. вoль,ro видиN'ьI!:i' B пеРвoм Paзделе ]llfi кa длип!lес сoдеP,nrtr1о.ol а Bo BтoPoп! сoдеР/кимoе Дr1lrlrвсe lleтки' яo otlи лиfi'Ieй п эьг РlздеrrеIlьl roPи3oli1а-!ьнoй рoвI]ень! пo вьlсoте. oтNIетим. кaк мьI дoбились oд'{Ila(oвoй вьlсoтьl двiх кonoЕoк' tr{ь] зaлLnп обпryIo BъIсoT} для div с и!1свeм foтmсortаiner Paввo;l з90 пиксeлal!' i шиРиllу плaваIoщeго элеnrснта ltе'rш - 120 !иксе,rаNI' oстaвив 270 пикселoв эЛe\{ента ввoдa инфoPilaции. ЕсЛи вьI хoти,rе ,vвеличить шиPиIrу o6лaсти т . н и . / j d . L . # ' ' н 0 , : r 6 ) . r L |Д е o6dUи ll к .вoиствy ,, dL tле!.i ' l ! o, , ,o сцед}юпrим эталoм' пo3вoляrorциN! 1вrцегь пleхаlпrзм Рaбoт PaaMет.и! яЕllяется o,flсnючек]е iPJIjиц эJlе!'errm t orm' дoбaв,.тениe веpтик:rдшo.o llРoсTalrсIва и сo3да' п!еткоЙ и .ooтвеtтвlюtщlr цo,rем ввoдa тексга (рис, 7.36),

    I

    ts"b*[1й"Ейl PИс 7'з6 спoМoщьюнесKoлЬкиx сrилейMь rадэеМ6а]oвыйoбликфoрмЬ вor. неo6хoдIrмьlй кoд: -

    lпаrqln:

    !;

    padding:0;i

    ooi,0

    /:.начfulo сs.gфoРмьl +/

    o..

    214

    глAaA

    7. {otia'|иё

    t{o['nэ!.€ s т6s

    и{re!фeй.a

    : oOр'' ,,,,q,, ,", :40 }: :9.o,,.,oр: 0oу' d,V-гo]л,o., -oр: rрх , о , d-v,.o., рI o, d r,сс. Lо.d6..l]o.-o.: jссс; so1id ] ,/+верхяяя гpaница визуaтънoпa 1 пи(сеj ширe' так как oяa сoпРикaсaеfся с гPанпцей dnlсlеагfiх +/ divilf oтmсonrаirёr div' сieаrf iх 1bo.dет-iор : i!х sotid +ссс; раddinq: 10рx Oрхj veтtiса1 аLiqn:.oр; ] ,/* до6,мяет jин!ю над кaтцoй сeхцпей и o6еспеcивает вepтикuьпьlе oтстyпъI*/ foтn 1abеt {п1dtnl120рх; f1oai:tёit;fort-size:.75eп; civ#folfrсоntаi]er 10p:; ) /* мФка oе!а oт каxдогo пojя ввoда+/ сoloт: +r]0]]156; паrginj0 как и плaниРoва,.ioсъ' мьI }дa-!l!ilи IPaxицу и веPтикfu'lьнoс для div с иlllенeм с]earfix fo:- и РJJде |яourич

    элеNIентa fоrm' дoбaви]lи oтст}тIы llPостpапствo l{eж,Ф' элеУеrrтaми (пP,вa и .левa ширинoЙ

    10 пиксeлoв для эЛeмента 1abel. тепePь пoРa пеРейтIr к сoздaнию 6oлеe Оrorftнoй фoРi'ы с вeскoлЬкими эл€ . }tеEтaми se1eсt, a не тoЛькo сftpoстъINIи тек

    to6авляeм

    кнoпк1l C зaвПсипroй

    П нeзавиCиIYloй

    фиксачиeй

    к дP)гt.t}IэлеменTа]{фоРм oтнoсЯтся кIrоrrкис зaвисимoй и нe3aвисимoйфик. сaц!ей,,цaвайте дoбавим в rralд}'рaзметкvкoд для тpех кнoпoк с зaвисимoЙ и тPeх _ с тreзaвисимойфиксaцией: <|--.нonки с зависиlon aиксaцией .>
    <1abе1>Pi.k o!e oiv '1"'s b' < d i v > < i n ! u .n a п е = . ' ! ё d i о s e t ' L ! p e = ' r a d i o ' s i z e = ' з 5 . v а 1 u e = ' с h о I с ё 1 ' с h е с k е d =. с h e с k e d ' / > с n o i с e 1 < / d i v > 'v -, ' ,"a.c. 2' , ]: , -л. ,е "d:


    сhoiсe-t'

    -

    Рaзра6.rgа фoрм

    2's

    <1аbеt>Рiсk ole
    ,,.,"'::l:;]lу,

    naпe: L!хset' LУpe-'сleскDox'sIzе-iз5l vа]ue = 'сhoiсe_2'

    "'."-;:]:;::i:::

    ж..::-:1"':]".=

    o,v

    , :.

    .hе.jrЬoх size=']5 vа1ue='сhoiсe-з'

    toф6

    ,d,

    ^

    ,,jiо,,,o

    Этoт код пoхo:к яa кoд текстoвъIх по

    1l,,

    P".".;;;;;;;:x;1 J".f,:;TЬЫ:;.;",,;..;}Ё: :.::.:'. T-**.."9 "."".

    ем Itol{тeЙвеPьI dlт д,rя гP},пп пеpекrgoчa.

    i ,* "".'.i -"р".;;;."";;;;;,;; "*"'*." xH{;I.ъ"::ii.;;Жffi; fi ;;.1;': i,.i"i,T}." orv &rя l.аrкдoйкtroп(и.

    Pис,7'з7,с пoмou]ЬЮгранИцкoвтeйleрoв моxнo лoнятьФрyкryрy

    oрганизацииэлeмeвтoв

    сoздaпия ф'i,, ".ti:Ж;r ;x';;fi}}:';xТ"..::*.*1ж;:]ьзoвaнiiыn. бo.пеРвьIх'

    сделaтъ из lr

    rРyпгIy'мo;.tlio j зqцaв Д'1" .,.' oo,,"unouo,,,o,,"o,vпгryи застaвить их вести сe6я кaк l-. 3а'еl . lI"пPnмeP,еL,Iи l,'.|иб\r ф'., .д""й *."*.l и к i ' цией jpvтаl кнoпнa в г P ) п г i е 6 \ д e т в ь l K l о \ е " ,". --"гсиvоЙ

    "";;;;;;;;', JeимеIoт oдинaкoвoe ^*' -.'".* ; -;:.J:";o;;il.;,"';:"ТfiTH::# ]iraчeriиe va1ue.

    пapa <иvя_3l]aчен Еьl6oP (зlrачeниe) .'- .*;" ;;;;;;J;;: i""#l'ЪixТ..iT.'."il#;J]ii] Чтo6ьI

    2'6

    lл.il&A

    ?' {e:!$'g:)

    gg*'oiiili!!r!!

    '!]!?.Fфё*.l

    в пРедьIдyщеtr{ llPиNtере Paзitетки все кlroпкlJ обoих типoв oтlroся'гся к oдвoмy on. PeделeнIJоw иN1с]lll, .деrlaТъ так' чт06ьI одвa кt]оl1ка с зависимoй фиксацirей Bo.BтoPъlх. м)хвo 1loй фиксaцией пoу'fi в тPуппс или rrlo6oе чIJ 6P:шись пPи эагРyзке стРаEицЬt, .цJlя этoгo сneдyсr. дo6aBить aтPиб}т se1eсted пРсдЬ]дlщei!1 пРипlеpе llo n selосtеd' o6Рaтитс кroп с зa!tlси\lo' }l пoсJ'едвяя I!еPDая кЕloпкa въIбРaна умoJlчаilиIo сиItой фиксациейIiеo6хoдимъIй дIя oPIаlIlI3aции элсMс}rтo! в гP)т ни,iе !риведен сsя{oд' пъl и их Рaсlroлo]кеIrия

    ю Еa Pвс, 1-з1,

    друт яад дРугoN' в кoвтeйнеРе

    buttongroup

    Ъo!dе!:о' div.Ьuttonglouр tf1oat:1eft; эad.ling:0pх; divtfоmсonЕaiпer пеPеoпPеде'яет веP!нюю гРaящy lнoпоIl ковтсIiпсPд,rя.pу'rпь' ьofde!:2pх so1id;) ,/a i/ div с пNсве! deаrfiх,uя di' Ro'lРугnвопoк 5рх; tolt.вizё!.75eш; div lпargin.bottom: а!''ьцttonЕtoцp div+fomсontаiner л тeхс.. malgiltbollom зaдaетверTикalLяьп] сoдеpхпт ]N P L]Т bolde!:1px 6o1id'} /+ oтсT\п

    !ея.jll

    IJIoпliiя

    r/

    div.ьuttongrouр div*fomcoltaine! tlехдIкпoп(oй л te !е.хoй{./

    iDрut {mтgtn-lisht:5pх,}

    и сlloвa. r-1!oчol1 к ,Yс!e)iI B этoNl дoвoJrьllo п,]aвaющий liolrтейве}r diт ll егo к,rасс с1еarflx. вaется с пo!oщь]o oтстlпoз, лPимeчosиe

    /"3аr1aетpaсстo'пис

    IrРoстoNI 'l'пP t{flellии являeтся oста'rьная разltстlta въrpавни-

    в прив6дeнtoм выщe кoдe Фeдy6т bo.del:0. этo нe. сPoзy пoфё ft.et:1et. о6хoдимo, тoк кo к 6ол ьшoй кoнтeйнeP dil1oхPyxo6щяй кoхдый рoздёл фoP. яьl, использyёт n!нию lro.der tcр дnя создoния roPизoнтoльнЬ|xPoздeлитe. сlеa:ilx лeй, и мь| испoлЬзуeм д,я дoнньlх вн}aрoнниХ хoнтeйнepoв' гloэтoму нeo6хoдимo o6вyлить ьо.der-Lo! для нoвoro кoятeй. вePol инoчr пocвяrся eцe oднo нвxeлoтeлЬяo' линия ao вёPxy кoхдoro кoн. тeйнeрq длi lPупn кнonoк' noпрo6уйтё yдoлитьn.rdeтl0 и вы noймeтe, o чeм мы прeдyпPeхдoeм. фopм явЛяется РаскPьi!аlo.

    GФзflаншe рaскpьпвarФщeгocя

    ruleri.o для фopшrьl

    217 oдиir из мIloгих ваPиaliтoв. B or,ичис

    oт l,lвoгrкIr]llеlllo sеleсt

    Явл

    кoд рaз!'еткидля se1eсt пoхoх ira кoд спискl' oн содер]riит элеllен,r se1есt с oпРедeлеI{IrьIмчислo'1 элемeнтoв option: < l --выпадaющee Meню.. >
    Piс]< fIoп леn! and then сLiсk < s e 1 e с t o а п e - ^ п e n u с h o i с е '>

    su]rrit

    bеtb'i

    Piсk yoxr fаvoтiiе ,oр.jo-

    ,,j

    E-,

    1.ёl

    ,

    ,:o

    o,,

    o

    o

    ор

    guitаf

    ,,

    oo,:o ' vo с6 ,

    сy,o],

    а/

    .on

    tt

    ./orv

    нa Pис. 7.3B мьI вид,Iп{Pез}xьтaт,

    Pис,7'з8

    с пoМощью элемeнта s.leсl

    e1оxвo создатЬ расKрь|ваЮщeeся мёHюдля фoрMЬ]

    Этот элcмеят ве тРe6уe'I'ся дolтoлЕительнo сs}кoдa, достатoчнo o]iЛoii Pаз мeтки, для paскРъIваIoщегoся меяю пoдходит Css, и.полъзoвaппьtйд,ljя текстo хнТмL пoзвoляет дoбaвять пoдменкr элемeнтaм seleсt с поI'оiцъю тelа орtgroup' Ilo этa oIтциЯ дoвoльrlo с-qaбo пoддеPживае,гся 6РaузеPaми, пoэтot1у гoвoPить o нси пoкa нe сTo!lт.

    o'
    z1a

    rjlAвя ?. (э3даяиeaФ''l.o8aятФ 'Пr€ a Ф3йс3

    специа,'IьIrьIйIоIасс и пp]rl{еIrивmargin.left или float: lэf. ' Taюке мФtlro вьr 6paть еe с пoмoщью сeлeктoPа aтpи6yтoв. нo u lnternеt LtРlorеI этo нe ра6oтaет. пpнr^ёчсниe пoлный сss.кoд и кoд Poзмeткимoxнo пoФoтPeтьнo сoйтewwv.ЬЬd.сom/

    фxo.

    Peё9efi| th5f!.m зnd рresss!ьmi| Lаbеltexгвaе9 i;,ъl''l""*t". nerе аno . (аnge

    l

    t! ье,/

    П сhо]сe 1

    E сhо.в М сhoic€ з

    Iъййй leоllъqйъ{gl Is"ь'[1ЬьF.;l P и с , 7 ' з 9 Г, o т o в а я ф o р м а

    Pёа,93аqияn!'с'.а

    2t9

    фy}rкц'rюс]еarтeхt, а д/тякахдor.oпoля с иrrстР)кцией_ aтpи6}т onfосus, вьг зыв]loolийэry ф}ък|.июи oчицdЮщийлoЛепри UrcjЧкe' Пoслe тoгo кaк BъI пРoделaeтеэти изменения' фopN!а6удет!ЬIrJrядеть,кaк нa PИс.7 'э9.

    для пoдIoтoвки п0д06пoй фoPN'ьI Nlo)lrнoвanисатъ сo1.I1истРolt кoдa. пPедстaвьте! чтo ФoРма электРoEяoгo мaгaзиlra мo*ieт сoдеРкaть Paскрьlваloщийся списoк с 50Iптатaми и дPyгoe мeню с з00.тPaнaп{и. oдЕaкo в л106oм с-дуtlаевсе пoдoбные фopпfьl 6yryт схo)I{и с яацrей' и lrесмoтPя на o6ъе!Iньiй кoд, их сoздa. ние' пoддePJr!кa и измеIiение liе яeцяeтся свepхслФl{I'Ioй зaдaчей'

    Peaлшзaцияпoltcкa кoмпoнент пoискa, пoдo6ньtй пoкaзaнЕoм!' вa prlс. 7..10.мoжнo вaйти пDaкти. чeски Iia лIo6oм сaйтe.

    sЕАRсH

    GA Рис,7'40, прoоoЙ кoмnoнeятпоисKа

    кoд paзп{ет1tйддя сoздaвия такоIo (olllпoriеI]тa вьIIляди,г с,.leдFoщим o6Paзoм|
    < a h r e t = ' j а v a s с r i р . j d о с u п e n t .s e а t с h ' s u b п i t ( ) " > G o < / a > A вoт нeo6хoдимьlй сss.кoд| heiqht |44px; /rвысoтa кoятeйяерa*/ яidth:22о!хi /9пиpива кoвтeйнeрa 1/ frаrqiп:]0pх 0 о з!рх;

    /*вPЕМЕнlio смецar. div oт кpм o@a 6рaFеpа*/

    diD*seаrсharea {раdd1nq.tор:5рх; сo сгандаР1амибpаyJepoв

    ]

    /+переопPедсл'eт значeн!е д1я сoвместимьIх

    22o

    rлAaA 7, {&}4ан*e 1Ф*l'tэ"1a'

    'lfiёp:}ейia

    font size: ' 8еп; /* р3мер шPифтasFАRсн+/ с o l о т : * . 46 D д . ; ] {seа..nar.а ioIm inpnt 1 пol' ввoда+// boтdel to!]| 2г,х so1id il546!AЕ''/* стпльгРан]'цьI .

    boтder .iqht: 1рa sotid +546i]AF; boтdеr bottofr: 1!х so1id н546DAl; b.rder.teit|

    2 р х s o 1 i d i i 5 4 5 D A'F

    size l '9еп; /+ раыеp шpифтаlRoдпмoгoтсidа:,/ baсkqтourd- сotот : tE0n0I0' //*фoнпoллввода+/ f.nt

    /

    * сп!ъ ссыjки Co +/

    I

    к элеveнтy пoискa пРиМсвяется 1.oTя.e пPJ{нцип. что и к пPeдыдущeNry пPи. MeP} Пoлe inрut и кнoпкa oтIlpаBки нахoдjlтся вн}тpи з"пeпIеятafоr(L кorда дaнEыe oтflPaвляIотся, oни пeРeсЬ!лаIt]тся } URL. зaдaнн}']oв aтРи6)тс aсtiоn фopмьl' B IтpедьlдyщеNIпPимеРe Nпnиспoльзo!а-ц!I кпoIII.yд]rIяoTпpa9ки фоPмы. здесь N{ЬiпРимeни],l тскстoвуto ссьIл!y, &L1ействo!aв слeдyloщylo ф)1rкциirJavasсгiPt в hтеf ссьтлк!тGo:     с0' Фyrкция sublliс встРoeEa в Jrvasс.iРt' Iтoэтolltу длл ee Рa6oты тpе6yе,гся лиIпь тaкoй не6oльUroй фPaт}!ент кoдa. .цля I'lспользoвalrия этoй кoнстPyкции сh нa имя фoРмьI. Е.л't ]{.eфoРмa Dдругoй фoРме пPост saм llеo6xoдим следуIoщий кoд: имeе,r llNt,Isho'pinqli5t. < а n т e f = " j a v a s с l i l t : d o с щ e f , t . s ь o p p i n g т , i s t .s u Ь m i t( ) ' > G о < / а > Мы тaкжe дo6aвиiи пeкoтoрьlе ст!Iли li элементy input, Больilrиtrствo дизaй. пеPсбаPщивaтЬ' Tак м Irерoв не дo6aвляю1 It пP!цаTь фoplIaм }ъик,rпьный oблIrк. l{ъI тaк,i{e }r(a3аjи font slze 4nя пoля ввo. дn, вoзпloхGlостЬ чеro мтroтим дизаrillepav IIeизэестIra. Taк Еaк этo yt!еPLши |ь РaJveP

    ll|lpиc\{явЛяe]lл

    пorе|Р|'|V всл)'|аt

    РaзмепleяI.я фoP\4ьl u oгРaпirчеrrвoм пPoстPaнст!е' нaпPиNIеP в бol.oвo;т пaнели.

    Wжвgw&. Coздaниe Web.сaйтa

    измeняeм размер столбцовдля (oррeпнoгo mбpэхеnия Учим.я coздaватЬ гибtий зaголoDoK

    ] рJФики

    LLOIJ

    сoвeъi пo oФормлениФ coдерxимоrо дoпoляитeльные

    B lloслeднeй гnaвe мьI o6ъедияим все пo,т}.reвньте3нalrия t4 сoздадtNt стPaви Цы' кoтoРьIe зaтeй oпyблиIryеil нa Рea,rьEoм сaйтe. Taки!' o6Paзo!t' вы нe тoль. (o пoйп'ете с}"rьпРoцесса сoздaния сaйтa. нo и пoэпакoN{I,lтсс!с дв)!я пoлезEьг vи гIPиемaми, Bo.пеРвьIх, вы }звaer.e' кaк N{}loгоPaзо!ъlе комnoEeвтьIl вPoде создaн!ъIх в IlРеlьrдtщц глaвa\ u'aблoяoв стРаlIиц и кoмповентoв иIrTеPфейсa, мoг1т yскoРllть

    222

    глAa& a. сo3*аЕ!!e Wl.}"сайta

    пoвтoPяI0щeй€я пPoцeсс Рa]rPa6oтки и из6aвиъ вnс oт РF'нвoil ве ва техяoлoтиiJ. смoхете сoсpедoтoчитъся нa oблике. a

    рaбoтЬl' Tаx }ъI

    BGвтoPъL](' вьl нayчитесь Paзpa6aтьвать стPаIlиtlъI в (кap).сeJrьЕoм Pе]l{име'' зa пеРвьd пoдхoд пPoстo PaсIloлагaй,rеuсе элеllеtl1ЬI стPa1rицьt загoлoвoк' o6лaсть !i aд. в ь}'(яьIх 1Iсст&1и дoбaBп,Iть oснoвньIе rraвигaции, облaсть сoдePх!мoro стили. l)с06o не зaбoтясь о детuп. 3nтeм, взтлян}ъ на сaйт свФrиl! в3пядoЬtj вьl захoдIrгe нa втopoй noдхoд. ЕaстРaивd детa!и и дo6ивdсь едиtrolo oбЛиItа, Bьl тaк'{е пoйNteтe' чтo едиlroo6Pа3ие легчe все.o дoстиrается за счет пРo' стoты. нaлPимеР' нa PaссмaTI{'iвaе:vоN{ l{'Dкe сaйте испoльз)€ т ся всегo 2 шPифTак o Чем '(е oйдст Pечь? B этoй Iлаве мы 6)де]!Iрa6oТaTъ I.lадсaйтoм для кяиги "Тhe маг!'сl1ous Lаnd of snеrgs" (8oлше6llая стРaнa гнo!1oв)' детскoй фaнтaстдчeскoй истoРии, нaписaн}loй пlollмдедyп]кoй B r925 гoд,v сaмдж. Р.Р' Тoдкин пPизнaвa,!ся' Чтo этa кrIиIа в]IoхIIoвll llиIи "х06. 6ит', кPo!'е тoгo. oя лIo661 читaть ее свoим дсr.я!I, B связrr с пoвтoPllьIll изда. нIrеN{кIrиIи я pеllтил сoздaть сaйт в ee пo,llllePхIry с ссъIлкой наAmazon' тдe yoя(. tlo ее пPиoбРести. Гoтoвы] Тoгда зa делo'

    HачинaeмCo3дaвaтЬ сaйтo rнoмax в этoм )тIpа'сIеiIии i{ъI вoспoль3lеl'ся сoэданtiьii{ в главе 5 lrlaблorroм с тР€ м a 6oкoвъIми кoлoнкa. кoлoнкaми и зaгoлo!кoNl с a6сoлIoтIro пoзliциolIиDoваlIпьIми миинеб)jеV|Ри!еЬя,DпPиev'oPrцJrе,ьl|ь|'lипol'rvи,РаfttlогРе'IIrЬ'ЙвIлa. ве 6' B си,Ц прoстoтьI вьI6Рaннoтo спoс()6а. Есп]r вьI чвствуeте тoтoвIioсть к испoльзoвaниIo шaблolra с oтpицателъllьI]lfи пo]rями' )'Ioxете 3aгр}зить егo с сaйтa l{ъъ,ЬЬd,сom,/n\lln, noпo,ltl и . елъньl е эo вDезке с]й, o | н o v . ч . с о з , r а н н ь ] й . п o ! 1 o ш Ь | o o 1 P и ц а т e , ] Ь | l Ь | хп o л c й , , в I ' o I I ц c J т o й г л а в Ь l , вни,'noвие

    Lдo6лoн 06.0лютн0й Po3мeтки с зoloлoвкoм мoхlo Ььd..om/stv|in,

    зoгPузtтЬ с сoйто ]ЦlД!.

    'ачн!irei' Фзilа8а'ь с'йrs r*si.*x

    22з

    o6Paтите внимaниe. чтo в Pеа-пьIroсти сss и xнTМL для oднoй стpalr'{цьI xРalrятся в Pa3ных фaйлaх' кoIда вьI yчились сoздaэaть сTPаrrиL' в глaве 5, для yдoбствa мы дo6авлялIr сss"стIa,rи пРЯlIо в Рaздел зaгorro!кa хнТМL дoкумeнтa' Тём не мeвee, тaкие стI]J.IидoсrynЕьl тoлъкo стPaIrице' в кol.opoй olrи Рaспoлo. p o ш o . ' , | к к , к q , 1 e й (т в и 1е Л ь н o . 1l J : r | . с D , ] o\ l н o г и е с j Р a . IrI{цьI сaЙTа испoль3у1oт oдriнaкoвь]е сти.!и' Пoэтoмy мьI пеPeместt,lли стили дqя riruxдогo пIa6лoIIaB oтдeJrьEьIeсss.фaй. льI и oтпPaвиrrи их в кaтaloг сss на сaйтe lr.l{'1{l ЬЬd, соm,zstrЦц. этoт кaтa,lor рас. пoлаIaется lra oдвoil )Poвнe с xнTУL.дoкумсIттoм и пРивЯ3aн I( ЕеМу с пol'o. дIьIo тera 1ink' Taким o6paзoм' д.пЯ)казaния стилeri вместo ЕcnoсPeдственIio )'кaзания сти. лей пPoстo испoЛьз,1йтe теI :ink в зaroлoвкс хнTNIL.дoь],a'eвтa: ? i.v

    a.6r'I

    ss,w-."бл,Jа

    Если oткPьIть любoй фaйЛ .сss, вьl }видитe, чl.o теIи sty]е вo вIiепItiих тa6. лицaх стtlqей нс испoЛьзi]oтся. - fеI link !'кaзывarт 6Рaу3еPy,чтo та6лица сти. лeй сoдеР]ltит тoлькo сss.кoд' кoтopьIй вaчинaетсл пpoстo с пeРвoгo oбъявлeIrия. o6Paтltте внимaЕис' чтo y ка'qцoй та6ЛицъI стI,ией шa6Лoнoв Еa!{ей кяIrrи для примеРa пpoстo l!спользoва"sи имя-1a6лиць| ( |иЛеi]'...' внимoниs

    o6Poтитeвнимoвиё,чro осливь|oФoвитeтerи stytё вoкруr.тилвйl т06лиц€ оил6й, oнo нe 3orрyзtт.я.

    CoздarrПC cтpyrffyрьl кaтaлoroв кoгда вьI пpистyлaетe к сoздaциIo lvеь.сaйта| в!Iaча,!е слery€ T Pазрa6oтaть лo. кallьньrй кaталoц содePяraщиli тoч}rylr кolrиIo гoт.lвoго Wеь.сaйTa' P нoгo в rroРIieвoм каталoIе нa WеЬ.сrPвеРe. кoгда эьI зaкorlчите создaEиe сайтa или пPoстo захoтиTе пРoвсpить имeюцийся PезyльтaТ нa дaнноlt этaлe, Ireо6 хoдимo скoпиPoвaть сoдeРжиllloе лoкarlьяoй паIткl.tв кoРневoй кaтaqol сеpве. Рa. нo нe кoпиР)йте сaщ" папi\T лишь ее сoдeР]кимoе' o6ьIЧв() для кoпиРoвaE'rя стPaниц сaйта Irа WсЬ сеpвеp испoльзуется FТP. клиelrт' для вxoдa Еa сepвеP t{еo6aoдимo знaть иillя хоста' lloлЬзoвaтeля й пa. Poль. пoсле этoю !to,(нo зaгрузить фaйльl !l пaпкrr в кopEeвoй кaтa-поr сaйтa' сведенtrx д,1я нaстPoйки FТP.Kriиеlrтa вьI мo'(eте пoлyчить,v Iroмпaнии| пPедo. стaвляIoщей хoстинг для вaшего сaйтa. ли6o y сетeвoro ,дI'инистРатoРa. ес]rл сoздaeтe кopпoрaтивrrьтй сайт'

    'лn}il

    3' {Ф:!Aззя. lrj*'}.:зii'a

    кoрнeвoй каталoг Kopнeвoйкаталог- этo кaталoг'на KoтoрыйуказываeтUвLвашeгo сайтa, UвLлредoс тавляeтУникалЬнЬЙ адрeо длЯ кa)кдoгoдокyМeнтав Интepнeтe' Kаxдый домен, нaпpиMepsne.gs,сom' с пoмoщыо DNs (сл)хбa иМeндoмeнoв) свЯзан числoвь|Mименeм ка'(цo.о сepвера в ceти).Kогда вЬ|yказьг о |P.адpeсolи{yнИхaлЬнЬlм вaeтеURLрrсyрсaвбpaузeре' DNs нaходити мя домeнa' вЬlчисляeтlP-адpeс связанногo cepвеpа и пepепPавляeтзaпpoc этoМусepвeрy. Koгдэ оeрвeр гrолучaeтзаnрoс на отoбрахeHиeстpаницЬ|'он видит иМя дoмeHа, свя. занноeс запDoсoM'и мoxeт пeр€ п рaвитЬ залрoс в oпpeдeЛеввьrикатaлoгсeрвepa|oтнocящиЙсяк этoMУдoМeнУ,Если UпL сoдерxит пrrЬ к кoнкpeтнoйстрaницe' oяa oтоЕолиxe UвLЯвляетояпpoстЬМимeнeMcаЙтa, бpахaeтся в окie бpаузeрапoлЬзoвaтеЛя, вalrриNlepМ'sпerqs,сoг., пpoИзвoдитсяпoиск no кoрнeвoMукaталoгУиeсли наидeна стрaниЦaс иMeнeМ]ndeх,hоme ИЛиdеfaultи рaошиpeнием,htmиЛи ,htm' oна автoма-lчеL'

    l o oбо

    ааo

    сq,

    иными слoвaми,koрнeвoЙкaталoг. зто катaлoгвepхнeгoypoвняв иeраpхииWeb.сaй' та, и oна свяэaнасадресoM вашегo сайта дoпoлнителЬgыe сведeнияo DNs мoхнo yз - а - o н d ( а й . е , n ( е | N | с( М F ' с ! ] e ! - : ? q s . з ! | h o ' | ё , v a . d n ' , ! j т] l л и н d L а й t е ч 1 l р r 7 lvw hostinfо r]Jl1rec].Фr!шld!sE!!j5cдеl, кali lno!мIlarioсь РaEее! в этoй D]alre\ъI 6yдеьtиспojlьзoвaть raблoll с тpеl!я кo]roякапttl (6oкoвъtми с aбсoлютIrьIll iloзициoяпPовaвиеM) и загoxoвкoll' для этoro BъпIoлIIIiте сле,{}Фщие дсис]вия' l, ЗarРyзиrе этoт Iа6лон с и\]евсN! tlircе-сolшlrDs_aьsotutе hсader с сaliтa м1\1v,ьЬd, сonl /s t\'lin, локмьвьIй кaтaлoг для сaйтa нa вaшсIll (oi1пьIoтepе и ira3овитe Coздаiтте 2, еIo snel.gs_sitе. з, скoпиР!й1.е сoдеP)тrипloекaта-!oга tlrгее*сolumns аЬsolllte hеadеr в кaтaлo. sпеrgs-snе. IIРи пPoсмoтРс ! llРoгPа]tllе Nlaсroпсdiа Drеаmwеavег стР)ктyра opraпизaции ф:lйлoв вьIlrядит. кaк пoказalro нa Pис, 8'1, 4' oчсвиднo, ч'гo iIам rryвrяo изi!eни'lЬ t.tмеIlафай,roв' поэтoiry псРсиllе'ryir.е tьгее соl aЬs,hrm sindeх.htm. aфaйl с тa6лицей ст!'!ей threе сols aьs,сss n snегgs.сss.

    L} ё

    &

    iili!.i]"Ё."sз'-:i!i,rij]di-i

    thrеr-.о|Jзbsollrе.hrm

    PИс.8.], Лo(алЬный(аrаЛoгнашe.о саЙrасодepяит хнтML.шаблoN И Kаталoгс55с ?аблицeЙстилeЙ

    l.{аqggа€ e {о]дaвa.rь.ай' Ф fнor'ах

    225

    5. Taк как мы изNtенили иN'я фaйлa.сss' нсo6хoд,Iмo измеrIить URL в теге 1ink дoryNiентa .htm, чт06ьI пеРеI{мeвовaвIrая таблицa стшей oстaвasaсь связaнЕoй с хнтМL.файцoм, lloвая ссьlлI.a вьiIлядит тaк: < 1 i n l rh т e f = ' с s s / s n e . ! , ; . с s s ' l t e t = ' s t y l e s h e e t , t y ! е = ' t e x t / с s s l / >

    6. ТспеРь откРoем файл indех,hlm в 6РaреРe и пpoвePим' удaчIro nи мьI пРиI{PеIll&цифaйл с тa6nицей стилей. Если хliTN{L пoцчиTе pезультaт' пoкaзаi{ньlй Irа pис, 8.2,

    не видит тaблицy, вы

    Thrее сolumn layout with hеаdеr

    Adding a Hеаdеr

    flnс'jоml i:ч0.s ftюlуd.

    Фi.|pшftllfulw.w.t6i! lаtr rqlB P. ц{d оi

    a

    lc 5idс Ф]uшs'

    Pili а lny ьilо' Iф pdiiд

    {е Ф М

    ю ф'm

    оtr dt sqle! vd uYn

    *с r},. hемeп

    Pис 8 2 ссьjлкэ 3атаблИцyоилeЙ не pаботаeт

    тh.@ сo|uhnloYoutwi1nифdФ

    РЙс в,з ссЬ!л(анатаблИцyоИлeйуказана вернo

    Е

    226

    гЛRaA a. (oзЛig.lc Wci,-.айra

    Еслп вьI yl.aзanи ссьlлlT вeРнo, тa6лrтцa стидей зaтРIзится' и дoтqмeнт 6yдет вЬlIлядеть' кaк пol.aзaнo Еa Pис' 8.3. задaв ссьIлкy tla тa6лицf сти-.тей в ХнTмL.дotlTlIепте' lloPа пеpеxoдить к Рaз. сайтa на шa6лояa. нaчIrем с сaпIьIx азo!, 6aзe рa6oткс

    Coздаe r apxитeктypy Cайтa дaже д-пятaкoro пРoстolo сaйта имeет смь]сл НaР'\сoBaтЬ auафаlv-9 aРхunaстцpы' пoзвoляIolr{yo rrpoдY!1ать стрyкfTpу пPoектa пеPед те]!I' каt( пРистPla ниIo кoдa и сoздalrию rPaфики, ТaкaядиarPaмl{a oзвoляст кoнтРoлиpoвaть пРo. цeсс сoздa!rия.сaйтa. l]a Рис. B.4 пoкaзaнa дrflгРапtмa ддя сaйтa o гEoп!aч' для сoздalrия пoдo6нъIх диаrРаlrм мьI испirЛьзуем пpилoJl.ение мiсгosoft visio' rro тaмtе гIoдoйДт 'I тaliиe пD,Iлo,(еrr,и' I.aк Аdoье lllustЙсoг. Maсromediа iчyдеcная стpана гнoмoв' AFxитеФ!aWeb.сайтa' вepсия r зd/05' W,bd,.om/sry|€ s

    Рис,8'4.наэтoЙдиаграммe кахдаяоpанИцасайта лрeдставлена ЙхлиниЙ блoкoм,а связь|вак'цЙe сЙмвoлизИруютссьlл(и

    иэмeя}a*l разeg:Pl!

    227

    FгeеЬand' Nlaсromеdia Firе1тorks, ПРeиNryrцeствa Nliсгosoft Visio. пePемещения 6Лoкlrв после сoз/]alшя ссъ

    во3мo)кнoстЬ

    ний' кpol'e тoro. здeсь для сoздaния мeтки 6"onu дo.'u'..,й.рo.тo

    щелкE}"тъ

    ...,,"".*,,:.,;,]l,ТТlili].iТ,l'.3i! o""".

    пPимёч.ниe

    дoпoлчпeльныe свeденa o оoзoo6o-re пoдo6tsыr ди",o."", '"*","*". ч ь , eq л ' з o l P y з к nF 0 6 o р . с " м в o o o вv ь i o ; л , . e P sм o " * - . ; * "- " .;." с и д ^ e й м с о . о P р e ' o { w t v , i g . ! е t l i o l v ь v o с o Ь 1 ,т . * . p " " o * " . д y " . . p o " nд-"o.,.. e r o к ч и r у l h 6 E J e m ё 1 ьo i U 5 e гЕ , P o . i e п с 6( и з д o т e л ь . . в N o ev Rideв, 2oo2l, я& лqюцуюф кфPпыфoц}м P y к o в o д с т в o мп o ] . o P и p o в o н и ю p o , p o в o ' * " weD.сoитoв и прилoкeний. "

    *-*e ыjдими н-eкoтoPые aсiтeктъl презснтацfiи. налРимеp.

    -...Y^чтo r.:.'-1 1. стpaIrица сaйта 6yдеT яснol rлaв}Iaя сoстoять из зaто-,]oвna'oблaст";aвй. ции

    в лёвoЙ

    титyла

    Aп-o]Jl{е

    с пpJвoэoll

    jjoвoстeй

    nfe.|"vы

    и1JфoDI!aцисiI'

    s пpаdllи

    кUjoЬl.с

    l'

    liзмeняeм pa3мeткy сейчaс мы дoлхtrъI изrt{е}Iитъкoд Рaзleтtiи шa6лoнa' ч,гo6ьI oн oтpаяrа-цпРидI' маI{IryIoяами стpyктyPy глaвпой сr.PaEицьI' t ' t l а ч а - q еи J v е н и !

    оiv д

    }io,lo| le L r' п]oJиv

    o6P!оv

    < 1 i > < a h l e f = ' . + ' > т ь e з L a . ! < / a > < /I i >     It1us..аLiоns<'/a> <1i>тhe Author<,/a><'/1i> < 1 1 > < аh r е f = ' 1 ' > R e t a L е d

    Linis

    <а hrei='t'>сcf,taсt

    Us

    3aтeм изменим кoд ripaвoй кoлoт{кrr:
    < i m g s : с = ' i m а q е s / s n e r g s - b o c k _ р r o пjoр.q ' / > nIебojъшoе !306рмевпс' ! кoтoPo!\ ,,/ впoс1едствии мы дoбави! ссылк,т ва A!ao!*/

    228

    rлA3& a. do3яанfieltl€ b "{aй.a



    snergs'

    to be тe llbtisnёd

    by сo1d sрrifq

    Douq1аs AndeIson, тOtkien sсlotаr,

    Р.еss


    • disсu.ssеs tъе sneIqs

    TеrlсPЬ пеРспишем зaмеяитель сoдер]riиIlolo в drv Ir до6aвиNt div яижнero (в Itoде вьiделeнo )ltиPтrьIм) . пoО!е сoдеPюi]огo' кo,oIrтитyлa нo вЕт}тРи dlv ,',в)o..

    r,ёsё,.,,, ,,.,

    . ьo ,o, h" boor : / с , .. o,, i ,о o srс=' iпаqes / qorbo 180ш.jр!],пi.*h='1в0 hёi ьt=''248. /> пpимёчoниё

    s,е q, ''

    тeкст для Фрoниць| взят из сoтьи, 0пу6л икoвoнвoй в xyрнoлв |n'ioпt в oпрeлo 2005loдo,

    v, lёrio', дсл]o.s,. ,o,'|l 'ё,, о ё:oh boo,,J,, ., o} E.д. !ryke smii! (18]з-19з5). It lras pub1ished i! 1925, рrе-datinE .1,R.R. тolkiеn s .тhe нolr]riL' ъy Lеn уёers, тьe book tеlis ihe tа1е Lеtts Lhe storУ of tпo sпа11 сhi1drе!' Joe ald sУtvia' пhо navе been Iesсued fIom ,h...

    "!,"j

    sцрerilxous

    i,6

    1',

    ь\

    с]riidren,

    1'i.,\,,

    ,,ho.,.

    and transpo.tеd

    to tnе Ie1ative

    safety of the Lаnd of

    E, A. lфke smith's 'тhe l4аrvеttorJs Land of snетqs., аt аny raie to Lhe ,o"bo '\6 jён6 o. ],6 o е е|е,, -л h" '"., o,d o. се o d'.dё,hёod Ф1 е,,aoodao]8-,0, ,ё ,,о)y' v,, oo o,r a, ,л,oл,,io sourсe book fof the roьbiis&*82]0;<р>J.R'R. тo1kien /rтсг Ъl^.\lLo,е

    по Фojя.г.oз

    Й1Ь вpРJ{

    в 1eкl l.

    дtonq t]re wаy, theу enсorrnteт а forёst

    inhаbiied

    bу friеnаry

    сinnаmоn

    Golithos, lrho is tryinq Lo Йend ]lis liаys (nе lonqeI eа|s сiltdren beсomе a veqetатian) ъnd a i]iсled йitсь nаmеd liIotЪеr !.te1drum'
    аnd hаs "

    ,p

    }lзмe!ie!'!?аr!'Е?к,

    229



    <1i>    тhestory
    ь'"t=,4",,,,u"llat1oпs

  • .а ь!ef=''* 'тhe AцЕho../1i> < 1 1 > < ah r e t = . * ' ' > R e l а t e d l i n k E < / a > < / 1 i > .11><а hfet=''д''>сoдLdсt UE. ,а,. /1i> <ц1 сiasв=nf iDeplint'> <1i>&сoDy; 2005 wyte-sпitь

    Е'шily

    тФEt

    - а11 lightв

    !6вeryed

    . 1 i > < a h l e f - , # ' ' , f 1 п e р ! i д E < / а> < / 1 i > <1i>tems

    of uвe     d


    of сontent div

    >

    Mы дoбaвили ниn(Irий кoлoнтиryi яспoсРедсTieI'Iнo пеРед 3акРЬIт'см div с иNIeвеп( сontеntаrеa тaк каl(| н€ с мoTpя пa тo' qтo а6сoлютqoe пoзицIroниPc вaние является бьIстPьIм и ваде:ltяьINI сп0сo6oм сoЗдaнLfi Paзмeтк кl]ми кoлo}Iкallи' Еa пр я(нo oчистить элeмeнтьI с абсoлют. ньIм

    позициoIiиPoвaIIием!

    пoскoльку orтir въIбивaкrтся !Iз 06щеro пoтoкa ЭТо oзIiaчa дoкyi'ентa' oпIeстить нt'l]{iяий кoлoнTиryЛ пoд 6oк()вьIми кoлoIrкаNI'I и зaстaвить eгo смещaться вниз пo N{еPе yвеличeЕIrя их вьiсoТы, кaк сдела,и в глaве 6. Есjи вьI пonpo6yете, тo }ъидите' чтo кo.да 6oкoвьIe кoлoriки въIrle o6лaсти сoдеpя{иiroro' кoЛolrти1)Й не смещaeтся вrrиз и 60кoвьIе кo]roнки Eaе3]rаrот нa нeгo. Пoэтoм)' мьl пРoстo дo6aвили кoлotlтитyл в кoнeц o6лaсти сoдePl{имolo пpoдoл,l€тся прн,iёчoниe

    написan

    oбЬeм 6oкoвL|х tтиrке кoлoвти]}лa. пPи этoм

    пеРeкРывaть

    вolpа(тет. oни пPoс|o егo Irе бyд,т'

    ЕФи вь|xoтЙтФчтo6ы кoлoнtи'улзoнимoл вс6шиPинyoкнol и.noльзуйтвц06. лoн с oтрицo'eльвыми пoлями. дoннoя xe Poзмeткo являётcя6oлee пPodoй. весь этoт lroд] вьI пo.iтyчите стPа!ицy,

    кoтoРaя

    пoказaвa

    вa Pис' 8.5.

    2з0

    rлABA a. toзда}ф &ь.<ай?а

    тъгa

    eьm

    ъ.

    сolgпa lс'og} wilh яесd.г

    нoьь&

    .ьE

    wrl tм grп.lb*

    ьd

    of

    * аa9!0пфпl

    PИс.8.5'таRвьlглядИтHaшастраница 6еэдo6авлeвия сгилeй

    Co3llанПe 3aroлoвкa o6Рa6oткa кoдa нaчнeтся с дoбaвлeния гРaфиqестioro зaгoлoвia для стРаriицьl. сейчaс вместo Еегo видelr въIPltrввeвEьIйпo цeнтPI тeкст' N,IьIхoтим дoбaвйть вмeстo неIo IPaфикs нo тaк кaк Разметкa стРaницъI ги6кая' тo есть шиPинa зdв,{.иУotти oт pаJ\'еPа oкЬа 6Рз)JeРа,нeo6хoдиvo вЬг floлнитЬ дoпoлвитenьвьle действия, чтoбьl гpaфичeский зaгoЛoвoк зaвttмал llo шиРинe всe oкнo.

    9':й3t'iв*l,азпe'{y

    2зl

    дaвaйтe взIЛянe},'eще pаз нa 6лoчнir(J мoдс,Льj пoкaэaнi{yю в r.]laве4' нa Еей ..'' виднo' чтo фoнoвое и3oбPa-кcниe el{еl

    этoиесть Iс1-R)ч кyсxе'y, ё,,'' *",'..'.#i:1fl*"Т;r-хj;;:,",.#"ж;; пo центРy oблaсти зaгoловкa и" сдeлaть т

    п-'I.авнo с!ива-lтись сзад"""''" ф.".";;:'*"?,.:::::.Тх.Т;i,xH?J: yзеРа oкаj{eTся lIIиРе изo6Рarкeтrия.

    .;;;;;;;!]*Ё#::,:il,fr"Т: Р".. ?]:.Т:r,ф.Т'"Т:lt ...ir-" пo 6o

    i:#':::#:A.iцi:;il:;},'ff{J'i.1'ЁxН:Ё:

    вoчv цвeтy oблaсти 3аrолoвкa (#FFFFFсС,/. D-laroдаря eгo дoбaэлсн ,r<eмпo"тyчить плaвньIй пеPеxo/.{oт изo6PаJa."'" " фo"o"o'y цu",y

    Pис' 8,6.делаeмтак, чтобЬ цветiа кoвцах изoбраxelИя пoпenеiнo с'аiовиnсq nрoзoач8Ь]М

    Тeперь, когдa мъI дo6aвиI ,lзо6PaJl{ение в civ заio-lroвкa:
    ,r":9:.hе-оe..,o:f' tiпg 6:с-'i.аJe, ildth:'7?6' helqni=,60, >

    a,,.,,.е

    t]Фllе ]oLJ

    ё.,о ,,,ге!qs



    4ьryvсlLoц,sffi.ffi в.ron ть. нa!ьll tlr.E *.l th. н

    Pис, 8,7' сoздаетсявлечатлe!Иe,чтo иtoбрахeния

    запoлняетoGo ва всю шИриHy

    2зl

    г,!Aaдa.

    с9.да*'e

    g'ёЬ..ай]ia

    | | в r а i : , л и u ес l и l r й ) r u . e \ | ф o | | o в Ь | й| l в t ' д 1 я ] Г o г o o . V : ьordеr. tэrL-аtiоn|.enсe.j djv{ьеadе. {Lеig]rt:60рaj baсtg.odid сotoI:Ё!lс; noмощьФ lelr.augп Nь' о6jeспl зaroлoвка.с цептРпруе! bo.Еoп: 1рx fl960 so1id,] /tстил' сoздaстся шлloз11я плавнoто пеРсloдa изo6РaкеIr!тя в фoвo!ЬIй цвет (рис, 8.7). ТспеРь дaвaйтe зaймеl1ся xеloй кoлoнкoй с o6xасTьIo tiаэигaции.

    Coздaeм

    o6лaсть

    нaвиrац}lи

    Cлeвa

    для левoй кoлoliки o6Лaсти нaвиraции в Ii f i q 5 ' 1 . ] . \ | mи J п p и v e P o в | | э в L l5 , 'гa6лицy стилей и скonиp)aiте стили из фaй]la uscunoгdегеd i2,htrn в Paзме. ст]rтe их I1oсле стилей div+footer. гloсле этoтo вarrrатa6лица 6i'дет вьIглядсть IтРимсРIio тaк| d i v * . i q ] r t с c t ш р { t o ] t s i z е : - 7 5 е п ;] d l v * 1 i в t c o l t a l n ё ! { Ь o f d e r : 1 р x 5 o 1 i d * 0 0 0 ;я i d L h : 1 5 0 ! х ;t o ! t e i z ё l . ? 5 ф ; m a l g i п : 2 0 р x l ) / . E o н т ё f u e р , Йспoльзoвaв@i в исxодaoм rршepe*/ .tiv{1iвtсontаiler u1 tьorde!:0; М!gi!:12рx 20pl 12рх 1.25ф; рaildinq:0' 1i st - 6Еy1e-t!.рe :noпё; }/r'1ojя слискaи }'дшешiецаpкеpoвr./ div*1iвtсoпtаiDer 1i (ьordё!-ьottoпl2!х dottеil *069; М!g1!:0, раdding:.зem o ; t e х t - i ц d е п t ! . 5 e m } , / + п ! в к т и p g мj l i п и ям e * ц ' э n е м е m а м л с п ' с к a * / dil*]'iЕtсontаinef 1i:fiтst-chil.l {ьo!de!-toр:2pх dotted +069;) /|п)ъкт'Р!Ф nивиявaдлсРвымэлеые!тov,неpабoтaстп IЕ+/ divf1istсontalne!

    a {Еext deсоlation:none;

    color.*о69;}

    /+цвeIссь]лкп*/ мыпи:/ а:hоve! {сo1o!: +Езз,} /+цветlрп нaведени!указателя i ul tьorde!.topl,рх dotted Ьtпl div*listсontаiner ,/+тpюкд,1яIЕ Win Y/ # 0 6 9 }, / ? { o н e ц т p ю к а * / di!*1iвtсontаineт

    нaм не lI})кен.civЛевoй кonotxo] с юпaссoмnav}'ке ПeРвый div*listсoпrainеr яeqяется кoнтсйнеpoм спискa, пoэтoму пеPвoе прaвLпo мo,сro yдaлить. Тa'. кaк tIoDьIй кoнтeйнеР div ипleer дplтoе и}1я' Eeoбr.oдLlvo измеtlить dlvii 1i sr-соnt a'ner rЕ div+na./.q,]я кa,qoгo се.'iектoРa- TспсРь кoд въIглядит т:к: d i v + D a vu 1 { b o r d e r : 0 ; m а r g i n I L 2 ! х 2 0 р x 1 2 р х i . 2 5 e m ; ! а d d i . q j r ] ; t i s :

    sty1e

    d i v + п a v 1 i 1 b c r d е r . b o t L o ( : 2 р хd o Е i e d t 0 6 9 ; m a r l i i n : 0 ' р а d d i n q : , ] е п 0 ; t e x t

    ' div}Dаv ti:f;rst

    изrnвяяe!t!]iаз&€ r кl

    23з

    сhiid

    {border.top:2рx doЕсed i069;] da o,a ,o :no.: o'oL:'оD9j ..oto': .: ; t nLп1 divii lav /iтPюкДqяlЕWin\*/ ul {Ьоrder.toр:29х dotted ё069;} .r

    d,1l!аv а

    Пo.лe этoгo левм

    o6]

    выглядиГ, ьак лl'{JJdнo |Iа Ри.' 8,8,

    PИс,8,8. lЙь!задалисIилИдля ссЬiлoK,нo eщe тpё6уeтсяnoрабorатЬ над их раtMeцeвИеM вьIпoл!.Irм нeскoлькo дoпoJrнительЕьIx дeйствий д,Iя дoРa6oтки o6лaсти нa. вигaции. нaм 6oлее пе трe6rотся сп]'ionnь]е гoPизoЕтaпьныe r1инии Irад и пoд yда-!ипt' тaк как eгo с I1oмoщьIo пунктиPнъLt Pa3мeт!тли divЁЙv^{pф1t1ф|аьso1utе; ma.qln:22рх 015pх 0j]

    ]еfЕ:0рх;

    toр;60рх; widt]r:15Oрх; раddinq:O;

    ТaLtrе мь| мoяеЧ

    nolellя , цв. г пvнкl иpаl,lх л/ни:r Pа 60 |eе лPиеvлемый: div{nаv ul. {bo!dет;0; фiIg]in;12рх 2!рх 12pх 1'25eп' раdding;O' tist style drv*nаv ti

    {bordФ boссoл:2px dotted +960;'mаiqir:0;

    dlv}nav ti:filst

    сni1d {bordeI-сoр:2рx co:Eed +96о;) : o,

    civ#ndv а:hc'/ёr lсotol:

    $F]з; ]

    ,oIo,:'960,,

    раdding:,]eп

    l]; te'L-

    234

    rfiA3в 8. сs,.n;*e li!ёt}"€ й та . I]:n1 civ+ na, ui

    / + 1 р ю кд - 1 я] Е W i n \ + / и, яaкoпец'

    изllеiiипt

    Ре3v,rыaт

    iсol.i:

    d o L t e d i | 9 6 0 ,)

    цвст ссЬr-цoк и цвет пPи вaвrдснии сotcr:

    d i . / н n a 1 .а { t e r L . . е . . т a L i o r j r о . е ; div+nа.r a:ioveт

    ]bcтdеr.ioр:2!!

    yказателя:

    + с 6 0 ;}

    ii960;]

    пoliазalr 11а Pис' 8.9.

    l:,r: .: :

    PЙс 8 9,Левая коЛo|Kагorова ъперь

    пРистIfiим

    to6авляeм

    к пРaвoй

    i.oЛoнке,

    Gтl.lлri к ]rраEoй кoлoнкe

    o ч е в и д Р o . | a r . I o й l o Л o | I к о l чi ) } <| ' ' п o Р а 6 о а Г Ь Н . ч н е м . r o r о . L г o л o к а к o д ее рa3метки

    вспoJ!ньIй,

    Pejо.laмнoе изo5РuDitеllиекIIиги дoЛnGo в'гnядетЬ кaк Еa сайтe Amazon.сom. Bьtпoлнив пoиск. oбlraРуxивaсt1'чтo ссьтлкaяa квиry нa этo\1сaйте иl{eeт вrц ъvw,amazon'сor1,/ехес/oЬidоs,/AslN,/1882968042/qid=r110169295,/sr=2.1/ rеf=pdьЬsь21/103.3869840.5485440,дo6aэляеN{еекPек,qaNlнoNryизoбPaxенtло.

    156'. hеiq]lt='211'' alt='вuI />

    >

    srёfgs'. to ]]e тe рlbtisьёd

    ii/ со1d sртirq

    Press

    ---------

    и3iае'яeitРаtfleткy

    23З

    Е с - л ив ы и с п o л ь з ) е т е l n l е ' n e | Е х P | n r e г , 1 I я r v l n d o \ v . . lo }ъидигe' ч,lo,дo6а. вив ссылk.v к иJo6pаJrrению' мЬI тaк';e пoл

    сиlrloФPaмкyвoкpyгиз.6p,*"",* (P".. si;;iи

    нeнprсrъIй пoбoчньlйэффeкт-

    rt

    Pис,8,10, nternetЕхрlo.erдляWindйsдoбавляeтсиiюю заюючeнвoгoвтeгli*

    рамкy вokругизoбpаxeнияi

    PaзPa6oтчи(и в Miсrоsоft пoсчитanи. чтo пoльзoвaтелlo .-'..l.1l..::..*,,*".". yкa3aтц Чтo пo изoбРаJ{(еlrиIомoяснo щелкать! пeРехoдя rакI!м 06. 1::: ::1o

    изo6ia'tениe roвoй ж:i"":"ёl3;#'iffi:;* ;li:i}.r.". чтoтa'.oе ,€rrия.

    вPяд ли6ывьIuo-" .,"'ou..',,!Т;j..::Н:#HY.Ж,#lx1|,.

    divьr,i9.Lсo'L

    л . ,9 ,l)o:о6LI lore' l

    пPo6Лемoй вIrдI{o нa '"j.;Ёr'x#ff#IJ1x?;o'ix1l1 ii]i:"::Р.ъе-зIroй (этo

    ''н**lънrj;il.:'};;ь.:'Т.j#::*::#

    :i;:J:*:Н.:x1,Jfli'i:i;;r;жж*r*ъ :::llт"qlТ:"ffi **

    этoгo

    Ilе сдел;LlIиj испpaвиll

    дaннoe 1пy.t no*.,o'o-n.*o, op'.p.'.p" ."u,;",.,-.iii J':.ii; [',i].,Ъili.";}il

    .."::..,""F,"

    *д

    ""l

    вLцич' чro ш/Рин! лp,"oи .o,"'n,.oi.ou,яeт

    l25 пик.

    d1v{тiqhtсotuппtрosition:аbso1u.e; пidс

    ж:*;;:f"}!:.:.:;.;;;Ё;;:i:;":'H:.:"iI:]:.;:i;:,:;i' этoro мaлo

    rr 4rIя зaloлoвкoв пoвoстей - 4liинa кoлo'ке, стРo*".*"*.'.'.,"**;"1HЁ:##ffE;:.#'-,* в}ro кoлolrIlT.IIIиPе.

    2з6

    f л A a A a ' ( o ] Л а н 9 еW ё Ь . ( а й l а

    измеIrим 'диРину кoлo1rм с t25 нa 156 пикселoв' чтo Paвнo IrIиРиIJеи3o6Ра ш и P с , o 6 . . а . 1 Ьr o / r е P . ж e | | и я ,H е . м o т P я н J ' o , ч 1 o т е п е Р L ч J ш (Рис' 8,11)' нa нее Bсе нal.пaдывaeтсЯ x.и}foтo PавIrо

    :r*!!.t.,

    !o пpавoeпoлe iрoоpановoдля изо6рахеHЙя, правую(oлoнкy,Mь|уsеличили Pис 8,]],PасшИрив наgадЬвание в рerулЬrатечeгопрoисхoдЙт oбласти сoдeрxимoгoнедoоатoчнoвeликo, цeнrраЛЬнoЙ стP)xтlРa paзметiсl тР€ 6 уrт, чтo6ы лeвое и пРaвoе гloля центpа-пънoй o6лa. сaи сoдер]кимoгo пPсвoсxoдили пo Рaзi{eру пpавую и Лeвую кoлolxt} сooтвет чтo6ьI пPeдoтвPатитЬ rraпoлзrlrис сoдеР}.lfl{огo кo"1oнoк дp}т нa дР}свeннo' гa. имевяo зryпpoблемyмьI видим нa Рис' 8.l1. неoбxo.цимo iвеЛичить Лpaвое тoPые стилIa llРaвoй lioЛoнкl!. Удa. пoле цеtiтPanЬнoй кoл I,ьI пPlямeм eе к прaвoNry кРato пPaвoй ItoлoнIiи лив' IraгIРимeР' пPаBoе гIоле зaставим и3o6Pа-чeнис заl'loлIlить ко'1oнслеэa и спРаBa' oкIra' a yдaлив oтстyпьI являетс.я 6езукоРизяeЕнoе РазNIещенaшей кolrечтroй яa всio пIиPиry ьT целЬlo итaк' !пaча"те пo' ! пpaвoй кoлoнке. шиРиrroй 156 пикселoв lrзo6Paт€ н ия Irие за6oт1rмся o цеrrтPа,1ьнoй кoлoнl.е: divtсontеlt

    {margin:20!х156pх 0 165px; 9аddinq: 0 1emJ]

    3атем - o пpавoй: l": w!oth:156!х:оo:o ,:,.о :1]рx: d.v'Iig\,сo1,,a m а r g i п | 2 0 р х 1 5 p х о 0 ; р a d d i n g : 1 e m0 j b o r d e r с o р : 2 ! a s o t i d + 0 6 9 ; i o т d e r . bo o.:,oу so,: в069:l и lre забyдЬтe )'IraзaтьPaзмеpьl изo6pa,!tения и oтс}тствyloщrй aтРи6yт altI < i п q s ! с = ' i f r а g e s / s n e r q s - b o o k j т o m o , j р q , ' l r ] d Е h = . 1 5 ъi 'r e i g h . = ' 2 1 1 " а t t = ' в u y . т h e l 4 а f v e 1 l o u sl a n d o i s n e I g s ' a r : A n e z о n , с o n ' / > < / . > BзгЛяEите нa pазмет}'.y с в1с!lоченнoй для нaглядIIoсти IPa]шцей r{eвтpаnьIloй кoлoнки (Pис.8'l2a и 8.126)' BеРхняя rpatlица гIРaвoй кoлoнки видlla у,.e сеiiчaс,

    l{3*€'iяe!.paз:!'erny

    2з7

    Pис,8 12б,Pазмеrка в 6раyзeiesаfari PetyлЬтат лраKтИчески oдИнаKoв итак' стPaliицa вьп.,!ядитхl:)р6шo, пoэтoмyдaвaйтe псPeйдеi! к дo6aвлeяик) ст'Iлеи д/]тяссьiлoк rra нoвoсти B пPaвoй I(oлoнке.

    3а.qae i сти,rи GGьtлoк Цa нoвocтr'| IIaгoNt lli этoм этalrе стaliет yдалсниe маPкеРoв из спис]{a и yмeньtle. ::ryYм ниe paзмеРa шРtiфта: d i v + r i E h t с o t ц m nd i v + n е п s ] i n ] i su 1 { 1 i s L . s i y 1 ё - Е y p е : n о n e ; iolt-5ize:.?em;] ' и л c й ' n o 6 p u r { а F т с яв *" P J J I и q н ь I х6 P J } , . e P a x{i е к o l o P Ь I e и J P и х ..l:..^

    д o o i r э ' q я ' оl п o | я , д p ) . n е

    пapaпIстPа'

    о|l1\льll,пФJIov\ДлаJ,е\Icьjd,.ва)шo3а.li|'Ьо6J

    что6ьI пеРеoпРeдел,Iть

    нaстpoйки

    divi'|тightсo]uпn div{пешs1iлks ut 11ist.stУte раddrng left: 10!x; паrs;n 1ёfti0;}

    I]o yltoлчallию: tYрё:nonе, fcnt si2ё:.7еft;

    ТьlleРь ссылки яa новoст]r вьiIJIядят' (aк пoкaзallo .tъпePь д:rвайтe дoPa6oтас!, кoд Размeтки ссьIлoк:

    ^ ^

    нa Pис. 8.l3'

    ].ahref='ч'>seo,oo.!.,o,b,,,do,,o,,o,,,.,...

    <1i><а nref=,*'>Dolstаs

    .ч!dе.sci'


    ь!ef='#n>гoте leпs

    тo1kien sсhotar,

    disсussеs

    the sneri]s

    238

    глAaд

    8. €эздnt{ge ч.e''..а*'а

    'sпerls'tо Ьеre. lli] F!Ь ьhed Ьy со d sрrin9]::. P r е r 5. s U m m е r2 D 0 5 ] ] ' ] :

    ,:,-:,

    d i 5 c u ' 9 ЁtsЬ e s n e r q '

    .:-,,

    Рис8.]з.Kпv!Kтамсписканeo6хoдЙмoдoбавитьтeгиiirk,чтoбЬсделатьихдoфпвЬ]мидлящeлчG

    a

    и дo6aвим стиnи д,!я яих: div+rightсо1щ

    a {tеxс'deсolаtioв:шdeтline;

    сo1o!iflс60; ]

    div*tiqhLсotum a:hover {сotoтl +960;tехi.dёсoтаLiоn: lone;} div*.iqhtсotumn 1i'morеtink {foпс styLe:ltatiс'] Дaпeе вeo6xoдимo дo6aвить l(oд д?!я зaloлoвкa этoй oблaсти ссьIлoк:
    snerqs Nеffs

    < 1 i > < аh l е f = ' * ' ' >' s n e r g s ' ' t o b e r е . p u b t i s h e d , . ' IIос.ле этoтo мы лРимени!l стили к этоt\!y зaloл'rвкy и 'a{eEь]IIим веpxнеe пoле поумoлчatrию для эЛемевтa ulпoд ним' чтo6ы сoзлaть пpoмe;qтoк i{eждy зaго. Лoвкoм и спискoм: divflfightсohпn divtnaistinks u1 {1isi stУ1e-Lyрe:.one; гont.size:,?em; раddilg 1eЕt: 10рx; margin Left:0; mafq1fl-toD:0;} div*liqhtco1ф hз {text-а1iq!:сentё!; font-яizet.8ф; сo1o!:*960;М.Ei!. ьottoп.0pх; рad.liпg-.op: зDхi ьolde!-top: 29х dotted *960;i o6Paтите внимaEие. чтo мьI дo6aвили пyIrктиPID'тo линию над зa.oлoвкoм с пoмoщью bordеr-!оp и oтст1'п свеРх! чт()6ъl сoздaть IiебoлЬLUoйпpoмеяq.тoк меriдy зaтоnoвкoм и пeРвой стРoкoй спискa (Рис, B.14).

    изi.e''вфpаз'{efiy

    snеrgs News sneгas'' to !a rЁ

    l

    2'9

    .:]: .::

    o | Ь | ь h е!d! с D i 5 о r i a ] . : . Frеss - slhmir 2005 :1.]' Dou.|ir дnd?гson, :.:] п;,.Ф]h;ъеrc:

    Pис,8,14. тeпеpьссЬiлки на !oвoс.ивыrлядят rcраtдoлyчшe нaкo}rеu' o6Paтите вниvа,1ие. ч'o справа rекст ссьlлoк непoсpедс,B i еннo кaсaeтся гРarrицЬl oк]ra 6PаyзePa, и вьIглядит этo не oсodeнIro пPивлекaт€льlIо. r roэтo)и} ]aдaдиM пpавoе пoлe д,я эJемент2 U-' так кaк эlo 6)дет !эке гpетье )тIo. минаIrие o пoлл(' 06ъед'"им их "ъднo:

    4 amаzo|lloll sDe.qs News !ф!!Eц!,l!r! z!э5 ЕgrлGц!еg.:Ф тl k'en dda

    P и с , 8 l 5 . г о т о в а яn р а в а як o Л o н K a

    240

    .л*aA

    a' to}'ta;,l'e Li,s$.сэй'в

    div+тigirtсoiunn di1.iinеп.:1.ts uL l1isс s.у1е.tУFе:lo..) 1cpх; пalqln:0 6!x о 0j} раdcinq.lеit| TегIеPъ oткnli]чиi1 вPеменнvro гPaI]ицу цсвтРlшъEoй и взIляllсп1яa гoтоnуlr пPa}укr кoIоEIq'(Рис' 8.15).

    i.iL

    :i2э:.jеп;

    06]rас1.и содсРх]rNloгo

    Coзданиe o6лacти Goдep)кПмofo тeпеРь пеРейдем к o6,1aсти сoдеР,киN!oro. нaчgс!! с тor.o. чтo t1oll вoкРуг изo6Pa]кeния МaNIьI MелдРам, сaloй стаРoй ведъNIьr,nРитвoРяющейся бРoдячим ToProвцем (Ртrс. 8.16). (мьr тaк.ке веPт{'vлио6Рaтн., тcкст' уд;Lпе}rнь,й Palreе для lraглядIrости). {ftoatj:teit; Ьо.d.I:1!х sclid

    +096;пат-.i.:l 4!х 4рх.;;

    Ъс МхKvсLLoL's l хl'lo cг .с

    Тai. кaк и3o6piхeвие с-.lиваетсяс 6слoй стРaницеrj' IlьIдo6aв!ли noкPуIнеrо Рavкy и }iе6oльшие пoЛя спPава и св'з} чтo6ьI тексr нс нaпо-!зLr lIа xеro,

    сo'АaёIl|

    ПoДI''1сь

    лaА P''Gу'IKoIY|

    Iьпеpь дo6aвиNt пoдPисyнoqную подписъ !2'rя изo6Рaяrен'lя ведьtlы, ПРoстeй. lllим спoс(:)6oмсдeла,гЬэтo - в а63aце tlепoсpсдственвo пoд изo6Раxен!теNt дoбaв!rть в r.oд Tекст noдписи ,I ii'' сoдсР;кaщий изo6P {енис Ii a6Зaц;

    !l;йеir,ёвразjaeткy .div

    2с1

    id=.ftаin iлаse' >

    <Цg аtL=l]i1Фher l{etdтum iл disguise, t..п;hе Ьоok тhе ].!аr!e]lous Lаnd оf s n e т g s l l s x с = i i m a g е s / t r e 1 d т u f r _ i nd i s u i s ё _ l 8 o i r , j P 9 ' пicti='1Ec, hеlgь:=':2r:i ь <р сlass="сарtioл"> шothеr цеtdт!п disquisеd as a pеcc]e!- За |еY vьl.дeaaем эгo| о.v || r'в"ошиv:,бr,L явля.Ii я' |еl'сPIor' 6Лoчнoгo ypoвIrя' пoэтo]lty oн автol'атическtl пoявлЯется пoд и3o6Pахенпем' ИзмеIrим стили' пеpеместив o6ъяэлеяиe пoлей и f1oat oт и3oбPаl{ени' к нoвoУу div' a тaюке дo6aвим стl'цl, Д.iя a6зацa| о;v .oi

    e.. d;,].o.,',oо

    ф i d L h : 1 в o ! ) х ;I l o a t : 1 e t Е ; F а ! 9 i п : o 4 р х 4 р x o;J div+сontent divlimainimаge iлq {ЬoIoer: 1рx so11.l + 9 6 0 ;) divflсortеlt divяmаinihaqe р {io!L.si2ё:'65eп; mаtgin:0рx 5рx;] .Ie\ePъ Дo1aBIaМ с.I\LaИ Дrя b1oсkquotе, Te. ]rl.trсkqъote сoЗ/\aЕ cт1еЦИaлЬI1o :и пPиirelrения с цитатами' пoэтolду имеi]нo eгo мьr лспor1ъз\сI' д ]1" oфoP'Iле. ,:^ BЬ| Ь:13ь1BJн|1ятo,1КиеH.., .]Pяteчониe

    здёсьмы нe 6удФй oписьlвoть5.e вoлPoсь|,{oсoюциeся пptмeнeниятeгo ь1oсkquote . BмeФo этo16 лyчшe лрoчтяe doъD o нвl4 Poсnonoxeннyю лo oдpeсy

    : .:. I .".:1 ..":" : ""..";..:,"., ;.;,:..,.,.*_ "".,

    PИс,8]7'МЬ вь|делили сМесrИв цИrату, ее зправoИдoбавивнeбoлЬшИе пoляЙ oтоyпЬ

    242

    rяAlA 8. сn3даяПew€ l ,.<ай'a шй htto|//ww.ьtm|ьook.ru/ hltD://*wv.6dU,design"oU'ru/togs/Ь|oikquot..html ь|m|/Ь|oсkoUoie.htй|.

    e не -tlo6авлятЬ кjзьIчliи вoкp) г текLта' зы|юченнoгo Btr)тPи тeгa b1oсkquoE p. в тег егo (тoЛкиllаl г дo6aвить следr,е Цжнo. для выде lения автьРa цlтать| 't'сделaть сoдePжимoгo o6лaсти мьl хoтим смeстить цитary к пpaвo}4 кpaю так. чтo6ьr oсIroвrioй текст o6тeкaл ee. нa Pис. 8.17 мы видим IoToвьIЙ Резyлъ. lат. a нижс пPивrден нeo6xoд/чый кoд: borde!d i v f l с o n L e n t ] э 1 o с k q ! o Е e{ п i d t h : 2 5 0 р х ; f t о a t : r i q h Е ; f o n t - s 1 z е : . 7 е m ; 1 0 p х ; m a r q l n : о Ё 9 6 0 ; d o t Е ё d b о t r o m : 2 р a b о r d e т toр: ]рх dotted {960j p а d d i n q : 6 р х 1 0 р х ;}

    d i v + с o n | е n t b l o с k q u o t e р { п a r g i n|0 ; f o n t . s t y 1 e : i t a 1 i с ; } нaибoлее вa]iсrьIм пpи этol{ является вы6oP ]n{PIrIrьl цитaты и дo6aвлelrlrе пoля свoйства f lоat ' тaкjке мьl лo6aвилrr ryнктиpньIе лиlrиti яaд II пoд цитaтoЙ ' на-v oсrалoсь сдeлaть в o6лaсти сoдеPlкимolo' ПoЬe этo"o единственнoе$Iтo этo зaдaть стtaпъ дЛя ссьUItllI в кoltц€ пoмиr"'o дo6aвления rrЙя.нeгo кoлoтlтиfлa' юrиIи в этoй ссьIлкe) (см. pис.8'18). тeкстa (дo6aвим епrе кaвЬIчltи l1,1янaзвaнi,iя а:novеr d l v + с o n t ё n Еa { t e х t - d ё с о ! a t i o n : u n d e т 1 i n е J с o 1 о f : + с 6 0 l ] d i v * с o n t e n t J {сoto!: i|960;tеxt-dесoтаtion:nо!е,

    Who kniohtсёl|вds]r рerсivвl,а refогm€ d oqre,Go|ithos, аnd а Wiсkв еаt-sсhildrеnаnd hаs beсоmsа vegЕtаr]аn) 'тhe l.]аrve||.iur Lвnd сf sn.:rqs ,q.eidmоrе аbоut N Рис, a,]8, в о6ь!чнoмсoооянии ссьлKа выдeленаnoдчеркиваниeм

    Whоis tryingto kniohtса |edsir Pвrсivа|,в гeformedоgre,Go|]thos, WLtсhnаm а Wiсked аnd veget0riаn) в hэs Ьeсome аnd eаiE сhi]dren

    Reаdrnoreёlr,]ut.тhe lr]ЁrvelousLаndфi 5nеrss,'

    исчезаeт Pис,8'19, пpи яавeдениива веe yKазaтелямЬши oва меняeтцвeт' а пoдчеPкиваниe

    3адaem Cтliлl| lllDкнero

    кoлoПтиryла

    с-T|,|л|1'' Мы 'to)l.ем6ыстрo paзметить нtr'.яий колoнTиflл (Pис. 8'20)' испoльзуя мo)к. кoToРый кoд' след)'loщий .o"oa""ы. в '"uue s. ,Ц"я эToIо 1raмпoтPе6yется нo пpoсгo сltoпиРoвaтьi

    из!!€ я яэ|llраз&€ r {y

    241

    div}fooLе.

    {Nidth:11]0*' /*застaвjяст div з,!orя!тъ l(оятеiiяер' oбычlo этo Ьodу+/ рadding : 4рх 0 , /*oтодвигaет ссьLrш oт вeрхнeй Л явхпей .рaви div*/ fоlt.E12el'65ф; fon..size:,9ёr; Рр!Фтa.сьI,oк*/ / * з а д а е т Р а з м еш сeхt.a1iqn: сen.er; /*цептPиPует элеltеятъIul в +/ div Deсkground сoto.:t!69' /*зajaетфoвoвьtйцветdi!*/ dit+jooЕe.

    ui

    /ftа.qit:2!х.;]

    drvЁfoote.

    1i

    {disр]аy:ir1lnе;

    / + в e p т и к a i ь н ь loет с т y п ым с д д )с п и с х a м !s /

    /*3arаeт I oР!3oятaтьнoе oтобpшeяле спи.{oв'l /+зalaеf цвФвеpт!кalьньI\ лnяий +/ boidё! 1еfЕ:1!х sotid; /tсoздает веРтпhтън1Ф jия'Ф otева oт ц'(цоф лФcma *,/ сo1oI: *AгЕ; /*зaцaст цвет вepтпкаlьsыхnlвлn "/ со1оr:пhiLe;

    раddпg:0, 5pх 0 9рx; /*гoризoятfurьqoeлPо.тPаяствo 'lех,{) ссьL1кa!ц и веpтикfuьпъteмл nиqЙямц | /

    ] div#foоter ti:first-.ii1d ibordеI.1еlt:0;] з,емеnтa.пцска.яе paoоmer! Intегnel Lap]orег "/ djviifooter u1 ti a {Еех.-dесoration:nonеl

    / 1 д м я е т л e в } Ф. р a в и ц ] , l L !!яе р в o г o

    /1'дaяет лoдcеPкhaЕие ссы,юк */ dlv#footеr u1 ]i a:ir.?ет rсехt-dе.oтaсio.:uidет1inе;j / * п o д ч е P к и в a я исeс ь l , o к пРи вaвeдeяииyкaзатeля*/ div#foctеr ut.iinе!'lint 1 i { с о t . т : * с с с ; ] / * ц в e т з н а ч f i aa в т o р 1 к ! хп р а в и веpтикaъвых paдellrелей в пoслeд!ей .тРoке ?/ civiifoot*-ul.fЦeрrlr. ti a i.otoт|+ссс;] /*явно зaдаеtr'цвет' иначе q,дет )вaследoвaп бejьIй oт di!'#footег li "/ div{footeт u].finерrir: 1i a:I].Ier 1сo1oI:вlnr;J / ; ! е я я e т ц в е тэ r r е ! е н т o в нЙхяeй стpoкп нa6eльlй при {авeдепии укaзателя*/

    aвс0лe а Yeqetёd:n) зid а v.kd

    v]tсh

    fuс, 8,2o Hиxний rcлoшлул rрeбyeтдоработки,iо pdlмеrка в Uoратит€ ввимание' что цв€ т ..ЬlлKи.рИ наведe!иИyKа.а.*o целoм пoлучиласЬудач!oЙ, ''* n" ц*аi, no. "o'., васлeдуerсяor рoДитeльсKoгo элемeвтa d1r

    244

    rJlAaA 6'.o!даiзи€

    wd3.iаiтэ

    Bнeся oTмeченньle изменения в с,rLIь (не{)6хoдIrмьIе'тaк Irак oсlioвIioй Рaз. льзoвaние з!Iачения 0'6б em сдenaмеP lIIPифтa мьI yмеIJь -!o текст IlечитaсмыM)| I'ЬI поnyчили oчeнь неп]roхoй нижний кoлонтит},. o6paTиTе внимaние, чтo этo пРимеP llспo-!ьзoвalrйя зaroтoloкl Iiо3вoJrяIoщеqaм Io сэl.oнoмить вPeIIя' Что6ЬI сoздaть и oтлaдrjть кoлolrTиryл' в пepвъIЙ Paз илей I.t6лaгo. tlollадodил€ я чaс,llо тепеPь' зa счетпoвтoРl I!ь1 сoздаем сЛисoк. Tакoй хе с)т!t, гiPе/]стaвляeТ пo Iощl что дaРя Paзмeтка. миIryт' несколькo кoЛoнтпryл за пoд06вый ТeпеРь ясo6хoдим() пoРа60татъ над цветаl1и фоIra и !Iрифтa, Bo.пeРвых' въI6еPем цвeт фoпа. 6oлeс noдхoдящий к {)6rцей гaNlMс с.rPaнrjцьt, д,lя ссьIлoк и Pазl{елителeй мсх(цy ниNtи мЬI исIIoЛьЧ'eм те )r€ стили' q!,o и для пРotllr,.( ссьi-

    лoк (Рис.8.21).

    Fю1,-*s.tr

    'l:l,'liaЁ;;,g]il:;':;,;!З PЙс' 8 2], ГoтoвыЙнЙхниЙ кoлoвти1улсдoбавлевнЬм фoнoвь]мцветoми цветамиссЬ|лоx

    тt М\RV(LLо], l-lшооr Jьt<.с;

    noдчиФxой тeпepЬзаЙмeмся зaверЦеAа, Pис,s'22 oсновЁаяirа6oтасoстЙлями

    otgяча.еtёaа''dя9oй6а

    div+iooter ti 1disрtаУ:intiлe; соtcт:iйite; boтder tёfr:1pх so1iа; сoto!:lс6о; о сo:Оs: o, 1] р.,, div#foo.ет ii:tirsс сhitd {bоrdе..ieft:0; ] div]iЕootеr u1 1i a {teхt-deсcIation:none; со1or:с60' ]

    d i ' / i | f o o t e r ! t 1 i а : l o v e x { L e х r d e с o т а Е i о n : u n d е т 1 i n e ;с o 1 o r : + 9 6 o ] drvflfooEe! ul, finepriлt 11 {сo1o!:{с6o;] div*footёf u1.iinерriDi li a {сo1o!:#с60;] d!v+fooЕeru1.fileрrint

    11 a:nover {сo1о!:*96o;]

    нa Plrс. 8.22 мы в4ципl текIций Pсз)льтaт.

    oкoнчатeльнaя нaстрoйка зaдaв стили oснoвньIх элeмеIIтoвj noPа вI{ести oкoвчaтельньle штРихи. цвeт зaloлoвка и стРaтiицЬI пoчти oдliвацpвj в РезуJ1ьтaте и}1еет с1.ьIсц ли6lr дo6аBnть Paзделите,lЬнylo лиItиIo' либo измени,гь цвет фoяa стрalшцьI' Тo 'кe сaN{oe yo'(. нo скaзaTь и o ни)кнем кoлoнтиrvле, BoкРyI элeмeЕтoв EaвиIaци!т в Лeвoй кo. линии

    свеРхy

    '{ снизy - пу)кяo иэlteя!ть

    их ИлЙ уДarlиaц

    с-лишItoм6ли3кl)дРyт к дPyry кРoме тoro. Tr6yeтся внести еще пaPy мслк,Iх дoбaвлений в кoд: пoместить кaвъIчкивoкРlт вазвания кIrиги в циTaте и дo6a. вить Toчкy в кoнце IIoдpисyEочIlой пoдписи. нaчнeм с левoй кoлoнItи (Dис. 8.2з)'

    ве|ore тhе нobЬit, therе

    Pис 8 2з, Mы ваороили nоля и вЬ рoвнялиэлемesrьiHавигaциИsлeвоИ (oлонKе,a пoле \е- ad,ь1ai.o'a,,Jгp,a'J l.l . л"вa/

    246

    глAвA8. сo]дaнl|e Weь-сайта

    d i v * n a v { р о s l t ; о n : e b s o 1 u : e ; 1 е f t : 0 ! l ; : o р ; 6 0 ! х ; l i d t h i 1 5 0 ! х ' р а d d i n g : . 5 е m0 0 0; ftafgii:22рx 0 о о; } div+nav j1 {bordеr:c' пarqin:12pi 1.25Ф 12рx 1'25еп;.,addin-с:0j 1is.' s t У 1 е . y . :n o n e ; f о n i . f l e i g h : : b o t d ; i o l t - s i z e | , ] 5 е m ;] div+сoitenЕ {narqinj20!х 1569х 0 1509х; рaddiгq: 0 1em;} тепeРь не06х0димo из!lенитЬ цвет BеРxней и Еи)lсIей Линии в o6лaсти сo. (!ositiol|аbsc1u:e; lr!drh:156рx' Lоp:60'x; riqht:0рх; пargin|20рx 0 0 0; рaddirg:leп 0; border.top:2рx sorid ]i!69; ьolder. ь o t t ф : 1 p х в o t 1 i l * 0 6 9 0 0 0]; div{rightсctuN

    тaклre дo6aвим PaзделительнЬIе лиEии для 3aloxoBкa и нюкнеro кoлoнтитyлa' чтo6ьI бoЛеe чеTкo вьlдеЛить их: diтflheaiет {heigh.:5O!tj bасkgrou!d со1o.:}FFс; Еext-a1iqn;сеnie!; bordeт i ] o l : с o п :1 p х Ё 9 6 0 s o 1 i d ; ] dlviioоre! {пidrn|!00?; paddinq:4pх1]; ion: sizе:,9еft; teх:.аlign:сenteт; Ьaс]

    вefofe тЬe lloььit,

    thёre пав Gоiьo tЬe s!e!g.



    ,тьe мase11ouв l,and ot s!e!g6|' <1пg a]'tз''Go!ьo the sflellr, fron tьe book j p g ' 1 8 0 ' Ь e i q h t = ' ' 2 4 8 "/ > ф i . t t ь = " 1 8 o F . в!с=ninаgeв/go!ьo < ! с 1 а s s = ' с а р t i o n ' > G o l b or e t u т n Е f l o п ь ц п t i n g i п t ь e f o l e 8 t . < / р > < / d r v > < . . > ' т h eu a t v e l l о u s L a n d o f s r e . g s ' и а s t h e l а s : o i e i q h t b o o i s п т 1 L L e n b y i . д , I , , J У kseп 1 i h { 1 8 ? з 1 9 ] 5 ) , ' , .Да-пее зaдадиlt стьrи

    д.т

    dlviсorLe.t ht {foit siz-.:1'4eп; ior. vаriаr.:sпaLl.сaрs; mаrqi! toр:2еm; fon. iапitY|'сoпiс sans мs'' '/erdanа, sans-seril; i для исгtoлBoвaния бoдь. o6PaтЙтe впиNtatrиe нa применеIrиe foвt-variant 6укв в текстс (пoмвите глaву 3?)' нo' естественIio, III"* "ponисI{ъIх " ",.i""o*"'

    aкaячатeaъsаg

    t!а.'Рoй!{а

    247

    эTo I]€ Paбoтaeт в Inteгпеt ItP]oJ:еr B дalrнolt IlIРифт. дala,iтe тaкже уве-!ичjl}I пPaвoе поле ч}ть да-rтъшeoт пpaвoЙ кpoNtки изо6ParксЕил' dIvfсоn.eit xoрolпo.

    div+iailiпаge

    ]тid.t:18сpх;

    f1oаt:1еit;

    па. ir:c

    8pх 4!х 0;}

    тeпеpь нaшa стpаE,IiIа tsъIглядитj кaк нa Pис, 8.24'

    A&v€ L LоUJ:LAND .tA

    вFфЕ т!Е новп'

    тlЕrЕ wrl 6*в0 rнЕ slЕм.

    *,1r.

    P и с , 8 ' 2 4 т. а к в Ь г л я д и т н e ш-ар а ! и ц а п o Ф e в т o р o г oз э r о д . и с п р а в л e я и й кaк эидIro, oстaпись некoтoPьIe недoчетьI. IlaпPи]'еР' пoдPисytioчнaя лoд. писЬ теPяется сpeди o oвки нoвoстей сбиЛись в Ityч,! (зa исюxloчеяиeм oтoбРa,{е}lиЯ стPxницъl в Intеrnet ЕхР1оrег д,1я Windowф. oPaн' ва яаIш вэг/.lяд| т:lкjl(е слиIIкotrl грv6o, ведь заглaвиe дол. }ilro пpивлeкaть пoльз aть еro, кРotIe тolo, oтстylьl l!eхt. ду a6зaцaми вe]rикoвaты. ислрaBи]] эти !eioчи, Blraчaпe иэNIениl' цвет пoдpllсYнoчнoй IrаДI1иси] чтoбьI выделить ее| div]iсontenЕ divPnаiniпаg. OPаI{,кевЬIй 3aroлoвoк

    р iior. слишкoм

    size:,6.:n; 6Poскииj

    nar.lf:!.!х

    .рх; сo1or!*с60;]

    ]тoэтorql сдeлaеll eгo те]!Iнее:

    div#соnte!L h] {ionL.size:1.4еп; fo.Е Ieriаr::snа]1 .ont faniLу|'сoпiс sаns vs'' rc.dana' sа.s.serii;

    сaрs, пa.qix с o 1 o ! : * 9 6 o J]

    to!:2еп;

    l48

    rлAaA a. с'lдзя*!e WeЬ(aйra

    в npa. дaлсе исnpaвим пРo6лемy с oтсЦпaltn мe'cду зaro-loвкaN{инoвoстей l!ы Irе явEo vказa. вoй,.oлoirке. здесь все oчень пPoстo' TaI! кaк этIr пРolteжyfки гloле pав' веPxне'з Jtи, селеl.тoР li oтс}тстByеT. Пoэтомy дo6aви!1 elo и э:цадим чтo Пoмнитe. нoе нуЛю' a вx)ltllее пoле Pавнoе пojloвиEе высo].ьl стpoки. irаl{ пoэ,гoму дoстатoчвo )'}a uеРтика-IьЕьIе пo]rя llаtсtадЬIвaются дРуr нa дPyгa, зать лI{Цrьодlro из яиx: . i i v { . i g h L с o 1 u m d i v н n е п s l i n l r s i 1 1 п а r q i n t o р : 0 j m a r q i в b o t t o п : ' 5 e a ;) кaк Пoслeднее, нo не iltеEее Raя(нoе, настPoйкa пpo6еЛoв меlq!, a6зaцaми' втoРoro}xa а нулlo' &пя oдпo пoле PaBнoe и с всртI'ка]rЬньI}Iиlllrлями, зaдади}I )ltеIIЕу,.tioе знaчение: d i ! ] i с o n t e n t ! ] f o п t s i z е : , в е п ; п a r q i n - Е o р :r ]j п a т q i r b o t t o n : . 5 е m ,] a6зaцaми. Этoт пРием дает вaм пoлньй кolrтРoль над пPостРaнствoм меrкдy oблиI. N{елочrr, пoдo6пыe этoй. пoзвoляloT пРидaть сaйD пРoфессиoнaльньIй paсстoяIlие мс,кдy сиI1вoлaм с миЕIrмaцьныlfи усLпиями. пфвшьноe

    в€FоAЕ тнЕ |loB''т,

    тнЕRЕ wls 60пз0

    -т|lC sNЕр6'

    P и с s. , 2 5 , д о р а б o т а в ! а я о р а н И ц а в б р а у t e р e t i r е T o х

    {,..сR'аG'ьl.эя

    249

    $сrрaйхa

    aбзaцaми и элементaмI'l в qa{ме сoздает o6щ"vю тaPмoliик} и IloЕьIIIlaеT пPивлe. кaтeльнoсть даr'iе пPoстolo дизаЙI{a. ТегеРЬ вьlooвIlлеr1 всpх пРJвoj к(' uчки l веР\o! |евoii hoJloI t'j: divf,nav {роsition:absoi!Lе; n '.q, : .рv 0 5-! 0-

    tёfL:0рa,

    toр:60!х;

    пid.h:15!рх'

    padding:0;

    divi!iqhссoiuпn {рosiсion|аbsotutеj ftidtn:156рx; toр;60!х; iiqht:0!х; matgin:з2px r] 0 0; рaddinq:iem 0; border-toр:2px so1id l960; bordef. b o t i o m : : l р x s o 1 i d # 9 6 0 ;] тепеPь,

    кaк в,Iдтlo нa pис.8'25'

    llьI дo6ились

    в lnternеt ЕхРloгег и др}тих 6PаyзеPaх,

    цсльнoгo

    о6лjrка

    стРaницьl

    !€ F oPЕ тнЕ нов3тт, #]ЕRЕwAs 6oRвo тнE sNЕя6,

    .."- Фь".. " i -,,."е".:

    'r :;:,";'1f;1".:,.,;;:

    Pис'8,26'этахeораницав 6раyзeре |ntегnel ЕХрorеr нaм oсталoсь вьIпoЛIrиTЬ еще oдвo техвиqесI.oе дейсTвие, ПРo6лем0й ти6. ]lж Рaзмeтoк является тoj чтo пoльзoвaтeль мo)ltет Paзрушить их. чPезмеpвo су3nB или Paстяяyв oкEо 6Рayэеpa (pис. 8'27),

    250

    глAaA a. (.зда*и9 !!]eiз.{n.1;t

    PИс 8 27' (oгда пользовaтель!рeзвьiчаЙ!о.yхаero(вoбраузeра' рё]мeiKа pyшиrсяиэлeмеErЬ наоaдывают.я дру. на дрy.ё' нехoрoшol нo испDавиMo

    Orpашиrreниe минимальнoй и шrаксимальнoй щrrpиньl д , t я I l Р е д ol в P а Щ e н . l я п o д U 6 ч ь | чP e г P и я т t t o . т е й ч ъ ]д o ' ж | ы o | р а н и ч и r ь м и н и . llalьнylo и NIaксима-!ьн1зolЦиРинy Pазtr{eтки,д,rя этoгo в сss eстьдвa свoйствa: min Widlh и пaх_WidЕh. нo в 6payзеPе Intеrnеt ЕхPloIеI o}iп irе пoддеp'мвaloт. ся. Поэтoмy нaм пoтРе6yется исl1oлЬзoвaть фlнкциюJаvasсгiрl minmaх. j s' пPимвчoниe

    пo .тoтястичeским дoвнь!м Ao ] 0оl. пoлЬзoвoтeлeй oтмючоюt пoAqeрxку Jovоsсriрt в 6FoузePoх, пo'тoяу. пPи PoзPo6oт<6 сoйтoв учlты!oйтo, чтo нe вс€ noльзoв016лисмo.rl испoлЬ3oвoтЬзoAo!нЬ 6 фyнхции Jovos.liPt. в нoшeм случoe orи всё ooвнo смo.yт пoлЬзoвo'Ься сoйтoм, .Poсlo ёlo o6л,< oкоx6т.

    oкоllЧjreл}яаi|iа.?рoй(a

    251

    в лoкaлъпый кaталoг и пoмeстим в негo сцеEaРиt'i дo6aвим кaтalo.JavasсriPi minnaх. js. зaтем зaдaдим lra негo ссьIлIITв 06ласти head хнTмL'дoкумeнта: < s с ! r р t t y р e = t Е e х t / ] а v а s с r i р t ' s ! с : l j a v a s с i i р Е / m i n m a xj.s " > < / s . . i р t > пoместим div вoкPlт всeй pазмeтки _ д-lIя негo lt(ьl зададиy мaксимaцънyк) и миIlима-r!ъl{r1o пlиPиEy. этoт div 6iдeт ст''{tить кol]тeйIrеpoy всей Рaзмeтки и oгPalrичивaтБ ee пIир,JIry:

    тепеPь пРи6авьте стIaпь длЯ эгoгo кoнтеЙн(Ра: d i v Ё с o n t а i n e r { р o s i t i o n : I e 1 e t i т ё ; ф l i n w i d t ] r| в 0 O р х ;п a х п i d t h : 1 0 0 0 ! х ; паrgiп 1eit:auto; пalgin righi:autо; bасkgтound.сo1oI;ёlсf2с9) Чтo вartнo - яеo6хoдипfo зaдaть д,!я яero отlloситеJrьнoe позициoтrиРoвalrие. ТьпеРЬ этoт кoirтeйriеp div игPaет Poль кolrтerrста пoзициoqиPовa'яLlя рtя 6o. (oвых кoЛolloк. eсли вы яе 'тDriете дЛя rrего знaчение relativе в свoйстве posiЕion, 6oкoвьIе кoлoнки пo.пPеJкнемy 6yД"r вьlpaвIrивaться oтнoситeЛь:ro тегa body' тoестьпo гpaЕице oкнa бPаyзеPa, Мo]ltетe вPеменIro y6Рaть свoйствo pоs1Еlon и }ъидите Pе3yльтaт, Pa3мeстив кotrтeйнeР, aвтop не yдеPlкaлся и задaл цвeт фoнa &пя Eегo. кalt в!ц1{o Еa Рис. 8'28, этoт пoслeдний штРих действителЬЕo yнифициPyет всю Paзметк1. свoйства maх-widthи min-Width задaioт oгPаничения rI1иPинъIРaзмeтки. Aв. тoмaтические noля цeнтРиPyloт paзмeтIq в oкIrе 6PaузеPa' B кaчествe дoпo,llе. нIrя y нас тeпеРь есть div' ДlиPина кoтoРolo тoчнo сoвпадaет с шиPиЕoй стPа. ницьl. ч,ro пolволяет нav зaдar Ь фoнoвый цвет Taroкe дoбaв!ш нe6oльIrloй пPoме)l.fтoк Ме,кдv ни)rtliим кoЛoнтитTлoм I.r oс. rroвIrьrм текстoп{, чт06ьI Рaздeлить эти o6лaсти: d i v * f o o Е e ! { и i d t h | 1 о O ? ; . ' . п а l g i ! - t o D ! 1 . 5 e f r ;] тьпеPь стpaницa выIлядит, кaк нa pис. 8.28,

    252

    ''iAa& }' (Фэяа**e }li€t.Фйra

    \KV(],LoL'l L\\D ot 5N€ \ сj r1.,4-'t:..

    '1

    ll-

    -itnl@dфoфd9ф

    ..-;ф....Fr'.'.фр'.

    dJ;&-ф

    std.E

    ,

    ,:l;; "';;;;];;;;:;;:;;;

    шИpинЬ' oви автoмaтичес(Йцeнтриpyeтся PИс.8.28'тeiеpь, кoГдаpа]MетKадoФигаetMа(сиl,алЬнoЙ

    итaк' стpаницa гoтoвa,

    3aключeниe кие нaBыкlr ле)мт в oсвoвe твoР' кaк }Dnеoт}lечilloсь в н ческolo въIPa-'.ения' иэтo сllpaвед-.iивo !т д]rя Ч'зьIкaнтoв' и4qяTаIIцoРoв' и.qця а32шaсьдrrя aaс пoлезrroЙ' пoNlorЛa \{еЬ-дизalirrерoв. нaдс на Рeanизaцию твoPческlrх нaвъIки и вдoхнoви/ra вalIIи техническис l'кРеnи,гь зaд,!aloк.мь! пoстaPa]iись зaпoлЕить стРaflицЬl кiIиги сaмьI}'и пoлeзнь!ми fiPи. емavи Рa6отьI с ОSS, Bсе эти сведеяJrя являkrтся Резy;]Ьтaтoll NIнoгoчaсoвьtx меРов

    l] сoветoв,

    РJ6o,J|Ь пPеДrтoxенв!I,(

    lJк, чак jtoЧе.' я'

    NlllсlгI,Iми 'vlftlьIl{Л

    ьвиР гJ.,Fяцией и rцедРъINIll

    идей, IPи.

    лloдьltи

    ' !vеь.

    сoo6п{ествe вссм нaм. итaк' тепеPь пРишел Baш чеPeД сoздaвать стилиI

    сoзAаниe сайта o гнQмахс noмoщьюoтpицатёльныхnoлeй с исполЬзoвапрeдлагaем вашeмУввиМаниюry xe стpаниЦy' сoздaннУю И вапoслeдок пoлeй(рис.8'?9). ниeМотрицaтельнь|х

    .jа(лючexrс

    :lз

    Pис 8?9 та Хе сIр.ница' сoздаHнаяс noMоцЬюсrилеЙ' рaс.мoтpеввЬ]хв oпИсаниисоrданИя ша6лoнaс отрицатeлЬньми поляMи

    ЭтaстpавиЦaвизyальнoвичrМ нe oтличaетояот создaннoйвЬшe! нo eсли взглян!тЬнa ee кoд|дocrynнЬrйнa сайтe М'bbd,сom/stY lп' вЬrувидитe]что oн оoвepшенllo другoй' таKкак МьrиспoлЬзУeM рaзмeткУс плaвaющимикoлoнкамИ,тo вместo aбcолtотяoгоnoзициolиpoвaния мoхем раошиpитЬниxний кoлoнтиryлвo всю шириl1Уразметки' Пo' сколЬкуоласностЬyвeличениябoxовoЙ колoнкии еe нaKлaдываниявa кoлoнтиryлoт. с!тствуeт' в дaннoм шaблонe полo)кeниeкoлoнтиryла oпрeделяет сaмаЯ длинная

    Пpилorкeниe. Cвoйствa C55 и иx 3нaчeния

    B этoм приЛo)ltении сoдеP,.итсл пеpечеllь свoйсTв сss и их дolтyстимьв знaчe. Irий, Тa6IицъI пPиведеIiьI с PазPепIеIIия сaйта 1v3 sсhools' oбyчaloщегo РесyPсa (!Дgц.r{3sgb9qЬ.с9щ) , Bсе эти тa6JrицьI i{oжнo rraйти lra сай. &Iя lъь-дизaйнеPoв тe с пР,lмеPaми и пoдpo61rъши o6ъяснeнпЯitи. (IЕ _ Intегnеt Ехplorеr, N . Nеt. 5 . а P e ,W ] с - \ V e ь О ] | д | Р | \ .

    с60йфв0

    oписаниe

    d

    значeния

    nри'!я{€ l .l|э

    IE

    2g5

    N

    пoзвoляетзaдаrьBceчeтыpeграницы и их nарамeтpы в oднoмoбьi6Лeнии

    сss1

    noФoBeт задaтЬвсe па;амeтpы нихвeЙ.pаницЬ| в oдяoмoбъявЛeнии

    сss]

    задаeтцBerниxнeйграницы задаeтстильlиянeй rрaницьl

    сss2

    за'4aфщиринунихнейгpаниць|

    задаeтцвeтач6тырeХ rраниц мо*нo левoйrpaницыв oдвoмoбъявлeнии

    сss1 сss1

    зэдЕ€ т цв€ т лeвoЙrpаницЬl

    css2

    задa6тстильлeвoйrраницы

    сss2

    зaдаeтUириryлeвoйграницы

    пoзвoляeтзаAатьвce паpам€ r ры правoйrраяицыв oдвoмo6ъяsлeнии

    cssl

    зaдaeтцвeтправoйгравицы

    сss2

    зaдaeтФилЬлравoйграницЬ

    сss2

    задэoтшиpинУпpааoйrpaницы

    сss1

    зздаётстиличeтырelгравиц'мoxнo ygзаъ oтoднoгoдо чёърех филей

    cssl

    Is5

    (т.t'ь$iй

    tайт с п'нoщь!' сss

    таблица2' границa(oкoнчaниe) cвoйствo.

    oпйcаниe

    '.];.IЕ

    N

    wзс,

    г]oзBoляeтзадатЬ всe nарамeтры верхнeй граHицы в oдном объявЛeнии

    cssl

    задаeт цвeт 8epxнeй грalицы

    сss2

    задаeт Фиnь 8eрхнeй rравицы

    css2

    задаeт ширину вeрхнeй гpаHицы

    задаeт тoЛщинy чeтыpeХ .раяиц, мoxHo yКaэатЬoтoднoго

    тaблицаз, Kлаcоификация свoйcтвo oписэяиe

    задаeттипoтoбpыаeмoro

    uIl' qrоss!а1r

    IЕ

    N

    4.

    6.q9?

    п'rt'oxзtrre

    23'

    тaблицаз' Kлассификaция (oкoнcание) Gвonсrвo oписаниe dj5!]]/

    задаerтиnoтo6рfu eниялeментa

    i

    задaeтрaспoлoxeниё тёкстаилli изо6ржениявдpУгомэлeмeпe

    сss1

    заjаeт статичнoe,oтнoситeлЬнoe' аооoлФтнoe илиФикcированноё

    сss2

    з адаeт видимoсть или невидимoстЬ

    css2

    N

    задаФ 6uсorf эл€мeнтa

    cssl

    эадаeт pассmяHи€ мexду Фрoкaми

    оss]

    зaда6тмакcиммьнyювЬlсoт!sлeмeпa

    оss2

    задaeт мaксимe Ьвуюшиpинy элeмeнта

    оss2

    I 2s8

    сrиn}tЬrй Caйтс 'olчourьlo Gss

    та6лицa4' Pазмеры(окoнчаниe)

    N ,. v{зс задвeт минимФ*ую высor} Фeмeнв задаeтминимUьнУФширинУалeмeнъ

    сss2

    задa6т ширинyэлeмeвтa

    сss1

    та6лицa5. LLlриФт .IE

    свoйd.o onrcаяиe задаeт вф пар.мeтpы щриФта , вoдвoмoбъямeнии

    сss1

    o

    сss1 сss1

    сss2 теryцвв сxима.тилиpаcширяeт

    оss2

    I

    пPlиo*€ в se

    :59

    таблица5, шpифт(oкончaниe) свoйcтвo onисаhи6

    сss] cssl сss1

    таблица 6, гeнерируeMoe coдeрxимoe с'oйствo

    oписа!иe

    N

    гeнepируетcодeрxимoe Bдоkyмeнте,Иcлoльзyет.я

    css2

    sr::.q,

    1]si зtуie n'!.)

    сss2 оss2 сss2

    2ъo

    (т;J .*ьiй сaйт. tlоt!'t4ь}o с5s

    тaблицa7' cписokи мapкepь| IЕ

    N

    сss1 слис€

    в oд3oм oбъявлеяии

    сssr

    для исполЬзoваHияв Gчeствё задaет рaсполoxeниe мaрxepa за.0'а€ т тип мaркeра спиCia

    o

    пtrr}er otЕsеi

    зaдaет смeu{eниeмаркера пo гopизoHтФи

    IE

    сss]

    задаёт 3сe паpамeтрь' noля

    задаeт Hиxнee пoле элeмeнЙ

    cssl з

    оssr

    Itpиtioжerr.e

    16l

    та6лица8, пoлe (bxosчаниe) IE

    N

    зaдaётвeрxнeeпoлeэneмeяm

    сss1

    зада€т вce паpамeтpЬ|(ofryЕв

    оss2 css2 сss2

    a

    I I

    оutline 'idth

    зада€ т ширинy кoнryра вoФ'f элемёяt

    о.oйфвo

    oписая!ё

    сss2

    N

    зaдаeт вce nаpамeтрыoтсrynoв

    зэда6т oтсryл свизy для элoмеюa задаeт oтстуn cлeва для ФeмeBта задаФ oт.ryп cлрФа для эreм4в зздаeт Фстул овeрxyдЛязneмeяa

    4

    сss1

    4

    сssl

    4

    оssI

    262

    Cт.|льliый !айт t noмoщью Css

    таблица11' Paспoлoхeниe свoйсfio

    lE

    N

    w3с

    5

    6

    сss2

    4

    6

    сss2

    4

    6

    сss2

    5

    6

    сss2

    вeрхнeгoкрaя a)ro задаeтраслoлoxeние элементаoтнocиreлЬяoлевoгokрaя з

    4

    4

    сss2

    зада€ т вaртикальнoe выpавви вани e элeм eнтa

    4

    4

    сssl

    4

    6

    сss2

    0писани6

    зaда6т формyэлeментa

    рoдит€ЛЬс{oгo

    Yertiсаl

    aligл

    элeмeяъ

    с.oйcт!o

    oписани€

    lE

    N

    wзc

    ьo!de:.сolLа!sе

    задaeтграницутаблицы

    в

    7

    сss2

    b.tdеr.s9асinq

    задаeтpacФoяни6м€ ' (дyrрaвицами эtaчeяиe

    -

    6

    сss2

    зarл.вия эадаeтраcпoлoxeниё oтнoсит€ л ьнoтaблицы

    top bo!!оm

    пр''лoя{eisе

    26з

    таблицa 12. таблицa (oKoнчаниe)

    сss2

    N

    задаeтнаnpaвление тeкcra увeличивавт иЛиyмeньшэer мe'(дyбyквами l расотояниe выpавниваeт тeХствнутgi элeмeнтa

    з

    сss1

    оss]

    дoбаBляeтoфopмлeниe тeксъ

    задаeт oтсryn для пeрвoйcrрo(и

    сss]

    зэдаeт т€нь для тe(съ зaдаer тил 6укв в oлeмeнтe

    сssl

    naпрaвлёяиe вывoдaтeкота задаeтпаpамaтpi|oтoбраxeния лрoб€ л o6 мe}<4у фoвами уменЬша6т илиувenичиваeт прoбeлЬмe.'(ду cлoвaми

    сss2

    сss] сss1

    Пpeдмeтньlй yкaзaтeлЬ A

    3

    AвтoPскaя тa6лицa стилей 65 А1Pи6у"т27

    3aloлoвки стpaн'ц 31

    Б

    п lfueнтифи'tатoPы 55 иepaPхиядoх}ментa36 истoчниI..и .ти,tей 65

    _

    Блoчнzяvoдeль |07 rрэниuа6лoка l0B oт( гyпы6л0к]'l l0

    к

    *ffi",1,n *"*"o.uu

    r

    пPoстoй o6зoP кaскaдoв 67 кеpнI'нг 95 l(лaсс кolrтe'сстrrый селектoР 52 пpимеIreнlrе 51 юlaсситс 56 кoдoвые эквlrвaлентьI 28 кoмментaPии З2 ]20 кoн |екст РаJ^aеrцения к o н l e к с т н Ь I е( e л е к т o р Ь l 4 6

    Baлидaтop 23 Bлo)кeнIrьIе ст,!ци 4l Bлo,(eнIrьIйтеI 26 Blrсnx{ий фaйл стилей 42 Bыnaдaloщeе меЕto мнolo}Poвневoе 204 РазметI(a ]9? BьIпaдаюциеменю l87 Е

    кopневoй кaталoг 224

    гapнитypaшpифтoв 73 Г,06альIrые стl,,и

    42

    л

    д .циarPаммa aРитeктTры л^ucnЧий

    lcпPлбб

    6ll

    caifla

    226

    JlинейIrЬIe стили Лo'Gьlе кoлoвки

    4U l57

    Лoка'1ьРЬ|ес1или

    40

    .|рeдi'eт'lьiiy*а3а'enь

    н

    C

    нас-лед)eмo(ть 6з ни]{tнийкoлoнтиryл 145

    свoйства тeксTa 73 lеtleт-sPасin8gil tine.hеi8hr 98 teхt.aligп 97 tеxtdeсorаtioл 96 teхt.indent 92 tехЕtгansl.olm gg vertiсal'a]ignment99 i.ord'spaсing 96 свoйствaшPифта 7з foDt 90 font sty]е 88 fonЕvaгiant 90 font.lt.еight89 сIpyппирoвaть селектopьI45 Ceлeктopьтaтри6утoв 58 сoдеPхtиl"loе 17

    п Плaвaющие элемеrrты l 21 ПoлЬзoвaтельсItие

    та6лицьl

    сицeй 65 Пpaвилo CSS зgaчellияoбъяв,eяий 69 06ъявлеl{ие44 пPoстРalrствo имеlr xМL 25 fiтst 6З foсus 62 lаng 63 left 63 тight 63 Псeвдoк"]aссы60 aftеr 6з ьеforе 6з

    дo6aвлениестиЛeй l78 всI1)ъ(еpовaтiныйl75 нумсРoваtlньт'1l75 oгIPедeлеяийi75 спoсoб oчистки oлсeттa 148

    first-lettеr 62 firsrline 62 Псeвдоэлeмептъ,t62

    СсьIЛкa асtile 60 hovег 60 link 60

    P PaзмeP пIp'фтa 82 а6сoлIoтЕьIeзцaчения 82

    клIoчевI,lе сJ'ioвa 82 oтнoсительяьIе значelrия Pa3меткa и3 тPеx кoлoiroк с зa.oлoвкoNt lз8 Paзметкa из тРех кoлoнoк с lшaвaloщllми злeмeятaми и oчисткoй l43 Рaзмeтхa с ,ввумя хoлoнхaми

    P2ryеzJ.

    zz2. *'? n2'?2'j'

    :"''

    стилей 185 дoбавление 82

    129 2.?.z

    т Тa6л1iцастилей 6Рaузepa 65 Тег 6лoч11Ь1i1 26 влoхeнный 26 вмещaтощий25 fleBMeщaloЦЦ.й

    26

    !65

    166

    Cr.'ь.ь.й саir. llo oщьroсss

    Ter лиtrейIrьIй 26 TpадициoнIiьIй Ре'(им 24 TРeI(ицг 95 тPюк с o6Paтяoй кoсой чePтoй 187 TPюк сo звeздoчкoй 186 ф

    сss r7, 4З D dЬplay 126 div 32 nNq

    994

    Фopr'ш 210

    DTD 22

    Ц

    E

    llIPифт 7з 6eз зaсечек 75 деI(opaтивIrый 76 куpсtrв 76 мoIrotIrиPиIrIrьIй 76 l o6ц!re для wiпdolvs и мaс 78 пpoпoPциoaaльIrыйpaзмеp 82 с зaсечками 75 свoйствa 88 сeMeйcTPa 73

    F гloar 122 foгm 210 ,suьmit 2l0 FтР-кл,reят 223 G

    t эtlPBмlЕ

    еstaт.сom12

    16

    Gесko 15 н

    A aЬьг 35 alt 33 в Ьaсkgтound.imagel54 ьaсkgrouпd.positioп 2l0 ьaсkgrolrпd.rеpеat 154

    hеad 30 html з0

    I id 33 img 32 к

    C, сDATA 42 сlаss33 с1еа.124

    L link 31

    |...

    Ilрёlt'e!.!ri

    a

    lvt maх.width 250 mеdiа 43 a| 43 аural 43 handhеld 43 Pгint 4з Projесtion 43 sсгееn 43 mеthod 2ll get 2ll Post 211 мiсгosoft visio 226 min-widrh 250 minmахjs 250 monosрaсе 76

    yказатe,tь

    Quiгks 24

    s,

    sans.sеrif75 sеleсt 216 Skip Links 170 span 47 т titlе 30 TonyAlsе.t 148 tl

    W

    P

    W3sсhools 254 W3с 15 World widе Weь сonsorlium

    Posirion 116 aЬsolute ll8 fiхеd 119 гelative ll7 stаtiс tl6

    XI]TМL 17 гIamеsеt24 striсt 24 тransitional24

    x

    26'

    Чapльз Уaйк.Cмит

    Cтильньrй сaйт с поrvroцIьIoсss глaвньlй рeдaктoP Зaхаpoa p|. М' jzlm@ntpresБ'rtl нayчIrый Pедalrтop I{oaалевГ..II. Е. А. oтвeтствeirrrый PедaIстoP Бе]cнoэapoвa ьePс.|к^ Беnoва'ц. А. rPaфЙкa InadАа A. Г. o6Лoжки XapPa.хаJ1И'l-, дизаj,я иэдaтельствo "нТ пpесс"' 129085'Moсквa' звфдIiьtй 6Р, д. 2l' стP' 1. издaние oq1цeсМенo

    пPи тешиче(кo!

    ooo 'издaтqьствo AсТ"

    oшФФФo

    с фвьlх

    д{ФФIjr@в

    }чaсми

    ь ooo d'пo.!фи ипo пPoфф!ФoвпpoфвдФ) 1090{4'мo.шg" кaтцхий вФ' l8

    uJjlrlirililil ril\ilJ lt

    Ll

    UJIUr)lUЦljJjUa,,j,-'j CSS, или Cosсodlng sjу|e sheeis, noзвoляeт рoздeлитЬ сoдepxимoe и пpeзeнтoЦию Web стpoниц' CSS пpeдлЪгoётдизойнeрoм lpeзвьrнoйнo эффeктивньrйи ги6кий спoсo6 сoздoния WЬЬ-сoйтoв. B этoй книгe вы пoзнoкoмитeсь стeopиeй, лeжoщeй в oснoвe CSS, и пpoвилoми синтoксисo, o зoтeм, шoг зo ц]oгoм, нoучитeсьсoздoвoтЬ poзличIiыeвopиoнтЬ|poзмeтки, кo тopыe мoxнo исгloлЬзoвoтьв Koчeствeoснoвьt для сoйтoв, A eсли вьryxe знoкoмы с CSS, тo, beз сoмнeния,из Kнигивь|yзнoeтeo мнoгиxнoвь|xпpиeмoхи тpЮкoх. Boт лишь нeкoтopыeoписoнныeв Kнигeвoпpoсь|: пpимeнeниeCSS-пpoвилк poзмeткe; сoздoниe poскpь|вoloщихсямeнЮ; фooмиpoвoниeтeкоo r пoмoщьюCSS; ёojдo",e пpoс.'" poз*eтoк с двуflя или тpeмя кoлoнкoми 6eз пpимeнeниятo6лиЦ; сoздoниe ги6кихpoзмeтoK, oвioмoтиЧeски измeняЮщихpoзмep пpи yвeличeнииили yмeнь Llенииor нo 6рoyзеpo: oдинoкoвo в poзнЬ|хf)poyзepoх и кop. сoвeты и улoвки пo сoздoни|о сoйтoв/ вЬ|глядящих мoннЬ|хyсrpoЙсгвoх; ' пoлeи/oтсryг]oв/ooсoлютнoгo пoзициpoзмeщeниe элeмeнтoв с пoмoщьlo oтpицoтeЛьнЬ|х oнИpoвoнияили obтекoния; свoйсгв CSS; всe дoпyсrимЬ|eзнoчeниядля poзлич|.]Ь|x дo6oвлeниe фoнoвьtхизoбpoxeний к тeксry и ссЬ|Лкoм. чдprь3 yliк.ctlт зoнимoeтся poзpo6oткoй WeЬ.сoйтoв с 1994 гoдo и в нoстoящee вpемя вoзIлoвляeтпpoизвoдсrвeнHЬlйoтдeл в Koмпoнии Noсio, пpeдoсroвляющeй xocти|1fи Усг|уги кoмпo пo сoздoниюсoйтoв{Hoвoro. ш ro,tKoлифopния,СШA], Пpиopитeтнoидея|рльнoстЬЮ сойтoв,рoзpoбoт',ooпlимoлЬнoйopxи. нии являelсяo6eспeнениeyдo6ствoиспoльJoвoi]ия тeюrvoыинфopмoции и дизoйн интeрфeйсoв,Aвтoр книгиpo6oтoл кoвсyльтoнтoмпoWeb'ди Чopльз Coн.Фpонt.rисno, Joйнyс кoмпoниямиWe||storgo, LSPN Vidеogomesи yнивepситeтoм Yoйк.сми l тoкxe яsпяeт<я oвropoм o6yvoющихкуpсoвno poзpoбoтneмуль'имeдиoи пoльto тeмo|ичeскихPoнфepeнций. инlepфeйсoви учoсIl]икoммнo)Reствo вoтeльскиx вы мoxeтe зolpУзиlЬвсe CSS.шo6лoньr,испoльзoC Web-сoйтo rниlи {www.ЬЬd,сom/sty|in) вoнныeв ней,измeнитЬих и и(пoльзoвoгЬ длясвoихцeлeй.

    издoтeлЬствo пPlrлoшoёт к сoтpудвичeству кoк нoчЙgoющих/ тoк и пишуurих oвтopoв, спeциолизяPуDщихся нo 6изнё}, кoмпьютePнoй и рoдиoэлекrpoннoй пищитe: zim@ntрr€ s ,lU зьoьяIe| |a9 5| 7з7 -з2'52

    пo вoflpoсoм oпloвoй пoкупки кни. изAoтeльствo (нт пPe.с, o5Poutoться Мoсквo, 3вeзAвый 6ульвop, ^oм 21 ' 7 -й этoх Т e л ,6 l 5 . r ' З - 3 8 , 6 ] 5 . 0 ] . 0 ] , 6] 5-55.] з

    IsвN5 477 00з22.7

    llшllш o o з22 8

    Recommend Documents

    Imprint Copyright 2012 Smashing Media GmbH, Freiburg, Germany Version 1: June 2012 ISBN: 978-3-943075-37-3 Cover Desig...
    AdvancED CSS Joseph R. Lewis and Meitar Moscovitz More free ebooks : http://fast-file.blogspot.com AdvancED CSS Copy...
    AdvancED CSS Joseph R. Lewis and Meitar Moscovitz AdvancED CSS Copyright © 2009 by Joseph R. Lewis and Meitar Moscovi...
    CYAN MAGENTA YELLOW BLACK Budd, Moll, Collison In this book you’ll learn how to: T his book is your indispensable g...
    CSS 2 Pratique du design web 3e édition Raphaël Goetter Préface d’Élie Sloïm CSS 2 Pratique du design web 3e édit...
    CSS THE MISSING MANUAL The book that should have been in the box® CSS Second Edition THE MISSING MANUAL ® David Sa...
    CSS Hacks and Filters Making Cascading Style Sheets Work Joseph Lowery CSS Hacks and Filters Making Cascading Style S...