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.
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ç;
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.
Bir önceki yazımız olan Resimleri veya fotoğrafları responsive uyumlu hale getirme. başlıklı makalemizde fotoğrafları responsive hale getirme, responsive ve responsive dizayn hakkında bilgiler verilmektedir.
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
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.
Eğer yine olmazsa “list-style:disc !important;” kullanarak kesin sonuca ulaşabilirsin.
Arkaplanı rengini nasıl degistirebilirim reset css’de