CSS Basamaklı Yapı Nedir?

CSS basamaklı yapı stil çatışması (aynı elemana birden fazla tanım yapıldığında) olduğunda kullanılan hangi kodun web tarayıcıları tarafından yorumlanacağını belirlemektir.

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Basamaklı Yapı</title>
<style type="text/css">
h1{
color:red;
}
h1{
color:blue;
}
</style>
</head>
<body>
<h1>Deneme</h1>
</body>
</html>

Yukarıdaki kodun ekran çıktısı aşağıdaki gibi olacaktır.

Deneme

Yukarıdaki örnekte görüldüğü gibi aynı HTML elemanına (h1) iki adet tanım yapılmıştır. Tarayıcı ekranında görünen son stil atamasıdır. Eğer aynı nesneye tanımlanan aynı özellik var ise son yapılan geçerlidir. Burada iki tanımlamanın yakınlık dereceleri aynıdır. O zaman hangisi uygulanacak? Böyle durumlarda web tarayıcıları kendilerine has garip bir hesaplama sistemi kullanırlar. Kuralları aşağıdaki gibidir.

· Kod içinde tanımlama yapılmışsa (satır içi kod)

· Stil dosyasındaki tanımlı ID’lerin sayısına

· Stil dosyasındaki tanımlı sınıfların sayısına

· Seçicilerin sayısına bakar

Web tarayıcısı bu sayıları toplamaz. Yalnızca rakamları yan yana sıralar. Bu web tarayıcılarına özel bir aritmetik işlemdir. Bir örnek verecek olursak id değeri 2, sınıf değeri 3 ve seçici değeri 0 olan bir tanımlamada 0 (kod içinde değil), 2 (id), 3 (class), 0(seçici) = 0230 değerini elde ederiz. Burada id değeri 100’ler basamağına sınıf değeri 10’lar basamağına yazılarak hesaplama yapılır ve iki yüz otuz değeri elde edilir.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Basamaklı Yapı</title>
<style type="text/css">
body h1{
color:red;
}
h1{
color:blue;
}
</style>
</head>
<body>
<h1>Deneme</h1>
</body>
</html>

Yukarıdaki kodun ekran çıktısı aşağıdaki gibi olacaktır.

Deneme

Bir önceki örnekte mavi olan başlığımız şimdi kırmızı oldu. Bunun nedeni etkinlik değerinin daha büyük olmasıdır.

Body h1 = 0002

h1 = 0001

0002 > 0001

olduğu için başlık kırmızı olmuştur.

Büyük içerikli siteleri kodlarken birçok defa karşılaştığımız sorunlardan bir tanesi bir elemana aynı özelliği birden fazla tanımlanması sonucu istemediğimiz sonuçlarla karşılaşmaktır. Bu birden fazla tanımla genelde genel bir tanım yaptıktan sonra o elemana özel tanımlamalar yapmak istediğimizde karşılaşırız. Bu sorunu aşmak için en etkili yöntem, etkin olması istenilen elemanın etkinlik değerini arttırmak için tanımlama yaparken üst elemanlarını yazmak ve ya id atamak olur. Yukarıdaki örnekten gidersek, eğer başlığın mavi olmasını istiyorsak etkinlik derecesini arttırmak için başına html body eklenebilir.

html body h1{ color:blue}

şeklinde veya

h1#baslik{ color:blue}

….

<h1 id=”baslik”>Deneme</h1>

Yazılabilir.

Etkinlik değerini anlamak için birkaç örnek daha verelim.

ul h1 li.secili {color: yellow}

Yukarıdaki tanımlama da 0013 değerini elde ederiz. 0 (kod içinde değil), 0 (id), 1 (seçili sınıfı), 3 (ul h1 li seçicileri) = 0013

h1 {color: blue}

Bu tanımlamanın değeri 0001’dir. CSS belirlemeye göre yüksek değer alanın özelliği uygulanır. Her ikisinde de h1 ve bir tanımlama yapılmıştır. Ancak tanımlama sistemleri farklıdır. XHTML kodumuzdaki h1 elemanını mavi değil sarı (yellow) olarak gösterecektir.

Aritmetik Hesaplama Tablosu

*Evrensel Seçiciler0000 (a = 0, b = 0, c = 0, d = 0)  
liEleman Adı0001 (a = 0, b = 0, c = 0, d = 1)
ul liEleman Adı0002 (a = 0, b = 0, c = 0, d = 2)  
div ul liEleman Adı0003 (a = 0, b = 0, c = 0, d = 3)  
input[type=”button”]Eleman Adı + özellik0011 (a = 0, b = 0, c = 1, d = 1)  
.sinifAdiSınıf Adı0010 (a = 0, b = 0, c = 1, d = 0)
div.sinifAdiEleman Adı + Sınıf Tanımı0011 (a = 0, b = 0, c = 1, d = 1)
#idAdiID Seçici adı0100 (a = 0, b = 1, c = 0, d = 0)
div#idAdiEleman Adı + ID Seçici Adı0101 (a = 0, b = 1, c = 0, d = 1)
style(attribute)Satır içi style tanımı1000 (a = 1, b = 0, c = 0, d = 0)

Eğer değer aynı olursa (örnek 0013 e 0013), bu durumda son yapılan tanımlamanın özellikleri uygulanır.

!important Değeri

Bir de öncelik için !important tanımlaması vardır. Eğer yukarıdaki koda !important eklersek;

h1 {color: blue !important;}

tanımlama yukarıdaki gibi değiştirildiğinde h1 elemanı mavi renkte görünecektir.

CSS basamaklı yapı konusunu gördük. Konu ile ilgili soru, öneri ya da fikirlerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.

https://yazilimdelisi.com/category/web-gelistirme/css/

Sosyal Medya Hesaplarımız

instagram logo
twitter logo

Son Eklenen Yazılar

Bir Cevap Yazın

%d blogcu bunu beğendi: