Kadir Özdemir

  • Ben Kimim
  • PHP
  • Sencha Touch
  • Home/
  • css /
  • css de Specificity (özel etken orani)

css de Specificity (özel etken orani)

Skorp 12.03.2009 1 Comment

bugünki yazimda css de Specificity nedir nasil hesaplanir ona bakacagiz.
Diyelimki bir websitemiz var icinde iki ayri stil dosyamiz bulunmakta.

Dosya bir: a.css
Dosya iki: b.css

önce a.css ekleniyor html dosyamiza ardindan ise b.css

Iki dosyamizdada h1 e verilen degisik özellikler varsayalim.

a.css

h1 {
color:#569dd3;
}

b.css

h1{
color:#ff0000;
}

böyle bir cakismada en son eklenen css dosyasindaki özelligi kullanacaktir Browserler, yani b.css icindeki h1 özelliklerini.

a.css i biraz degistirelim

#anatablo h1 {
color:#569dd3;
}

Simdi ise a.css deki özellik kullanilicaktir.

Neden?

Browserler herhangi bir cakismada özel etkinlik oranini hesaplar ve en yüksek olanini kullanir.
Iki oranda ayni ise, ozaman en son eklenen kullanilir.

Browserler nasil hesapliyorlar simdi bir bakalim!

Hesaplama yi dört sütünlü bir tablo ile yapacagiz.
A,B,C,D sütünlerimiz var default olarak iclerinde 0 yaziyor.

– A en yüksek etkinligi style özellikleri veriyor, inline stil kullanmissak A sütününe 1 yaziyoruz.
– B tanimlanmis Id lerin sayisini yaziyoruz
– C tanimlanmis Sinif (+pseudoclass) larin sayisini yaziyoruz
– D secicilerin (html elemanlarinin) toplam sayisini yaziyoruz

sayilari yan yana yaziyoruz ve suna benzer bir örnek tablo cikiyor karsimiza.
Specifiy

simdi yukardaki bizim örnegimizi hesapliyalim ve bakalim gercekten a.css deki özelliklermi kullanilmali.

#anatablo h1 toplam sayisi 0101
b.css deki h1 in toplam sayisi 0001

101 1 den büyük oldugu icin a.css deki özellik kullaniliyor.

cakismayi asmanin kücük degisik bir yolu daha var.

hesaplamalara göre a.css yüklenecegi halde siz israrla b.css deki özelligi kullanmak istiyorsaniz !important kullanmaniz gerekir.

b.css

h1{
color:#ff0000 !important;
}

yaparsaniz kesinlikle b.css deki özellik kullanilicaktir.

kolay gelsin

Skorp
2009-03-12
Tags:
css
Share story:
← PreviousZend Framework türkiye Google group
Next →Zend Framework dispatch islemi

Written by Skorp

View all articles by Skorp

Website: http://www.skorp.eu

Related Articles

  • Javascript ve xHtml

  • Link sonuna isaret

One comment

  1. beginercoder
    Ekim 03, 2014 at 10:57 am

    yararlı bilgiler.

Leave a Comment Cancel Reply

Your email address will not be published. Required fields are marked *

Social networks

Etiket Bulutu

Android Bilgisayar & Internet C# Cms css diger Kodlar featured Genel Java Javascript Linux Mobile PHP Silverstripe typo3 Veritabani Windows Zend Framework

Links

  • H E R K O N U
  • Hüseyin Koyun
  • Urban23k

Son Yorumlar

  • Primary Key – Unique ve Index nedir? için Onur
  • Centos de apache, php ve mysql kurulumu için sezer fidancı
  • React Native – Kurulum için React Native | Kadir Özdemir
  • React Native için React Native – Kurulum | Kadir Özdemir
  • Ben Kimim için serkan

Twitter

Follow @skorp54
There is an error in twitter widget, please make sure that you have set up the Twitter API settings
  • Ben Kimim
  • PHP
  • Sencha Touch

Arsivler

Kategoriler

Copyright © 2014 webberz.at