Shtrirja e djathtë HTML. Rreshtimi uniform i blloqeve në gjerësi
Në CSS, disa gjëra në dukje të thjeshta nuk janë aq të lehta për t'u bërë. Një nga këto gjëra është shtrirja, d.m.th. kur një element duhet të pozicionohet në një mënyrë të caktuar në raport me një tjetër.
Ky artikull paraqet disa zgjidhje të gatshme që do të ndihmojnë në thjeshtimin e punës së përqendrimit të elementeve horizontalisht dhe/ose vertikalisht.
Shënim: Më poshtë secilës zgjidhje është një listë e shfletuesve që tregojnë versionet në të cilat funksionon kodi i specifikuar CSS.
CSS - Blloku i shtrirjes në qendër
1. Përafrimi i një blloku në qendër të një tjetri. Në këtë rast, blloqet e parë dhe të dytë kanë madhësi dinamike.
Prindi ( pozicioni: i afërm; ) .fëmijë ( pozicioni: absolut; majtas: 50%; lart: 50%; -kit-ueb-transformimi: përkthe (-50%, -50%); -moz-transformoj: përkthe(-50% , -50%) -transformoj (-50%)
- Chrome 4.0+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 10.5+
- Safari 3.1+
2. Përafrimi i një blloku në qendër të një tjetri. Në këtë rast, blloku i dytë ka dimensione fikse.
Prindi ( pozicioni: i afërm; ) .fëmija ( pozicioni: absolut; majtas: 50%; sipër: 50%; /* gjerësia dhe lartësia prej 2 blloqesh */ gjerësia: 500 px; lartësia: 250 px; /* Vlerat përcaktohen në varësi të në madhësinë e tij */ /* margin-left = - gjerësi / 2 */ margin-left: -250px /* margin-lart = - lartësi / 2 */ margin-lart: -125px;
Shfletuesit që mbështesin këtë zgjidhje:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
3. Përafrimi i një blloku në qendër të një tjetri. Në këtë rast, blloku i dytë ka dimensione të përcaktuara në përqindje.
Prindi ( pozicioni: i afërm; ) .fëmija ( pozicioni: absolut; /* gjerësia dhe lartësia prej 2 blloqesh në % */ lartësia: 50%; gjerësia: 50%; /* Vlerat përcaktohen në varësi të madhësisë së tij në % * / majtas: 25% /* (100% - gjerësi) / 2 */ sipër: 25% /* (100% - lartësi) / 2 */;
Shfletuesit që mbështesin këtë zgjidhje:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
CSS - Shtrirja horizontale
1. Përafrimi i një elementi blloku (ekrani: blloku) në lidhje me një tjetër (në të cilin ndodhet) horizontalisht:
Blloko (diferencë-majtas: automatik; margjina-djathtas: automatik; )
Shfletuesit që mbështesin këtë zgjidhje:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 6.0+
- Opera 3.5+
- Safari 1.0+
2. Përafrimi i një elementi të linjës (ekrani: inline) ose blloku i linjës (ekrani: blloku inline) horizontalisht:
Prindi (përafrimi i tekstit: në qendër; ) .fëmijë (ekrani: blloku i brendshëm; )
Shfletuesit që mbështesin këtë zgjidhje:
- Chrome 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
CSS - Rreshtimi vertikal
1. Përqendroni një element (ekrani: inline, ekrani: blloku inline) në lidhje me tjetrin (në të cilin ndodhet) në qendër. Blloku prind në këtë shembull ka një lartësi fikse, e cila vendoset duke përdorur veçorinë CSS line-height.
Prindi (lartësia e linjës: 500 px; ) .fëmija (ekrani: blloku i linjës; rreshtimi vertikal: në mes; )
Shfletuesit që mbështesin këtë zgjidhje:
- Chrome 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
2. Përqendrimi i një blloku në lidhje me një tjetër vertikalisht duke paraqitur prindin si tabelë dhe fëmijën si qelizë të kësaj tabele.
Prindi ( shfaqja: tabela; ) .fëmija ( shfaqja: qeliza e tabelës; rreshtimi vertikal: në mes; )
Shfletuesit që mbështesin këtë zgjidhje:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 8.0+
- Opera 7.5+
- Safari 1.0+
Nëse dini ndonjë truk tjetër interesant ose zgjidhje të dobishme të gatshme të shtrirjes, atëherë ndajini ato në komente.
Kur shkruani tekst në Microsoft Word, ai printohet i rreshtuar majtas. Por mjaft shpesh është e nevojshme ta zhvendosni atë në anën tjetër.
Për shembull, është zakon të zhvendosni titullin në qendër të faqes, por për të printuar kokën e një dokumenti, shpesh duhet ta zhvendosni tekstin në të djathtë. Kjo procedurë quhet nivelim.
është mënyra se si shtrohet teksti në faqe. Mund të vendoset në qendër, përgjatë skajeve të majtë dhe të djathtë, përgjatë gjerësisë. Për ta bërë këtë, Word ka butona të veçantë në krye: 
Ne do të flasim për to pak më vonë. Ndërkohë, disa fjalë se si të mos përafrohet teksti.
Shtrirje e gabuar e tekstit
Shumë njerëz pa e ditur e rreshtojnë gabimisht tekstin - duke përdorur shiritin e hapësirës në tastierë ose butonin Tab.
Një zhvendosje e tillë konsiderohet një gabim, pasi distanca nga diferenca e majtë bëhet me sy. Për shkak të kësaj, shpesh është më se e nevojshme. Dhe nëse e rreshtoni tekstin në të djathtë në këtë mënyrë, atëherë do të shfaqen shumë probleme gjatë redaktimit të tij. Dhe vetë metoda është shumë e papërshtatshme - duhet të shtypni shumë herë butonin e hapësirës ose Tab në tastierë.
Çfarë do të thotë kjo? Për shembull, humbni reputacionin tuaj të biznesit. Në fund të fundit, mund të kontrolloni shumë shpejt dizajnin e tekstit. Për ta bërë këtë, thjesht klikoni në këtë buton në krye të programit Microsoft Word:
Në tekst do të shfaqen pika dhe ikona të çuditshme. Këtu pikat tregojnë hapësira. Dhe nëse e rreshtoni tekstin gabimisht, me një kontroll të tillë ai do të jetë menjëherë i dukshëm nga pikat e shumta përpara tij.
Për të kthyer gjithçka përsëri - hiqni pikat dhe ikonat e çuditshme - shtypni përsëri butonin
Nga rruga, një dokument me shtrirje të gabuar mund të mos pranohet në disa organizata.
Si të rreshtoni tekstin
Tani le të mësojmë se si ta rreshtojmë siç duhet tekstin. Nga rruga, kjo mund të bëhet pasi teksti të jetë shtypur. Unë rekomandoj ta bëni këtë - është më e lehtë dhe më e shpejtë.
Word ka katër butona për lëvizjen e tekstit. Ato janë të vendosura në krye.
- ky buton e rreshton tekstin në të majtë
- kjo shtrihet në qendër
- në skajin e djathtë
— në gjerësi (e bën tekstin të barabartë në të dyja anët)
Tani le të përpiqemi ta lëvizim tekstin si duhet. Për të filluar, shkruani disa fjalë në Word. Pastaj zgjidhni ato. Për ta bërë këtë, lëvizni kursorin (shigjetën ose shkopin) në fillim ose në fund të tekstit. Pastaj shtypni butonin e majtë të miut dhe, pa e lëshuar, tërhiqeni në skajin tjetër. Kur teksti merr një ngjyrë të ndryshme (zakonisht e zezë ose blu), kjo do të thotë se është e theksuar.
Pas zgjedhjes, klikoni në butonin që rreshton tekstin në qendër. Fjalët që shkruani duhet të lëvizin në mes të faqes.
Mund t'ju duket se kjo është qendra e gabuar. Në fakt, gjithçka është e saktë. Në fund të fundit, diferenca (dhënia) në anën e majtë është më e madhe se në të djathtë.
Në të njëjtën mënyrë, provoni ta rreshtoni tekstin në të djathtë.
Sa i përket butonit "Fit to Width". Nëse keni pak tekst (disa fjalë), atëherë nuk do të shihni ndonjë ndryshim nga butoni "Rreshtoni në të majtë" - fjalët do të zhvendosen gjithashtu majtas. Por nëse keni disa paragrafë, atëherë teksti do të rreshtohet në të dy anët e fletës - si majtas ashtu edhe djathtas. Kjo do të thotë, do të jetë edhe në të dyja anët.
Shembull i tekstit të rreshtuar majtas:
I njëjti tekst, i justifikuar:
Nga rruga, sipas rregullave të hartimit të dokumentit, teksti kryesor duhet të përafrohet saktësisht në gjerësi.
Shumica prej nesh kanë pasur një ide të qartë për një faqe të dizajnuar në mënyrë perfekte që në shkollë. Një shpërndarje e barabartë shkronjash, rreshta të hollë fjalësh, një drejtkëndësh i rreptë teksti i përshtatur me margjina të barabarta - kjo është pikërisht fotografia që shohim kur shfletojmë çdo botim të printuar. Ekziston një tundim i madh për të përshkruar diçka të ngjashme në një faqe në internet, veçanërisht pasi për këtë propozohet një mjet i njohur - shtrirja e tekstit në gjerësi. Megjithatë, ajo që është e mirë për një tipografi është një mëkat i vdekshëm për një dizajner ueb. Dhe gjithçka sepse, kur aplikohet në shënimin e faqes, ky funksion është i tejmbushur me kaq shumë mangësi sa që avantazhi i tij i vetëm në formën e një skaji të lëmuar të djathtë thjesht zbehet para syve tanë. Këtu janë vetëm disa arsye pse duhet të hiqni dorë nga justifikimi në favor të shtrirjes majtas.
Rrëmujë e dukshme brenda një blloku teksti
Po, po, sa më të lëmuara të jenë skajet e bllokut të tekstit, aq më i dukshëm është rrëmuja brenda tij. Në tipografi, një arsenal i tërë mjetesh ju lejon të arrini qëndrueshmëri në tekst: viza me vizë, rregullimi i ndarjes midis fjalëve dhe distancave midis shkronjave, madje edhe opsione pak më të gjera ose pak më të ngushta të shkronjave. Por faqosja e një faqeje në internet sugjeron, si rregull, vetëm një mënyrë për të "shtrirë" një vijë nga skaji në skaj - një rritje e pakontrolluar në gjerësinë e hapësirave. Kjo jo vetëm që çon në shfaqjen e boshllëqeve të shëmtuara midis fjalëve, por këto boshllëqe, sikur me ligjin e poshtërësisë, shpesh bien në të njëjtin vend në çdo rresht, duke formuar të ashtuquajturat "lumenë" vertikalë. E gjithë kjo i jep tekstit një pamje shumë të çrregullt.
Palexueshmëria
Por nëse estetika ende mund të sakrifikohet për hir të skajeve të rregullta, atëherë problemet e dukshme me perceptimin vizual të tekstit janë ende një çmim shumë i lartë për t'u paguar për to. Dhe teksti i justifikuar është objektivisht shumë më pak i lexueshëm sesa teksti i rreshtuar majtas. Arsyeja kryesore qëndron në të njëjtat intervale të rritura midis fjalëve: syri detyrohet vazhdimisht të kërkojë fillimin e fjalës tjetër dhe për shkak të ndryshimit të hapësirave nga rreshti në rresht, ai gjithashtu detyrohet të përshtatet nga një distancë në tjetrën. .
Nevoja për të punuar në gjatësinë e linjës, shpesh pa dobi
Me drejtësi, vlen të përmendet se disavantazhet e identifikuara të tekstit të justifikuar mund të reduktohen duke rritur gjatësinë e rreshtit. Megjithatë, kjo metodë nuk do të jetë gjithmonë efektive. Por mund të zvogëlojë lexueshmërinë me një shkallë shumë të lartë probabiliteti: është e vështirë që sytë, pasi kanë skanuar një rresht të gjatë deri në fund, të hidhen me saktësi dhe shpejt në fillimin e rreshtit tjetër.
I papërshtatshëm për pajisjet mobile
Sa më e ngushtë të jetë kolona me tekst, aq më pak i nënshtrohet rreshtimit. Dhe këtu ky format bie në kundërshtim të drejtpërdrejtë me kërkesat e pajisjeve mobile, për të cilat, përkundrazi, sa më e shkurtër të jetë linja, aq më mirë. Pajtohem, është një gjë të ndjekësh një rresht të gjatë në një monitor me ekran të plotë me sytë e tu dhe krejt tjetër të lëvizësh çdo rresht përpara dhe me radhë pa pushim. Një kënaqësi e dyshimtë, por një mënyrë e sigurt për të humbur audiencën tuaj celular!
Duket se nëse do të mund të shtonim një funksion të mbështjelljes së fjalëve në faqe, të gjitha këto probleme që lindin kur rreshtoni tekstin në gjerësinë e faqes do të zgjidheshin. Por kapja është se shënimi HTML nuk ofron një funksion të tillë. Pra, rezulton se sot nuk ka asnjë mënyrë tjetër për të ruajtur hapësirën e pranueshme midis fjalëve në një faqe interneti, përveç rreshtimit të tekstit në skaj.
Kështu, kur krijoni një faqe interneti, është e rëndësishme të mbani mend gjënë kryesore: një faqe interneti nuk është një libër, dhe ju duhet t'i qaseni dizajnit të saj nga pozicionet e diktuara nga teknologjia dhe psikologjia e perceptimit, dhe jo nga pikëpamjet estetike të dikujt, megjithatë, shumë, shumë e kushtëzuar. Më besoni, nëse teksti juaj është i vendosur mirë dhe, para së gjithash, i lexueshëm lehtësisht dhe me kënaqësi, askush nuk do t'i kushtojë vëmendje një gjëje të tillë si kufijtë e pabarabartë!
Meqë ra fjala, kur e lexuat këtë artikull, a vutë re se teksti nuk është i justifikuar?
Teksti është rreshtuar duke përdorur një atribut CSS rreshtimi i tekstit, e cila mund të marrë vlerat e mëposhtme:
- qendër- ne qender
- justifikoj- në gjerësi
- majtas- në skajin e majtë
- drejtë- në skajin e djathtë
atribut tekst-indent përcakton dhëmbëzimin e "vijës së kuqe" - rreshti i parë i një paragrafi të ri.
Atributet e mëposhtme përdoren gjithashtu për të formatuar tekstin:
- vija e gjatesise- vija e gjatesise. Vlerat e mundshme:
- n px,pt,ex,em,në,mm,cm,pc
- n %
- diferencë- futja nga skaji i jashtëm i elementit në skajin e brendshëm të elementit mëmë. Opsionet janë të mundshme (margin-lart; margin-majtas; margjin-poshtë; marzh-djathtas). Vlerat:
- n px,pt,ex,em,në,mm,cm,pc
- n %
- mbushje- dhëmbëzimi nga skaji i brendshëm i elementit në përmbajtjen e tij. Opsionet e mundshme (mbushje-lart; mbushje-majtas; mbushje-poshtë; mbushje-djathtas). Vlerat:
- n px,pt,ex,em,në,mm,cm,pc
- n %
- vertikal-rreshtoj- shtrirje vertikale (e rëndësishme për tabelat). Vlerat:
- shtrirje lart - lartë
- shtrirje mes - mes
- shtrirje fund - fund
- tekst-lart - rreshtoni në skajin e sipërm të tekstit
- tekst-fund - rreshtoni në skajin e poshtëm të tekstit
- hapesire e bardhe- një mënyrë për të ndarë fjalët nga njëra-tjetra
- normale
- nowrap (ndërprerjet e linjës injorohen)
Më poshtë janë disa shembuj të shtrirjes së tekstit që nuk do të jetë shumë e vështirë për t'u kuptuar. Për të kuptuar më mirë se si funksionojnë atributet e shtrirjes së tekstit, provoni të formatoni vetë disa paragrafë.
Shembull i shtrirjes së tekstit: Shembulli #6
Kodi HTML i faqes:
Pa titull
unaza ari e Rusisë
"Unaza e Artë e Rusisë" (në kohët e lashta Zalesye), një rrugë turistike që përfshin një rrjet qytetesh të lashta ruse: Sergiev Posad, Pereslavl-Zalessky, Rostov i Madh, Yaroslavl, Kostroma, Ples, Vladimir, Bogolyubovo, Suzdal, Yuryev-Polskoy , Uglich. Emri Zalesye është kryesisht gjeografik, ai nënkuptonte gjithçka që ishte "prapa pyllit" në lidhje me Rusinë e Kievit.
"Unaza e Artë e Rusisë" (në kohët e lashta Zalesye), një rrugë turistike që përfshin një rrjet qytetesh të lashta ruse: Sergiev Posad, Pereslavl-Zalessky, Rostov i Madh, Yaroslavl, Kostroma, Ples, Vladimir, Bogolyubovo, Suzdal, Yuryev-Polskoy , Uglich. Emri Zalesye është kryesisht gjeografik, ai nënkuptonte gjithçka që ishte "prapa pyllit" në lidhje me Rusinë e Kievit.
"Unaza e Artë e Rusisë" (në kohët e lashta Zalesye), një rrugë turistike që përfshin një rrjet qytetesh të lashta ruse: Sergiev Posad, Pereslavl-Zalessky, Rostov i Madh, Yaroslavl, Kostroma, Ples, Vladimir, Bogolyubovo, Suzdal, Yuryev-Polskoy , Uglich. Emri Zalesye është kryesisht gjeografik, ai nënkuptonte gjithçka që ishte "prapa pyllit" në lidhje me Rusinë e Kievit.
"Unaza e Artë e Rusisë" (në kohët e lashta Zalesye), një rrugë turistike që përfshin një rrjet qytetesh të lashta ruse: Sergiev Posad, Pereslavl-Zalessky, Rostov i Madh, Yaroslavl, Kostroma, Ples, Vladimir, Bogolyubovo, Suzdal, Yuryev-Polskoy , Uglich. Emri Zalesye është kryesisht gjeografik, ai nënkuptonte gjithçka që ishte "prapa pyllit" në lidhje me Rusinë e Kievit.
"Unaza e Artë e Rusisë" (në kohët e lashta Zalesye), një rrugë turistike që përfshin një rrjet qytetesh të lashta ruse: Sergiev Posad, Pereslavl-Zalessky, Rostov i Madh, Yaroslavl, Kostroma, Ples, Vladimir, Bogolyubovo, Suzdal, Yuryev-Polskoy , Uglich. Emri Zalesye është kryesisht gjeografik, ai nënkuptonte gjithçka që ishte "prapa pyllit" në lidhje me Rusinë e Kievit.
"Unaza e Artë e Rusisë" (në kohët e lashta Zalesye), një rrugë turistike që përfshin një rrjet qytetesh të lashta ruse: Sergiev Posad, Pereslavl-Zalessky, Rostov i Madh, Yaroslavl, Kostroma, Ples, Vladimir, Bogolyubovo, Suzdal, Yuryev-Polskoy , Uglich. Emri Zalesye është kryesisht gjeografik, ai nënkuptonte gjithçka që ishte "prapa pyllit" në lidhje me Rusinë e Kievit.
"Unaza e Artë e Rusisë" (në kohët e lashta Zalesye), një rrugë turistike që përfshin një rrjet qytetesh të lashta ruse: Sergiev Posad, Pereslavl-Zalessky, Rostov i Madh, Yaroslavl, Kostroma, Ples, Vladimir, Bogolyubovo, Suzdal, Yuryev-Polskoy , Uglich. Emri Zalesye është kryesisht gjeografik, ai nënkuptonte gjithçka që ishte "prapa pyllit" në lidhje me Rusinë e Kievit.
Tre atribute më të fuqishme për formatimin e tekstit:
- vija e gjatesise- përcakton ndarjen e vijave. Vlera duhet të jetë më e madhe se lartësia e shkronjave, përndryshe vlera rregullohet automatikisht në lartësinë e tekstit. Vlerat:
- n px,pt,ex,em,në,mm,cm,pc
- n %
- ndarja e fjalëve- ndarje midis fjalëve. Vlerat:
- n px,pt,ex,em,në,mm,cm,pc
- ndarja e shkronjave- hapësira midis shkronjave. Vlerat:
- n px,pt,ex,em,në,mm,cm,pc
Shembull i formatimit të tekstit: Shembulli nr. 7
Kodi HTML i faqes:
Pa titull
unaza ari e Rusisë
"Unaza e Artë e Rusisë" (në kohët e lashta Zalesye), një rrugë turistike që përfshin një rrjet qytetesh të lashta ruse: Sergiev Posad, Pereslavl-Zalessky, Rostov i Madh, Yaroslavl, Kostroma, Ples, Vladimir, Bogolyubovo, Suzdal, Yuryev-Polskoy , Uglich. Emri Zalesye është kryesisht gjeografik, ai nënkuptonte gjithçka që ishte "prapa pyllit" në lidhje me Rusinë e Kievit.
"Unaza e Artë e Rusisë" (në kohët e lashta Zalesye), një rrugë turistike që përfshin një rrjet qytetesh të lashta ruse: Sergiev Posad, Pereslavl-Zalessky, Rostov i Madh, Yaroslavl, Kostroma, Ples, Vladimir, Bogolyubovo, Suzdal, Yuryev-Polskoy , Uglich. Emri Zalesye është kryesisht gjeografik, ai nënkuptonte gjithçka që ishte "prapa pyllit" në lidhje me Rusinë e Kievit.
"Unaza e Artë e Rusisë" (në kohët e lashta Zalesye), një rrugë turistike që përfshin një rrjet qytetesh të lashta ruse: Sergiev Posad, Pereslavl-Zalessky, Rostov i Madh, Yaroslavl, Kostroma, Ples, Vladimir, Bogolyubovo, Suzdal, Yuryev-Polskoy , Uglich. Emri Zalesye është kryesisht gjeografik, ai nënkuptonte gjithçka që ishte "prapa pyllit" në lidhje me Rusinë e Kievit.
Tani mund ta zbatojmë këtë njohuri në fletën e stilit të jashtëm duke formatuar etiketën e paragrafit:
Një shembull i formatimit të tekstit duke përdorur një fletë stili të jashtëm: Shembulli nr. 8
Kodi HTML i faqes:
Pa titull
unaza ari e Rusisë
"Unaza e Artë e Rusisë" (në kohët e lashta Zalesye), një rrugë turistike që përfshin një rrjet qytetesh të lashta ruse: Sergiev Posad, Pereslavl-Zalessky, Rostov i Madh, Yaroslavl, Kostroma, Ples, Vladimir, Bogolyubovo, Suzdal, Yuryev-Polskoy , Uglich. Emri Zalesye është kryesisht gjeografik, ai nënkuptonte gjithçka që ishte "prapa pyllit" në lidhje me Rusinë e Kievit.
skedar CSS:
trupi (font-familja: Verdana,Tahoma,Arial,Helvetica,sans-serif; ngjyra: gri; madhësia e shkronjave: 8pt;) H1 (ngjyra: jeshile; madhësia e shkronjave: 130%;) p (indentia e tekstit: 15 px font-madhësia: 10 pt lartësia: 150%;
Ditë të mbarë për të gjithë. Alexey Gulynin është në kontakt. Në artikullin e fundit që diskutuam Etiketat HTML për të punuar me tekst. Është koha për t'u marrë me të si të rreshtoni tekstin në një faqe HTML. Nëse e keni vënë re, gjithçka që keni shkruar më parë është në linjë në skajin e majtë të shfletuesit dhe ne nuk bëjmë asgjë, kështu funksionon si parazgjedhje. Çfarë duhet të bëjmë për të rreshtuar përmbajtjen, të themi, në qendër? Më vjen ndërmend një etiketë e vjetëruar
Teksti në anën e majtë
Teksti qendror
Pas hapjes së faqes në shfletues, do të shohim se teksti është me të vërtetë i vendosur në qendër të faqes.
Unë do të doja të tërhiqja vëmendjen tuaj në këtë pikë: ju mund të vendosni se nëse ka një etiketë
Çfarë duhet të bëjmë nëse duam të vendosim elementë në të djathtë? Le të shohim konceptin e një kontejneri
Elementi
Në këtë artikull keni mësuar rreshtoni tekstin në faqen html.
