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.018.2 }'1з Пoдп!санo в лesaть 23.06,2006, ФoРvат 70х90 L/ld, I)Р!ит}?а !ать oфсетяu' усл, печ, ,1.28'9, Tиpах 4000 экз' Зaк, (j1]] l
.БасAсpвtLrь", Пе'
УДк 001-7З8.5 ББк 32.97З,26'0i8.2 Аuthoгizсd tЙnsladoп f|оm tlrе lngtis! lаnguige еdirion' спtitlеd sтYLlN $:1тн сss: A DISIGNЕR'S GUID!. 1stЕdirion. ISBN"0з21з05256'Ьy $ryкЕ.svпн, сl tARLЕs. Рublishеd i! PеaгsonЕduсаtiоn.Inс' Puьlъlrin8аs п\сwRiders. сoPyrigh! o 2005' Al] гigh| rеseNed.^"oPart оl this ьoolr nrаyье lеP'lduссd or tЙ.lnilLed in aпy Гогmo. ьI :r\ n.Aаns'elесtгoniсor mесhалiсаl,inсlIdinsPhotoсoPvriglrt. rесоrdnlgогьyапyinгoгпratiol noЙgс ltt|i.иl stnеnl. \rnhour Pеrпissioп fгom Pеaгson Еduсаtiоn, Iм, RUSSIAN lang!аgе .di'jon Рuьlьh€ d Ь'\,Nт PUвLIstIlNG нousl. соPt.igЬlo 2006, всс пРавa3йицсi 'ьi,лrо6аяча.ть это,i кяиги не voxет6ыть вoслPoл3!сдснaвкaf,оli6ьIто {'
6ыло фоРjе
п kаиы!
бы то яц бъ'лo.PсдсaDа!!
6о
лись!еянoгo
PаэРеlIевия
ljцсльцn
rв-
\'атеРиal' nзЛOхеп|lь'ii Dдаjl!оli пlлге' 'lя.гокРaтвo прoвеPен Нo' пoс |lol Ьl9 Bеpoятнoсъ ie\ljиЧссхlxошl6оn !сс PaB' оxет rtrPаln''Polaть 16сonbтФттоЧ. пУьlх свеленlй' l] с3яэи с 3тЛi ;Л за !O3lo*ь]il с лРиме!е!пс! сofeрхaц'хся здесьсвелепяй. ущеPi5 лю60гo вядa, связФяыi'
]s!N 0'32l-30525-6(aн]I,) ] s в N 5 - 1 7 70 0 З 2 27 ( P } с . )
сoPlrigЬt o r"е!' RnlеБ, 2006
o l,ъ]aниe на Рvсскo! 'эьIке' пеРевод 'a Pl|'ссtл' 'зь'к' oфoР!lenпе . t{.l. пPeсс", 2006
,7.La J'I.е-\| Ьl |. J7n)u1
Oглавлeниe 10 o6 аErope Bвeдeниe 14
't6 19 19 20 22 2t з6 з8 40 40 41
42 44
| " а п и с а нп иp ea в иcлs s ' ' . . ' . ' . , . , . , . . . . ' .'...'. . . '..''.'.' ,. . ' . ' . ' ' . ' . ' . ' ' . - . -4.4. . . ' . ' . ' .
.'бop тёгoвв иeрapхии прaвил'......','.'....,, дoкУмeнта дляпримeяeния 46 кoнтeкстr]ых ceлeктoрoв -..'....'''.'.'....' "эимeнeниe 46 -эимeнeниeдoчepниХсeлeKтopoв''...,'''''.'.'....'''''..'.'.,',,.,..''..''
12 74 75 78 80 81
a2 B6
Lettrr.spaсing
88 88 89 90 90 91 92 94 96
(тдцьlй
сайт C noм$lдью сs5
104 107 108 110 111 112 11З 116 1.17 118 'lt9 120 121 122
г л а в а5 . Б а з o в a яp а з м e т к ас т p a н и ц ь | ' . , . - . . , . ' . ' ' . ' . ' . ' . . , .
128
глaва 6. PасLuирeнная pа3мeтка стpаницЬl '..'.',.,.,.
152 152 154 157
::з:аниe paзМeтkис пoлнopаэMeрнЬ|Ми кoлoнKaми.,.'..'.''.'..'-,. - - : х ! ы е к o л o н к и . , , , , . , , , , ' . ' ' . ' . ' . ' , ' ' ' , . ' : , , , . - . . . . ' ' ' . ' . ' . ' ' . , . . . ' . ' ' . ' '1' '5, 7' ' . . . ' . ' . ' ' r.,..iки дляГибкoйцeнтриpoвaнHoй ...'..'.'.'.,.,,.,. '.''.'',',,.,',',,-'.16з рaзмeтки -a:':хнaягибKаярaзMeткa'.''.].'.',',.,.,.,.,'...'''....'.'... ' ' . ' ' ' ' . . '--. , ' . ' ' ' . '1 6 5 _ : . ' - . i ] с o т p и ц a т e л Ь н ь |пМoИл Я M и. ' , ' . ' , , , , ., '.. . . ' ' . ' . ' , '. . . . ' ' . ' ' ' , . , . ' ' . , , 1, .7. 0 .
187 194 196 197 244 207 210 210 214 216 217 215
сaйта.,.,',,,'''.'.'.,,. сoздaeМapХитeKryрУ
к л p а B o il о J o | l e . , . , . , . , ', ' , ' , д o 6 а в r я р vс | и л , a
220 222 22З 226 227 2з0 2З2 2з4
зaдaeмстилиссЬ|лoкнаHoвости'....,.,','',''.'.'.,,....,.'.''''.,.,.,,',.'''.' ' 4o с o з д а н иoе6 Л а c тсиo д e p x и М o г' .o' . , , . , . , . ' . ' . ' ....,.- ' , ' ' . ' . , ' - , . , . , '. '''.,'.' , . 2 з . д a е v с т . / п , 1н , | н e г o . o 1 o Р | / т у л а , , , , , , , , , , , , , ' , ' ' ' ' , ' , , , ,
240 242 245 250 252 254 264
БлaгoдapнoGти с.э.]ечЕo блaгoдaРю свolo '(ену Бэт и лIoбимъIх дoqерей. стPaдавших I]а IIPoтя. ;ieз}I1r девятIr ме€ я цeэ' в тeчeliие котoРых я зaпиРa,ся в /]oма!Iнeм ка6иlieт€ !]riirый вечеР и вьIxoдi]ьIе, pабoтая нaд книIой, я вас oчеIrь лIoблIo и o6ещalо эoз\IестиTь все пРorryщенIrъIe !шoIо вечepинки, фильмьI и дoмaЦние дела, oT :,n,oPы\ я yвиjьE}Л, Я тaк,кe 6лaгoдaРю мaйtn1a нoлава (Мiсhaеi Nolаn) ,Iз издaтeлъствa Nеw Rdеrs, ltoeгo дaввегo дPyгa, dизIrес.lraРтнеPa и РeдактoРa B Neмr Ridеrs' лoсoвe. ]a oьа o)дет гo'Uвэ, Lак,кP в"|рэ'каю блJгoдJPнo( lь Р.дJктoPv
шJРиЛ
llнгaэIlд
\сhеryl Еngtaпd) из кoмпaliliи PeaсlrPlt РIеss за пoддep,rкy'i"Tвиaзм и д06Рo.
совестlioсть.
С eе пoмoщьro
этa книIa стaLц l
Г"Р.,'{е. гoвoРяo PeасhPi(.хoч" .'э,.. rь ..i.'оo'
пPавnяюдечy
oPv
\ f ' Р . r j ф i o P иБ а э Р l N ' l а i о | i е B a е r l . к i J о P J и н J l o Р y l l ] , o и ' ч o , i . | в ] \ я д p с nPед]к] пасreР ч а l . 1 1д и з " i i н е P l М и v и х е ф r ( ] I i m i H е г t ) ' д и J J й P е p у o 6 l o , к к и а р Ъ r r y х o r э л , т v , { г е n H o и e I I , и t t e P к е т o л o г }N ' I l Л o \ 6 а P f и ' к i m L Ь m Ь a . d . ; , o т л Ё , l * . . . ; " . ; . б o o l н o ' N и J ) л l t н е й ш и хЛ ю д e й в 0 6 л а / | и ( е т и ш o l Ц И P ! э н у tshаun Inman), :'o ' oPЬx.i вьIстyла-qв кJЧe( tэе н4) чнoлo рef]к lоpа ]r оЙ кIlиги' yс гPj oгpеxl,1и дo6aвt.tлi{eкoтoPьle ком}tентaР,Iи. B Nасio. Iдe я Ра6oтaю, 6лагoдaРю Сти!снa киIiгa (stеРhеn кing), тoмa Iън. нoнa (тhom кennon) и МюРpея гo,!дeн6eРIa (Мurray co]dепьеrg), ;Редoстaвив. еPжкy д].iясoздaния этoй квиги' a тa]окe Адaмa Лolrдoнa (Аdam London), эдд'I колмaнaрeсa (Еddie Сolmana!еs), -q.Ркaдия кaмински,.цe. }{eтРиo кaццo(рea (Dеlтletгiо сuzzoсгеa) Кpисa Фpaтlтeни (кгis FЙgmеni) rl хeP6a Гoттли6a (неrь Gott1iеb) 3a пoмoщЬ в pа6oте. ( - к l o н я I o ( ьв п o ч г e н и , п е Р c ] Д , к е ф ф Р n 3 е , ъ д I I a н o м d е I I е ) Z е I d m а n ) .М o л . , l l t Х o j ь Ц ц L l r a г' I ! , | o l lH y - o ] Z : с h l а 8 lэ P и { o м М е й е Р o l l ' L l i с . \ a r v e г ' / д I г o м Б а y м э . нort (Doug Bowпan) - lvеЬ-ryPy. 6лaroдapя кoтoРы}l из!тени.]тoсьлицo Ce.и. нa свoих семинaрaх oни нa)rrrrЛи мelrя и тьlсяч,I дplтих дизaйверoв oчeнь мнoror4,i]Iьr oтличнoтIРoвели вPeNIяlIа интepактивтioй кoнфеpенции в o Техас, гPoшeдшей ч 2005 тoД)'
tl ПеPeйдем бли'{e к дoмy' спaси6o Paсy, элизa6ет' дэзину и IIlэш,oн МэйхьIo ' а тaк,(е Po6еPry Бoнни и ,4Jкoгe Ми,l-'lеP Ja пoддepжl.y. oкaзанн}ro нaшеЙ ( емье. пoкa я nис?и кl{иry. БлaIoдaРю кенa Рyoтoлo (Keп Ruotoio) из фиРмьi ANTS softwaгe Inс.' мoего настoящегo дPу.а, дeлoвoгo пaРтЕерa }r кJIиеtrта, и дэйвa клaйIr6ePгa (Dаvе Kleinьеrg) ' нaстaвникa' oкaзaвllleгoся к тoМy я€ ещe и вeликoneтrlrьrм мyзъrlЁя. хo.ry }ттoмянyть и Po6a мейеPa
(Roь Мeyer), нсдaвIro скoнчaвIlleloся
слиIп.
тalrxе свимаIo lIIЛяпy пеPед мoи}tlи дpyзьями и вдoxIroвителя}rи: чaкoм БеР
oс. гoМ,Cтивoм хэйяи, ФPэнкoм ryoтoлo, Дl'Tди дэtIг,дт(имoм xo,!-rrеrr6eкoм, ТoРган, Рaфаэлем Пoлoм Мэpкaнoм' тинoм МaPкyсoм,дэннoй Iъйси, дэ66и oлIiвас и Paссoм Boлкмaнoм. я Paд' чтo знакoм сo всеми )тloмяIiyтыми здeсь лIoдьми. ЧаpльзУaЙ\..с\uтц 28 мфma 2005 aoaa
I
06 aвтope чаPльз Уaйк.смm создaет !vеь.сaйты с 1994 loдa и в rraстoящий мoмент вoзIлaв' ляeт пPoизвoдствelrяыЙ oтдел в кoмпaнии Nado (wи{.nасio.сom ) , зaнимаIощейся РaзPaбoткoй и хoстивгoм сaйтoв. в 1986 roдy чaPль3 oснoвal PRINTZ Еleс. tтoniс Dengп пеpвylo пoлнoстьIo кoмпьютePизиPовaЕЕylо дизaйнеРсlTlo -в саIr ФРafrцискo. Бывш!rй Bице.пPeзидelrт oтдeлa paзpa6oткиЪaйтa фlPмy estaг.сom' инфopмиPyoщеIo читaтeЛей o ]{tизяи зlraмеEитoстей, Уaйк.Смит тaк. ке Pa6oтaп кoнс.\льтaяroч пo BeЬ,иJaйIryдJя гaких Jакaзчикoв, как \^е|ь Fаr. go. ЕsРN Yideogames и yнивеPсtteт сaн-ФРaяцискo. olr пPoвeл сeмиIraPoв и гIРoчитa-пoгРоI{Iioе Чисlio лекций, пoсвящeнIrьIх дизайнv иqтеDфейсoв и чtльтимeJиа. чаPлЬз пPoживаeт в гoPoдеHапJ B)лли, ш' aт кдифoЬ. Еия' с :l{еной Бэт и двyмя дoчеPъми. B свo6oдвoеврем" oнлIo6". 'yзиuиpo"aiь и сoчи{яет мyзыl.i B свoей дoмaulнeй стyдиrr. ЧaРльз таl,ie паnисa"'l oдин кинo. сцeнapий и тeпеPь Padoтaeт над втoPъlм,
Bвeпeниe
:4
(?rl'lь{5tй.a;т Е no.lourью {5s
.езультатьi этoгo тРудa гIРoстo nеJlиколепllьт: с пoМoщъю сss мъI l{o)xe]uис. : :]Зoвaть чеTn1]o лoгичIlую рaз:\1еткvиi г]Pимeняя тa6]rицьI € т илей' дo6авитЬ
]:jlчный
д'вaйн' сдеЛав сайт дoступнъIl1 ltl1я M .:::ть] вРoде сNN давнo oсозllfuци пPе!ti1l'ществa это.o п.lдхoда и ттРeo6Рaзoвa: l1еD.стРaницьI в сoвllестимьiе сo стаIrдapr.aмиj oTкaзaвIIlисЬ oт пpезеятaLIи. IIиs L5s ,-,,) нoн lпoлЯ вРешнc' o o6,Lи о' такие саиlьI .:..вьI к 6}'дFцеiIy' их сoдеР,ш\.Ioе бeз пPo6rе\1 легIro и э]toнorlичlro oтo6рfuкa. ,: вPaз (ичнЬl\ пoль]oвiтеЛЬ,'{и\\.тPoи( вcх, B книлesьr pас.lorриlrпрак. .: : :есR]']o пoJlЬ3y этoгo пoдхoдa. Jтa кtrиIa является oчеIrь пPaктичпьly изда1rиel' из кoтoрoгo вьI леrкo мo. деи или кoд д-'rя сoбствelтньrх н}.яц' здeсЬ въI пoзнaкoмIr. 'lаРа!e ' с с5s. наЧиная с DоD шР/фГos и JaкJнчивая (olJаниev )' rаIIoьки ::]AнoЙ в oсtioве кoтopoй ле)киT лРoстoй кoд хilТML. Paзметки' a все aспек. .
]:: ]изaйнa кo;rтpoлиP}Toтсяс пoмoщъю сss. B кал
< : : } < = ] i a nс 1 a s s . ' 1 t s е !
>
r11 ]1:ss='tt0'noirap='trre'ormoxsееn.e.='mhtjovет(.toсаL!оо1]ra.,0*2"2' 0r2+2, Lt0 ]]>sць5стiьё r1:.]
.::::::.='t]:c'noятap='trle'onпotrзeen.e.:'mhliovеr(.tосalloo]trа.,2}2+2' *.:="!ttр://qо.miстoвoft.сoп/?1inkiii=з1?о2?i>мanage ' 0;
Youг Profi1e
BесЬ этoт кoд Е}'ясt1для создaЕия лlr lь oднoй стрoки с кtioпкaми (Pис, r,1). 247 сиilвoлoв из фа}lтическoе .oафlсLtoe кoдa BЪIде-rевo r{iирным llrРифтoм. тсм сaмьIм тoлстьtм 74% являloтся oсr,aвшиеся }fенeс 26%' чт., сoстaвлясТ :j'].
2t
l . xflт&ll:
lлAвд
$рyl.тy$''р3эs
сo}isр}{1,irtoo
мo,'rет сo стандaртaNli сaйl.a в сooтветстDии To' чтo пeреде-!ка имeloщегoся се6я-тем' мoxете nьl ! r]Pе\1efiи| 1'Гешить oпPеДелеEIlъiх тсилйil пoтPе6овa;ь к этo}1у- Если чтo, сделaв этo едиIto'iдъl. Ртiе I!е дoл'(IъI 6}детe возвPaщarъсЯ нaчa-!а, самoro с IIравильno этo с/]елaTь вьl сoздаете Iloвьiй сaйт, тo мo)reте за сЧет сaйтьI сoздaватЬ РaзДeлeЕия с пo1loщью tlаr,Ieii кlrигrl BъI t'aучитесь _ с пoпIoщью хнTмL !tь1 сoздади]! стРyкT}Рy !I зaдa. стD1.riт\рьr п сoдеp)киNloгo всto иIrфoPмац'lo для сoдеP)кaцlli{и д"."i -ii,ц фj,i" . тa6л'Iцaми стиjIей. "" стРаницъl' пo-пчеItия вужlтolo ви3},,,r-'1ьlioгooбЛикl !сгIользoватъ рa3. тaкoгo подхoда являeтсЯ вoзмoжвoсть Преrl}ryществoм
,"'"i'.
'iс""цu. .'",.'е!i для 6Рa)'зeРoв'кГIIt, мo6ильвъlx те,rефoвon' въIвoдa
стDaнпцьI Еa печaтъ' llpoтpaм}1 считъIвaвия
пнфoр}Iaцlrи
стeкстадЛя
пoльзoва-
теjrеit.oсчaс"eнпъ.'Jpениемп.,r,Ка:*я'rятa6Лriцaстиля6}д€ т о6
пo-1pео,v oптllrlLrьпъIй o6лпк стРаницьI в тoii ил,l инoй сPеде, нo пPи этoп! вaм вь'бпРaть сaмa 6}дет кoтoРаЯ eтся l'!rь oанa вeРсйя кoдa хнTМL.с:гРaвицъI' пo:L\o:1яцуroтa6Лицу сТи-.rеilДця текyщей сPедьт.
xнтгUltП пpaвилaero нaписaния Ть кaк Сss являеTся спoсo6oм придarlия стt!.iя для хtlТNll-' не"1ъзяиспoльзo. (oдa стРaIIицъI,Aчто иl1еннo вать Css 6ез пРeдвaРите,.lъвoгo сoздallиЯ хIlтмL oсновalr rla стРyкЦPе пpе:стaвляeт io6oй хнTМL? floпРoстl товoPя. хнTМL Х-\1L. в хoтoрoй теги lr пo\!еценEoе в}г}тpи !lих сoдеP)киУое. нalтРnмеР. <presiderL>пyтиt: .
Fтamеsеt - тo '(с сa]!Iое' чтo и пеРехoдI1ъIЙ вaрЕaнт' РaэРешxе1.с'l испoльзoвaть фРсймъI:
пo в этo!' сЛyчae
< ] ) O . т Y ] Е ! : т M L ? J - в L I с ' / / 1 i ] с , / / D т l я Т l ' t т ,4 . 0 1 r ! Ф e в e t / / Е I l ' . ]rtt! ://!rлd. з, orq/тз/htmt4/f тaпesеt.did'> Ес,rи 6PaузеР lIе o6нaPу o.lепь вахнo tlе зa6ь!вaть yказъIвaть DOстYPЕ, бPаузеPoв' 6ьт,ra lтo стрaнriua пPсд!Io,o)r'ит' хIlт ero. oli lrазРа6oTaнaдля ъiеь'стaндaРтoв' появлeния сoздnвнЬli зaдonгo дo pех11jl ! Tpаauцlоxнъ|Й пеРехoдяr l!нoгlrе 6РaтзePьI Без DOсТYPЕ пoддеpживaеyьlll и совN'естиNloстъ oбрaтнylo (QLtirk'' o6сспечпвaюций км Nlоzil]а, IЕ6 для Windows u lЕ5 для N'Iaсitltosh, тaкиNrи 6Рeузеpами' B тpадициoЕiнoпt Роn!lN!е 6РаузеP ведет сс6я так' б}'дтO oll Ее имсет IIи Na'
]eiiшсro пoнятия o WeЬ.стaндаРтахи DoМ,
Б0ле6 п0др06нo o тpoдициoннoм PёxЙмe 6poyзеров мoхнo узнoть пo oдPeсy htto://diYeintomо*,ol9lolсЬiv.'2002/05/29lqUnks mode.
Х*!$;.
пPимeчониe
i '1ir;:.1]1;l ..5
!i].gr.];i**
o 6 ъ я в a e F Р qD o с г Y P Е и п P o Ф р o r о в и Ч е ь в Ь |м o n 6 т е r o , - и в U o 6 л o t s o \d o о . ниц нo (o;lе Foцo; \нn.и w*w,ЬЬо,.оnl5уЬ-, в" -.'-" *-...**" '', шo6лoны кoк нoчольнуb тoчкy для сoздoния сo6ственньx стрoниц.
3. Укa]*iи,гс ти]l сoдеРr{иlroгo. o6ъявлeнIrс тпllа сoДсР)кllмoгo в IIaча-Iе дoк1'!]eнта' вllесте с дР}'гиr]и \{етa.те.al,ll:
<sЕLiст
l.llи|o с лolloшLll) гJкolo кoдa:
NфJЕ=L!{Iyrnls>
(oшt!< /oРтicN> с06а(и E тo эквJ{ва-lelrтoм
B хнTмL
6yдет cпедующий
кoдj
<sе1eсt naпе='aliпа1s' > кoп{и имeеlдваатpибга, , o сoзчaJeциev o.'иo-,сoз.ачeни. ем "моя nю6nia-ч .aр.лЕnа'' дoлoяв]rёниЯ Web-стандфтoв pаспpocтpaненнь|м явлeниeм oЬ|лoдoбaвлятЬтeгам npeзemациoнные атpиб)ты тeпepЬ мЬ] мoхeм oтKазaться oт этого и лeрeнеоти oтвeтствeн. нoотЬ зa мeшiиЙ
размeo кoдa'
видстpаниць] натаблицy cтилeисss, *"
"ущЪ*"Ъ"""1Б*рiщ""'
28 !i
г , . A в A l , x l t т Е l l : ( т P y х l y p и р y с м< o A e p ' R $ м o e кодo!ъIй эквивaпен,l. левой 'vl]roвoй скl)6ки и a]{псpсalrда. ]]:.O,rЬз!йте встРечaeтся ЛсBая углo!ая скoбка ( з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 >
эт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 <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
,
,,,
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мент
.лA}A:. xa'{ 'а60rзer (s9
а2
/,,.,.
л"",,
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
'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''''
е,т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 > 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'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м,
эт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т ]Е,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м'
Св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т nrз.ий 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.тёкстабз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ц ve!tiсat a1t tinds of inЕеrеstlng пays. т 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 timеs Ъеtte. r:ira! Lар<suр>&dаgqе.;'а:еrI
i0<suр>5 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т. ссДлкa з
д sifrр]е
т1Jo'со1um
],ayout
<sс.onq>текстёце
тeiсf
a6зaцa
Ецe тexст
Ещ. тetст
Ец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ёл
Разпе'ка
1i
{Цarqin-bottcli:
ioцЕ Wеiq]rЕ:bcLd; foni
'5еn;
sizе: .7.еп' ]
.!рс{fen ра3$erx..дgy
]divtсonLеnt
i3з
n1{font-size:1еm; }
:]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е.
ссы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ф;)
< / . 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т тt]]..]J :l].2 ir:.]: :t .1iiiе heigit ah:i LIr. ctL.j Lir.,..1,/nir] й4 o л e ц o v a й) л e s e + , o6Paтите вlltltlаIlие, чTo эТот IlовьIй эrемel]т Paспo]r:lгас,rся ,oа п,1aвaющи. кoнтei1нoРa d]],'и ( неiry пРиI.РeплеIr Еlaсс ми (o"qoн(avи' нo nф.dзaкPьттиеlI с1еarf1oat5' ТеqеРъ;.lо6aвиy сти/rь дnя этогo lспiс.a, divghеaoer {ir1iii] 4'c!]):,,]:.]i]!.!inc cil.Ёсcnten.а!еa
.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'>
сLeаrinq />
Р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т]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'
*/
A f i х e d п i d L h t h r е e с o t u m
/* д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
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 Я : с1авв=''с1eаlf ix''>
< , , d i v > >
с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
г
< 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): т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т:?dRiс!enbe.kеt .1i> 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.
cuslomers
s i ! ] ! с < / e > < / t i , i"lembers в e n ё f: t s < i , e > < / 1 i
PIogrаms O u e s t i a t ! s ?
'ealетs
dloр
dO'Ф пenu 1tеms >
,,
< а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а с ! s t o r n е ! s < / a > < r r 1 > < ld - l o р d о w nп e n u i t e m s . > < 1 i > < аh r е f = . ' # ' > o u .s e ! . / i . e s < / a > < / 1 i > ?--\ 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е
к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.-> 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 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' G o < / a >
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 > < 1 1 > < ah r e t = . * ' ' > R e l а t e d l i n k E < / a > < / 1 i > .11>сoдLdсt UE. ,а,. /1i> < a h l e f - , # ' ' , f 1 п e р ! i д E < / а> < / 1 i > tems
of uвe d
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 ) } Dolstаs
.ч!dе.sci'
< а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' >
За |е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 ,. ф 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т .лрoчий ioд.'.
тепе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}