CSS’e yeni başlayanlar reset.css dosyasının önemini tam olarak kavrayamamış olabilirler. Herbir tarayıcı (browser)’nın kendi “default” (varsayılan) netrenderer‘ı olduğunu öğrenmeden önce kendisini “buradaki boşlukta neyin nesi ?” gibi sorularla boğuşurken bulacaktır. Bunu gibi baş ağrılarından kurtulmak için kendi reset.css dosyanızı yazmanız gerekir. Reset.css dosyasını kendiniz yazmasanız daburadan(YUI), buradan(Eric Meyer) ve buradan(David Walsh) bulabilirsiniz.Kendi reset.css dosyasını yazmak isteyenlerle devam edelim.1.Adım: Margin ve Padding’leri Sıfırlayalım
Varsayılan ayar olarak tarayıcılar sayfalarınıza margin’ler ve padding’ler ekleyecektir. Örneğin tarayıcıların çoğu body elementine 6px’lik bir margin değeri verir, bunu farkettiğinizde
body {margin-top:0;}
özelliğini eklemek isteyeceksiniz. Fakat bunları eklemek yerine browser’ların kendi kendine verdiği marginleri ve paddingleri sıfırlamak daha doğru olacaktır.İlk olarak yapmanız gereken yeni bir css dosyası oluşturmak ve adını reset.css yaptıktan sonra sayfamızın kök dizinine kaydetmek. Css dosyamızı oluşturduktan sonra geçerli HTML sayfamızın
<head> </head>
tag’leri arasına reset.css dosyasını şu şekilde iliştiriyoruz:
<link href="reset.css" rel="stylesheet" type="text/css" />
CSS dosyamızı html’e ekledikten sonra tekrar reset.css dosyamıza gelerek genel kullanımı olan elementlerin margin ve padding değerlerini sıfırlayan kodumuzu yazıyoruz.
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,ol, li, dl, dt, dd, form, a, fieldset, input, th, td{margin: 0; padding: 0; border: 0; outline: none;}
2.Adım: Elementlerinizi Kontrol Altına Alın
Heading elementlerinin font boyutları eşitleyen bir css kodu olmadan kullanıldığında tarayıcıdan tarayıcıya değişiklik gösterecektir. Varsayılan font boyutunu %100’e getirdiğinizde bu değişimlerin önüne geçebilirsiniz.
h1, h2, h3, h4, h5, h6{font-size: 100%;}
Ve sonra elementlerimizin margin, padding ve satır arası boşluklarını yineleyelim. Aynı zamanda listeleme elementlerinin listeleme tipinide “none” yapmak işinize yarayacaktır.
body{line-height: 1;font-size: 88%;}h1, h2, h3, h4, h5, h6{font-size: 100%;padding: .6em 0;margin: 0 15px;}ul, ol{list-style: none;}img{border: 0;}
3.Adım: Genişlemeler
Aslında reset.css inizde olmazsa olmazlardan birisi değil ama olmasında yarar görüyorum. Float veriğiniz elementlerinizde örneğin bir resim dosyası için kullandığınızda yazılar resmin hemen bitişiğinde değilde 0.5em uzağında durması görsellik açısından iyi olacaktır. İstemeyen kullanmayabilir.
.floatLeft{float: left;padding: .5em .5em .5em 0;}.floatRight{float: right;padding: .5em 0 .5em .5em;}
İşte reset.css Dosyamızın Son Hali:
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,li, dl, dt, dd, form, a, fieldset, input, th, td{margin: 0; padding: 0; border: 0; outline: none;}body{line-height: 1;font-size: 88% /* Decide for yourself if you want to include this. */;}h1, h2, h3, h4, h5, h6{font-size: 100%;padding: .6em 0;margin: 0 15px;}ul, ol{list-style: none;}a{color: black;text-decoration: none;}a:hover{text-decoration: underline;}.floatLeft{float: left;padding: .5em .5em .5em 0;}.floatRight{float: right;padding: .5em 0 .5em .5em;}
Son olarak, reset.css dosyasını tüm web sitelerinizde kullanmanın birçok faydası olacaktır. Bundan sonra size kalan reset.css dosyanızını satırlarını artırmak ne kadar çok element için belirli bir varsayılan değer kullanırsanız sitenizin tasarımı üzerinde o kadar çok hakimiyetiniz olur.Mesela sayfanızda verilen tüm linkler için genel bir değer kullanmak isteyebilirsiniz veya
(paragraf) taginizin sitedeki yazılardan farkı görüntülenmesini istiyorsanız
için farklı değer kullanabilirsiniz.100 % tamamlanmış bir reset.css dosyası istiyorsanız Eric Meyer’in “Reset CSS Dosyasını” kesinlikle öneririm.
