Reset CSS Kullanımı

Sıfırlama stil sayfasının amacı, varsayılan satır yükseklikleri, kenar boşlukları ve yazı tipi başlık boyutları vb. Gibi şeylerde tarayıcı tutarsızlıklarını azaltmaktır.

Reset.css dosyası yazılma Nedeni şudur, bir web sayfasını tasarlarken yazdığınız CSS kodları her tarayıcıda farklı görülebilir. Reset.css işte bu farklılıkları azaltmak için hazırlanmıştır. Örneğin CSS kodlarında yer alan satır yüksekliği, font boyutu, font tipi, margin değerleri Internet Explorer'da farklı, Firefox'ta farklı, Chrome web tarayıcısında farklı görünebilir. Reset.css tüm CSS ayarlarını fabrika ayarlarına çektiği için bir kısım farklılıklar azaltılır.

Minimalist Sıfırlama - Sürüm 1


Temel olarak, gördüğünüz gibi, bu tüm sayfa öğelerinin girintileri ve kenar boşlukları sıfıra yönelik global bir sıfırlamadır. Bu, en sık kullanılan CSS sıfırlamasıdır .


* { padding: 0; margin: 0; }

Minimalist Sıfırlama - Sürüm 2


Bu sıfırlama öncekiyle aynıdır, fakat aynı zamanda sıfırlama etkili bir şekilde nötralize edilmiş olan tüm varsayılan borderları da dikkate alır.


* { padding: 0; margin: 0; border: 0; }

Minimalist Sıfırlama - Sürüm 3


“Minimalist” sıfırlamanın bu en son sürümü önceki ikisine benzer, ancak ayrıca öğelerin dış sınırları(outline) için varsayılan stilleri de sıfırlar.


* { outline: 0; padding: 0; margin: 0; border: 0; }

Kısaltılmış Üniversal Sıfırlama


İhtiyacınız olan her şeyi işler ve aynı zamanda tarayıcılara homojenlik açısından göreceli çok yönlülük sağlar.


* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}

Başka bir sıfırlama (sıfırlama stilleri kümesi)


Bu CSS stili kümesi yalnızca HTML ve gövde öğeleri için dolgu ve kenar boşluklarını sıfırlar; tüm yazı tipi boyutlarının sıfırlanmasını sağlar ve bağlantılardaki görüntülerin sınırlarını kaldırır.


html, body {
padding: 0;
margin: 0;
}
html {
font-size: 1em;
}
body {
font-size: 100%;
}
a img, :link img, :visited img {
border: 0;
}

CSS Sıfırlama yönteminin öncülerinden biri olan Eric Meyer , bugün hala milyonlarca web sitesinde kullanılmakta olan bir Sıfırlama stil sayfası oluşturdu. Meyer'in bu konuda yaptığı tavsiyeye rağmen, çoğu kişi onu düzenlenmemiş biçimde kullanıyor:

Eric Meyer.css’ini bazı kısımları Düzenlenmiş halini vermek istiyorum çünkü "strong", "b" ve "em" etiketleri sıfırlamış ne eğik yazılıyor, nede kalın bu etiketler iptal edilmiş halini veriyorum.


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, input, select, textarea, button,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
    text-decoration: none;
}
a img, :link img, :visited img {
border: 0;
}

:focus {
    outline: 0;
}
.clear {
    clear: both;
}

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

1996

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML RESİM EKLEME
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.