Tek Bir Öğede Birden Çok CSS Sınıfı Nasıl Kullanılır

• Alıntı yap
• Öne çıkan
• Ayrıldı

Bu sınıf değerlerinin her biri arasındaki boşluklara dikkat edin. Bu boşluklar, onları farklı, bireysel sınıflar olarak oluşturan şeydir. Bu aynı zamanda sınıf adlarında boşluk olmamasının nedeni de budur çünkü böyle yapmak onları ayrı sınıflar olarak ayarlar. HTML’de sınıf değerlerinizi aldıktan sonra, bunları CSS’nizde sınıflar olarak atayabilir ve eklemek istediğiniz stilleri uygulayabilirsiniz. Örneğin.

.Alıntı yap { … }
.özellikli { … }
p.sol { … }

type=”code”> Bu örneklerde, CSS bildirimleri ve değer çiftleri küme parantezleri içinde görünür, bu stiller uygun seçiciye bu şekilde uygulanır. Belirli bir öğeye bir sınıf ayarlarsanız (örneğin, s. sol), yine de bir sınıf listesinin parçası olarak kullanabilirsiniz; ancak bunun yalnızca CSS’de belirtilen öğeleri etkileyeceğini unutmayın. Başka bir deyişle, s. sol stil, yalnızca bu sınıfa sahip paragraflara uygulanacaktır, çünkü seçiciniz aslında onu “sınıf değeri olan paragraflara” uygulamayı söylüyor. ayrıldı,” Buna karşılık, örnekteki diğer iki seçici belirli bir öğeyi belirtmez, bu nedenle bu sınıf değerlerini kullanan herhangi bir öğeye uygulanır.

Birden Çok Sınıf, Semantik ve JavaScript

Birkaç sınıf kullanmanın bir başka avantajı da etkileşim olanaklarını arttırmasıdır. Başlangıç ​​sınıflarından herhangi birini kaldırmadan JavaScript kullanarak mevcut öğelere yeni sınıflar uygulayın. Bir öğenin anlamını tanımlamak için sınıfları da kullanabilirsiniz — o öğenin anlamsal olarak ne anlama geldiğini tanımlamak için ek sınıflar ekleyin. Bu yaklaşım, Microformats’ın çalışma şeklidir.

Çoklu Sınıfların Avantajları

Birkaç sınıfı katmanlamak, o öğe için tamamen yeni bir stil oluşturmak zorunda kalmadan öğelere özel efektler eklemeyi kolaylaştırabilir. Örneğin, öğeleri sola veya sağa kaydırmak için iki sınıf yazabilirsiniz: sol

type=”code”> ve sağ

type=”code”> ile sadece float:left;

type=”code”> ve float:right;

yazın = “kod”>. Ardından, bir öğeniz olduğunda sola kaydırmanız gerekir, “sol” sınıfını sınıf listesine eklemeniz yeterlidir. Ancak burada yürümek için ince bir çizgi var. Web standartlarının stil ve yapı ayrımını belirlediğini unutmayın. Stil CSS’deyken yapı HTML kullanılarak işlenir. HTML belgeniz, “kırmızı” veya “sol” gibi, öğelerin ne olduklarından çok nasıl görüneceğini belirleyen adlar olan sınıf adlarına sahip öğelerle doluysa, yapı ve stil arasındaki bu çizgiyi aşıyorsunuz demektir.

Çoklu Sınıfların Dezavantajları

Öğelerinizde aynı anda birden fazla sınıf kullanmanın en büyük dezavantajı, onları zaman içinde bakmayı ve yönetmeyi biraz hantal hale getirebilmesidir. Bir öğeyi hangi stillerin etkilediğini ve herhangi bir komut dosyasının onu etkileyip etkilemediğini belirlemek zorlaşabilir. Bootstrap gibi günümüzde mevcut olan çerçevelerin çoğu, birden çok sınıfa sahip öğeleri yoğun bir şekilde kullanır. Dikkatli olmazsanız, bu kod elden çıkabilir ve çok hızlı bir şekilde çalışmak zor olabilir. Birkaç sınıf kullandığınızda, bir sınıfın stilinin diğerinin stilini geçersiz kılması riskini de taşırsınız. Bu çarpışma, daha sonra, olması gerektiği gibi görünse bile stillerinizin neden uygulanmadığını anlamanızı zorlaştırabilir. Bir öğeye uygulanan niteliklerle bile, özgüllüğün farkında olun. Google Chrome’daki Web Yöneticisi araçları gibi bir araç kullanarak, sınıflarınızın stillerinizi nasıl etkilediğini daha kolay görebilir ve bu çakışan stiller ve nitelikler sorununu önleyebilirsiniz.