CSS’de Tanımlamalar ve Etkinlikleri(Specificity)
CSS’de etkinliğin anlamı stil çatışması(aynı elemente birden fazla tanım yapıldığında) olduğunda kullanılan hangi kodun web tarayıcıları tarafından yorumlanacağını belirlemektir.
Bir XHTML sayfamıza iki adet stil dosyası eklediğimizi düşünelim. Fakat bu stil dosyalarımızdan birinde h1 elementine bold özelliği atanmışken diğer stil dosyamızda italiktik özelliği atanmış. Bu durumda web tarayıcıları hangisini uygulayacaktır. Hangisinin etkin olduğunu bulup ona göre sayfayı yorumlayacaktır.
Burada iki tanımlamanın yakınlık dereceleri aynı. 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 (inline-kod)
- Stil dosyasındaki tanımlı ID’lerin sayısına
- Sınıf tanımlalarının sayısına
- Seçicilerin sayısına bakar
Web tarayıcısı bu sayıları toplamaz. Yalnızca rakamları yanyana 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 ikiyüz otuz değeri elde edilir.
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 (secili 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′e bir tanımlama yapılmıştır. Ancak tanımlama sistemleri farklıdır. XHTML kodumuzdaki h1 elementimizi mavi değil sarı(yellow) olarak gösterecektir.
Bide ö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 elementimiz mavi renkde görünecektir.
Eğer değer aynı olursa(mesela 0013 e 0013) ne olur, bu durumda son yapılan tanımlamanın özellikleri uygulanır.
[...] #solOrtaAlan table td p.oley tanımını niye p.oley şeklinde yapmıyoruzda bu kadar uzun yapıyoruz derseniz, üstten gelen kalıtsal tanımlar alt elemanları da etkiliyor bu etkiyi kaldırmak için bu şekilde tanımını uzatarak bu tanımı daha etkin yapıyoruz. Konu hakkında detaylı bilgi almak için tıklayınız. [...]
ne zamandır bu konu üzerindeyim halada bişey anlayamadım çok karışık bir konu örnek yaptım 5 6 tane hiçbirini dogru bir sekilde tarayıcıda calısmadı yardımcı olursan sevinirim fatih abi.
Sorun nedir?
bu konuyu hiç anlayamadım fatih abi şöyle bir örnek yaptım olumsuz sonuc aldım cok kafam karıstı
Örnek :
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<style type="text/css">
ul h1 li.secili {
color: yellow;
}
h1 {
color: blue !important;
}
</style>
</head>
<body>
<h1><li class="secili">CSS derslerimiz devam ediyor.</h1>
</body>
</html>
[...] Fatih Hayrioğlu ‘na danışarak öğrendiğim css baskın seçici konusu. Merak edenler için burdan. Bir diğer konu ise class üzerinden bir özellik tanımlandığında diğer class kısmi [...]
[...] !important css ile etkinlik için kullanılan bir etikettir. !important tanımlı özellik daha önce yapılmış aynı özelliğin üzerine çıkar. CSS ile etkinlik hakkında daha fazla bilgi için tıklayınız. [...]
http://www.fatihhayrioglu.com/?p=42
bumakaleye bir göz at
merhaba fatih abi
yazılarını inceledim ama göremdiğim bişey var yada ben görememişimdir=)
kafama takılan şeyler
şimdi ayrı bir css dosyam var ve bundan bazı kısımları çağırmak istiyorum ve o kısımlar şöyle
#body{....}
.body1 {...} bu ikisni çağırmamdaki fark nedir yada farkı nedir . ve # nin ?
birde diyelimki
#td{...}
.td.sidebar {....}
.td.main {....} bunları çağırmamdaki fark nedir?
#td ye atadığım özeliklerin aynen td.sidebarada geçmesini fakat td.sidebara ayrıca bikaç özellik eklemek istiyorum bunun kullanımını nasıl yapabilrim?
Cevapların için şimdiden teşekkür ederim fatih abi=)
benim bir sorum olacak.
diyelim çok uzun bir metnin içinde, farklı yerlerde çokça “kakule” kelimesi geçiyor. ve ben css dosyasının içinde bu “kakule” için kullanacağım özellikleri hazırladım.
fakat asp dosyamın içinde tek tek kakuleleri bulup bunlara tek tek o etiketi tanımlamam mı gerekiyor? bunun daha kolay bir yolu yok mu?