TE elementet e tekstit ju mund të përdorni vetinë vertikale-linjë. Por prodhon shtrirje vertikale jo relative element i jashtëm, por në lidhje me bazën e tij. Prandaj, kjo veti nuk është e përshtatshme për t'u përdorur për shtrirjen e tekstit.
Qelizat e tabelësVetitë e rreshtimit të tekstit dhe rreshtimit vertikal mund të përdoren për të krijuar shtrirje brenda qelizave të tabelës. Për qelizat, rreshtimi vertikal merr vlerat e mëposhtme:
rreshtim vertikal: në mes - në qendër (vlera e parazgjedhur)
vertikale-linjë: lart - përgjatë skajit të sipërm
vertikale-linjë: fund - përgjatë skajit të poshtëm
Kjo veti lidh vertikalisht të gjithë përmbajtjen e qelizës, duke përfshirë tekstin dhe elementët e bllokut. Dhe rreshtimi i tekstit vlen vetëm për tekstin. Shembull:
Stili:
11 |
td (kufi: 1px solid E kuqe; gjerësia: 200px; lartësia: 180px; ) |
Kodi HTML:
Nëse vendosni disa dhëmbëzime në automatik, ajo do të zërë të gjithë hapësirën e disponueshme. Kjo ju lejon të poziciononi bllokun në të djathtë. Dhe nëse kjo vlerë specifikohet për dhëmbëzimin majtas dhe djathtas, atëherë hapësira ndahet në gjysmë midis tyre dhe blloku shfaqet në qendër.
Shtrirja e tekstit e përcakton atë pamjen dhe orientimi i skajeve të paragrafit dhe mund të jetë majtas, djathtas, në qendër ose i justifikuar. Në tabelë Figura 1 tregon opsionet për rreshtimin e një blloku teksti.
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. |
Opsioni më i zakonshëm është rreshtimi majtas, ku teksti në të majtë shtyhet në skaj ndërsa teksti në të djathtë mbetet i dehur. Shtrirja djathtas dhe qendra përdoret kryesisht në titujt dhe nëntitujt. Mbani në mend se kur përdorni justifikimin, mund të shfaqen hapësira të mëdha midis fjalëve në tekst, gjë që nuk është shumë tërheqëse.
Etiketa e paragrafit përdoret zakonisht për të vendosur shtrirjen e tekstit
ME atribut align, e cila përcakton metodën e shtrirjes. Është gjithashtu e lejueshme që të rreshtoni një bllok teksti duke përdorur një etiketë me atribut i ngjashëm rreshtoni, siç tregohet në tabelë. 2.
| Shton paragrafi i ri teksti, majtas i rreshtuar si parazgjedhje. Ndarjet e vogla vertikale shtohen automatikisht para dhe pas paragrafëve. | |
Teksti |
Shtrirja në qendër. |
Teksti |
Rreshtimi majtas. |
Teksti |
|
Teksti |
Shtrirja e gjerësisë. |
| Teksti | Çaktivizon mbështjelljen automatike të linjës, edhe nëse teksti është më i gjerë se dritarja e shfletuesit. |
| Teksti | Lejon shfletuesin të bëjë një thyerje rreshti vendndodhjen e specifikuar, edhe nëse përdoret etiketa. |
| Teksti | Shtrirja në qendër. |
| Teksti | Rreshtimi majtas. |
| Teksti | Shtrirja e djathtë. |
| Teksti | Shtrirja e gjerësisë. |
Shtrirja majtas e elementeve është vendosur si parazgjedhje, kështu që nuk ka nevojë ta specifikoni përsëri. Pra, align="majtas" mund të hiqet.
Dallimi midis paragrafit (etiketa
) dhe etiketë në atë që një indent vertikal shfaqet në fillim dhe në fund të paragrafit, gjë që nuk është rasti kur përdoret etiketa.
Atributi align është mjaft universal dhe mund të zbatohet jo vetëm në tekstin kryesor, por edhe në tituj si . Shembulli 1 tregon se si të vendosni shtrirjen në një rast të tillë.
Shembulli 1: Rreshtimi i tekstit
Shtrirja e tekstit Si të kapni një luan?
Metoda e forcës brutale
Ne e ndajmë shkretëtirën në një numër zonash elementare, madhësia e të cilave përkon me dimensionet e përgjithshme luan, por më i vogël se madhësia e kafazit. Më pas, me kërkim të thjeshtë përcaktojmë zonën në të cilën ndodhet luani, gjë që automatikisht çon në kapjen e tij.
Metoda e dikotomisë
E ndajmë shkretëtirën në dy gjysma. Në njërën pjesë ka një luan, në tjetrën nuk ka asnjë. Marrim gjysmën në të cilën ndodhet luani dhe e ndajmë sërish përgjysmë. E përsërisim këtë derisa luani të kapet.
Rezultati i shembullit është paraqitur në Fig. 1.
Oriz. 1. Lidhni tekstin djathtas dhe majtas
Në këtë shembull, titulli është rreshtuar në qendër të dritares së shfletuesit, paragrafi i theksuar është rreshtuar në të djathtë dhe teksti i trupit është rreshtuar në të majtë.
Në programe të tilla si p.sh. Microsoft Word Ju ndoshta keni hasur në mjete horizontale të shtrirjes së tekstit. Mund ta rreshtoni tekstin majtas ose djathtas, në qendër ose të justifikuar. E njëjta gjë ekziston në CSS - shtrirja e tekstit bëhet duke përdorur vetitë e rreshtimit të tekstit dhe vlerat përkatëse, të cilat janë paraqitur në tabelë:
Shembull i një hyrje stili:
P (lidhja e tekstit: majtas;)
Vlerat majtas, djathtas dhe qendrore Teksti i rreshtuar majtas pothuajse gjithmonë duket i mirë në faqet e internetit dhe është i lehtë për t'u lexuar. Shtrirja e djathtë, si rregull, përdoret rrallë në gjuhët evropiane, por nuk mund të quhet plotësisht e padobishme: ky stil është i dobishëm për dizajn i bukur titrat për fotot ose citatet, rreshtimi i përmbajtjes së qelizave të tabelës ose fragmente të vogla teksti. Vlera qendrore përdoret shpesh për të njëjtat qëllime. Për të mund të përdoret vlera justifikuese Justify text në CSS versionet e shtypura faqet, por nuk rekomandohet të tërhiqeni me këtë stil në faqet e internetit të krijuara për t'u parë në një monitor. Pse? Në pamje të parë, teksti i justifikuar duket i bukur dhe i barabartë, si një rubrikë në një gazetë. Por për të shtrirë tekstin në këtë mënyrë, shfletuesi duhet të shtojë hapësirë shtesë ndërmjet fjalëve, si rezultat i të cilave në tekst mund të krijohen boshllëqe të shëmtuara, duke e vështirësuar leximin. Në programet e krijuara për të përgatitur të dhëna për printim, ndodh shumë më tepër. akordim i imët hapësira në tekst dhe shpesh përdoret mbështjellja e fjalëve, gjë që nuk është e pranishme në shumë shfletues. Prandaj, është e nevojshme të kontrolloni se si duket teksti i justifikuar në faqet e internetit dhe pyetja e parë që duhet t'i bëni vetes është: a është e lehtë për t'u lexuar? Kjo është veçanërisht e vërtetë për blloqet e ngushta të tekstit (përfshirë. versionet celulare faqe). Vlerat e fillimit dhe të përfundimit Vlerat e fillimit dhe të fundit për veçorinë e rreshtimit të tekstit zbatohen në CSS3 dhe funksionojnë pothuajse njësoj si majtas dhe djathtas, por ka një ndryshim. Duke aplikuar vlerën fillestare për tekstin që shkon nga e majta në të djathtë (LTR), shtrirja do të jetë e majtë (përkatësisht, për tekstin që shkon nga e djathta në të majtë (RTL), shtrirja do të jetë e drejtë). Është logjike që vlera e fundit të funksionojë në mënyrë të kundërt (d.m.th., ajo rreshton tekstin LTR në të djathtë dhe tekstin RTL në të majtë). Këto dy vlera nuk mbështeten nga disa shfletues, duke përfshirë Internet Explorer, prandaj, nëse nuk ka nevojë urgjente për t'i përdorur ato, ne rekomandojmë përdorimin e vlerave majtas dhe djathtas.Pamjet e ekranit tregojnë shembuj të përdorimit kuptime të ndryshme për veçorinë CSS text-align:
Pamja e ekranit 1: Përafrimi i tekstit LTR në të majtë duke përdorur vlerën e fillimit. Një pamje e ngjashme mund të arrihet duke përdorur vlerën e majtë. 
Pamja e ekranit 2: Përafrimi i tekstit LTR në të djathtë duke përdorur vlerën fundore. Një pamje e ngjashme mund të arrihet duke përdorur vlerën e duhur. 
Pamja e ekranit 3: Përafrimi i tekstit në gjerësi. Me font të vogël dhe gjerësi të madhe faqe/blloku, ky opsion për rreshtimin e tekstit në një faqe ueb duket i pranueshëm. 
Pamja e ekranit 4: madhësia e shkronjave është rritur dhe gjerësia e bllokut është zvogëluar në krahasim me shembullin e mëparshëm. Siç mund ta shihni, në tekst janë shfaqur boshllëqe të shëmtuara (të nënvizuara me vijë të kuqe). 
Pamja e ekranit 5: dy mënyra për të rreshtuar tekstin duke përdorur shembullin e versionit celular të mësimit tonë (në të majtë - rreshtimi i tekstit: majtas, në të djathtë - rreshtimi i tekstit: justifikoni). Provoni të lexoni tekstin në të dy kolonat dhe përcaktoni se cili opsion është më i rehatshëm për t'u lexuar.
Dy mjete kryesore përdoren shpesh për paraqitjen e faqes - pozicionimi Dhe lëvizje e lirë (lundruese). Pozicionimi CSS ju lejon të specifikoni se ku shfaqet kutia e një elementi dhe lëvizja e lirë lëviz elementët në skajin e majtë ose të djathtë të kutisë së kontejnerit, duke lejuar që pjesa tjetër e përmbajtjes të "rrjedhë" rreth tij.
Pozicionimi dhe lëvizja e lirë e elementeve 1. Llojet e pozicionimitVetia e pozicionit ju lejon të specifikoni me saktësi vendndodhjen e re të bllokut në lidhje me vendin ku do të ishte në rrjedhën normale të dokumentit. Si parazgjedhje, të gjithë elementët janë të renditur në mënyrë sekuenciale njëri pas tjetrit në rendin në të cilin janë përcaktuar në strukturën e dokumentit HTML. Prona nuk është e trashëguar.
| Kuptimi: | |
| statike | Vlera e paracaktuar do të thotë pa pozicionim. Elementet shfaqen në mënyrë sekuenciale njëri pas tjetrit në rendin në të cilin janë përcaktuar në dokumentin HTML. Përdoret për të pastruar çdo vlerë tjetër pozicionimi. |
| i afërm | Një element relativisht i pozicionuar zhvendoset nga vendndodhja e tij normale në drejtime të ndryshme në lidhje me kufijtë e kontejnerit mëmë, dhe hapësira që ajo zinte nuk zhduket. Megjithatë, një element i tillë mund të mbivendoset me përmbajtje të tjera në faqe. Nëse për një element të pozicionuar relativisht i vendosni vetitë lart dhe poshtë ose majtas dhe djathtas në të njëjtën kohë, atëherë në rastin e parë do të funksionojë vetëm sipër, në të dytën - majtas. Pozicionimi relativ ju lejon të vendosni një indeks z për një element, si dhe të vendosni absolutisht elementët fëmijë brenda një blloku. |
| absolute | Një element i pozicionuar absolutisht hiqet plotësisht nga rrjedha e dokumentit dhe pozicionohet në lidhje me kufijtë e bllokut të tij të kontejnerit (një element tjetër ose dritarja e shfletuesit). Blloku i kontejnerit për një element absolutisht të pozicionuar është elementi paraardhës më i afërt, vlera e vetive të pozicionit të të cilit nuk është statike. Vendndodhja e skajeve të elementit përcaktohet duke përdorur vetitë e kompensimit. Hapësira që zë një element i tillë shembet sikur elementi të mos ekzistonte në faqe. Një element i pozicionuar absolutisht mund të mbivendoset ose të mbivendoset nga elementë të tjerë (për shkak të vetive z-indeks). Çdo element i pozicionuar absolutisht gjeneron një bllok, domethënë pranon vlera e shfaqjes:blloku; . |
| fikse | Rregullon një element në një vendndodhje të caktuar në faqe. Blloku i kontejnerit të një elementi fiks është porta e shikimit, domethënë, elementi është gjithmonë i fiksuar në lidhje me dritaren e shfletuesit dhe nuk e ndryshon pozicionin e tij gjatë lëvizjes së faqes. Vetë elementi hiqet plotësisht nga rrjedha kryesore e dokumentit dhe krijohet në një rrjedhë të re dokumenti. |
| fillestare | Vendos vlerën e pronës në vlerën e paracaktuar. |
| trashëgojnë | Trashëgon vlerën e pronës nga elementi mëmë. |
Oriz. 1. Dallimi ndërmjet pozicionimit statik, relativ dhe absolut 2. Vetitë e kompensimit Vetitë përshkruajnë kompensimin në lidhje me anën më të afërt të bllokut të kontejnerit. Set për elementet për të cilët vlera e vetive të pozicionit nuk është statike. Ata mund të marrin vlera pozitive dhe negative. E pa trashëguar.
Për vetinë e sipërme, vlerat pozitive lëvizin skajin e sipërm të elementit të pozicionuar më poshtë dhe vlerat negative lëvizin skajin e sipërm të bllokut të tij të kontejnerit. Për vetinë e majtë, vlerat pozitive lëvizin skajin e elementit të pozicionuar në të djathtë, dhe vlerat negative lëvizin skajin e elementit të pozicionuar në të majtë. Kjo do të thotë, vlerat pozitive e lëvizin elementin brenda bllokut të kontejnerit, dhe vlerat negative e lëvizin atë jashtë tij.
3. Pozicionimi brenda një elementiPër bllokun e kontejnerit të një elementi absolutisht të pozicionuar, vetia e pozicionit: relative vendoset pa kompensime. Kjo lejon që elementët të pozicionohen brenda një elementi kontejneri.
.mbështjellje ( mbushje: 10 px; lartësia: 150 pikselë; pozicioni: relative; sfondi: #e7e6d4; rreshtimi i tekstit: djathtas; kufiri: 3 px i ndërprerë #645a4e; ) .bardhë (pozicioni: absolut; gjerësia: 200 px; sipër: 10 px; majtas : 10 px; mbushje: 10 px; sfond: #ffffff; kufiri: 3 px me pika #312a22; ) 
Oriz. 2. Absolute pozicionimi relativ
1. Nëse gjerësia ose lartësia e një elementi të pozicionuar absolutisht është vendosur në automatik, atëherë vlera e tij do të përcaktohet nga gjerësia ose lartësia e përmbajtjes së elementit. Nëse gjerësia ose lartësia deklarohen në mënyrë eksplicite, atëherë kjo është vlera që do të caktohet.
2. Nëse brenda një blloku me pozicion: absolute ka elemente për të cilat mbështjellës notues, atëherë lartësia e këtij elementi do të jetë e barabartë me lartësinë e më të gjatit prej këtyre elementeve.
3. Për një element me pozicion: absolut ose pozicion: fiks, nuk mund të vendosni njëkohësisht veçorinë float, por për një element me pozicion: relative, mundeni.
4. Nëse paraardhësi i elementit të pozicionuar është një element blloku, atëherë kontejneri i bllokut formohet nga zona e përmbajtjes e kufizuar nga kufiri. Nëse paraardhësi është një element inline, blloku i kontejnerit formohet nga kufiri i jashtëm i përmbajtjes së tij. Nëse nuk ka paraardhës, blloku i kontejnerit është elementi i trupit.
Në rendin normal, elementët e bllokut jepen duke filluar nga skaji i sipërm i dritares së shfletuesit dhe duke punuar drejt skajit të poshtëm. Vetia float ju lejon të lëvizni çdo element, duke e rreshtuar atë në skajin e majtë ose të djathtë të faqes së internetit ose në elementin e kontejnerit që e përmban atë. Në këtë rast, elementët e tjerë të bllokut do ta injorojnë atë, dhe elemente inline do të zhvendoset djathtas ose majtas, duke liruar hapësirë për të dhe duke rrjedhur rreth tij.
Oriz. 3. Lëvizja e lirë e elementeve Një bllok lundrues merr përmasat e përmbajtjes së tij, duke marrë parasysh mbushjen dhe kufijtë. Sipër dhe poshtë indencat e marzhit elementët lundrues nuk shemben. Vetia float zbatohet si për elementët e bllokut ashtu edhe për elementët inline.
Skaji i jashtëm i majtë ose i djathtë i një elementi të lëvizur, ndryshe nga elementët e pozicionuar, nuk mund të vendoset në të majtë (ose djathtas) të skajit të brendshëm të bllokut të tij të kontejnerit, d.m.th. shkojnë përtej kufijve të saj. Për më tepër, nëse është specifikuar mbushja e brendshme për bllokun e kontejnerit, atëherë blloku lundrues do të jetë i ndarë nga buza e bllokut të kontejnerit në distancën e specifikuar.
Vetia ndryshon automatikisht vlerën e llogaritur (të shfaqur në shfletues) të veçorisë së ekranit për t'u shfaqur: bllok për vlerat e mëposhtme: inline , inline-block , table-row , table-row-group , table-column , table-column-group , tabela-qelizë , titulli i tabelës, grupi i kokës së tabelës, grupi i bazës së tabelës. Vlera e tabelës inline ndryshon në tabelë.
Vetia nuk ka efekt në elementët me ekran: flex dhe ekran: inline-flex .
Kur përdorni veçorinë float në elementët e bllokut, sigurohuni që të specifikoni një gjerësi. Kjo do të krijojë hapësirë për përmbajtje të tjera në shfletues. Por nëse gjerësia e kombinuar e të gjitha kolonave është më e madhe se hapësira e disponueshme, atëherë elementi i fundit do të zbresë.
Në të njëjtën kohë, kufijtë vertikalë të elementeve të lundruar nuk shemben me kufijtë e elementëve fqinjë, ndryshe nga elementët e zakonshëm të bllokut.
6. Anuloni rrjedhën rreth elementeve 6.1. pronë e qartëVetia e qartë përcakton se si do të pozicionohet elementi që pason elementin lundrues. Vetia anulon mbështjelljen në njërën ose të dyja anët e elementit, caktuar nga pasuria noton Për të parandaluar shfaqjen e sfondit ose kufijve nën elementët lundrues, përdorni rregullin (mbushje: i fshehur;).
6.2. Pastrimi i një transmetimi me stile duke përdorur klasën clearfix dhe pseudo-class :afterSupozoni se keni një enë blloku për të cilën gjerësia dhe lartësia nuk janë të specifikuara. Brenda tij vendoset një bllok lundrues me dimensione të specifikuara.
.container ( mbushje: 20px; sfond: #e7e6d4; kufi: 3px me pika #645a4e; ) . ; kufiri: 3px me pika #666666; ) 
Oriz. 4. “Efekt kolapsi” i bllokut të kontejnerit
Zgjidhja e problemit:
Ne krijojmë klasën .clearfix dhe, në kombinim me pseudo-klasën :after, e aplikojmë atë në bllokun e kontejnerit.
.container ( mbushje: 20px; sfond: #e7e6d4; kufi: 3px me pika #645a4e; ) . ; kufiri: 3 px me ndërprerje #666666; ) .clearfix:after (përmbajtja: ""; shfaqja: bllok; lartësia: 0; qartë: të dyja; dukshmëria: e fshehur; )
Opsioni i dytë për pastrimin e rrjedhës:
Clearfix:after (përmbajtja: ""; shfaqja: tabela; qartë: të dyja; ) 
Oriz. 5. Zbatimi i metodës së "pastrimit" në një bllok kontejneri që përmban një element lundrues
Ekziston një truk tjetër për të pastruar rrjedhën për një element që përmban elementë lundrues, të tillë si një listë horizontale me pika:
Ul ( margjina: 0; stili i listës: asnjë; mbushja: 20 px; sfondi: #e7e6d4; tejmbushja: automatik; ) li ( noton: majtas; gjerësia: llogaritur (100% / 3 - 20 px); lartësia: 50 px; margjina- djathtas: 20 px; sfondi: #ffffff; kufiri: 3 px i ndërprerë #666666; ) li:last-child (margin-djathtas: 0;) Fig. 6. Pastrimi i rrjedhës së listës horizontale
Vlad Merzheviç
Pozicionimi është pozicioni i një elementi në një sistem koordinativ. Ekzistojnë katër lloje të pozicionimit: normal, absolut, fiks dhe relativ. Në varësi të llojit, i cili vendoset përmes vetive pozicioni, ndryshon edhe sistemi i koordinatave.
Falë kombinimit të vetive të pozicionit, majtas, sipër, djathtas dhe poshtë, një element mund të mbivendoset mbi njëri-tjetrin, të shfaqet në një pikë me koordinata të caktuara, të fiksuara në një vend të caktuar, të përcaktuar pozicionin e një elementi në raport me një tjetër, etj Ngjashëm me pronat e tjera Menaxhimi i CSS pozicionimi është i disponueshëm përmes skripteve. Kështu, ju mund të ndryshoni në mënyrë dinamike pozicionin e elementeve pa ringarkuar faqen, duke krijuar animacion dhe efekte të ndryshme.
Pozicionimi normalNëse vetia e pozicionit të një elementi nuk është vendosur ose vlera e tij është statike, elementi paraqitet në rrjedhën e dokumentit si normal. Me fjalë të tjera, elementët shfaqen në faqe në rendin në të cilin shfaqen Kodi i burimit HTML.
Vetitë majtas, lart, djathtas, poshtë, nëse përcaktohen, injorohen.
Pozicionimi absolutMe pozicionimin absolut, elementi nuk ekziston në rrjedhën e dokumentit dhe pozicioni i tij vendoset në lidhje me skajet e shfletuesit. Ju mund ta vendosni këtë lloj përmes vlerës absolute të vetive të pozicionit. Koordinatat janë të specifikuara në lidhje me skajet e dritares së shfletuesit, e quajtur "zona e dukshme" (Fig. 3.42).
Oriz. 3.42. Vlerat e pronës majtas, djathtas, sipër dhe poshtë për pozicionim absolut
Modaliteti karakterizohet nga karakteristikat e mëposhtme.
- Gjerësia e shtresës, përveç nëse specifikohet në mënyrë eksplicite, është e barabartë me gjerësinë e përmbajtjes plus vlerat e kufirit, kufirit dhe mbushjes.
- Një shtresë nuk e ndryshon pozicionin e saj origjinal nëse nuk ka vetitë e djathta, majtas, lart dhe poshtë.
- Vetitë majtas dhe sipër kanë përparësi ndaj vetive të djathta dhe të poshtme. Nëse e majta dhe e djathta kundërshtojnë njëra-tjetrën, atëherë vlera e së djathtës shpërfillet. E njëjta gjë vlen edhe për pjesën e poshtme.
- Nëse majta është vendosur në një vlerë negative, shtresa do të shkojë përtej skajit të majtë të shfletuesit dhe shiriti i lëvizjes nuk do të shfaqet. Kjo është një mënyrë për të fshehur një element nga pamja. E njëjta gjë vlen edhe për pronën e sipërme, vetëm shtresa do të shkojë përtej skajit të sipërm.
- Nëse e majta është vendosur në një vlerë më të madhe se gjerësia e zonës së dukshme ose e djathta është specifikuar me vlerë negative, do te shfaqet shirit horizontal rrotulloni. Rregull i ngjashëm punon edhe me top, por ne do të flasim për shirit vertikal rrotulloni.
- Në të njëjtën kohë, vetitë e specifikuara majtas dhe djathtas formojnë gjerësinë e shtresës, por vetëm nëse gjerësia nuk është e specifikuar. Ja vlen te shtohet veti gjerësi dhe e drejta e vlerës do të shpërfillet. E njëjta gjë do të ndodhë me lartësinë e shtresës, përfshihen vetëm vetitë sipër, fund dhe lartësi.
- Një element i pozicionuar absolut lëviz me dokumentin ndërsa lëviz.
Vetia e pozicionit, e vendosur në absolute, mund të përdoret për të krijuar një efekt kornizë. Përveç pozicionimit absolut për elementet, ju duhet të caktoni vetinë e tejmbushjes me vlera auto. Më pas, kur përmbajtja tejkalon lartësinë e zonës së dukshme, do të shfaqet një shirit lëvizës. Lartësia dhe gjerësia e "kornizave" gjenerohen automatikisht nga përdorimi i njëkohshëm vetitë majtas, djathtas për gjerësinë dhe lart, poshtë për lartësinë (shembulli 3.31).
Shembulli 3.31. Krijimi i një analoge të kornizave
Trupi i pozicionimit absolut ( margjina: 0; ) #shiriti anësor, #përmbajtja ( pozicioni: absolute; ) #shiriti anësor, #përmbajtja ( tejmbushja: automatik; mbushja: 10 px; ) #header ( lartësia: 80 px; /* Lartësia e shtresës */ sfondi: #FEDFC0; fundi i kufirit: 2 px solid #7B5427; ) #header h1 ( mbushja: 20 px; margjina: 0; ) #bari anësor ( gjerësia: 150 px; sfondi: #ECF5E4; kufiri djathtas: 1 px solid #231F20; sipër: 82x ; /* Largësia nga buza e sipërme */ fundi: 0; /* Largësia nga fundi */ ) #content ( sipër: 82 px; /* Largësia nga buza e sipërme */ majtas: 170 px; /* Largësia nga buza e majtë */ poshtë: 0 ; djathtas: 0; ) Pilafi i popujve të botës
Pilafi i stilit Fergana
pilaf uzbek
Pilafi siberian
Pilafi italian
Pilafi estonez
Pilafi në stilin amerikan
Pilafi i stilit indian
Pilafi i stilit FerganaVendoseni mishin e prerë në copa në një kazan dhe skuqeni derisa të formohet një kore. Skuqini qepën e prerë në rrathë së bashku me mishin derisa të marrin ngjyrë të kuqërremtë, më pas shtoni karotat të prera në rripa. Shtoni gjysmën e kripës, përzieni gjithçka dhe skuqeni derisa karotat të marrin ngjyrë kafe të artë. Pas kësaj, derdhni gjysmën e sasisë së kërkuar të ujit dhe lëreni të vlojë.
Mbulojeni orizin në një shtresë të barabartë, rrisni nxehtësinë dhe hidheni menjëherë në ujë në mënyrë që të mbulojë orizin me 1–1,5 cm. Sapo uji të ketë avulluar, përdorni një lugë të prerë për të mbledhur pilafin në një tumë në mes. , shpojeni me shkop në disa vende në mënyrë që uji në sipërfaqe, të shkojë deri në fund. Më pas mbulojeni pilafin dhe lëreni të pushojë për 20-25 minuta.
Përziejini mirë pilafin e përfunduar, transferojeni në një pjatë të madhe dhe vendosni mishin sipër.
Rezultati ky shembull treguar në Fig. 3.43. Shtresa e kokës paraqitet në transmetim si zakonisht, dhe shiriti anësor dhe shtresat e përmbajtjes janë pozicionuar absolutisht.
Oriz. 3.43. Zbatimi i pozicionimit absolut
Në IE6, elementët e pozicionuar absolutisht nuk mund të kenë vetitë majtas, djathtas dhe lart, poshtë njëkohësisht.
Pozicionimi absolut përdoret gjithashtu për të krijuar efekte të ndryshme, për shembull, këshilla veglash për fotot. Ndryshe nga atribut titulli etiketë i cili gjithashtu shfaq tekstin e këshillës së veglave, përmes stileve mund të kontrolloni llojin e tekstit të shfaqur duke përdorur skriptin.
Së pari, le të krijojmë një shtresë boshe me identifikuesin floatTip dhe të përcaktojmë stilin e saj. Duhet të kërkohen tre veti të stilit - pozicioni me vlerën absolute, shfaqja me vlerën e asnjërit fsheh shtresën dhe gjerësia përcakton gjerësinë e shtresës me një këshillë veglash. Karakteristikat e mbetura përdoren me kërkesë të zhvilluesit dhe synojnë të ndryshojnë modelin e shtresës (shembulli 3.32).
Shembulli 3.32. Stili i këshillës së veglave
#floatTip ( pozicioni: absolut; /* Pozicionimi absolut */ gjerësia: 250 px; /* Gjerësia e bllokut */ shfaqja: asnjë; /* Fshehja nga ekrani */ kufiri: 1 px solid #000; /* Parametrat e kornizës */ mbushja: 5 px ; /* Margjinat rreth tekstit */ font-family: sans-serif; /* Font serif */ madhësia e shkronjave: 9pt; /* Madhësia e shkronjave */ ngjyra: #333; /* Ngjyra e tekstit */ sfondi: #ECF5E4; /* Ngjyrë e sfondit */ )
Vetë skripti përbëhet nga dy funksione - moveTip() ndjek lëvizjen e miut dhe ndryshon pozicionin e shtresës në përputhje me koordinatat e kursorit, dhe toolTip() kontrollon dukshmërinë e shtresës dhe shfaq tekstin e dëshiruar në të (shembulli 3.33).
Shembulli 3.33. Skripti i daljes së shtresës
Document.onmousemove = moveTip; funksioni moveTip(e) ( floatTipStyle = document.getElementById("floatTip").style; w = 250; // Gjerësia e shtresës // Për shfletuesin IE if (document.all) ( x = event.x + document.body.scrollLeft ; y = event.y + document.body.scrollTop; // Për shfletues të tjerë ) else (x = e.pageX; // X koordinata e kursorit y = e.pageY; // Koordinata Y e kursorit) // Trego shtresën në të djathtë të kursorit nëse ((x + w + 10)< document.body.clientWidth) { floatTipStyle.left = x + "px"; // Показывать слой слева от курсора } else { floatTipStyle.left = x - w + "px"; } // Положение от верхнего края окна браузера floatTipStyle.top = y + 20 + "px"; } function toolTip(msg) { floatTipStyle = document.getElementById("floatTip").style; if (msg) { // Выводим текст подсказки document.getElementById("floatTip").innerHTML = msg; floatTipStyle.display = "block"; // Показываем слой } else { floatTipStyle.display = "none"; // Прячем слой } }
Për lehtësi dhe shkathtësi, skripti duhet të vendoset skedar të veçantë dhe lidheni atë nëpërmjet atributit src të etiketës. Kodi përfundimtar tregohet në shembullin 3.34.
Shembulli 3.34. Krijimi i një këshillë mjeti
Këshillë e veglave #floatTip ( pozicioni: absolute; gjerësia: 250 pikselë; ekrani: asnjë; kufiri: 1px solid #000; mbushja: 5 px; familja e shkronjave: sans-serif; madhësia e shkronjave: 9pt; ngjyra: #333; sfondi: # ECF5E4 ; errësirë: 0,85; /* Transparenca e shtresës */ )
" + "Lente: Canon EF 24-105 f/4L IS USM
" + "Flash: Canon Speedlite 580 EX
" + "Shpejtësia e diafragmës: 1/125
Apertura: 5.6")" onmouseout="toolTip()" />
Rezultati i këtij shembulli është paraqitur në Fig. 3.44. Ju lutemi vini re se mbështjellja e tekstit kur thirret funksioni toolTip() është për qëllime të lexueshmërisë dhe është në sintaksë JavaScript. Në Safari, skenari ndonjëherë nuk funksionon kur mbështillet teksti, në këtë rast teksti duhet të shkruhet në një rresht. Një veti e opacitetit CSS3 është shtuar në stile, e cila shton një transparencë të lehtë në shtresë. Kjo pronë nuk mbështetet në IE para versionit 9.0.
Oriz. 3.44. Këshilla e veglave është dhënë duke përdorur JavaScript
Pozicioni fiksPozicioni fiks i një shtrese specifikohet nga vlera fikse e vetive të pozicionit dhe është e ngjashme në efekt me pozicionimin absolut. Por ndryshe nga ai, ai lidhet me pikën në ekran të specifikuar nga vetitë majtas, lart, djathtas dhe poshtë dhe nuk e ndryshon pozicionin e tij kur lëviz në faqen e internetit. Një tjetër ndryshim nga absolute është se kur një shtresë fikse shkon përtej zonës së dukshme djathtas ose poshtë saj, nuk shfaqen shirita lëvizjeje.
Ky lloj pozicionimi përdoret për të krijuar meny, skeda, tituj, në përgjithësi, çdo element që duhet të jetë i fiksuar në faqe dhe gjithmonë i dukshëm për vizitorin. Shembulli 3.35 tregon shtimin e një footer që mbetet në një vend, pavarësisht nga sasia e informacionit në sajt.
Shembulli 3.35. Bodrum i fiksuar
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Fundi i fiksuar BODY ( margin-fund: 50 px; ) #footer ( pozicioni: fiks; /* Pozicioni i fiksuar */ majtas: 0; poshtë: 0; /* Këndi i poshtëm majtas */ mbushja: 10 px; /* Margjinat rreth tekstit */ sfond: #39b54a; /* Ngjyra e sfondit */ ngjyra: #fff; /* Ngjyra e tekstit */ gjerësia: 100%; /* Gjerësia e shtresës */ ) Të gjitha metodat e kapjes së luanëve të listuara në sit janë teorike dhe bazohen në metodat llogaritëse. Autori nuk garanton sigurinë tuaj kur i përdorni dhe refuzon të gjithë përgjegjësinë për rezultatet. Mos harroni, një luan është një grabitqar dhe një kafshë e rrezikshme! Vlad Merzheviç
Rezultati i shembullit është paraqitur në Fig. 3.45. Sepse bodrum fiks mbivendos tekstin dhe e fsheh atë, shtoi një mbushje në fund për përzgjedhësin BODY. IE6 nuk e mbështet vlerën fikse, kështu që ky shembull nuk do të funksionojë siç duhet atje.
Oriz. 3.45. Fundi në fund të faqes
Pozicionimi relativVendosja e vetive të pozicionit në relative vendos pozicionin e elementit në lidhje me pozicionin e tij origjinal. Shtimi i vetive majtas, lart, djathtas dhe poshtë ndryshon pozicionin e elementit dhe e zhvendos atë në njërën anë ose në tjetrën nga vendndodhja e tij origjinale. Një vlerë pozitive majtas specifikon një zhvendosje në të djathtë nga kufiri i majtë i elementit, një vlerë negative specifikon një zhvendosje në të majtë. Një vlerë pozitive e lart specifikon një zhvendosje poshtë të elementit (Fig. 3.46), një vlerë negative specifikon një zhvendosje lart.
Oriz. 3.46. Vlerat e pronës majtas dhe të larta për pozicionimin relativ
Vetitë e poshtme dhe të djathta kanë efektin e kundërt. Me një vlerë pozitive, djathtas e zhvendos elementin në të majtë të skajit të tij të djathtë, me një vlerë negative, e zhvendos atë në të djathtë (Fig. 3.47). Një vlerë pozitive e poshtme e lëviz elementin lart, një vlerë negative e poshtme e lëviz atë poshtë.
Oriz. 3.47. Vlerat e pronës djathtas dhe të poshtme për pozicionimin relativ
Pozicionimi relativ karakterizohet nga karakteristikat e mëposhtme.
- Ky lloj pozicionimi nuk vlen për elementët e tabelës si qelizat, rreshtat, kolonat, etj.
- Kur një element zhvendoset në raport me pozicioni fillestar, hapësira e zënë nga elementi mbetet bosh dhe nuk plotësohet nga elementët poshtë ose sipër tij.
Shembulli 3.36 tregon titullin e tekstit që lëviz poshtë për t'i dhënë atij një stil të ndryshëm shkrimi.
Shembulli 3.36. Titulli i tekstit
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Titulli H1 ( font: bold 2em Arial, Tahome, sans-serif; /* Opsionet e shkronjave */ ngjyra: #fff; sfondi: #375D4C; mbushja: 0 10 px; ) H1 SPAN ( pozicioni: relative; /* Pozicionimi relativ */ lart: 0.3em; /* Lëviz poshtë */ ) Az dhe ahu të shkencës së shkronjave
Një font është një mjet për të shprehur dizajnin, jo një lloj leximi banal.
Rezultati i këtij shembulli është paraqitur në Fig. 3.48.
Oriz. 3.48. Zhvendos tekstin në lidhje me pozicionin e tij origjinal
Shtresa të mbivendosuraNë mënyrë tipike, vetë pozicionimi relativ nuk përdoret shpesh, pasi ka një numër karakteristikash që në fakt kryejnë të njëjtin rol, për shembull, të njëjtin diferencë. Por kombinimi tipe te ndryshme Pozicionimi për shtresat e mbivendosura është një nga teknikat e përshtatshme dhe praktike të paraqitjes. Nëse vendosni relativ për elementin prind dhe absolut për fëmijën, atëherë sistemi dhe pozicioni i koordinatave do të ndryshojnë element fëmijë në këtë rast, ai tregohet në lidhje me prindin e tij (Fig. 3.49).
Oriz. 3.49. Vlerat e vetive majtas, djathtas, lart dhe poshtë në shtresat e mbivendosura
Koordinatat numërohen nga skaji i brendshëm i kufirit; vlerat e fushës nuk merren parasysh. NË shembullin e mëposhtëm teksti vendoset në këndin e poshtëm djathtas të shtresës pranë kufirit, duke injoruar vetinë e mbushjes.
Teksti
