CSS Academy · Ders

CSS Sıfırlama ve Normalize Etme

CSS sıfırlamaları ve normalize stil sayfalarıyla tarayıcıların tutarsız varsayılan stillerini kaldırın.

4. ders / 413 adım

CSS Sıfırlama ve Normalize Etme, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

Sorun: Tarayıcı Varsayılanlarının Tutarsız Olması

Her tarayıcıda başlıklar, kenar boşlukları, iç boşluklar, listeler ve form öğeleri için varsayılan stiller içeren yerleşik bir kullanıcı aracısı stil sayfası bulunur. Bu varsayılanlar tarayıcılar arasında farklılık göstererek tutarsız görünümlere yol açar.

CSS Sıfırlaması

Bir CSS sıfırlaması, tarayıcının tüm varsayılanlarını kaldırarak size boş bir başlangıç noktası sunar. Ünlü Eric Meyer sıfırlaması, kenar boşluğunu, iç boşluğu ve birçok özelliği sıfıra veya none değerine ayarlar.

<h1>Title</h1>
<p>Paragraph with reset margins.</p>
<ul><li>Item</li><li>Item</li></ul>
<ol><li>Step</li><li>Step</li></ol>

CSS Normalleştirmesi

Normalize.css farklı bir yaklaşım benimser: tüm varsayılanları kaldırmak yerine tarayıcı varsayılanlarını tutarlı hâle getirir, bilinen hataları düzeltir ve başlık boyutları gibi kullanışlı varsayılanları korur.

Sıfırlama ve Normalleştirme Arasındaki Ödünler

Karşılaştırma:

Sıfırlama: boş bir başlangıç noktası sunar, her şeyi sizin tanımlamanızı gerektirir ve daha fazla çalışma ister
Normalleştirme: kullanışlı varsayılanların korunduğu tutarlı bir temel sunar ve daha az özel kod gerektirir

Modern CSS Sıfırlaması

Popüler bir modern sıfırlama yaklaşımı (Josh Comeau tarafından hazırlanmıştır), en etkili varsayılanları hedefler:

<h1>Reset Demo</h1><h2>Sub</h2><h3>Sub</h3><h4>Sub</h4><h5>Sub</h5><h6>Sub</h6>
<p>Body text with smooth font rendering.</p>
<picture><img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='120'><rect width='300' height='120' fill='%234f8fdb'/></svg>" alt="demo" /></picture>
<video controls></video>
<canvas></canvas>
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="18" fill="tomato"/></svg>

Görselleri Blok Olarak Ayarlama

Görselleri display: block yapmak, kapsayıcıların içindeki görsellerin alt kısmında bulunan ve satır yüksekliğinden kaynaklanan varsayılan satır içi boşluğu kaldırır:

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='160'><rect width='400' height='160' fill='%23ff6347'/></svg>" alt="block image" />

Liste Sıfırlama Deseni

Özel gezinme veya arayüz listeleri biçimlendirirken liste işaretlerini ve girintiyi kaldırın:

<ul class="nav-list"><li>Home</li><li>Shop</li><li>About</li></ul>

Form Öğelerini Sıfırlama

Form öğeleri (input, button, textarea) birçok tarayıcıda varsayılan olarak yazı tipini miras almaz. Yaygın bir çözüm şöyledir:

<input type="text" placeholder="Name" />
<button>Submit</button>
<textarea placeholder="Message"></textarea>
<select><option>Choice A</option></select>

Tailwind'in Preflight'ı

Tailwind CSS, modern-normalize üzerine kurulmuş ve Preflight adını taşıyan kendi sıfırlamasını içerir. Tailwind kullanıyorsanız sıfırlama zaten otomatik olarak uygulanır.

Sıfırlama Nereye Yerleştirilmeli

Sıfırlama veya normalleştirme stil sayfanızı her zaman ilk sıraya, tüm bileşen veya yardımcı program stillerinden önce yerleştirin. Basamaklandırma sırası, özgüllük çakışmaları olmadan stillerinizin sıfırlamayı geçersiz kılmasını sağlar.

Özel Sıfırlamada Dikkat Edilmesi Gerekenler

Tam kapsamlı bir üçüncü taraf sıfırlaması eklemek yerine projenize uygun, küçük bir sıfırlama oluşturun. CSS yükünü küçük tutmak için yalnızca ihtiyacınız olan kuralları ekleyin.

<p>Base font-size and line-height set on the root element affect the whole page.</p>

Hızlı Kontrol

CSS sıfırlaması ile CSS normalleştirmesi arasındaki temel fark nedir?

İnteraktif derste cevapla

Özet

Tarayıcının varsayılan stilleri tutarsızdır. CSS sıfırlamaları tüm varsayılanları kaldırır; normalize.css ise bunları tutarlı hâle getirir. Modern sıfırlamalar box-sizing: border-box, max-width değerine sahip görseller ve form öğelerinde miras alınan yazı tipleri gibi en etkili kurallara odaklanır. Sıfırlamayı her zaman ilk sırada yükleyin.

Başlamak ücretsiz

Yapay zeka eğitmeniyle CSS öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 40
Dersler: 159

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“CSS Sıfırlama ve Normalize Etme” dersi ücretsiz mi?

Evet — “CSS Sıfırlama ve Normalize Etme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“CSS Sıfırlama ve Normalize Etme” dersinde ne öğreneceğim?

CSS sıfırlamaları ve normalize stil sayfalarıyla tarayıcıların tutarsız varsayılan stillerini kaldırın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“CSS Sıfırlama ve Normalize Etme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← CSS Academy Sayfasına Dön