Uzun illərdir ki, CSS süzülür, veb layouts yaratmaq üçün lazımi, lakin zəruri bir komponentdir. Tasarımınız birdən çox sütun çağırdıysa, yüzenlere döndünüz . Bu metodla problem, veb-dizaynerlərin / developersin kompleks saytlar düzəltməsində göstərdiyini inanılmaz ixtiraçılıq olmasına baxmayaraq, CSS-lərin bu cür istifadə edilməsini nəzərdə tutmurdu.
Güzəştlər və CSS yerləşdirmələri gələcək illərdə veb dizaynda yer tutduğuna əmin olsa da, CSS Grid və Flexbox daxil olmaqla daha yeni layout üsulları indi veb-dizaynerlərə öz site layouts yaratmaq üçün yeni yollar təqdim edir. Bir çox potensialı əks etdirən yeni bir layout üsulu CSS birdən çox sütunudur.
CSS Sütunları bir neçə ildir ətrafında olmuşdur, lakin köhnə brauzerlərdə (əsasən, Internet Explorer-in köhnə versiyaları) dəstək olmaması bir çox veb-mütəxəssisləri bu üslublardan istehsalat işində istifadə etməmişdir.
IE-nin köhnə versiyalarının dəstəklənməsi sona çatdıqda bəzi veb-dizaynerlər indi yeni CSS düzeni variantları, CSS Sütunları ilə sınaqdan keçirirlər və bu yeni yanaşmalarla daha çox nəzarətə sahib olduqlarını aşkar edirlər.
CSS Sütunlarının əsasları
Adından göründüyü kimi, CSS Birden çox Sütunlar (həmçinin CSS3 çox sütun sütunları kimi tanınır) tərkibi bir sıra sütunlara ayırmağa imkan verir. Kullanacağınız ən əsas CSS xüsusiyyətləri bunlardır:
- sütun sayımı
- sütun boşluğu
Sütun sayımı üçün istədiyiniz sütunların sayını təyin edərsiniz. Sütun boşluğu bu sütunlar arasındakı boşluqlar və ya boşluqlar olardı. Brauzer bu dəyərləri alır və məzmunu siz göstərdiyiniz sütunların sayına bərabər bölüşdürür.
Praktikada CSS-in bir çox sütunun ümumi nümunəsi, bir qəzet məqaləsində göründüyünüzə bənzər bir neçə sütuna birbaşa mətn bloğunu ayırmaq olar. Aşağıdakı HTML düzəlişinə sahib olduğunuzu bildirin (məsələn, məqsədlər üçün yalnız bir paraqrafın başlanğıcını qoyuram, praktikada isə, ehtimal ki, bu işarənin tərkibində birdən çox paraqraf ola bilər):
Makalenizin başlığı
Burada çox sayda paraqraf təsəvvür edin ...
Daha sonra bu CSS üslublarını yazdıysanız:
.content {-moz-column-count: 3; -webkit-sütun sayıları: 3; sütun sayımı: 3; -moz-sütun boşluğu: 30px; -webkit-sütun boşluğu: 30px; sütun boşluğu: 30px; }Bu CSS qayda "məzmun" bölməsini 30 ədəd aralığındakı boşluğu olan 3 bərabər sütuna ayırdı. 3 yerinə 2 sütun istəyirsən, sadəcə bu dəyəri dəyişdirərdiniz və brauzer bu sütunların yeni genişliklərini məzmunu bir-birindən ayırmaq üçün hesablayırdı. Öncelikle satıcıdan önceden yazılmış özelliklerden, önceden qorunmayan bildirimlerden sonra istifadə etdiyimizi unutmayın.
Bu qədər asan olduğu kimi, bu şəkildə istifadə veb sayt istifadə üçün şübhə doğurur. Bəli, bir çox içerik birdən çox sütuna bölüşdürə bilərsiniz, ancaq bu, İnternet üçün ən yaxşı oxu təcrübəsi ola bilməz, xüsusilə bu sütunların hündürlüyü ekranın "qat" hissəsinin altına düşsə.
Oxucular tam məzmunu oxumaq üçün yuxarı və aşağıya doğru hərəkət etməlidirlər. Bununla belə, CSS Sütunlarının müdiri burada gördüyünüz qədər asandır və yalnız bəzi paraqrafların məzmununu bölməkdən daha çox istifadə etmək üçün istifadə edilə bilər - həqiqətən layout üçün istifadə edilə bilər.
CSS Sütunları ilə Layout
3 sütun məzmunu olan bir məzmun sahəsi olan bir veb səhifəniz olduğunu söyləyin. Bu çox tipik bir veb layoutdur və bu 3 sütuna nail olmaq üçün, adətən içəridə olan bölmələri silmək olar. CSS çox sütunlarla, o qədər də asan deyil.
Bəzi nümunə HTML:
Son xəbərlər
Məzmun buraya gedəcək ...
Gələcək Hadisələr
Məzmun buraya gedirdi ...
p>
Bu çox sütunları yaratmaq üçün CSS daha əvvəl gördüyünüz ilə başlayır:
.content {-moz-column-count: 3; -webkit-sütun sayıları: 3; sütun sayımı: 3; -moz-sütun boşluğu: 30px; -webkit-sütun boşluğu: 30px; sütun boşluğu: 30px; } İndi buradakı problem, brauzerin bu məzmunu bir-birinə ayırmaq istədiyi üçün, bu bölmələrin məzmun uzunluğu fərqli olsaydı, brauzer həqiqətən fərdi bölünmənin məzmununu bölüşdürəcək, bir sütuna başlamasını və sonra başqa bir şəkildə davam edir (bunu bir sınaq yaratmaq və hər bölmə içərisində müxtəlif məzmunu əlavə etmək üçün bu kodu istifadə edərək görə bilərsiniz)!
İstədiyiniz şey deyil. Bu bölmələrin hər birindən fərqli bir sütun yaratmaq istəyirik və fərdi bölünmənin məzmununun nə qədər böyük və ya kiçik olmasından asılı olmayaraq, onu bölmək istəməyəcəksiniz. Bunu bir əlavə CSS xətti əlavə edərək əldə edə bilərsiniz:
.vəqiqi div {display: inline-block; } Bu, "content" içərisində olan bölmələri brauzer bunu birdən çox sütuna bölərək belə sabit qalmayacaqdır. Daha da yaxşıdır, burada sabit bir eni vermədiyimiz üçün, bu sütunlar brauzerin ölçüsünü dəyişdikcə avtomatik olaraq yenidən ölçülür və həssas saytlar üçün ideal bir tətbiqdir. Bu "inline-block" üslubunda, 3 bölmənin hər birində xüsusi bir sütun olacaq.
Sütun genişliyi istifadə
Siz istifadə edə biləcəyiniz "sütun sayım" dan başqa bir xüsusiyyət var və layout ehtiyaclarınıza görə, həqiqətən, saytınız üçün daha yaxşı bir seçim ola bilər. Bu "sütun genişliyi" dir. Daha əvvəl nümayiş etdirilən eyni HTML formatı istifadə edərək, bunun əvəzinə CSS ilə bunu edə bilərik:
.content {-moz-sütun genişliyi: 500px; -webkit-sütun genişliyi: 500px; sütun genişliyi: 500px; -moz-sütun boşluğu: 30px; -webkit-sütun boşluğu: 30px; sütun boşluğu: 30px; } .content div {display: inline-block; } Bu işin üsulu brauzerin bu "sütun genişliyi" sütunun maksimum dəyəri kimi istifadə etdiyidir. Beləliklə, brauzer pəncərəsi 500 pikseldən az olsaydı, bu 3 bölmə bir sütunda, digərinin üst hissəsindən birində görünəcəkdi. Bu mobil / kiçik ekran düzəltmələri üçün istifadə edilən tipik bir sxemdir.
Brauzer genişliyi müəyyən sütun boşluqları ilə yanaşı, 2 sütun üçün kifayət qədər genişləndikcə, brauzer avtomatik olaraq bir sütun düzənliyindən iki sütuna keçəcəkdir. Ekran genişliyini artırmağa davam edin və nəticədə 3 sütun dizaynını əldə edəcəyik, 3 sütunumuzun hər biri öz sütununda göstərilir. Yenə də, bu, cavab verən, çox cihazlı dost layouts almaq üçün gözəl bir yoldur və layout üslubunu dəyişdirmək üçün media sorgularını da istifadə etmək lazım deyil!
Digər sütun xüsusiyyətləri
Burada əhatə olunan xüsusiyyətlərə əlavə olaraq, sütunlarınız arasında qaydalar yaratmağa imkan verən rəng, üslub və genişlik dəyərləri daxil olmaqla "sütun-qayda" nın xüsusiyyətləri də var. Sütunlarınızı ayırdığınız bir sıra xətləri yaratmaq istəyirsinizsə bunlar sərhədlərin əvəzinə istifadə olunacaq.
Təcrübə üçün vaxt
Hal-hazırda, CSS Birden çox Sütun Layout çox yaxşı dəstəklənir. Prefiks ilə, web istifadəçilərinin 94% -dən çoxu bu üslubları görə biləcək və dəstəklənməmiş qrup, həqiqətən, İnternet Explorer-ın daha çox köhnə versiyaları ola bilər.
Hazırda bu səviyyədə dəstəylə, CSS Sütunları ilə təcrübə etməyə başlamamaq və bu üslubları istehsal hazır veb saytlarında yerləşdirməyin heç bir səbəbi yoxdur. Denemelerinizi, bu makalede sunulan HTML ve CSS'yi istifadə edərək başlaya və sitenizin yerleşim ehtiyacları üçün daha yaxşı çalışacaklarını görmek üçün farklı değerlerle oynayabilirsiniz.
Gələcək Hadisələr
Məzmun buraya gedirdi ...
p>
Bu çox sütunları yaratmaq üçün CSS daha əvvəl gördüyünüz ilə başlayır:
.content {-moz-column-count: 3; -webkit-sütun sayıları: 3; sütun sayımı: 3; -moz-sütun boşluğu: 30px; -webkit-sütun boşluğu: 30px; sütun boşluğu: 30px; }İndi buradakı problem, brauzerin bu məzmunu bir-birinə ayırmaq istədiyi üçün, bu bölmələrin məzmun uzunluğu fərqli olsaydı, brauzer həqiqətən fərdi bölünmənin məzmununu bölüşdürəcək, bir sütuna başlamasını və sonra başqa bir şəkildə davam edir (bunu bir sınaq yaratmaq və hər bölmə içərisində müxtəlif məzmunu əlavə etmək üçün bu kodu istifadə edərək görə bilərsiniz)!
İstədiyiniz şey deyil. Bu bölmələrin hər birindən fərqli bir sütun yaratmaq istəyirik və fərdi bölünmənin məzmununun nə qədər böyük və ya kiçik olmasından asılı olmayaraq, onu bölmək istəməyəcəksiniz. Bunu bir əlavə CSS xətti əlavə edərək əldə edə bilərsiniz:
.vəqiqi div {display: inline-block; }Bu, "content" içərisində olan bölmələri brauzer bunu birdən çox sütuna bölərək belə sabit qalmayacaqdır. Daha da yaxşıdır, burada sabit bir eni vermədiyimiz üçün, bu sütunlar brauzerin ölçüsünü dəyişdikcə avtomatik olaraq yenidən ölçülür və həssas saytlar üçün ideal bir tətbiqdir. Bu "inline-block" üslubunda, 3 bölmənin hər birində xüsusi bir sütun olacaq.
Sütun genişliyi istifadə
Siz istifadə edə biləcəyiniz "sütun sayım" dan başqa bir xüsusiyyət var və layout ehtiyaclarınıza görə, həqiqətən, saytınız üçün daha yaxşı bir seçim ola bilər. Bu "sütun genişliyi" dir. Daha əvvəl nümayiş etdirilən eyni HTML formatı istifadə edərək, bunun əvəzinə CSS ilə bunu edə bilərik:
.content {-moz-sütun genişliyi: 500px; -webkit-sütun genişliyi: 500px; sütun genişliyi: 500px; -moz-sütun boşluğu: 30px; -webkit-sütun boşluğu: 30px; sütun boşluğu: 30px; } .content div {display: inline-block; }Bu işin üsulu brauzerin bu "sütun genişliyi" sütunun maksimum dəyəri kimi istifadə etdiyidir. Beləliklə, brauzer pəncərəsi 500 pikseldən az olsaydı, bu 3 bölmə bir sütunda, digərinin üst hissəsindən birində görünəcəkdi. Bu mobil / kiçik ekran düzəltmələri üçün istifadə edilən tipik bir sxemdir.
Brauzer genişliyi müəyyən sütun boşluqları ilə yanaşı, 2 sütun üçün kifayət qədər genişləndikcə, brauzer avtomatik olaraq bir sütun düzənliyindən iki sütuna keçəcəkdir. Ekran genişliyini artırmağa davam edin və nəticədə 3 sütun dizaynını əldə edəcəyik, 3 sütunumuzun hər biri öz sütununda göstərilir. Yenə də, bu, cavab verən, çox cihazlı dost layouts almaq üçün gözəl bir yoldur və layout üslubunu dəyişdirmək üçün media sorgularını da istifadə etmək lazım deyil!
Digər sütun xüsusiyyətləri
Burada əhatə olunan xüsusiyyətlərə əlavə olaraq, sütunlarınız arasında qaydalar yaratmağa imkan verən rəng, üslub və genişlik dəyərləri daxil olmaqla "sütun-qayda" nın xüsusiyyətləri də var. Sütunlarınızı ayırdığınız bir sıra xətləri yaratmaq istəyirsinizsə bunlar sərhədlərin əvəzinə istifadə olunacaq.
Təcrübə üçün vaxt
Hal-hazırda, CSS Birden çox Sütun Layout çox yaxşı dəstəklənir. Prefiks ilə, web istifadəçilərinin 94% -dən çoxu bu üslubları görə biləcək və dəstəklənməmiş qrup, həqiqətən, İnternet Explorer-ın daha çox köhnə versiyaları ola bilər.
Hazırda bu səviyyədə dəstəylə, CSS Sütunları ilə təcrübə etməyə başlamamaq və bu üslubları istehsal hazır veb saytlarında yerləşdirməyin heç bir səbəbi yoxdur. Denemelerinizi, bu makalede sunulan HTML ve CSS'yi istifadə edərək başlaya və sitenizin yerleşim ehtiyacları üçün daha yaxşı çalışacaklarını görmek üçün farklı değerlerle oynayabilirsiniz.