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 da
buradan(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.
« önceki yazı SharePoint'te Sakla, Zoho'da Düzenle! |
sonraki yazı » Rapidshare Eziyetini Alt Eden Eklenti! |
Yorumlar
Gerçekten güzel bildiri sık kullanılanlara ekliyorum..
| elchancho | |
|
|
(1 puan) |
|
| 25 Haziran 2009 12:07 |
bana çok yararlı gelmedi aslında. zaten her site için bir style.css kullanıyoruz. her bölüm için ayrı ayrı css yazıyoruz web sitesine daha iyi hakim olabilmek için...
yoksa ben mi yanlış anladım?
| emrah2207 | |
|
|
(-1 puan) |
|
| 25 Haziran 2009 12:07 |
outline:none; kullanmak görsel rahatsızlığı ortadan kaldrıyor ama diğer taraftanda kötü yalarıda var tabi.
floatleft ve floatright ' a padding vermek iyi bir fikir gibi durmuyor.
Bunun dışında ok :)
| ym1s1r | |
|
|
(0 puan) |
|
| 25 Haziran 2009 14:57 |
@nodtveidt konuyu kodaman'da açabilirdin,
konu ile ilgili kodaman'da daha geniş css dökümanı yer almış, buraya tıklayarak bakabilirsin, fikir fikirdir
Bunun dışında;
ie ile ff arasında xhtml farklılıkları bir çok arayüz developer arkadaşın canını sıkıyor.
konuyla ilgili microsoft türkiye'ye mail atmıştım.
içeriği,. hazırladığım web sayfaları tamamiyle xhtml/w3 standarlarına uygun valid html/css,
mail atarak dediğim şey şuydu
ben web standartlarına uygun yazılım yapıyorum
bakın örnek bi sitemde bu, inceleyin..
ben web standarlarına uygunken ie benim sitelerime ne kadar uygun ?
die sorduğumda, sayın micsoft kullanıcısı hede höde diye politik bi mail almıştım.. adam olmaz bu micrasoft.
| LefilsdeDieu | |
|
|
(0 puan) |
|
| 26 Haziran 2009 11:17 |
@emrahduzer yanlis düsünüyorsun. her tarayıcı icin artik farkli farkli kodlanmıyor. eger css i düzgün yazabilirsen her tarayıca sorunsuz cikiyor ve tek bir css kullanmis oluyorsun. sonucta doctype denilen sey var o standartlardan cikmadikca bi problem yok. ayri ayri css yazmak kötüdür
| Frosten | |
|
|
(1 puan) |
|
| 26 Haziran 2009 12:04 |
pillinetwork sitelerine yorum ekleyebilmek ve daha fazlası için, üye olun ya da giriş yapın.
İlgili Yazılar
- hayatı kolaylaştıracak 11 css3 tekniği (10)
- CSS konusunda her türlü tartışmaya varım (0)
- Web Tasarımında sıkça karşılaşılan hatalar (6)
- 99 Kullanışlı Tasarım Kaynağı (0)
- Web sitenizi farklı platformlarda canlı olarak ... (13)
- Resimlerinizi css ile şekillendirin (4)
- tasarımcılar için 10 yer imi (6)
- 23-29 Haziran'da bildirgeç'de olup bitenler (Ha... (4)
- Hayranlık Uyandıran 20 en iyi Tasarım Grubu (0)
Bu Yazıyı Tutanlar
Beğendiğiniz bir yazıya "tuttum" demek için başlığın yanındaki yıldıza tıklayabilirsiniz.
