0Pricing
Frontend Academy · Ders

Renkler, Tipografi ve Kutu Modeli

Hex, rgb ve hsl değerleriyle renk uygulayın, yazı tiplerini seçin, boyutları ve satır yüksekliklerini ayarlayın; öğeler arasında boşluk oluşturmak için margin, border ve padding kullanın.

Renkler, Tipografi ve Kutu Modeli, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 2. 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, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

CSS Renk Değerleri

CSS birden çok renk biçimini destekler. Bağlamınız için en anlaşılır olanı kullanın: marka renkleri için onaltılık kodlar, kolay renk ayarlamaları için hsl(), programatik değerler için rgb() ve hızlı prototipleme için adlandırılmış renkler.

color: #2b6cb0;              /* hex */
color: rgb(43, 108, 176);    /* rgb */
color: hsl(212, 61%, 43%);   /* hsl */
color: royalblue;            /* named */
color: rgba(0,0,0,0.5);      /* rgba with alpha */

Arka Plan Renkleri ve Görselleri

Öğe arka planlarını background-color ile ayarlayın. Renk geçişleri veya adreslerle background-image kullanın. background kısa yazımı; rengi, görseli, konumu, boyutu ve tekrarı tek bir bildirimde birleştirir.

background-color: #f7fafc;
background-image: linear-gradient(135deg, #667eea, #764ba2);
background: url('/hero.webp') center / cover no-repeat #1a202c;

Yazı Tipi Özellikleri

Tipografiyi şu özelliklerle denetleyin: font-family (yazı tipi), font-size (em, rem, px), font-weight (100–900), font-style (italik), line-height (okunabilirlik oranı) ve letter-spacing (harf aralığı).

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #1a202c;
}

Metin Özellikleri

Ek metin biçimlendirme seçenekleri: text-align (sol, orta, sağ, iki yana yaslı), text-decoration (altı çizili, üstü çizili, hiçbiri), text-transform (büyük harf, ilk harfleri büyük) ve kısaltma için text-overflow: ellipsis.

h1 { text-align: center; text-transform: uppercase; }
a { text-decoration: none; }
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

rem ve em ve px

px mutlaktır. em, öğenin kendi yazı tipi boyutuna göre görecelidir (basamaklandırılır). rem, kök yazı tipi boyutuna göre görecelidir (öngörülebilirdir). Kullanıcının yazı tipi tercihlerini gözetmek için çoğu boyutlandırmada rem kullanın.

html { font-size: 16px; }  /* 1rem = 16px */
.card { padding: 1.5rem; }  /* 24px */
.small { font-size: 0.875rem; } /* 14px */

Kutu Modeli

Her HTML öğesi dört katmandan oluşan dikdörtgen bir kutudur: içerik (öğenin gerçek boyutları), dolgu (kenarlığın içindeki boşluk), kenarlık ve kenar boşluğu (kenarlığın dışındaki boşluk).

/* Total width = content + padding + border */
.box {
  width: 200px;
  padding: 16px;
  border: 2px solid #ccc;
  margin: 24px;
}

box-sizing: border-box

Varsayılan olarak (content-box), dolgu ve kenarlık bildirilen genişliğe eklenir. box-sizing: border-box kullanıldığında dolgu ve kenarlık bildirilen genişliğe dahil edilir — neredeyse her zaman istediğiniz davranış budur.

/* Apply globally */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Now width: 200px includes padding and border */
.card {
  width: 200px;
  padding: 20px; /* doesn't add to width */
}

Kenar Boşluklarının Birleşmesi

Yan yana bulunan blok öğeler arasındaki dikey kenar boşlukları birleşir — yalnızca daha büyük olan kenar boşluğu uygulanır. Bir üst öğenin ilk veya son alt öğesiyle arasındaki kenar boşlukları da birleşir. Esnek düzen ve ızgara alt öğelerinde kenar boşlukları birleşmez.

Dolgu Kısa Yazımı

padding: top right bottom left kısa yazımı tüm kenarları ayarlar. İki değer dikey ve yatay kenarları ayarlar. Üç değer üst, yatay ve alt kenarları ayarlar.

padding: 16px;              /* all sides */
padding: 8px 16px;          /* top/bottom  left/right */
padding: 8px 16px 24px;     /* top  left/right  bottom */
padding: 8px 16px 24px 32px; /* top right bottom left */

Kenarlık Özellikleri

border: width style color kısa yazımıyla kenarlıkları ayarlayın. Tek tek kenarlar için border-top vb. kullanın. Yuvarlatılmış köşeler için border-radius kullanın. outline benzerdir, ancak yerleşimi etkilemez.

.card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
button:focus {
  outline: 2px solid #3182ce;
  outline-offset: 2px;
}

Taşma

overflow: hidden, öğenin boyutunu aşan içeriği kırpar. overflow: scroll kaydırma çubukları ekler. overflow: auto yalnızca gerektiğinde kaydırma çubukları ekler. Eksenleri birbirinden bağımsız olarak denetlemek için overflow-x ve overflow-y kullanın.

Hızlı Kontrol

box-sizing: border-box ve width: 300px; padding: 20px; border: 2px solid kullanıldığında öğenin görüntülenen toplam genişliği nedir?

Özet: Renkler, Tipografi, Kutu Modeli

Renkleri onaltılık, rgb veya hsl ile ayarlayın. Yazı tiplerini yazı tipi ailesi, boyutu, kalınlığı ve satır yüksekliğiyle uygulayın. Her öğe bir kutudur: içerik + dolgu + kenarlık + kenar boşluğu. Öngörülebilir boyutlandırma için box-sizing: border-box ayarını genel olarak etkinleştirin.

Sıkça Sorulan Sorular

“Renkler, Tipografi ve Kutu Modeli” dersi ücretsiz mi?

Evet — “Renkler, Tipografi ve Kutu Modeli” 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 Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Renkler, Tipografi ve Kutu Modeli” dersinde ne öğreneceğim?

Hex, rgb ve hsl değerleriyle renk uygulayın, yazı tiplerini seçin, boyutları ve satır yüksekliklerini ayarlayın; öğeler arasında boşluk oluşturmak için margin, border ve padding kullanın. Frontend 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.

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

Önceden deneyim gerekmez. CoddyKit'te Frontend 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 2. dersidir.

“Renkler, Tipografi ve Kutu Modeli” 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 Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend 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

  1. Seçiciler ve Basamaklandırma
  2. Renkler, Tipografi ve Kutu Modeli
  3. Display: block inline flex grid Temelleri
  4. Konumlandırma: relative absolute fixed sticky
← Frontend Academy Sayfasına Dön