Reset CSS Nedir? Nasıl Kullanılır?  Reset CSS Nedir? Nasıl Kullanılır? | Googleda Görüntüle

Reset CSS Nedir? Nasıl Kullanılır?
 BEĞEN
  YORUM YAP

RESET CSS NEDİR? BİZE SAĞLADIĞI FAYDALAR NELERDİR ?

Reset css,projelerimizde kodlama yaparken kenarda köşede gereksiz boşlukları kaldıran ve kod yapımıza etki eden tüm html taglarını sıfırlar.Yani sayfamızı tamamen tüm tarayıcılar için default (varsayılan) hale dönüştürür.

PEKİ BİR RESET CSS NASIL HAZIRLANIR ?

Aslında html/css bilgimiz varsa hepimiz bir reset css yazabiliriz fakat buna hiç gerek yok çünkü profesyonel kişiler tarafınca hazırlanan reset css'ler mevcut özellikle benim bu konumda belirteceğim ve kodlarını paylaşacağım kişi Eric Meyer'dir.Benimde hemen hemen çoğu projelerimde kullandığım Eric Meyer'in reset css'i yeni bir projeye başlamadan önce dosyalarımıza dahil etmemiz gereken bir yapıdır.

RESET CSS NASIL KULLANILIR ?

Aşağıdaki kodları kopyalayıp reset.css olarak kaydedip sayfanıza dahil edebilirsiniz.

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, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
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;
}
/* HTML5 display-role reset for older browsers */
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;
}

Yada buraya tıklayarak direkt olarak dosyayı indirebilirsiniz.

NOT

Reset CSS Projeye sonradan dahil edilerek kullanılmaz.Aksi taktirde sitenizin yapısının tamamen bozulması kaçınılmazdır.Reset CSS'den en iyi şekilde faydalanmak için sıfırdan projeye başlarken dahil etmemiz gerekmektedir.

ÖNEMLİ BİLGİ !

Reset CSS'i incelediyseniz Normalize.css'i kesinlikle incelemenizi öneririm.

Etiketler

Yorumlar

Bu Konuya Ait 4 Onaylı Yorum Bulunuyor.

Erkan ÜNLÜTÜRK

Erkan ÜNLÜTÜRK

  3 yıl önce

o halde neden siz normalize.css kullanıyorsunuz?

Emre Ceyhan

Emre Ceyhan | Admin

  3 yıl önce

Responsive css framework olan bootstrap'i kullanıyorum oda kendi sisteminde normalize.css'i kullanıyor.Normalize.css hakkında ki yazımı buradan inceleyebilirsiniz.

Yavuz Selim Kısmetli

Yavuz Selim Kısmetli

  2 yıl önce

Teşekkürler hocam, faydalı bir yazı olmuş.

eren

eren

  2 yıl önce

merhabalar bu değerli yazınız için çok teşekkür ederim

Hakan

Hakan

  1 yıl önce

Peki reset.css meyerweb ile normalize aynı anda kullanılır mı? Ne gibi faydası olur?

Emre Ceyhan

Emre Ceyhan | Admin

  1 yıl önce

Aynı anda kullanılması tamamen gereksiz.

Yorum Yap

CSS3 -webkit / -moz / -o Nedir ? CSS3 ve Tarayıcı İlişkisi

Belki daha önce karşılaşmız olabilirsiniz.Bazı CSS3 kodları birkaç defa aynı yazılıp baş...

  4098   1 yıl önce

CSS3 Geçiş Efektleri - Transition Nedir? Nasıl Kullanılır?

Merhaba arkadaşlar, çoğu sitelerde gördüğümüz daha yumuşak ve animasyonlu şekilde geçiş ...

  2664   1 yıl önce

3. İndir.com Mobil Uygulama Yarışması ABD'ye Götürüyor

İNDİR.COM MOBİL UYGULAMA YARIŞMASI ABD’ YE GÖTÜRÜYOR Geçtiğimiz ik...

  1801   2 yıl önce

CSS [ text-transform:uppercase ] Karakter Sorunu Çözümü

Css'de metin (text) biçimlendirme özelliklerinden biri olan text-transform:uppercase parametresini...

  5712   3 yıl önce

Olcay E. 6 ay önce demiş ki;


selamun aleyküm, yararlı bir css dersi
Yoruma Git

erhan tapan 1 yıl önce demiş ki;


Siteyi coşturan kod erhan bunu beğendi
Yoruma Git

Nejdet Acar 1 yıl önce demiş ki;


Okumadan hemen cevaba sarılmayalım lütfen, okuyanlara ayıp oluyor...
Yoruma Git

Çılgın Koder 1 yıl önce demiş ki;


Bunu çoklu resimlerde nasıl yapacağız? Ve limit koymak istesek nasıl koyarız.
Yoruma Git