diff options
Diffstat (limited to 'files/tr/learn/css/building_blocks/cascade_and_inheritance/index.html')
| -rw-r--r-- | files/tr/learn/css/building_blocks/cascade_and_inheritance/index.html | 357 |
1 files changed, 357 insertions, 0 deletions
diff --git a/files/tr/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/tr/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..2e70a368d6 --- /dev/null +++ b/files/tr/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,357 @@ +--- +title: Kaynak sırası ve miras +slug: Öğren/CSS/CSS_yapi_taslari/Cascade_and_inheritance +tags: + - Acemi + - Art arda + - Beginner + - CSS + - Cascade + - Inheritance + - Learn + - Miras + - Oğitim + - kaynak siparişi + - kurallar + - ozgüllük + - rules + - source order + - specificity +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +<div>{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</div> + +<p>Bu dersin amacı, CSS'nin HTML'ye nasıl uygulandığına ve çakışmaların nasıl çözüldüğünü kontrol eden en temel kavranlar olan <a title="Cascade: Adım adım kontrol">art arda denetim</a>, <a title="Özel etken oranı: Kuralı uygulanacak en baskın seçici">özgüllük</a> ve kalıtım hakkındaki bilgilerini geliştirmektir.</p> + +<p>Bu ders üzerinde çalışmak, kursun diğer bazı bölümlerine göre daha az alaklı ve biraz daha akademik görünse de, bunları anlaman daha sonra karşılaşacağın sorunları daha kolay çözmeni sağlayacaktır! Bu bölümü dikkatlice çalışmanı ve dersi bitirmeden önce kavramları anladığını kontrol etmeni öneririm.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a href="/tr/docs/Learn/CSS/First_steps">CSS ilk adım</a>)</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td><a title="Cascade: Adım adım kontrol">ardarda denetim</a> ve <a title="Özel etken oranı: Kuralı uygulanacak en baskın seçici">özgüllük</a> hakkında bilgi edinmek ve CSS'de kalıtımın nasıl çalıştığını öğrenmek.</td> + </tr> + </tbody> +</table> + +<h2 id="Çakışan_kurallar">Çakışan kurallar</h2> + +<p>CSS, <strong>Basamaklı Stil Sayfaları</strong> anlamına gelir ve <em>basamaklandırmanın(<a title="Cascade: Basamaklama - adım adım kontrol">art arda denetimin</a>)</em> anlaşılması inanılmaz derecede önemlidir. Art arda denetimin davranış şekli, CSS'i anlamanın anahtarıdır.</p> + +<p>Bir gün, bir proje üzerinde çalışıyor olacaksın ve bir öğeye uygulanması gerektiğini düşündüğün CSS'in çalışmadığını göreceksin. Genellikle sorun, potansiyel olarak aynı öğeye uygulanabilecek iki kural oluşturmuş olmandır. <strong><a title="Cascade: Basamaklama - adım adım kontrol">Art arda Denetim</a></strong> ve <strong><a title="Özel etken oranı: Kuralı uygulanacak en baskın seçici">özgüllük</a></strong> denetim mekanizmaları bu tür bir etkileşim olduğu zaman bir kuralın geçerli olmasını sağlar. Öğenin stilini belirleyen kuralın sonucu beklediğin olmayabilir, bu nedenle bu mekanizmaların nasıl çalıştığını anlaman gerekir.</p> + +<p>Burada ayrıca önemli olan <strong>kalıtım</strong> kavramıdır; bu, varsayılan olarak bazı CSS özelliklerinin mevcut öğenin ebeveynlerinin sahip olduğu değerlerin bazılarını devraldığı anlamına gelir. Bu, beklemediğin bazı davranışlara neden olabilir.</p> + +<p>Anlattığım temel konulara hızlıca bir göz atarak başlayalım, ardından sırayla her birine bakıp birbirleriyle ve CSS'le nasıl etkileşim kurduklarını görelim. Bu, anlaşılması zor bir ders gibi gelebilir.</p> + +<h3 id="Art_arda_denetim"><a title="Cascade: Basamaklama - adım adım kontrol">Art arda denetim</a></h3> + +<p>Stil sayfaları <strong>basamaklıdır</strong> — çok basit bir şekilde bu, CSS kurallarının sırasının önemli olduğu anlamına gelir; eşit <a title="Özel etken oranı: Kuralı uygulanacak en baskın seçici">özgüllüğe</a> sahip olan iki kural uygulandığında, CSS en son gelen kural kullanılacaktır.</p> + +<p>Aşağıdaki örnekte, <code>h1</code> seçicisini kullandığım iki adet kuralım var. CSS'de yazılan bu kurallar aynı seçici olması ve aynı özgülleğe sahip olduklarından mavi(<code>blue</code>) olan kırmızı(<code>red</code>)'dan sonra geldiği için bu yarışı kazanır.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} </p> + +<p>Şöyle özetlemek gerekirse: CSS stil sayfasını ilk yorumlamaya başladığında stil sayfamızı adım adım okumaya başlar. İlk önce 1. satırda belirtilen <code>h1</code> etiketimizi seçip <code>color</code> niteliğini 2. satırda belirtiğimiz kırmızı(<code>red</code>) olarak tanımlar ve dosyamızı okumaya devam eder. 3. satırdaki } süstlü parantezle birlikte <code>h1</code> öğemizle ilgili tamınlamayı bitir. Tekrardan 4. satırdaki <code>h1</code> öğesinin <code>color</code> niteliğini 5. satırdaki mavi(<code>blue</code>) olarak tanımlar. CSS stil sayfamızın sonuna geldiğinde etiketteki nitelik değerlerini HTML sayfamızdaki öpelere uygulamaya başlar. <code>h1</code> öğesinin <code>color</code> değişkeninde en son atanan değer mavi(<code>blue</code>) olduğu için HTML sayfamızdaki <code>h1</code> öğemizin renk değeri mavi olur.</p> + +<p>Bir sonraki kısımda CSS'in öğelerimizin nitelik değerlerine atama yaparken göz önünde bulunan diğer bir kritere değineceğiz.</p> + +<h3 id="Özgüllük"><a title="Özel etken oranı: Kuralı uygulanacak en baskın seçici">Özgüllük</a></h3> + +<p>Özgüllük; Birden çok kuralın farklı seçicileri varsa, yinede aynı öğeye işaret ediyorsa tarayıcının hangi kuralın uygulanacağına karar vermesidir. Temelde, bir seçicinin seçiminin ne kadar özgül olacağının bir ölçüsüdür:</p> + +<ul> + <li>öğe seçici daha az belirsizdir — HTML sayfasında bulunan kendi türündeki tüm öğeleri seçer — bu yüzden daha düşük puan alır.</li> + <li>Sınıf seçici daha belirgindir — sadece HTML sayfasındaki <code>class</code> nitelik değerine sahip öğeleri seçer — bu yüzden daha yüksek puan alır.</li> +</ul> + +<p>Örnek zamanı! Aşağıda <code>.main-heading</code> sınıfına dahil <code><h1></code> etiketi seçicimiz var. CSS sayfamızdaki kurallar uygulanırken sınıf seçicinin özgüllüğü daha yüksek olduğu için öğe seçicimiz sınıf seçicimizden daha sonra gelmiş olmasına rağmen HMTL öğemize uygulanmaz. Bu sefer yarışı sınıf seçicimiz kazanır ve içeriğimiz kırmızı görünür.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} </p> + +<p>Bunuda şöyle özetlemek gerekirse: CSS stil sayfamızı yorumlamaya başladığında sayfamızı adım adım okumaya başlar. İlk önce <code>.main-heading</code> sınıfımızın color niteliğini kırmızı olarak tanımlar. Sonraki adımlarda <code>h1</code> öğemizin <code>color</code> nitelik değerini de mavi olarak tanımlar. Sayfamızın sonuna geldiğinde toplamış olduğu verileri HTML sayfamızdaki öğelere uygularken öğelerimizin tanımlarına bakarak ilerler. Sayfadaki tüm <code>h1</code> öğeleri renk tanımlarını blue olarak tanımlayacaktır fakat bizim HTML sayfamızda sadece tek bir <code>h1</code> öğesi olduğundan ve oda bir sınıfa dahil olduğu için, dahil olduğa sınıfa ait bir CSS kuralı olup olmadığına bakar. Eğer sınıfa ait bir kural varsa bu kuralı uygular yoksa öğe etiketi için tanımlamış olduğu kuralı uygular. CSS sayfamızda öğe seçici kuralı, sınıf seçici kuralından sonra gelmiş olsa bile özgüllük sınavını geçemez.</p> + +<p>Özgüllük puanlamasını ve diğer benzer nitelikleri daha sonra açıklayacağız.</p> + +<h3 id="Miras">Miras</h3> + +<p>Üst öğelere uygulanan CSS stillerin bir kısmı alt öğeler tarafından <strong>miras</strong> olarak alınır.</p> + +<p>Örneğin, <code>color</code> ve <code>font-family</code> niteliklerini bir öğeye ayarlarsan ve öğenin alt öğeleri doğrudan farklı bir renk ve yazı tipi değeri tanımlamazsan, nitelik verilen öğenin içinde bulunan tüm öğelerin renk ve yazı tipi üst öğenin tanımlandığı şekilde şekillendirilecektir.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} </p> + +<p>Bazı özellikler miras olarak alınmaz — Örneğin; {{cssxref("width")}} niteliğini %50 olarak ayarlarsan, tüm alt öğelerin genişlikleri üst öğelerin genişliğinin %50'si olacak şekilde tanımlanmaz. Durum bu şekilde olsaydı CSS'in kullanılması sinir bozucu olurdu!</p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: MDN CSS nitelikleri referans sayfalarında, nitelikler bölümünün altında, niteliğin miras alıp almadığıda dahil olmak üzere bir dizi veri noktasının listelendiği teknik bilgi tablosunu bulabilirsin. <a href="/tr/docs/Web/CSS/color#Specifications">Renk özelliği ayrıntıları</a>, bölümüne bakın.</p> +</div> + +<h2 id="Kavramların_birlikte_nasıl_çalıştığını_anlamak">Kavramların birlikte nasıl çalıştığını anlamak</h2> + +<p>Bu üç kavram (art arda denetim, özgüllük ve miras) birlikte hangi CSS'in hangi öğelere uygulanacağını kontrol eder; aşağıdaki bölümlerde birlikte nasıl çalıştıklarını göreceğiz. Biraz karmaşık görünebilir, Ancak CSS ile daha deneyimli hale geldikçe bunları hatırlamaya başlayacaksın ve unutursan her zaman buradaki ayrıntılara bakabilirsin! Deneyimli geliştiriciler bile tüm tedayları hatırlamıyor.</p> + +<p>Aşağıdaki video, bir sayfanın art arda kontrol, özgüllüğü ve daha fazlasını incelemek için Firefox Geliştirici Araçlarını nasıl kullanabileceğini gösterir:</p> + +<p>{{EmbedYouTube("Sp9ZfSvpf7A")}}</p> + +<h2 id="Mirası_anlamak">Mirası anlamak</h2> + +<p>Mirasla başlayacağız. Aşağıdaki örnekte , İki seviyeli sırasız listemiz bulunmakta {{HTMLElement("ul")}}. Dış taraftaki <code>ul</code> öğemize bir sınır, dolgu ve yazı tipi rengi verdik.</p> + +<p>Renk doğrudan çocuklara da uygulandı, aynı zamanda dolaylı çocuklara(torunlara) da uygulandı <code><li></code>. Daha sonra ikinci listemizi <code>special</code> sınıfını ekledik ve ona farklı bir renk uyguladık. Bu sınıftaki değerlerde ikicinci listemizin çocukları tarafından miras alındı.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} </p> + +<p>Genişlikler(yukarıda belirtildiği gibi), kenar boşlukları, dolgu ve sınırlar miras olarak alınmaz. Bir sınır, listemizin çocukları tarafından miras alınacak olsaydı, her liste öğesi bir sınır kazanırdı — muhtemelen istediğimiz bir etki değil!</p> + +<p>Hangi özellikler varsayılan olarak miras alınıp alınmadı büyük ölçüde sağduyuya bağlıdır.</p> + +<h3 id="Mirası_kontrol_etmek">Mirası kontrol etmek</h3> + +<p>CSS, mirası kontrol etmek için dört özel evrensel nitelik değeri sağlar. Her CSS niteliği bu değerleri kabul eder.</p> + +<dl> + <dt>{{cssxref("inherit")}}</dt> + <dd>Seçilen öğe niteliğinin miras alıp alamadığına bakılmaksızın, ebeveyninden miras alması sağlanır.</dd> + <dt>{{cssxref("initial")}}</dt> + <dd>Niteliğe tanımlanmış tüm kurallar yok sayılır ve tüm miraslar engellenilerek <a href="/tr/docs/Web/CSS/initial_value">başlangıç değerine</a> ayarlanır(sıfırlarnır. Varsayılan değerler de kullanılmaz).</dd> + <dt>{{cssxref("unset")}}</dt> + <dd>Seçilen öğe niteliği doğal olarak miras alabiliyorsa değeri miras olarak almasını, doğal olarak miras alamıyorsa değerinin sıfırlanmasını sağlar. Miras alabilen nitelikler için {{cssxref("inherit")}} gibi, alamayan nitelikler için {{cssxref("initial")}} gibi davranır.</dd> + <dt>{{cssxref("revert")}}</dt> + <dd>Seçilen öğe niteliği doğal olarak miras alabiliyorsa değeri miras olarak almasını, doğal olarak miras alamıyorsa değerin tarayıcının veya kullanıcının varsayılan stil sayfasında belirtilmiş varsayılan değerin tanımlanmasını sağlar.</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: Bunların nasıl çalıştıkları hakkında daha fazla bilgi için {{SectionOnPage("/tr/docs/Web/CSS/Cascade", "CSS Kökeni bildirisi")}}'ne bak.</p> +</div> + +<p>Bir bağlantı listesine bakabilir ve evrensel değerlerin nasıl çalıştığını keşfedebilirsin. Aşağıdaki etkileşimli örnek, CSS ile oynamana ve değişiklik yaptığında ne olacağını görmene onlanak tanır. Kodla oynamak HTML ve CSS ile başa çıkmanın en iyi yoludur.</p> + +<p>Örnek:</p> + +<ol> + <li>İkinci liste öğesine <code>my-class-1</code> sınıfı uygulanmıştır. Bu sınıf <code><a></code> öğesinin rengini miras alacak şekilde ayarlar. Kuralı kaldırdığında bağlantı rengi nasıl gözükür?</li> + <li>Üçüncü ve dördüncü halkaların neden oldukları renk değişimlerini anlıyor musun? Eğer anlamadıysan yukarıdaki açıklamayı yeniden gözden geçir.</li> + <li><code><a></code> öğesinin yeni bir renk tanımlarsan hangi öğelerin rengi değişir. Örnek <code>a { color: red; }</code>?</li> +</ol> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} </p> + +<h3 id="Tüm_öğelerin_değerlerini_sıfırlama">Tüm öğelerin değerlerini sıfırlama</h3> + +<p>CSS'in <code>all</code> niteliği, öğelerin mirası kontrol eden değerlerini öğenin tüm niteliklerine uygulamak için kullanılır. Bu miras kontrol değerlerinin herhangi biri için kullanılabilir(<code>inherit</code>, <code>initial</code>, <code>unset</code> veya <code>revert</code>). Yeni tanımlara başlamadan önce bilinen bir başlangıç noktasına geri dönebilmen için stillerde yapılan değişiklikleri geri almanın uygun bir yoludur.</p> + +<p>Aşağıdaki örnekte iki adet alıntı bloğu var(<code>blockquote</code>). CSS sayfamızda alıntı bloğuna uygulanan bir stilimiz var ve sınıf tanımımızda da öğelerin tüm niteliklerindeki miras kontrol değerini tek seferde <code>unset</code> değerini atayan bir bildirimimiz var: <code>all</code>: <code>unset</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} </p> + +<p> <code>all</code> niteliğine mevcut diğer değerleri atayıp farkın neler olduğunu gözlemle.</p> + +<h2 id="Ardarda_kontrolü_anlamak">Ardarda kontrolü anlamak</h2> + +<p>HTML yapısının derinliklerine yerleştirilmiş bir paragrafın, gövdeye uygulanan bir CSS ile neden aynı renk olduğunu şimdi anlıyoruz. Ayrıca belgenin herhangi bir noktasında bir öğeye uygulanan CSS'i nasıl değiştirebileceğimizi de biliyoruz. Şimdi, birden fazla seçicinin bir öğeye stil uyguladığında, art arda kontrolün hangi CSS kuralının geçerli olduğunu nasıl tanımladığına düzgün bir şekilde bakacağız.</p> + +<p>Burada önem sırasına göre sıralanan, dikkate alınması gereken üç etken vardır. Sonraki bir öncekini geçersiz kılar:</p> + +<ol> + <li><strong>Kaynak sırası</strong></li> + <li><strong>Özgüllük</strong></li> + <li><strong>Önem</strong></li> +</ol> + +<p>Tarayıcıların tam olarak hangi CSS'in uygulanması gerektiğini nasıl anladığını görmek için bunları irdeliyeceğiz.</p> + +<h3 id="Art_arda_denetim_2">Art arda denetim</h3> + +<p>Art arda denetim için kaynak sırasının ne kadar önemli olduğunu zaten görmüştük. Tam olarak aynı ağırlığa sahip birden fazla kuralın varsa, en son gelen kural dikkate alınır. Bunu öğeleri biçimlendirilme aşaması anına, en yakın olan kuralın kazandığı bir eleme olarak düşünebilirsin. Kaynak sırasındaki seçicilerin hedef kitlesi geneldir, HTML sayfasında seçicinin belirttiği bütün öğeleri seçer.</p> + +<h3 id="Özgüllük_2"><a title="Özel etken oranı: Kuralı uygulanacak en baskın seçiciyi belirleme">Özgüllük</a></h3> + +<p>Kaynak sırasının önemli olduğu gerçeğini anladık; fakat bir öğenin stili için yapmış olduğun kuralın, stil sayfandaki kaynak sırasında sonda olmasına rağmen ondan bir veya daha önceki kuraldan etkilendiğini göreceksin. Bunun nedeni, önceki kuralın <strong>daha yüksek özgüllüğe</strong> sahip olmasıdır — hangi kuralın özgüllüğü daha yüksek ise, tarayayıcı öğeleri şekillendirecek kural olarak onu seçer. Çünkü özgüllüğü yüksek olan seçiciler(<code>class</code>, <code>id</code> vb.) HTML sayfasında bulunan bütün elamanları değilde tanımlandıkları öğenin/öğelerin üzerinde etkili olduklarından hedefleri daha belirgindir. Ayrıca eşit özgüllüğe sahip seçiciler kendi aralarında kaynak sırasına tabidir.</p> + +<p>Bu derste daha önce gördüğümüz gibi, sınıf seçicinin ağırlığı öğe seçiciden daha fazladır, bu nedenle sınıfta tanımlanan özellikler öğeye doğrudan uygulanan şekillleri geçersiz kılar.</p> + +<p>Burada dikkat edilmesi gereken şey, öğeye uygulanan kurallardaki tüm nitelikleri değilde sadece aynı nitelik üzerinde tanımlanmış kuralları etkilemesidir. Örneğin ilk kuralda renk ve font tanımı olsun, özgüllüğü yüksek veya sonra gelen kuralda sadece renk tanımı varsa bir önceki veya düşük özgülleğe sahip kuraldaki font tanımını etkilemez.</p> + +<p>Bu davranış, CSS'de tekrarı önlemeye yardımcı olur. Yaygın bir uygulama, temel öğeler için genel stilleri tanımlamak ve ardından farklı olanlar için sınıflar oluşturmaktır. Örneğin; aşağıdaki stil sayfasında 2. seviye başlıklar için genel stilleri tanımladık ve sonra sadece bazı özellikleri ve değerleri değiştiren bazı sınıflar oluşturduk. Başlangıçta tanımlanan değerler tüm başlıklara uygulanır, daha sonra sınıflarla birlikte başlıklara daha karakteristik değerler uygulanır.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} </p> + +<p>Şimdi tarayıcının özgüllüğü nasıl hesaplayacağına bir göz atalım. Bir öğe seçicinin düşük özgüllüğe sahip olduğunu ve bir sınıf tarafından üzerine yazılabileceğini zaten biliyoruz. Esasen bu seçicilere verilen puan cinsinden bir değerdir, farklı türdeki seçicilere ait puanlarını toplamak bize söz konusu seçicinin özgüllük değerini verir ve bu da diğer kuralların sahip oldukları puan ile karşılaştırılır.</p> + +<p>Bir seçicinin sahip olduğu özgüllük miktarı dört farklı değer (veya bileşen) kullanılarak ölçülür, bunlar binler basamağı, yüzler basamağı, onlar basamağı ve birler basamağı olarak düşünülebilir.</p> + +<ol> + <li><strong>Binler basamağı</strong>: Bir bildirim HTML içerisinde tanımlarken {{htmlattrxref("style")}} niteliğiyle şekillendiriliyorsa bu sütuna bir puan eklenir. Bu tür bildirimlerin seçicileri yoktur, bu nedenle özgüllükleri her zaman 1000'dir.</li> + <li><strong>Yüzler basamağı</strong>: Öğeye tanımlanmış bir kimlik için seçici <code>(id</code>) varsa, bu sütuna bir puan eklenir.</li> + <li><strong>Onlar Basamağı</strong>: Her bir sınıf(<code>class</code>), öznitelik veya genel seçicide bulunan sözde sınıf için bu sütuna bir puan eklenir.</li> + <li><strong>Birler</strong>: Genel seçici içinde bulunan her bir öğe veya sözde öğe için bu sütunda bir puan eklenir.</li> +</ol> + +<div class="note"> +<p><strong>Not</strong>: Evrensel seçici (<code>*</code>), birleştirici seçiciler (<code>+</code>, <code>></code>, <code>~</code>, ' '), ve olumsuzluk ifadesi sözde sınıfının (<code>:not</code>) özgüllük üzerinde herhangi bir etkisi yoktur.</p> +</div> + +<p>Aşağıdaki tablo, birkaç seçilmiş örneği göstermektedir. Bunları gözden geçirmeye ve onlara verdiğimiz özgüllüğü anlamaya çalış. Seçicileri henüz ayrıntılı olarak ele almadık, istersen her bir seçicinin ayrıntılarını MDN <a href="/tr/docs/Web/CSS/CSS_Selectors">seçiciler kaynağına </a>bakabilirsin.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Seçici</th> + <th scope="col">Binler</th> + <th scope="col">Yüzler</th> + <th scope="col">Onlar</th> + <th scope="col">Birler</th> + <th scope="col">Toplam özgüllük</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>h1</code></td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>1</td> + <td>0001</td> + </tr> + <tr> + <td><code>h1 + p::first-letter</code></td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>3</td> + <td>0003</td> + </tr> + <tr> + <td><code>li > a[href*="tr"] > .inline-warning</code></td> + <td>0</td> + <td>0</td> + <td>2</td> + <td>2</td> + <td>0022</td> + </tr> + <tr> + <td><code>#identifier</code></td> + <td>0</td> + <td>1</td> + <td>0</td> + <td>0</td> + <td>0100</td> + </tr> + <tr> + <td>{{htmlattrxref("style")}} niteliği. İçinde seçici yok.</td> + <td>1</td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>1000</td> + </tr> + </tbody> +</table> + +<p>Devam etmenden önce bir örneğe bakalım.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} </p> + +<p>Peki burada neler oluyor? İlk önce, bu örneğin ilk yedi kuralıyla ilgileniyoruz ve fark edeceğin gibi, bunların özgüllük değerlerini her birinden önce yoruma ekledim.</p> + +<ul> + <li>İlk iki seçici, bağlantının arka plan renginin stili üzerinde rakabet ediyor — ikincisi kazanır ve arka plan rengi mavi yapar çünkü zincirde fazladan bir kimlik <code>id</code> seçicisi vardır: özgüllüğü 201'e karşı 101'dir.</li> + <li>Üçüncü ve dördüncü seçiciler, bağlantının metin rengi üzerinde rekabet ediyor — ikincisi kazanır ve metni beyaz yapar çünkü bir tane daha az öğe seçiciye sahip olmasına rağmen, eksik olanın yerine bir tane sınıf seçiciye sahip. Yani kazanan özgüllük 113'e 104'tür.</li> + <li>Seçiciler 5-7, üzerine gelindiğinde bağlantının kenarlığının üzerinde rekabet ediyor. Seçici altı, 23'e 24'le beşe kaybeder — zincirde bir adet daha az seçiciye sahiptir. Bununla birlikte, seçici yedi, hem beşi hemde altıyı yener — zincirde beşle aynı sayıda alt seçiciye sahip olmasına rağmen bir öğe seçicinin yerinde bir sınıf seçici vardır. Yani kazanan 23 ve 24'de karşı 33'tür.</li> +</ul> + +<ol> +</ol> + +<div class="note"> +<p><strong>Not</strong>: Bu, anlaşılma kolaylığı açısından yalnızca bir örnektir. Gerçekte, her seçici türünün, daha düşük özgüllük dizeyine sahip seçiciler tarafından üzerine yazılamayan kendi özgüllük düzeyi vardır. Örneğin, bir <em>milyon</em> <strong>sınıf(<code>class</code>) </strong>seçici, bir <strong>kimlik(<code>id</code>) </strong>seçicinin üzerine yazamaz.</p> + +<p>Özgüllüğü değerlendirmenin daha doğru bir yolu, özgüllük seviyelerini ayr ayrı en yüksekten başlayarak en düşüğe doğru puanlamak olacaktır. Yanlızca belirli bir düzeydeki seçici puanları arasında bir bağ olduğunda, bir sonraki düzeyi aşağı doğru değerlendirmen gerekir; aksi takdirde, daha yüksek özgüllük seviyelerinin üzerine asla yazmacakları için daha düşük özgüllük seviyesi seçicleri göz ardı edebilirsin.</p> +</div> + +<h3 id="!important_!önemli">!important (!önemli)</h3> + +<p>Yukarıdaki hesaplamaların tümünü geçersiz kılmak için kullanabileceğin özel bir CSS <em>bildirimi</em> var, ancak onu kullanırken çok dikkatli olmalısın — <code>!important</code>. Bu, belli bir özelliği-şekli belirli bir öğeye veya öğelere uygulamak istediğimiz tanımları uygulanabilmesi için, kademenin diğer tüm kurallarını geçersiz kılar.</p> + +<p>Bir tanesinin bir kimliğe sahip iki tane paragrafımızın olduğu bu örneğe bir göz atın.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} </p> + +<p>Neler olduğunu görmek için bunu gözden geçirelim — anlamakta zorlanıyorsan ne olacağını görmek için bazı özellikleri kaldırmayı deneyin:</p> + +<ol> + <li>Üçüncü kuralın {{cssxref("color")}} ve {{cssxref("padding")}} değerlerinin uygulandığını, fakat {{cssxref("background-color")}} değerinin uygulanmadığını göreceksin. Neden? Gerçekten üçü de kesinlikle uygulanmalıdır, çünkü kaynak sıradaki kurallar genellikle daha önceki kuralları geçersiz kılar.</li> + <li>Bununla birlikte, yukarıdaki kurallar kazanır, çünkü sınıf seçiciler öğe seçilerden daha yüksek özgüllüğe sahiptir.</li> + <li>Her iki elamanda <code>better</code> sınıfına ({{htmlattrxref("class")}}) atanmış, ama bir tanesi <code>winning</code> kimliğine({{htmlattrxref("id")}}) atanmış. Kimliklerin sınıflardan <em>daha yüksek bir özgüllüğü</em> olduğundan (bir sayfadaki her benzersiz kimliğe sahip yalnızca bir öğe olabilir, ancak aynı sınıfa sahip birçok öğe bulunabilir — kimlik seçicileri hedefledikleri öğe açısından daha belirgindir), 1 piksel kalınlığındaki siyah kenarlık 2. nesneye uygulanmalı, ilk öğe gri arka plan rengini almalı ve sınıf tarafından belirtildiği gibi kenarlık olmamalıdır.</li> + <li>2. elamanın arka planı kırmızı (<code>red)</code> ancak hiçbir sınırı yok. Neden? Çünkü ikinci kuraldaki bildirim nedeniyle: <code>!important</code> — Kimlik(<code>ID</code>) daha yüksek bir özgüllüğe sahip olsa bile, <code>border: none</code> nitelik tanımlaması <code>!important</code> bildirimine sahip olduğu için tüm kuralları aşarak kazanmış olur.</li> +</ol> + +<div class="note"> +<p><strong>Not</strong>: <code>!important</code> bildirimini geçersiz kılmanın tek yolu, daha sonra kaynak sırasına veya aynı özgüllüğe sahip daha sonraki kaynak sırasına veya daha yüksek özgüllüğe sahip bir <code>!important</code> bildiriminde bulunmak.</p> +</div> + +<p><code>!important</code> bildiriminin var olduğunu bilmek, başka kişilerin kodlarında onunla karşılaştığında ne olduğunu bilmen için yararlıdır. <strong>Ancak, kesinlikle mecbur kalmadıkça asla kullanmamanı şiddetle taviye ederim</strong>. <code>!important</code> Kaynak sırasının normal çalışma şeklini değiştirir. Bu nedenle büyük bir stil sayfasında CSS sorunlarının hata ayıklamasını gerçekten zorlaştırır.</p> + +<p>Kullanmanı gerektirebilecek bir duruma örnek vermek gerekirse, çekirdek CSS modüllerini düzenleyemediğin bir CMS üzerinde çalışırken ve başka bir şekilde geçersiz kılınamayan bir stili gerçekten geçersiz kılmak istediğinde faydalı olabilir. Ama farklı bir şekilde yapabiliyorsan kullanma.</p> + +<h2 id="CSS_konumunun_etkisi">CSS konumunun etkisi</h2> + +<p>Son olarak, bir CSS bildiriminin öneminin, hangi stil sayfasında belirtildiğine bağlı olduğunu da bilmende fayda var — kullanıcılar, geliştiricinin stillerini geçersiz kılmak için özel stil sayfaları ayarlayabilir, örneğin, kullanıcı görme engelli olabilir ve daha kolay okuma sağlamak için ziyaret ettiği tüm web sayfalarında yazı tipi boyutunu normal boyutun iki katı olacak şekilde ayarlayabilir..</p> + +<h2 id="Özet">Özet</h2> + +<p>İhtilaflı beyanlar aşağıdaki sırayla uygulanacak, daha sonraki beyanlar öncekileri geçersiz kılacaktır:</p> + +<ol> + <li>Kullanıcı aracındaki stil sayfaları (ör. Tarayıcının varsayılan stilleri, başka bir stil ayarlanmadığında kullanılır).</li> + <li>Kullanıcı stil sayfalarındaki normal bildirimler (bir kullanıcı tarafından belirlenen şekillendirmeler).</li> + <li>Yazar şekillendirme sayfasındaki normal bildirimler (bunlar, web geliştiricileri olarak bizim tarafımızdan belirlenen şekillendirmelerdir).</li> + <li>Yazar stil sayfalarındaki önemli bildirimler.</li> + <li>Kullanıcı stil sayfalarındaki önemli bildirimler.</li> +</ol> + +<p>Web geliştiriclerinin şekillendirme sayfalarının kullanıcı şekillendirme sayfalarını geçersiz kılması mantıklıdır, böylece tasarım amaçlandığı gibi korunabilir, ancak bazen kullanıcıların yukarıdaki belirtildiği gibi web geliştirici stillerini geçersiz kılmak için iyi nedenleri olabilir. Bunu da <code>!important</code> bildirimini kullanarak sağlayabilirler.</p> + +<h2 id="Becerilerini_test_et!">Becerilerini test et!</h2> + +<p>Bu makalede bir çok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri kavradığını doğrulamak için senin için bazı testler hazırladım. — bk. <a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_tasks">Becerilerini test edin: Kaynak sırası.</a></p> + +<h2 id="Sıradaki_ne">Sıradaki ne</h2> + +<p>Bu makalenin çoğunu anladıysan, tebrik ederim — CSS'in temel makaniğine aşina olmaya başladın. Sırada, seninle seçicilere ayrıntılı olarak bakacağız.</p> + +<p>Kaynak sırasını, özgüllüğü ve mirası tam olarak anlamadıysan endişelenme! Bunlar, şu ana kadar derste ele aldığımız en karmaşık ve bazen profesyonel web geliştiricilerinin bile zorlandığı konulardır. Kursa devam ederken bu makaleye birkaç kez dönmeni ve bu konular üzerinde biraz daha kafa yormanı tavsiye ederim.</p> + +<p>Beklendiği gibi uygulanmayan şekillendirmelerle ilgili garip sorunlarla karşılaşmaya başlarsan buraya tekrar bak. Özgüllük sorunu olabilir.</p> + +<p>{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="Bu_kısımda">Bu kısımda</h2> + +<ol> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> + <ul> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> + </ul> + </li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> +</ol> |