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çiciler | 0000 (a = 0, b = 0, c = 0, d = 0) |
| li | Eleman Adı | 0001 (a = 0, b = 0, c = 0, d = 1) |
| ul li | Eleman Adı | 0002 (a = 0, b = 0, c = 0, d = 2) |
| div ul li | Eleman Adı | 0003 (a = 0, b = 0, c = 0, d = 3) |
| input[type=”button”] | Eleman Adı + özellik | 0011 (a = 0, b = 0, c = 1, d = 1) |
| .sinifAdi | Sınıf Adı | 0010 (a = 0, b = 0, c = 1, d = 0) |
| div.sinifAdi | Eleman Adı + Sınıf Tanımı | 0011 (a = 0, b = 0, c = 1, d = 1) |
| #idAdi | ID Seçici adı | 0100 (a = 0, b = 1, c = 0, d = 0) |
| div#idAdi | Eleman 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
