Tailwind CSS'de “ kutu süsleme molası ” özelliği, birden çok satıra veya sütuna yayıldığında bir öğenin arka planının, kenarlığının ve dolgusunun oluşturulmasını belirler. İki sınıfı vardır, yani, “ dilim ' Ve ' klon ”. Kullanıcılar, cihazın genişliğine bağlı olarak öğelerin düzeninin ve görünümünün nasıl değiştiğini belirlemek ve kesme noktalarına göre farklı stiller uygulamak için kesme noktaları ve medya sorguları ile “box-decoration-break” özelliğini kullanabilir.
Bu makale, kesme noktaları ve medya sorguları ile kutu süsleme molasını kullanma yöntemini gösterecek.
Tailwind'de Kesme Noktaları ve Medya Sorguları ile Kutu Süsleme Arası Nasıl Kullanılır?
Kesme noktaları ve medya sorguları ile bir kutu süsleme molası kullanmak için, HTML programında farklı ekran boyutları için farklı değerler ve stiller tanımlamanız gerekir. Ardından, doğrulama için HTML programını çalıştırarak web sayfasını görüntüleyin.
Daha iyi anlamak için aşağıda belirtilen adımlara göz atın:
1. Adım: Kesme Noktalarını ve Medya Sorgularını Kutu Süsleme Arasıyla Kullanın
Bir HTML programı oluşturun ve farklı ekran boyutları için farklı değerler ve stiller belirleyin. Örneğin, tanımladık “ md ' Ve ' lg ” stilleri ile kesme noktaları:
< vücut >< açıklık sınıf = 'bg-teal-600 kutu-dekorasyon-klonu md:bg-sarı-500 lg:kutu-dekorasyon-dilim metin-beyaz metin-3xl px-2' >
Merhaba < br />
linux < br />
İpucu
açıklık >
vücut >
Burada:
- “ bg-teal-600 ” deniz mavisi rengini arka plana ayarlar.
- “ kutu-dekorasyon-klon ”, klonlama kutusu dekorasyonu için kullanılan özel bir sınıftır.
- “ md:bg-sarı-500 ”, “ için öğesine sarı bir arka plan rengi uygular. md ” kesme noktası (orta boyutlu ekranlar).
- “ lg:kutu-dekorasyon-dilim ”, kutu dekorasyonuna bir dilimleme efekti ayarlar. lg ” kesme noktası (büyük ekranlar).
- “ metin beyazı ”, metne beyaz rengi ayarlar.
- “ metin-3xl ” yazı tipi boyutunu 3xl olarak ayarlar.
- “ piksel-2 ”, öğesine 2 piksellik yatay bir dolgu ekler.
2. Adım: Çıktıyı Doğrulayın
Kesme noktalarının ve ortam sorgularının başarıyla uygulandığından emin olmak için HTML programını çalıştırın ve web sayfasını görüntüleyin:
Kesme noktalarının ve ortam sorgularının tanımlandığı web sayfasına göre değiştiği görülmektedir.
Çözüm
Tailwind'de kesme noktaları ve ortam sorguları içeren bir kutu süsleme molası kullanmak için önce bir HTML dosyası oluşturun. Ardından, farklı ekran boyutları için farklı değerler ve stiller belirleyerek HTML programında kesme noktalarını ve medya sorgularını kullanın. Doğrulama için HTML programını çalıştırın ve web sayfasını görüntüleyin. Bu makale, kesme noktaları ve medya sorguları ile kutu süsleme molasını kullanma yöntemini göstermiştir.