Një stenografi për stilet e vijave ndarëse të kolonave. Si funksionon: Kodi CSS i shpjeguar

Si mund të bëhen kolonat

Së pari, le të shohim vetëm disa mënyra se si mund të krijoni kolona, ​​dhe më pas do të shqyrtojmë disa shembuj.

Përdorimi i blloqeve lundruese. Sot kjo është mënyra më e popullarizuar për të bërë altoparlantë, megjithëse flexbox po fillon ngadalë ta mbushë atë. Si parazgjedhje, dy blloqe në rrjedhën normale nuk mund të jenë në të njëjtën linjë, por kjo sjellje mund të ndryshohet lehtësisht duke vendosur të dyja vetinë float: majtas | drejtë. Ata do të fillojnë të struken në skajin e majtë ose të djathtë. Në mënyrë që blloku pas tyre të perceptojë blloqet lundruese dhe t'i vendosë saktë, duhet të shkruhet qartë: të dyja.

Me ndihmën e notave, më së shpeshti bëhen 2 ose 3 kolona. Paraqitja e një siti me blloqe lundruese nuk është shumë e vështirë, thjesht duhet të dini disa nga nuancat e sjelljes së tyre. Për shembull, nëse duhet të bëni një zonë për shfaqjen e artikujve, dhe në të djathtë - një shirit anësor me një menu, atëherë blloqet lundruese e zbatojnë shumë lehtë këtë rregullim.

Përdorimi i tabelave. Tabelat në përgjithësi u krijuan për të shfaqur një numër të madh qelizash dhe kolonash, kështu që krijimi i kolonave në to është një copë tortë. Tabela mund të ketë të paktën 20 kolona. E gjithë struktura e tij është vendosur në kodin html, kështu që kodi rezulton të jetë mjaft i rëndë.

Meqenëse qelizat në tabelë mund të vendosen në çdo madhësi, pothuajse të gjitha faqet përdoreshin për paraqitje. Për shembull, për të zbatuar paraqitjen më të thjeshtë (header, content, sidebar, footer), në tabelë u bënë tre rreshta (rreshti i tabelës formohet nga etiketa tr). Çdo rresht përmban dy qeliza sepse përmbajtja dhe shiriti anësor duhet të mbahen të ndara nga njëra-tjetra. Dhe në header dhe footer, këto qeliza thjesht u lidhën duke përdorur atributin colspan të etiketës td, nëse ishte e nevojshme.

Ju mund ta hiqni me lehtësi kufirin nga qelizat, gjë që e bëri të lehtë për zhvilluesit e uebit të shtypnin shabllone që ishin komplekse në strukturë.

Me flexbox. Kjo është një teknologji moderne që filloi të përhapet në vitin 2014, megjithëse ka ekzistuar edhe më parë. Thelbi i tij është si më poshtë: krijohet një bllok i përgjithshëm i kontejnerëve, në të cilin vendosen blloqe të tjera, të cilat do të duhet të bëhen në formën e kolonave, pastaj të shfaqin: flex duhet t'i caktohet këtij enë.

Më pas, zakonisht vendosni veçorinë flex-direction, e cila përcakton drejtimin e boshtit kryesor përgjatë të cilit do të vendosen kutitë. Vlerat mund të vendosen në: rresht dhe kolonë. Vlera e parë do t'i drejtojë blloqet horizontalisht nga e djathta në të majtë, e dyta - poshtë. Mund të caktoni edhe anasjelltas: flex-direction: row-reverse. Blloqet do të vendosen nga e djathta në të majtë.

Ekziston gjithashtu një grup karakteristikash të veçanta për blloqet e fëmijëve të kontejnerit flex. Në thelb, këto veti ju lejojnë të vendosni madhësinë e bllokut dhe sjelljen e tij në lidhje me elementët e tjerë.

Avantazhi i flexbox është se është shumë më fleksibël. Nëse, në paraqitjen e bllokut, zhvilluesve të uebit shpesh duhej të llogarisnin gjithçka piksel pas piksel, duke vendosur dhëmbëzimet e sakta, duke shtuar truke të ndryshme në kod në mënyrë që gjithçka të mos shpërbëhej, atëherë elementët e përkulur qëndrojnë lehtësisht në një kolonë, në një rresht dhe në përgjithësi. kërkojnë shumë më pak llogaritje matematikore nga jashtë.zhvilluesi.

Thyerja e tekstit në kolona

Megjithatë, ende nuk e kam prekur temën më të rëndësishme. CSS sot ofron mundësinë për të ndarë tekstin në një kuti kryesore pa pasur nevojë për kuti lundruese, tabela ose kuti fleks. Kjo do të thotë, një bllok i rregullt mbetet në html, dhe teksti ndahet në kolona ekskluzivisht falë css.

Pra, vetitë e renditura më poshtë vlejnë për një bllok në të cilin teksti duhet të ndahet në disa kolona.

Column-count - vetia përcakton numrin e kolonave në të cilat teksti duhet të ndahet. Rekomandohet të vendosni vlerën nga 2 në 4, në varësi të mënyrës se si ju pëlqen.

Column-width - vendos numrin e karaktereve të tekstit në një kolonë. Theksoj se gjerësia e kolonës në këtë rast nuk përcaktohet nga pikselët, por nga numri i karaktereve. Optimale: 30-50 karaktere në një kolonë. Gjithashtu, kjo pronë nuk mund të quhet në asnjë mënyrë ndër-shfletues, sepse ju vendosni vetëm numrin e dëshiruar të karaktereve, por nëse shfletuesi do të veprojë në përputhje me dëshirat tuaja nuk dihet ende.

Hendeku i kolonës - përcakton hendekun midis kolonave. Mund të vendoset në pixel.

Rregulla e kolonës - Vizaton një vijë që ndan kolonat. Sintaksa e vetive është identike me vetinë kufitare. Fillimisht regjistrohet trashësia e vijës, më pas lloji i saj dhe më pas ngjyra.

Gjithashtu dua të përmend se të gjitha këto prona css janë relativisht të reja. Për shembull, Internet Explorer i mbështet ato vetëm nga versioni i dhjetë. Këto janë veti nga standardi CSS3, kështu që nëse do t'i përdorni në faqen tuaj, atëherë duhet të kujdeseni për përputhshmërinë e shfletuesve, përndryshe nuk do të ketë kolona në versionet më të vjetra të Opera dhe IE.

Shembuj të

Blloqe lundruese. Paraqitja e një siti në dy kolona më së shpeshti bëhet shumë thjesht duke përdorur blloqe lundruese. Në css, ajo zbatohet si kjo:

Float-block1 (float: majtas) .float-block2 (float: majtas) blloku që duhet të jetë nën notat (e qartë: majtas | të dyja)

Kjo do të thotë, blloku i poshtëm duhet të specifikohet me këtë veti në mënyrë që të pozicionohet saktë. Kështu, kutitë lundruese do të bëhen një rresht nëse janë mjaft të gjera në elementin prind. Natyrisht, gjithashtu duhet të specifikoni gjerësinë, lartësinë dhe kufirin e blloqeve, në mënyrë që të duket si në këtë pamje të ekranit:

Tani le të bëjmë pjesën argëtuese. Le të shtojmë shumë tekst të rastësishëm në bllokun kryesor dhe të përpiqemi ta shfaqim atë atje në tre kolona, ​​si në një gazetë ose revistë. Për ta bërë këtë, duhet të shtoni rregulla të tilla në kodin e këtij blloku.

Në artikullin e sotëm, dua të flas për një mënyrë të re për të krijuar kolona me lartësi të barabartë duke përdorur CSS. Nuk keni më nevojë të përdorni Javascript për t'i bërë lartësitë e kolonave të njëjta për të gjithë. Thelbi i kësaj metode është përdorimi i një vetie të re CSS3 që na jep shumë më tepër opsione sesa thjesht krijimi i kolonave me të njëjtën lartësi. Por në këtë mësim do të shohim se sa e lehtë është të zgjidhet ky problem i dhimbshëm.

Pamja e faqes

pjesë HTML

Le të përcaktojmë dy kolona, ​​të cilat në të ardhmen do t'i bëjmë të njëjtën lartësi duke përdorur CSS:

Kjo do të thotë, ne duhet të bëjmë bllokun