Bu cevap, yeni başlayanlar içindir. Bu cevaba genel bir bakış istiyorsanız, lütfen ikinci cevabımı okuyun.
Basamaklama, farklı stil sayfalarını birleştirme ve belirli bir öğeye birden fazla kural uygulandığında farklı CSS kuralları ve bildirimleri arasındaki çatışmaları çözme işlemidir . Çünkü muhtemelen zaten bildiğiniz gibi, yazı tipi boyutu gibi belirli bir stil özelliği için bir bildirim birkaç stil sayfasında ve ayrıca tek bir stil sayfasında birkaç kez görünebilir.
Basamaklamayı anlamak için CSS ayrıştırma aşamasından başlamalısınız çünkü ayrıştırma aşamasında ilk adım çakışan CSS bildirimlerini çözmek ve ikinci adım son CSS değerlerini işlemektir.
Artık CSS farklı kaynaklardan da gelebilir. En yaygın olanı, biz geliştiricilerin yazdığı CSS'dir. Stil sayfalarımıza koyduğumuz bu bildirimlere yazar bildirimleri denir. Diğer bir kaynak, kullanıcıdan gelen CSS olan kullanıcı bildirimleri olabilir. Örneğin, kullanıcı tarayıcıdaki varsayılan yazı tipi boyutunu değiştirdiğinde bu kullanıcı CSS'sidir ve son olarak, ancak en önemlisi varsayılan tarayıcı bildirimleri vardır.
Örneğin, bir bağlantı için HTML'mize bir bağlantı etiketi koyarsak ve sonra onu hiç biçimlendirmezsek, genellikle mavi metinle ve altı çizili olarak oluşturulur. Bu, kullanıcı aracısı CSS olarak adlandırılır çünkü tarayıcı tarafından ayarlanır. Dolayısıyla, basamaklama, tüm bu farklı kaynaklardan gelen CSS bildirimlerini birleştirir, ancak birden fazla kural uygulandığında, basamaklama aslında çatışmaları nasıl çözer?
Yaptığı şey, önemine, seçici özgüllüğüne bakmak ve hangisinin öncelikli olduğunu belirlemek için birbiriyle çelişen bildirimlerin sırasını sağlamaktır ve işte bu nasıl çalışır. Öncelikle çağlayan, kaynağında nerede beyan edildiklerine bağlı olarak farklı öneme sahip çelişkili beyanlar vermekle başlar. En önemli bildirimler, önemli anahtar sözcük ile işaretlenmiş kullanıcı bildirimleridir.
İkinci en önemli bildirimler, önemli ile işaretlenmiş yazar bildirimleridir. Üçüncüsü, normal yazar bildirimleri, sonra normal kullanıcı bildirimleri ve son olarak en önemsiz olanlar, varsayılan tarayıcı bildirimleridir, bu da aslında tarayıcıdan varsayılan olarak gelen bu bildirimlerin üzerine kolayca yazabileceğimizi çok daha mantıklı hale getirir.
Şimdi çoğu zaman yazar stil sayfalarımızda önemli bir anahtar kelime olmadan bir dizi çelişen kural olacaktır. Aslında en yaygın senaryo budur ve bu durumda tüm beyanlar aynı öneme sahiptir. Şimdi, bu durumda ne olur? Durum böyleyse, kaskadın yaptığı şey, bildirim seçicilerinin özelliklerini hesaplamak ve karşılaştırmaktır ve bu şekilde çalışır.
Satır içi stiller en yüksek özgüllüğe ve ardından kimliklere, ardından sınıflara, sözde sınıflara ve öznitelik seçicilere ve son olarak en az belirli öğe ve sözde öğe seçiciye sahiptir. Dolayısıyla, son slaytta gördüğümüzle aynı öneme sahip çelişkili bildirimlerimiz olduğunda, seçici özgüllüğünü size az önce gösterdiğim önceliklere göre hesaplıyoruz, ama özellikleri küçük bir örnekle gerçekte nasıl hesapladığımızı görelim, bu her zaman en iyisidir.
Yukarıdaki örnekten, tüm bu bildirimler aynı öneme sahiptir çünkü hepsi yazar beyanlarıdır. Öyleyse, arka plan renginin mavi, yeşil, mor veya sarı olup olmayacağını öğrenmek için seçici özelliklerini hesaplayalım ve biz bunu böyle yapıyoruz. Özgünlük aslında sadece bir sayı değil, size daha önce gösterdiğim dört kategorinin her biri için bir sayıdır. Satır içi stiller, kimlikler, sınıflar, sözde öğeler ve öznitelikler ve son olarak öğeler ve bunların her biri için seçicideki oluşumların sayısını sayarız.
Yani burada birinci seçicide, elbette herhangi bir satır içi stilimiz yok, çünkü burada bir satır içi stil HTML'de yazılmalıdır, burada durum böyle değil, bu yüzden sıfırdır. Ayrıca burada kimliğimiz yok, bu yüzden yine sıfır, ancak bir sınıfımız var, düğme sınıfı. Yani sınıflar kategorisi için bir tane var ve son olarak, burada hiç eleman seçici yok, bu yüzden onun için de sıfır ve hepsi bu. Seçici özgüllüğü sıfır, sıfır, bir, sıfırdır.
Şimdi bunu diğerleriyle karşılaştıralım. Sonraki stil de satır içi stil değildir, bu nedenle ilk stil için sıfırdır. Şimdi burada aslında nav ID için bir ID seçicimiz var, yani bu ID için bir tane. Ayrıca sağa doğru açılan iki sınıfımız var, bu yüzden sınıflar kategorisi için bir iki ve son olarak, burada iki öğe seçici de var. Nav öğesi ve div öğesi, yani öğeler kategorisi için de iki tane olduğu anlamına gelir. Son olarak seçicinin özgüllüğü sıfır, bir, iki, iki, ki bu aslında oldukça özel bir seçicidir.
Üç numaralı seçici çok basit. Bu sadece bir eleman seçicidir ve dolayısıyla özgüllük sıfır, sıfır, sıfır, birdir.
Şimdi sonuncusu, dört numaralı seçici. İlk olarak yine nav kimliğine sahibiz, yani bu kimlik için bir tane. Daha sonra, bir sınıfımız, düğme sınıfımız ve ayrıca bir sözde sınıfımız var, bu da onu toplamda sınıflar kategorisi için iki yapıyor. Ayrıca bir öğe seçici olduğu için, nihai özgüllük sıfır, bir, iki, birdir.
Şimdi, seçicilerden hangisinin geçerli olduğunu bulmak için bu sayıları gerçekte nasıl kullanacağımızı öğrenelim. En spesifik kategori olan satır içi stillerden başlayarak soldan sağa sayılara bakmaya başlarız. Satır içi stiller için birine sahip bir seçici varsa, diğer tüm seçicilere karşı kazanır, çünkü bu en spesifik kategoridir. Pekala, burada durum böyle değil, o yüzden kimliklere geçelim. İki ve dördüncü seçicilerin burada bir tane olduğunu ve diğerlerinin sıfır olduğunu görüyoruz, bu yüzden sıfır olanların oyun dışı kaldığını, çünkü kimlikleri olan iki ve dördüncü seçicilerden daha az spesifik olduklarını görüyoruz.
Şimdi, her iki seçicinin de ID kategorisinde bir tane olduğu için, devam etmemiz ve sınıfları kontrol etmemiz gerekiyor. Her ikisinin de bu kategoride iki tane var ve aralarında hala bir bağ var ve son olarak, elemanlar kategorisinde, ikinci seçicide iki, seçici dörtte yalnızca bir tane var ve bu yüzden burada bir kazananımız var. İki numaralı seçici, hepsinin en spesifik seçicisidir ve bu nedenle düğmemize yeşil bir arka plan verir.34 Kazanan beyanın değeri, kademeli değer olarak adlandırılır çünkü bu, kademenin sonucudur.
Bu durumda, bir grup beyan edilmiş değerle başlıyoruz, mavi, yeşil, mor ve sarı bunlardan biri kazanır ve örneğimizde yeşil olan basamaklı değer olur.
Şimdi dördüncü sektörün de iki unsuru olduğunu hayal edin, o zaman hem iki hem de dört seçici aynı özgüllüğe sahip olur, doğru. Öyleyse bu durumda ne olacak ve size söz veriyorum neredeyse şimdi bitti, tamam. Bu noktada hala bir bağ varsa, o zaman kodda yazılan son CSS bildirimi geçerli olacaktır. Yine, her şey eşitse, tüm bildirim seçicileri aynı özgüllüğe sahipse, o zaman bu, seçilen öğeyi biçimlendirmek için kullanılacak olan son bildirimdir.