Cümlecik <[SET:descriptiontr]CSS ile Bir Takibe Çıkarken

kademeli terimi stil sayfaları için ne anlama gelir? Bu, bir CSS kuralı, kod boyunca aşağı yuvarlanır ve bazen çelişkili bir kural çarpmaktadır anlamına gelir.

Kadastro, programcıların önceliğini arayanlarla ilgilidir: Çatışma olduğunda kim kazanır? Belirli bir etikete birden fazla stil uygulanabilir. Örneğin varsayılan metin rengi olarak siyah gibi varsayılan tarayıcı tanımlı stilleri vardır. Bir CSS kuralı içerisinde başka bir renk belirlerseniz, basamaklama, kuralınızın yerleşik stilden öncelikli olmasını sağlar.

Ancak, tarayıcı iki CSS kuralları birbiriyle çakışırsa hangi stilin kazanacağına nasıl karar verir? Çelişen stiller bir araya getirilsin mi? Stiller tamamen uyumlu değilse - bir stil italik ve diğer italik olmayan gibi?

Özgüllüğü görselleştirme

Stillerin çarpıştığı zaman hangi stilin kazanacağını belirleyen faktörler: kalıtım, bir belgedeki yapısal ağaç ve bir stilin özgüllüğü (veya yakınlık ). Muhtemelen en kolay anlaşılan çarpışma kuralı, ü ve stilin tanımlandığı yerdir. CSS stilleri dört ana konumda tanımlanabilir:

• Tarayıcının varsayılan stilleri.
• Harici bir stil sayfası (HTML dokümanından Link öğesi ile başvurulan stil tanımlarını içeren bir.csss dosyası).
• Katıştırılmış bir stil sayfası (HTML dokümanı içerisinde, etiketinin içinde tanımlanan stiller. dahili olarak da adlandırılır).
• Satır içi stil (bir HTML öğesinin kendi içinde bir öznitelik olarak tanımlanan ve efekti yalnızca o öğesine sınırlanmış bir stil). Örneğin, bu tipik satır içi stili:

Bu liste aynı zamanda çakışan stillerin herhangi bir çatışmada "kazanılma" sırasını göstermektedir. Siparişi, unsurun kazanacağı stile en yakın olarak düşünün. Örneğin, satıriçi stil - öğenin kendisinde bulunan - en yakın alan. Dolayısıyla, bu öğe için birden fazla stil belirtilmişse, satıriçi stil kullanılan stildir. Stilin ona uyan elemana olan yakınlığı, daha resmen özgüllük olarak bilinir.

En yüksek ikinci öncelikli stil konumu, HTML belgesinin başlığında yer alan iç stil sayfasıdır. Üçüncü en yüksek öncelik, harici stil sayfasına - ayrı dosyaya gidiyor. Ve en zayıf öncelik, diğerlerinin kozu, varsayılan stildir. Sonuçta varsayılan, bir stil sayfasının değişmesi gereken görünümdür.

İşte IE'nin mavi ve kırmızı renkler arasında nasıl karar vereceğini gösteren bir örnek:

p {color: red;}

sanırım mavi olduğumu tahmin ediyorum.

Bu belgeyi test etmek için, HTML kodunu Not Defteri'ne yazın ve EmTest dosya adını kullanarak kaydedin. htm. Windows Gezgini'nde dosya adını çift tıklatarak bu Web sayfasını yükleyin. Sanırım ben mavi olduğum cümlesini mavi renkte görürsünüz. Buradaki

öğesi çelişkili iki şekilde tanımlandı. Katıştırılmış stilde kırmızı olarak tanımlanır, ancak bu tanım mavi renk satır içi tanımıyla geçersiz kılınır.

Ne olacağını görmek için satır içi stili kaldırmayı deneyin. Hattı

sanırım sanırım ben mavi.

Yeni değiştirdiğiniz Not Defteri dosyasını yeniden yükleyerek yeniden sınayın.

Yeni sürümü IE'ye yüklemek için Windows Gezgini'nde bu dosya adına tekrar çift tıklamanıza gerek yok. Bir belge yükledikten sonra, IE'deki varsayılan adres olur - bu durumda, bir adres. htm dosyasını sabit diskinize takın. Bu dosyayı bu örnekte yaptığınız gibi değiştirirseniz, değişikliği görmek için yapmanız gereken tek şey F5 tuşuna basmaktır. IE "yeniler".

Bazı insanlar tarayıcının yerleşik kaynak görünümünü CSS kodunu değiştirmenin ve yeniden test etmenin hızlı bir yolu olarak kullanmayı tercih eder. Görünüm -> Kaynak'ı seçin. Kod üzerinde değişiklikler yapabilir ve daha sonra kaydedebilirsiniz. Netscape ve Firefox, bazı programcıların yararlı buldukları sözdizimini vurguluyor.

Bu belgenin yeni sürümünü IE'ye yükledikten sonra, sanırım ben mavi olduğum satırı artık kırmızı renkte görüntüleniyor. Satır içi stili sildiğiniz için katıştırılmış ve satır içi stil tanımları arasındaki çakışma çözüldü.

Kullanarak normal öncelik kurallarını geçersiz kılabilirsiniz! Önemli komut, ne olursa olsun bu stilin kullanılması gerektiğini belirtmek. Bir! Önemli bildirim diğer tüm stil tanımlarını geçersiz kılar. Komutu şu şekilde eklerseniz:

p {color: blue! important;}

CSS1'de, Web sayfasının yazarı tarafından önemli ilan edilen stiller, okuyucunun önemli ilan ettiği stilleri bile geçersiz kılar. Bununla birlikte, CSS2'de, önemli okuyucu stilleri, önemli yazar stilleri üzerinde ve aslında yazar stilleri üzerinde önemli veya önemsiz olarak kazanılır.

CSS özgüllüğünü anlama

özgüllüğü terimi, tarayıcıların stilleri çakıştığında hangi stilin kazanacağını ikinci bir yolunu tarif etmek için de kullanılır. Birincisi, tarayıcı yakınlık arar - fakat yakınlık eşitse? İşte bu ikinci teknik uygulanır.

Örneğin, iki farklı stil sayfasının aynı HTML belgesinde referanslandığını düşünün (evet, belirli bir Web sayfasının HTML koduna CSS dosyasından daha fazlasını bağlayabilirsiniz). Ancak, bu sayfalardan birinde H1 kalın, diğerinde de italik olarak biçimlendirilir. Bu davada yapılacak zavallı tarayıcı nedir? Hangi özellik kazanır?

Bu bölümün başlarındaki stil çarpışma örneklerinden farklı olarak, kazanan ilan etmek için yakınlık kullanılabilir, burada yakınlığın derecesinde bulunan her iki stile sahipsiniz (aynı özgüllük). Bu stil tanımlarının her ikisi de harici stil sayfalarında bulunur.

Bu durumda, tarayıcı kullanmak için hangi stilde karar vermek için biraz tuhaf bir matematik yapar.Daha önce olduğu gibi, daha "spesifik" tarz kazanır. Ancak bu yarışmada özgüllük olarak sayılan nedir? "Yakınlık" faktörü ile aynı değildir. Tarayıcı biraz garip hesaplama yapmak zorundasınız, ancak gerçekten bu numarayı arayamazsınız. Bazı stillerin büyüklükleri diğerlerinden daha ağır olan garip türde değer birikimi. İlginç hesaplamaları ilginç bulmazsan, bu konuda oldukça kafanı rahatsız etme.

Tarayıcı, "yakınlık" faktörü aynı olan iki rakip stilin özgüllüğünü hesaplamak için ne yapar? Üç şey:

• Bir stil arar ve varsa kimlik özelliklerinin sayısını sayar
• Eğer varsa sınıf niteliklerini sayar
• Seçicilerin sayısını sayar (seçicileri bir stilde gruplayabilirsiniz Bu gibi: h1, h2, h3)

Tarayıcı sonra bu numaraları birlikte ekleyin; yalnızca basamağını birleştirir. Belki de bu, uzaylılar tarafından galaksisinde kullanılan bir çeşit aritmetiktir, ancak kesinlikle duymadım. Aşağıdaki birleştirme işlemiyle 130 rakamına sahip olduğunuzu düşünün: 1 elma, 3 portakal, 0 muz = 130

Bu işlem, elmalara "ağırlık" dan on kat ve muz ağırlığının 100 katını verir. Aşağıda, CSS'de özgüllüğü belirlemek için kullanıldığında nasıl çalıştığını gösteren birkaç örnek verilmiştir. Sadece üçüncü sınıf matematik dersinde olduğunuzu varsayıyorum.

Dikkat, sınıf! Bu selektör için özgüllük numarası nedir?

ul h1 li. kırmızı {color: sarı;}

Herkes 13'ü alır?

Doğru cevap 13'tür.

0 Kimliğiniz, 1 sınıflı öznitelikiniz (kırmızı) ve 3 seçici (ul h1 li)

vardır, yani "ekler", yani konuşmak için 013'e. Şimdi, çocukları, aşağıdaki seçici tanımı için 1'in özgüllüğünü nasıl elde edebileceğinizi açıklayabilir?

H1 {color: blue;}

Özgüllük belirlendikten sonra yüksek sayı kazanır. İki stilin çakıştığını varsayın, çünkü ikisi de H1'in rengini tanımlar, ancak farklı tanımlarlar. Ancak, bir tanımı 13'lük bir özgüllük değerine ve diğerinin yalnızca 1'ine sahip olması nedeniyle, H1 başlık sarıdır, mavi değildir.

İki özgürlük aynı kurallara dönüşürse ne olur? Bu durumda (her ikisinin de bir stil sayfasında olduğu veya başka şekilde HTML etiketine "yakınlık" olduğu varsayılarak) son olarak belirtilen kural çok kazanır.