Reset Css ve Normalize Css kullanımı. – Web bulutu Skip to main content
reset css anlatım

Reset Css ve Normalize Css kullanımı.

Bu yazımda sizlere benim de  olmazsa  olmazlarım arasında  olan CSS sıfırlama  tekniğini anlatacağım.

Nedir bu CSS sıfırlama?

Html kodlama dili tarayıcı taraflı çalışan bir dildir ve her tarayıcıda bir takım defauld ayarları bulunmaktadır. Örneğin, Bir paragraf eklediğimizde, bu “p” etiketi margin veya padding ayarlarına  sahip olabilir. Özellikle “h” etiketleri istenilenin dışında  dafauld  boyutları bulunmaktadır. Bir örnek de body kısmıdır ve üstten az da  olsa  margin değere  sahiptir. Bunun gibi birçok defauld ayar bulunmakta ve tasarım esnasında  düzeltmekle uğraşmak bir yana, tüm tarayıcılardaki defauld ayarlar bilinip, ona  göre kod yazmak durumundayız. İşte bu yükümüzü hafifletmek ve sorunları gidermek adına CSS sıfırlayıcıları kullanılır. En çok kullanılanlar, Normalize CSS (bootstrap’de de kullanılıyor) ve Reset CSS(benim tavsiyem)’dir.

Download ve kullanımına  geçmeden önce, ufak bir örnekle tam olarak ne işe yaradığını görmenizi istiyorum.

 

Aşağıda CSS sıfırlayıcısı kullanmadan, paragraf etiketinde  bir yazı yazarak ön izleme oluşturduk.

reset-css-normalize-css-kullanimi

 

Paragraf etiketi içerisine alınmış “Merhaba web bulutu!”   yazısında görüldüğü gibi, bir takım margin değerlere sahip. Şimdi bunu CSS sıfırlayıcıları ile ortadan kaldıralım. Ben bu örnekte reset css kullanmayı tercih ediyorum. Siz hangisini isterseniz onu kullanın.

Sonuç;

reset-css-normalize-css-kullanimi-sonuc

Görselden neyi anlatmak istediğimiz apaçık ortada  sanırım :).

 

Şimdi gelelim download linklerine;

Reset Css için  http://meyerweb.com/eric/tools/css/reset/  tıklayın. Açılan sitede  css kodlarını göreceksiniz, hepsini kopyalayın ve yeni bir css dosyasına yapıştırarak kaydedin. Daha sonra  projenizin en üstüne, tüm css dosyalarının üstüne gelecek şekilde ekleyin.

 

Normalize Css için https://necolas.github.io/normalize.css/ tıklayın. Açılan siteden dosyayı download edin ve css klasörünüze atın. İndex dosyanızı açarak, normalize css dosyanızı, kendi css kodlarınızın en üstüne gelecek şekilde ekleyin.

Css dosyanızı dahil etme  işlemi sırasında, tarayıcının en üstten başlayarak aşağıya doğru kodları okuduğunu unutmayın ve CSS sıfırlayıcılarının ilk olarak işleme  girmesi için en üste ekleyin. Alt taraflara veya ikinci sıralara eklenmesi durumunda, bir üstteki css dosyasında yazılan kodları sıfırlar, buna  dikkat edin.

bulut Aylak

Full-stack web developer, Search engine optimization meraklısı, çakma filozof ve blogger.

Reset Css ve Normalize Css kullanımı.” hakkında 3 yorum

  1. PEki sıfırlanmış olan ul li ol gibi etiketleri içerik alanında tkerar aktif hale nasıl getircez. Adam madde madde içerik yazıyor bunlar görünmüyor

    1. Merhaba kurtar karakuş. Madde madde’den kastınız, yazının liste olduğunu belli eden satırların başında bulunan simgeler siyah kutucuklar,sayılar,kare şekiller sanırım. Onun için css kullanarak sorununu çözebilirsin.

      <style type="text/css">
      .deneme li {
      	list-style:disc;
      	}
      </style>
       
      <ul class="deneme">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
      </ul>

      Eğer yine olmazsa “list-style:disc !important;” kullanarak kesin sonuca ulaşabilirsin.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir