Kaynak sırası ve miras

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  art arda denetim, özgüllük ve kalıtım hakkındaki bilgilerini geliştirmektir.

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.

Ön koşullar: Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesidosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç: ardarda denetim ve özgüllük hakkında bilgi edinmek ve CSS'de kalıtımın nasıl çalıştığını öğrenmek.

Çakışan kurallar

CSS, Basamaklı Stil Sayfaları anlamına gelir ve basamaklandırmanın(art arda denetimin) anlaşılması inanılmaz derecede önemlidir. Art arda denetimin davranış şekli, CSS'i anlamanın anahtarıdır.

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. Art arda Denetim ve özgüllük 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.

Burada ayrıca önemli olan kalıtım 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.

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.

Art arda denetim

Stil sayfaları basamaklıdır — çok basit bir şekilde bu, CSS kurallarının sırasının önemli olduğu anlamına gelir; eşit özgüllüğe sahip olan iki kural uygulandığında, CSS en son gelen kural kullanılacaktır.

Aşağıdaki örnekte, h1 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(blue) olan kırmızı(red)'dan sonra geldiği için bu yarışı kazanır.

 

Şö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 h1 etiketimizi seçip color niteliğini 2. satırda belirtiğimiz  kırmızı(red) olarak tanımlar ve dosyamızı okumaya devam eder. 3. satırdaki }  süstlü parantezle birlikte  h1 öğemizle ilgili tamınlamayı bitir. Tekrardan 4. satırdaki h1 öğesinin  color niteliğini 5. satırdaki mavi(blue) olarak tanımlar. CSS stil sayfamızın sonuna geldiğinde etiketteki nitelik değerlerini HTML sayfamızdaki öpelere uygulamaya başlar. h1 öğesinin color değişkeninde en son atanan değer mavi(blue) olduğu için HTML sayfamızdaki h1 öğemizin renk değeri mavi olur.

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.

Özgüllük

Ö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:

  • öğ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.
  • Sınıf seçici daha belirgindir — sadece HTML sayfasındaki class nitelik değerine sahip öğeleri seçer — bu yüzden daha yüksek puan alır.

Örnek zamanı! Aşağıda .main-heading sınıfına dahil <h1> 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.

 

Bunuda şöyle özetlemek gerekirse: CSS stil sayfamızı yorumlamaya başladığında sayfamızı adım adım okumaya başlar. İlk önce .main-heading sınıfımızın color niteliğini kırmızı olarak tanımlar. Sonraki adımlarda h1 öğemizin color 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 h1 öğeleri renk tanımlarını blue olarak tanımlayacaktır fakat bizim HTML sayfamızda sadece tek bir h1 öğ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.

Özgüllük puanlamasını ve diğer benzer nitelikleri daha sonra açıklayacağız.

Miras

Üst öğelere uygulanan CSS stillerin bir kısmı alt öğeler tarafından miras olarak alınır.

Örneğin, color ve font-family 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.

 

Bazı özellikler miras olarak alınmaz  — Örneğin; 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!

Not: 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. Renk özelliği ayrıntıları, bölümüne bakın.

Kavramların birlikte nasıl çalıştığını anlamak

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.

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:

Mirası anlamak

Mirasla başlayacağız. Aşağıdaki örnekte , İki seviyeli sırasız listemiz bulunmakta <ul>. Dış taraftaki ul öğemize bir sınır, dolgu ve yazı tipi rengi verdik.

Renk doğrudan çocuklara da uygulandı, aynı zamanda dolaylı çocuklara(torunlara) da uygulandı <li>. Daha sonra ikinci listemizi special 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ı.

 

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!

Hangi özellikler varsayılan olarak miras alınıp alınmadı büyük ölçüde sağduyuya bağlıdır.

Mirası kontrol etmek

CSS, mirası kontrol etmek için dört özel evrensel nitelik değeri sağlar. Her CSS niteliği bu değerleri kabul eder.

inherit
Seçilen öğe niteliğinin miras alıp alamadığına bakılmaksızın, ebeveyninden miras alması sağlanır.
initial
Niteliğe tanımlanmış tüm kurallar yok sayılır ve tüm miraslar engellenilerek başlangıç değerine ayarlanır(sıfırlarnır. Varsayılan değerler de kullanılmaz).
unset
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 inherit gibi, alamayan nitelikler için initial gibi davranır.
revert
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.

Not: Bunların nasıl çalıştıkları hakkında daha fazla bilgi için CSS Kökeni bildirisi in [Page not yet written]'ne bak.

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.

Örnek:

  1. İkinci liste öğesine  my-class-1 sınıfı uygulanmıştır. Bu sınıf  <a> öğesinin rengini miras alacak şekilde ayarlar. Kuralı kaldırdığında bağlantı rengi nasıl gözükür?
  2. Üçü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.
  3. <a>  öğesinin yeni bir renk tanımlarsan hangi öğelerin rengi değişir. Örnek a { color: red; }?

 

Tüm öğelerin değerlerini sıfırlama

CSS'in all 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(inherit, initial, unset veya revert). 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.

Aşağıdaki örnekte iki adet alıntı bloğu var(blockquote). 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 unset değerini atayan bir bildirimimiz var:  all: unset.

 

 all niteliğine mevcut diğer değerleri atayıp farkın neler olduğunu gözlemle.

Ardarda kontrolü anlamak

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.

Burada önem sırasına göre sıralanan, dikkate alınması gereken üç etken vardır. Sonraki bir öncekini geçersiz kılar:

  1. Kaynak sırası
  2. Özgüllük
  3. Önem

Tarayıcıların tam olarak hangi CSS'in uygulanması gerektiğini nasıl anladığını görmek için bunları irdeliyeceğiz.

Art arda denetim

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.

Özgüllük

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 daha yüksek özgüllüğe 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(class, id 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.

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.

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.

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.

 

Ş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.

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.

  1. Binler basamağı: Bir bildirim HTML içerisinde tanımlarken 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.
  2. Yüzler basamağı: Öğeye tanımlanmış bir kimlik için seçici (id) varsa, bu sütuna bir puan eklenir.
  3. Onlar Basamağı: Her bir sınıf(class), öznitelik veya genel seçicide bulunan sözde sınıf için bu sütuna bir puan eklenir.
  4. Birler: Genel seçici içinde bulunan her bir öğe veya sözde öğe için bu sütunda bir puan eklenir.

Not: Evrensel seçici (*), birleştirici seçiciler (+, >, ~, ' '), ve olumsuzluk ifadesi sözde sınıfının (:not) özgüllük üzerinde herhangi bir etkisi yoktur.

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  seçiciler kaynağına bakabilirsin.

Seçici Binler Yüzler Onlar Birler Toplam özgüllük
h1 0 0 0 1 0001
h1 + p::first-letter 0 0 0 3 0003
li > a[href*="tr"] > .inline-warning 0 0 2 2 0022
#identifier 0 1 0 0 0100
style niteliği. İçinde seçici yok. 1 0 0 0 1000

Devam etmenden önce bir örneğe bakalım.

 

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.

  • İ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 id seçicisi vardır: özgüllüğü 201'e karşı 101'dir.
  • Üçü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.
  • 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.

Not: 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 milyon sınıf(class) seçici, bir kimlik(id) seçicinin üzerine yazamaz.

Ö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.

!important (!önemli)

Yukarıdaki hesaplamaların tümünü geçersiz kılmak için kullanabileceğin özel bir CSS bildirimi var, ancak onu kullanırken çok dikkatli olmalısın — !important. 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.

Bir tanesinin bir kimliğe sahip iki tane paragrafımızın olduğu bu örneğe bir göz atın.

 

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:

  1. Üçüncü kuralın color ve padding değerlerinin uygulandığını, fakat 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.
  2. Bununla birlikte, yukarıdaki kurallar kazanır, çünkü sınıf seçiciler öğe seçilerden daha yüksek özgüllüğe sahiptir.
  3. Her iki elamanda better sınıfına (class) atanmış, ama bir tanesi winning kimliğine(id) atanmış. Kimliklerin sınıflardan daha yüksek bir özgüllüğü 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.
  4. 2. elamanın arka planı kırmızı (red) ancak hiçbir sınırı yok. Neden? Çünkü ikinci kuraldaki bildirim nedeniyle: !important — Kimlik(ID) daha yüksek bir özgüllüğe sahip olsa bile, border: none nitelik tanımlaması !important bildirimine sahip olduğu için tüm kuralları aşarak kazanmış olur.

Not: !important 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 !important bildiriminde bulunmak.

!important 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. Ancak, kesinlikle mecbur kalmadıkça asla kullanmamanı şiddetle taviye ederim. !important 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.

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.

CSS konumunun etkisi

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..

Özet

İhtilaflı beyanlar aşağıdaki sırayla uygulanacak, daha sonraki beyanlar öncekileri geçersiz kılacaktır:

  1. Kullanıcı aracındaki stil sayfaları (ör. Tarayıcının varsayılan stilleri, başka bir stil ayarlanmadığında kullanılır).
  2. Kullanıcı stil sayfalarındaki normal bildirimler (bir kullanıcı tarafından belirlenen şekillendirmeler).
  3. Yazar şekillendirme sayfasındaki normal bildirimler (bunlar, web geliştiricileri olarak bizim tarafımızdan belirlenen şekillendirmelerdir).
  4. Yazar stil sayfalarındaki önemli bildirimler.
  5. Kullanıcı stil sayfalarındaki önemli bildirimler.

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 !important bildirimini kullanarak sağlayabilirler.

Becerilerini test et!

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. Becerilerini test edin: Kaynak sırası.

Sıradaki ne

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.

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.

Beklendiği gibi uygulanmayan şekillendirmelerle ilgili garip sorunlarla karşılaşmaya başlarsan buraya tekrar bak. Özgüllük sorunu olabilir.

Bu kısımda

  1. Kaynak sırası ve miras
  2. CSS seçicileri
  3. Kutu modeli
  4. Arka planlar ve kenarlıklar
  5. Farklı metin yönleri kullanma
  6. Taşan içerik
  7. Değerler ve birimler
  8. CSS'de öğelerin boyutları
  9. Görseller, medya ve form öğeleri
  10. Tabloları şekillendirme
  11. CSS'de hata ayıklama
  12. CSS'ini düzenleme