Anasayfa » Kodlama » CSS Izgaralı Gelişmiş Onay Kutusu Styling

    CSS Izgaralı Gelişmiş Onay Kutusu Styling

    CSS Izgara Düzeni Modülü Sadece bir yerleşim probleminin mamutunu çözemez, aynı zamanda bazı eski sorunları da çözebiliriz. uzun süre uğraşmak, gibi onay kutusu etiketini biçimlendirme.

    Etiketi göründüğünde biçimlendirmek için nispeten basit bir yöntem varken sonra onay kutusu, etiket göründüğünde kolay değil önce o.

    CSS Izgarası olmadan kontrol kutusu tasarımı

    Etiket biçimlendirme sonra Bir onay kutusu, geliştiricilerin bir yerde okuduğumuzdan beri yaptıkları bir şeydir. Bu teknik, CSS'nin sahip olabileceği güçlü dinamiklerin ana ve eski örneklerinden biridir..

    İşte zaten aşina olmuş olabileceğiniz kod. etiket stilleri sonra işaretli bir onay kutusu:

       
     giriş: kontrol + etiket / * stil beni * / 

    bir tarz etiketi sonra bir onay kutusu şöyle görünebilir (ancak, diğer stil kurallarını da kullanabilirsiniz):

    Yukarıdaki CSS kodu şunları kullanır: bitişik kardeş birleştirici tarafından işaretlenmiş + tuşuna basın. Bir onay kutusu :kontrol belirtmek, bildirmek, bir element sonra o (genellikle bir etiket) bu yöntem kullanılarak stillendirilebilir.

    Böyle basit ve etkili bir teknik! Ne olabilir belki yanlış mı gitmek? Hiçbir şey-etiketi görüntülemek istediğinize kadar önce onay kutusu.

    Bitişik kardeş birleştirici sonraki öğeyi seçer; bu, etiketin gelmesi gerektiği anlamına gelir sonra HTML kaynak kodundaki onay kutusu.

    Yani, bir etiket görünmesi için önce Ekrandaki ait onay kutusunu, kaynak koddaki onay kutusundan önce taşıyamıyoruz. önceki kardeş seçicisi CSS'de mevcut değil.

    Hangisi tek bir seçenek bırakır: onay kutusunu ve etiketi yeniden konumlandırma kullanma dönüştürmek veya pozisyon veya kenar veya bir tür telekinetik güce sahip başka bir CSS özelliği, böylece etiket ekrandaki onay kutusunun solunda görünür..

    Geleneksel yöntemle ilgili sorunlar

    Hiçbir şey yok majorly Yukarıda belirtilen teknikle yanlış ama olabilir bazı durumlarda verimsiz. Onay kutusunun ve etiketin yeniden düzenlenmiş konumlarının artık çalışmadığı durumlarda.

    Duyarlı düşün, Örneğin. Onay kutusunu, görüntülendiği cihaza göre yeniden boyutlandırmanız veya yeniden konumlandırmanız gerekebilir. Bu olduğunda, yapacaksın etiketi de yeniden konumlandırmanız gerekiyor, onay kutusunun yeniden konumlandırılmasına / yeniden boyutlandırılmasına yanıt olarak etikette otomatik yeniden düzenleme yapılmayacağından.

    Yapabilirsek bu dezavantajı ortadan kaldırabiliriz. onay kutusu ve etiket için sağlam bir düzen sağlar, kabaca sayfaya yerleştirmek yerine.

    Ancak, tablo veya sütun gibi hemen hemen tüm düzen sistemlerinde yapmanız gerekenler kaynak koddaki onay kutusundan önce etiketi ekleyin Ekranda aynı şekilde görünmesini sağlamak için. Bu yapmak istemediğimiz bir şey çünkü etiketteki bir sonraki eleman seçici çalışmayı durduracak.

    Öte yandan, CSS Izgarası, bir düzen sistemidir. değil kaynak koddaki öğelerin yerleşimine / sırasına bağlı olarak.

    Izgara düzeninin yeniden sıralama özellikleri kasıtlı olarak etkiler sadece görsel görsel, kaynak sırasına göre konuşma düzeni ve gezinti yapmak. Bu, yazarların kaynak sırasını bozulmadan bırakırken görsel sunumu değiştirmelerini sağlar… - CSS Izgara Düzeni Modülü Seviye 1, W3C

    Böylece, CSS ızgarası için ideal bir çözümdür görünen etiketi stillendir önce onay kutusu.

    CSS Izgaralı onay kutusu stili

    HTML koduyla başlayalım. Onay kutusunun ve etiketin sırası, öncekiyle aynı kalacak. İkisini de bir ızgaraya ekliyoruz.

     

    Ekteki CSS aşağıdaki gibidir:

     #cbgrid display: ızgara; grid-template-fields: "sol sağ"; genişlik: 150px;  giriş [tür = onay kutusu] ızgara alanı: sağ;  etiket ızgara alanı: sol;  

    Daha önce yazdığım gibi, CSS şebekesinin nasıl çalıştığını derinlemesine incelemeyeceğim. konuyla ilgili ayrıntılı makale, Burada okuyabilirsin. Ancak bazı temel bilgiler: ekran: ızgara özellik bir öğeyi ızgara kabına dönüştürür, ızgara alanı Bir elemanın ait olduğu ızgara alanını tanımlar ve Izgara şablon alanlar farklı ızgara alanlarından oluşan bir ızgara düzeni oluşturur.

    Yukarıdaki kodda iki ızgara alanı: "ayrıldı" ve "sağ". Uydurdular kılavuz satırının iki sütunu. Onay kutusu ait "sağ" alan ve etiketin "ayrıldı". İşte ekranda nasıl görünüyorlar:

    Onay kutusunun göreceli yerleşimini ve kaynak koddaki etiketi değiştirmediğimizden, Hala bitişik kardeş birleştiriciyi kullanın:

     giriş: kontrol + etiket / * stil beni * / 

    Bir ızgara öğesinin her zaman blockified; olarak bilinen çevreleyen bir kutu ile görünür. ızgara seviyesi kutusu. Bunu istemiyorsanız, örneğin bir etiket için, o öğeye bir sarıcı koy (başka bir elemana sarın) ve sargısını ızgara alanına getirin.

    İşte bu millet. CSS ızgara umarım bu arsız onay kutularının düzenini belirlemenize yardımcı olur.