Basamaklı Stil Şablonu o öğeye uyguladığınız niteliklere bağlanarak bir web sayfası öğesinin görünümünü tanımlayın. Bu öznitelikler, bir kimlik veya sınıf olabilir ve tüm öznitelikler gibi, bağlı oldukları öğelere yararlı bilgiler eklerler.
Bir öğeye eklediğiniz özniteliğe bağlı olarak, uygulamak için bir CSS seçici yazabilirsiniz. o öğe ve web sitesi için görünüm ve hissi elde etmek için gereken gerekli görsel stiller bir bütün olarak.
Kimlikler veya sınıflar, CSS kurallarıyla bunlara takılmak amacıyla çalışırken, modern web tasarımı yöntemler, kısmen daha az spesifik oldukları ve genel olarak çalışmak daha kolay olduğu için kimliklere göre sınıfları tercih eder.
CSS'de Bir veya Daha Fazla Sınıf?
Çoğu durumda, bir öğeye tek bir sınıf özniteliği atarsınız, ancak gerçekte kimlikleri olan tek bir sınıfla sınırlı değilsiniz. bir element iken yalnızca tek bir kimlik özniteliğine sahip olabilir, bir öğeye birkaç sınıf verebilirsiniz ve bazı durumlarda bunu yapmak sayfanızın stilini ve çok daha fazlasını kolaylaştırır esnek.
Bir öğeye birkaç sınıf atamanız gerekiyorsa, ek sınıfları ekleyin ve bunları özniteliğinizde bir boşlukla ayırın.
Örneğin, bu paragrafın üç sınıfı vardır:
Bu paragrafın metni olurdu
Bu, paragraf etiketinde aşağıdaki üç sınıfı ayarlar:
- 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.
Sınıf değerlerinizi aldıktan sonra HTML, ardından bunları CSS'nizde sınıflar olarak atayabilir ve eklemek istediğiniz stilleri uygulayabilirsiniz. Örneğin.
.Alıntı yap {... }
.özellikli {... }
p.sol {... }
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.
Eğer sen belirli bir öğeye bir sınıf ayarla (Ö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ırlar.
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. tanımlamak için sınıfları da kullanabilirsiniz. bir elemanın semantiği - bu öğenin anlamsal olarak ne anlama geldiğini tanımlamak için ek sınıflar ekleyin. Bu yaklaşım nasıl Mikro biçimler İşler.
Ç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:
ayrıldı.
ve.
sağ.
sadece.
yüzer: sol;
ve.
Sağa çık;
onların içinde. 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, tümü "kırmızı" veya "sol" gibi sınıf adlarına sahip öğelerle doluysa, öğelerin ne olduklarından çok nasıl görünmesi gerektiğini dikte edin, yapı ve stil arasındaki o çizgiyi aşıyorsunuz.
Çoklu Sınıfların Dezavantajları
Öğeleriniz üzerinde aynı anda birden fazla sınıf kullanmanın en büyük dezavantajı, zaman içinde onlara 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 zor olabilir. 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, 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.