Дар тӯли солҳои зиёд, CSS дар якҷоягӣ тарҳрезии вебсайти компютерӣ буда, хеле муфид, вале лозим аст. Агар дизайни шумо барои сутунҳои гуногун даъват шуда бошад, шумо ба ватани худ табдил кардаед . Масъала бо ин усул ин аст, ки сарфи назар аз эҷоди ноогоҳонае, ки таҳиягарони интернетӣ / таҳиягарон дар таҳияи маҷмӯи сайтҳои маҷмӯӣ нишон дода шудаанд, CSS-ро шино карда, дар ҳақиқат маънои онро дорад, ки ин тавр истифода бурда шавад.

Ҳангоми шиноварӣ ва ҷойгиркунии CSS боварӣ доранд, ки дар тӯли солҳои тӯлонӣ дар тарҳрезии веб саҳифаҳо вуҷуд доранд, техникаҳои навтарини тарҳбандӣ, аз ҷумла CSS Grid ва Flexbox ҳоло роҳҳои нави вебсайтро барои таҳкими ҷойҳои сайтҳо пешниҳод мекунанд. Дигар техникаи тарҳрезии наве, ки дорои имконоти зиёди потенсиали CSS Multiple Colum мебошанд, нишон медиҳад.

CSS Сутунҳо дар тӯли чандин солҳо буданд, вале нокофӣ дар браузерҳои калонсолон (асосан варианти калонтарини Internet Explorer) бисёр мутахассисони вебсайтро бо истифода аз ин тарзҳо дар кори истеҳсолии худ нигоҳ доштанд.

Дар охири дастгириҳои нусхаҳои IE, баъзе дизайнерҳои вебсайт ҳоло бо усули нави CSS таҳия шудаанд, CSS сутунҳо дохил карда шудаанд ва дарёфти он, ки онҳо бо усулҳои нав нисбат ба онҳо бо шиноҳо кор мекунанд.

Асосҳои CSS сутунҳо

Тавре ки номаш зикр мекунад, сутунҳои бисёрҷонишудаи CSS (инчунин ҳамчун CSS3 тарҳбандии бисёрсоҳавӣ) ба шумо имкон медиҳад, ки мундариҷаро ба шумораи муайяни сутунҳо тақсим кунед. Асосҳои асосии CSS, ки шумо истифода мебаред, инҳоянд:

• сутуни ҳисоб
• column-gap

Барои сутуни санҷиш шумо рақами суттаҳое, ки мехоҳед мехоҳед, муайян кунед. Фарогирии сутуни тиреза ё ҷудошавии байни сутунҳо хоҳад буд. Чорчӯб ин арзишҳоро мегирад ва мундариҷаро ба шумораи сутунҳо, ки шумо муайян мекунед, тақсим мекунад.

Намунаи маъмули CSS якчанд сутунҳо дар амал татбиқ мешаванд, ки блоги матнро ба якчанд сутунҳо тақсим кунанд, ба монанди он ки шумо дар мақолаи рӯзнома мебинед. Бигӯед, ки ин аломати HTML дошта бошад (дар ёд доред, ки барои мақсадҳои мисол, ман танҳо оғози як параграфро ишғол мекунам, дар амал, шояд дар якҷоягӣ параграфҳои якчанд мундариҷа мавҷуд бошанд):

Сарлавҳаи мақолаи худро

Тасаввур кунед, ки пораҳои матн дар инҷо ...

Агар шумо пас аз ин сабтҳои CSS нависед:

.content {-moz-column-count: 3; -вебкит-сутуни-ҳисоб: 3; column-count: 3; -сози-сутуни-фарқи: 30px; -фаъолияти сутуни рост: 30px; column-gap: 30px; }}

Қоидаҳои CSS бояд тақсимбандии "мӯҳтаво" ба 3 сутуни баробар бо фарқи 30 пиксел байни онҳо тақсим карда шаванд. Агар шумо хоҳед, ки ду сутуни ба ҷои 3, шумо коди арзишро тағир диҳед ва браузер васеъ кардани паҳлаҳои нави сутунҳо барои мундариҷаи миқдори баробар тақсим карда мешавад. Аҳамият диҳед, ки мо аввалин хусусиятҳои фурӯшандаеро пешакӣ истифода мебарем ва пас аз эълони эъломияҳои ғайриқонунӣ.

Тавре, ки осон аст, истифодаи он дар ин ҳолат барои истифодаи вебсайт аст. Бале, шумо метавонед як қисмҳои мундариҷаро ба якчанд сутунҳо тақсим кунед, аммо ин метавонад таҷрибаи беҳтаринро барои веб муайян накунад, махсусан, агар баландии сутунҳо дар зери "болоии" экран нишон дода шаванд.

Пас хонандагон бояд пас аз хондани мундариҷаи пурра ва поёнтар пайравӣ кунанд. Бо вуҷуди ин, сарлавҳаи CSS Сутунҳо дар ин ҷо хеле осон аст, ва он метавонад аз он истифода барад, ки аз он танҳо як қисм ҷудо кардани қисмҳои якчанд параграфро истифода барад - он метавонад барои таҳкурсӣ истифода шавад.

Лутфан бо сутуни CSS

Бигӯед, ки шумо як вебсайти дорои як муҳтавои дорои 3 сутуни муҳтаво дошта бошед. Ин як вебсайтҳои хеле маъмулии сомона аст ва барои ба даст овардани ин се сутун, шумо одатан қисмҳои дар онҷо ҷойгиршавиро паҳн хоҳед кард. Бо CSS якчанд сутунҳо, ин хеле осон аст.

Дар ин ҷо як мисол HTML: