CSS initial Nedir? Nasıl Kullanılır?
İnsan vücudunda deri nasıl bir görev işliyor ise internet dünyasında da CSS’de aynı görevi görmektedir. Sizlerde CSS ile kendi internet sitenizde bir çok değişikliklere imza atabilirsiniz, renk değiştirebilir, istediğiniz köşeyi bükebilir, animasyonlar oluşturabilir ve aklınıza gelecek olan her şeyi yapabilirsiniz. (Hıhı evet onu da yaparsın.)
initial Nedir?
Olması gerekenin olmamasıdır, yani şu şekil özetleyeyim. 35 yaşına kadar yani ömrünüzün yarısına kadar bir okulda dış mimarlık okuduğumuzu varsayalım daha sonrasında mezun olup iş hayatına atıldığını düşünelim. Ne yani bizden dış mimar olmaz mı? Tamam o zaman kendimizi bir duvar ustası ve ya badanacı olarak düşünelim. Badanacı deyince hoşuna gitti değil mi? Olm sen ne fenasın ha. Her neyse elimize gelen iş ise 7 katlı binayı komple boyanacak ve sadece balkonlar boyanmayacak işte bu duruma initial denmektedir. Bir bakıma vazgeçilmemesi gerekenlerden vazgeçilmesi durumudur, Css ile bir site tasarladığınızı varsayalım ve oluşturduğunuz divde etkilenmesini istemediğiniz noktaları initial ile yok edebilirsiniz. Nasıl Mı?
Nasıl Yapabilirim?
İlk olarak basit bir div oluşturalım ve bu div’in içerisinde yer alan yazılar, bütün etkilerin rengi kırmızı olsun.
div{ color: #ff0000; }Stilimizi oluşturduk ve dedik ki, alttaki yer alan kodların içerisinde yani gözüken Burası normal bir yazı ile Yusuf Kalafat yazıların rengi kırmızı olsun.
<div>Burası normal bir yazı <h1>Yusuf Kalafat</h1></div>Bu işlem sonucunda üst kısımda yer alan divin içerisindeki bütün yazılar kırmızı olacaktır, lakin ben h1 tagın içerisindeki Yusuf Kalafat yazısını kırmızı olarak yazmak istemiyorum. Bu div’den etkilenmesin istiyorum. Bu durum karşısında CSS kodumu aşağıdaki gibi düzenliyorum.
div{ color: #ff0000; } h1{ color: initial; }Bu işlem sonucunda h1 tagı bu işlemden etkilenmeyecektir.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> div{ color: #ff0000; } h1{ color: initial; } </style> </head> <body> <div>Burası normal bir yazı. <h1>Yusuf Kalafat</h1></div> </body> </html>Yorumlar
