Css ezme yöntemleri

Merhaba arkadaşlar, şunu belirtmek isterim başlık berbat oldu ama yapacak birşey yok 🙂 Css’de ki komutlarımızı kalıtsallıktan yararlanıp en az kodu yazmaya çalışırken bazı elementleri ezmemiz gerekebilir, bunun farklı farklı metodları vardır, bunlara aşağıda deyineceğim ama şunu belirtmeliyim ki css’de ezme olayı css’in en tatlı konularından biridir ve css’in oyun kısmı budur.

Örnek 1, Yöntem 1

Aslında aşağıdaki css kodumuzu yazdığımızda yazımızın kırmızı olması gerekirdi ama, .a2 div’inin üstünü belirtmediğimiz için ezme işlemini gerçekleştiremedik.

 

Örnek 1, Yöntem 2

Yukarıdaki eksikliği kapattık, div.b2’nin bir üstünü css’de belirttik ve ezme işlemini gerçekleştirdik.

Örnek 1, Yöntem 3

div.c2’nin üstünü belirtmeden, faşistlik yaptık !important ile emir verdik ve ezme işlemini gerçekleştirdik.

Örnek 1, Yöntem 4

div.d2’nin üstünü belirtmeden, ezmek istediğimiz elemente torpil yapıp class verdik ve direk ezme işlemini gerçekleştirdik.

Örnek 2, Yöntem 1

Yukarıda ki yaptığımız gibi topril işlemine başvurduk ve ayrı ayrı class ve id vererek ezme işlemini gerçekleştirdik.

Örnek 2, Yöntem 2

Burada id’nin class’dan daha baskın olduğunu gösterdik.

Örnek 2, Yöntem 3

Class azim etti çalıştı ve !important’ı buldu sırf id’yi ezmek için :))

Örnek 2, Yöntem 4

Html içine inline-style olarak yazılmış bir değeri, css dosyasından sadece important ile sileriz.

“Css ezme yöntemleri” üzerine 9 yorum

  1. Geri bildirim: Anonim
  2. .b1 .b2 p{font-size:20px; color: gray;}
    .b1 .b2 p{color:red;}

    örnek 2. deki bu satırlara baktığmız zaman, ilk satırdaki color:gray hamallık olmuyor mu ? Ben anlayamadım. Yani alt satırda b1 ve b2 sınıflarının rengini değiştiriyoruz tümüyle madem bunu yapacağız bir üst satırda neden kırmızı vermiyoruz?

    Mantığı ne bu işin?

  3. Hocam makale çok aydınlatıcı olmuş elinize sağlık Ayrıca sitenizde faydanlanmak istediğim çok makaleler yazılmış takipdeyim

  4. Merhabalar, emeğinize saglik. Ben de yeniyim birsey sormak istiyorum, benim divleri 1280lik ekranda 4lu yan yana getirdim, 1024luk ekranda 3lu yaptim(important vererek), 800luk ekranda 2li yaptim important da verdim ama 1024teki child 3n’leri de goruyor:( ne yapmam gerekiyor lütfen yardimci olur musunuz

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir