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.
|
1 2 3 4 5 6 7 8 |
<div class="a1"> <div class="a2"> <p class="a3"> Örnek 1 : Aslında bu yazının Kırmızı olması gerekmez mi ? </p> </div> </div> <!-- a1 DIV kapanis --> |
|
1 2 3 4 5 6 7 8 |
.a1 .a2 p { font-size: 20px; color: gray; } .a2 p { color: red; } |
Ö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.
|
1 2 3 4 5 6 7 8 |
<div class="b1"> <div class="b2"> <p class="b3"> Örnek 1in cevabı yöntem 1 : Kırmızı oldu üstünü belirterek ezdik </p> </div> </div> <!-- b1 DIV kapanis --> |
|
1 2 3 4 5 6 7 8 |
.b1 .b2 p { font-size: 20px; color: gray; } .b1 .b2 p { color: red; } |
Ö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.
|
1 2 3 4 5 6 7 8 |
<div class="c1"> <div class="c2"> <p class="c3"> Örnek 1'in cevabı yöntem 2 : " !important " kullanarak ezdik </p> </div> </div> <!-- c1 DIV kapanis --> |
|
1 2 3 4 5 6 7 8 |
.c1 .c2 p { font-size: 20px; color: gray; } .c2 p { color: red !important; } |
Ö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.
|
1 2 3 4 5 6 7 8 |
<div class="d1"> <div class="d2"> <p class="d3"> Örnek 1'in cevabı yöntem 3 : p'ye class vererek ezdik </p> </div> </div> <!-- d1 DIV kapanis --> |
|
1 2 3 4 5 6 7 8 |
.d1 .d2 p { font-size: 20px; color: gray; } .d2 p.d3 { color: red; } |
Ö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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="f1"> <p id="f-id"> ID vererek ezdik </p> </div> <!-- f1 DIV kapanis --> <div class="f1"> <p id="f-class"> Class vererek ezdik </p> </div> <!-- f1 DIV kapanis --> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.f1 p { font-size: 20px; color: gray; } .f1 p#f-class { color: green; } .f1 p#f-id { color: red; } |
Örnek 2, Yöntem 2
Burada id’nin class’dan daha baskın olduğunu gösterdik.
|
1 2 3 4 5 6 |
<div class="g1"> <p id="g-id" class="g-class"> Id class'ı ezer. (class'ı id'ye dövdürdük) </p> </div> <!-- g1 DIV kapanis --> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.g1 p { font-size: 20px; color: gray; } .g1 p#g-id { color: red; } .g1 p.g-class { color: green; } |
Örnek 2, Yöntem 3
Class azim etti çalıştı ve !important’ı buldu sırf id’yi ezmek için :))
|
1 2 3 4 5 6 |
<div class="h1"> <p id="h-id" class="h-class"> !important kraldır. (id'yi class'a dövdürdük) </p> </div> <!-- h1 DIV kapanis --> |
|
1 2 3 4 5 6 7 8 9 10 |
.h1 p { font - size: 20px; color: gray; } .h1 p.h - class { color: green!important; } .h1 p# h - id { color: red; } |
Örnek 2, Yöntem 4
Html içine inline-style olarak yazılmış bir değeri, css dosyasından sadece important ile sileriz.
|
1 2 3 4 5 6 |
<div class="i1"> <p id="i-id" class="i-class" style="color:#000;"> html içine inline-style olarak yazılmış bir değeri, css dosyasından sadece important ile sileriz. </p> </div> <!-- i1 DIV kapanis --> |
|
1 2 3 4 5 6 7 8 9 10 |
.i1 p { font - size: 20px; color: gray; } .i1 p.i - class { color: green!important; } .i1 p# i - id { color: red; } |
Aycan süper olmuş teşekkürler yazı için takipteyim (:
.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?
Mantığı başlıkta saklı, “Css ezme yöntemleri”
Hocam makale çok aydınlatıcı olmuş elinize sağlık Ayrıca sitenizde faydanlanmak istediğim çok makaleler yazılmış takipdeyim
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
important kullanmamanızı tavsiye ediyorum, çözemediyseniz mail atın bakayım
inline eklenen bir css’de important var ise, bunu nasıl ezeriz?
https://jsfiddle.net/grzh5d7u/3/ bu şekilde yani başına bir element ekleyerek ezebilirsiniz.
body .demo{background:yellow !important;}