Kodun tekrarını önlemek için HTML ve CSS'de birden çok sınıf kullanıyoruz. CSS ile ayrıca her iki sınıfı birlikte tanımlayıp stillendirebilir ve farklı sınıf kimlikleri atayarak tek bir öğede birden çok sınıf kullanabiliriz. Bu yaklaşım, bir HTML öğesine birden çok sınıf eklemek için boşlukla ayrılmış sözdizimi kullanılarak izlenebilir.
Bu yazıda, bir elemana birden çok sınıf eklemeyi öğreneceğiz.
CSS'de Çoklu Sınıflar Nasıl Kullanılır?
Bir öğede iki veya daha fazla sınıfı kullanmak için her sınıf kimliği bir boşlukla ayrılacaktır.
Bir öğede birden çok sınıfı kullanmak için aşağıdaki sözdizimini izlemeniz gerekir:
< h1 sınıfı = 'class_1 class_2 class_3' > teslim... h >
Tek bir HTML öğesinde, bir boşlukla ayırarak birden fazla sınıfı dahil edebilirsiniz. Size kolaylık sağlamak için, işte bir örnek.
Örnek: CSS'de Birden Çok Sınıf Kullanma
Aşağıdaki örnekte, oluşturacağız:
-
etiketini kullanan bir başlık ve “sınıf adını atayın” başlık ”.
- Daha sonra başka bir başlık oluşturacağız ve onu iki farklı sınıfa atayacağız: “ başlık ' ve ' astar ”. Bu sınıf kimlikleri bir boşlukla ayrılır:
HTML
h1 >
< h1 sınıf = 'başlık satırı' >
Çoklu Sınıflar içinde bir element
h1 >
Şimdi CSS dosyasına geçelim ve aşağıda listelenen bazı CSS özelliklerini uygulayalım:
- rgb() işlevini kullanarak arka plan rengini başlığa ayarlayın “ (69, 51, 151) ”.
- Yazı tipi stilini ayarla “ italik ” başlığı için.
HTML sınıfında, ilk başlık “sınıf adını kullanır. başlık ”. Böylece, belirtilen sınıfta belirtilen stil ilk başlıkta uygulanacaktır:
.başlık {
arka plan rengi: rgb ( 69 , 51 , 151 ) ;
yazı tipi stili:italik
}
İçin ' astar ” sınıfı, elimizde:
- rgb() işlevini kullanarak başlığın rengini “olarak ayarlayın. (255, 0, 0) ”.
- Metin-dekorasyon-satırını “ olarak uygula altını çizmek ”.
İkinci başlık, her iki sınıfın stillerini kullanacaktır: “ başlık ' ve ' astar ' sınıf:
.astar {renk: rgb ( 255 , 0 , 0 ) ;
metin-dekorasyon-satır:altı çizili;
}
Uygulamadan sonra sonucu kontrol edin:
Çıktıdan, ikinci başlığın her iki CSS sınıfını da kullandığını gözlemleyebilirsiniz.
Çözüm
Tek bir öğe üzerinde birden çok sınıf kullanmak için beyaz boşluklarla ayrılmış farklı sınıf kimlikleri kullanın. Bunu kullanarak aynı anda farklı CSS özelliklerini uygulayabiliriz. Benzer öğelerin bulunduğu sınıfı yeniden kullanmamızı sağlar. Bu makale, tek bir öğede birden çok sınıfın nasıl kullanılacağını ve bir örnekle birlikte nasıl stillendirileceğini açıkladı.