23 KiB

Raw Blame History Unescape Escape

Teraryum Projesi Bölüm 2: CSS'e Giriş

Sketchnote: Tomomi Imura

HTML teraryumunuzun oldukça basit göründüğünü hatırlıyor musunuz? CSS, bu sade yapıyı görsel olarak çekici bir şeye dönüştürdüğümüz yerdir.

Eğer HTML bir evin iskeleti gibiyse, CSS o evi ev gibi hissettiren her şeydir - boya renkleri, mobilya düzeni, aydınlatma ve odaların birbirine uyumu. Versailles Sarayı'nın basit bir av köşkü olarak başladığını, ancak dekorasyon ve düzenlemeye gösterilen özenle dünyanın en görkemli binalarından birine dönüştüğünü düşünün.

Bugün, teraryumunuzu işlevsel bir yapıdan şık bir tasarıma dönüştüreceğiz. Öğreneceğiniz şeyler arasında öğeleri tam olarak konumlandırmak, düzenleri farklı ekran boyutlarına uyumlu hale getirmek ve web sitelerini çekici kılan görsel cazibeyi yaratmak var.

Bu dersin sonunda, stratejik CSS stillendirmesinin projenizi nasıl dramatik bir şekilde geliştirebileceğini göreceksiniz. Haydi teraryumunuza biraz stil ekleyelim.

Ders Öncesi Test

Ders öncesi testi

CSS ile Başlangıç

CSS genellikle sadece "şeyleri güzel yapmak" olarak düşünülür, ancak çok daha geniş bir amaca hizmet eder. CSS, bir filmin yönetmeni olmak gibidir - sadece her şeyin nasıl göründüğünü değil, aynı zamanda nasıl hareket ettiğini, etkileşimlere nasıl tepki verdiğini ve farklı durumlara nasıl uyum sağladığını kontrol edersiniz.

Modern CSS oldukça yeteneklidir. Telefonlar, tabletler ve masaüstü bilgisayarlar için düzenleri otomatik olarak ayarlayan kodlar yazabilirsiniz. Kullanıcıların dikkatini gerektiği yere yönlendiren akıcı animasyonlar oluşturabilirsiniz. Her şey bir araya geldiğinde sonuçlar oldukça etkileyici olabilir.

💡 Profesyonel İpucu: CSS sürekli olarak yeni özellikler ve yeteneklerle gelişiyor. Üretim projelerinde daha yeni CSS özelliklerini kullanmadan önce her zaman CanIUse.com adresinden tarayıcı desteğini kontrol edin.

Bu derste neler başaracağız:

Modern CSS tekniklerini kullanarak teraryumunuz için eksiksiz bir görsel tasarım oluşturacağız
Cascade, kalıtım ve CSS seçicileri gibi temel kavramları keşfedeceğiz
Duyarlı konumlandırma ve düzen stratejilerini uygulayacağız
CSS şekilleri ve stillendirme kullanarak teraryum kabını inşa edeceğiz

Ön Koşul

Bir önceki dersten teraryumunuz için HTML yapısını tamamlamış olmalı ve stillendirmeye hazır olmalısınız.

📺 Video Kaynağı: Bu faydalı video rehberine göz atın

CSS Dosyanızı Ayarlama

Stil vermeye başlamadan önce CSS'i HTML'e bağlamamız gerekiyor. Bu bağlantı, tarayıcıya teraryumumuz için stil talimatlarını nerede bulacağını söyler.

Teraryum klasörünüzde style.css adında yeni bir dosya oluşturun ve ardından HTML belgenizin <head> bölümüne bağlayın:

<link rel="stylesheet" href="./style.css" />

Bu kodun yaptığı şeyler:

HTML ve CSS dosyalarınız arasında bir bağlantı oluşturur
Tarayıcıya style.css dosyasından stilleri yüklemesini ve uygulamasını söyler
Bu dosyanın bir CSS dosyası olduğunu belirtmek için rel="stylesheet" özelliğini kullanır
Dosya yolunu href="./style.css" ile referans alır

CSS Cascade'i Anlamak

CSS'in neden "Cascading" Style Sheets olarak adlandırıldığını hiç merak ettiniz mi? Stiller bir şelale gibi aşağı doğru akar ve bazen birbirleriyle çakışabilir.

Askeri komuta yapılarının nasıl çalıştığını düşünün - bir generalin emri "tüm askerler yeşil giyinsin" diyebilir, ancak biriminize özel bir emir "tören için mavi elbise giyin" diyebilir. Daha spesifik talimat öncelik kazanır. CSS benzer bir mantığı takip eder ve bu hiyerarşiyi anlamak hata ayıklamayı çok daha yönetilebilir hale getirir.

Cascade Önceliğini Deneyimlemek

Bir stil çatışması yaratarak cascade'i görelim. Öncelikle <h1> etiketinize bir inline stil ekleyin:

<h1 style="color: red">My Terrarium</h1>

Bu kodun yaptığı şeyler:

Inline stil kullanarak <h1> öğesine doğrudan kırmızı bir renk uygular
CSS'i doğrudan HTML'e gömmek için style özelliğini kullanır
Bu belirli öğe için en yüksek öncelikli stil kuralını oluşturur

Sonra, style.css dosyanıza şu kuralı ekleyin:

h1 {
  color: blue;
}

Yukarıdaki kodda:

Tüm <h1> öğelerini hedefleyen bir CSS kuralı tanımladık
Metin rengini mavi olarak ayarladık ve bunu harici bir stil dosyasıyla yaptık
Inline stillere kıyasla daha düşük öncelikli bir kural oluşturduk

✅ Bilgi Kontrolü: Web uygulamanızda hangi renk görüntüleniyor? Neden o renk kazandı? Stilleri geçersiz kılmak isteyebileceğiniz senaryolar düşünebilir misiniz?

💡 CSS Öncelik Sırası (yüksekten düşüğe):

Inline stiller (style özelliği)

ID'ler (#myId)

Sınıflar (.myClass) ve özellikler

Element seçiciler (h1, div, p)

Tarayıcı varsayılanları

CSS Kalıtımını Anlamak

CSS kalıtımı genetik gibi çalışır - öğeler, ebeveyn öğelerinden belirli özellikleri miras alır. Eğer body öğesinde yazı tipi ailesini ayarlarsanız, içindeki tüm metinler otomatik olarak aynı yazı tipini kullanır. Bu, Habsburg ailesinin belirgin çene yapısının nesiller boyunca her birey için özel olarak belirtilmeden ortaya çıkmasına benzer.

Ancak her şey miras alınmaz. Yazı tipleri ve renkler gibi metin stilleri miras alınır, ancak kenar boşlukları ve çerçeveler gibi düzen özellikleri miras alınmaz. Tıpkı çocukların fiziksel özellikleri miras alması ama ebeveynlerinin moda seçimlerini miras almaması gibi.

Yazı Tipi Kalıtımını Gözlemlemek

<body> öğesinde bir yazı tipi ailesi ayarlayarak kalıtımı görelim:

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Burada olanları açıklayalım:

<body> öğesini hedef alarak tüm sayfa için yazı tipi ailesini ayarlar
Daha iyi tarayıcı uyumluluğu için yedek seçeneklerle bir yazı tipi yığını kullanır
Farklı işletim sistemlerinde harika görünen modern sistem yazı tiplerini uygular
Tüm alt öğelerin bu yazı tipini, özellikle geçersiz kılınmadıkça, miras almasını sağlar

Tarayıcınızın geliştirici araçlarını (F12) açın, Elemanlar sekmesine gidin ve <h1> öğenizi inceleyin. <body> öğesinden yazı tipi ailesini miras aldığını göreceksiniz:

✅ Deney Zamanı: <body> öğesinde color, line-height veya text-align gibi diğer miras alınabilir özellikleri ayarlamayı deneyin. Başlığınıza ve diğer öğelere ne olur?

📝 Miras Alınabilir Özellikler: color, font-family, font-size, line-height, text-align, visibility

Miras Alınamayan Özellikler: margin, padding, border, width, height, position

CSS Seçicilerini Anlamak

CSS seçicileri, belirli öğeleri stil vermek için hedeflemenin yoludur. Bu, kesin talimatlar vermek gibidir - "ev" demek yerine "Maple Caddesi'ndeki kırmızı kapılı mavi ev" diyebilirsiniz.

CSS, spesifik olmanın farklı yollarını sunar ve doğru seçiciyi seçmek, görev için uygun aracı seçmek gibidir. Bazen mahalledeki her kapıyı stil vermeniz gerekir, bazen de sadece belirli bir kapıyı.

Element Seçiciler (Etiketler)

Element seçiciler, HTML öğelerini etiket adlarına göre hedefler. Sayfanızda genel olarak uygulanacak temel stiller ayarlamak için mükemmeldir:

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  color: #3a241d;
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

Bu stilleri anlamak:

body seçici ile tüm sayfa boyunca tutarlı tipografi ayarlar
Daha iyi kontrol için varsayılan tarayıcı kenar boşluklarını ve dolgusunu kaldırır
Tüm başlık öğelerini renk, hizalama ve boşluklarla stilize eder
Ölçeklenebilir, erişilebilir yazı tipi boyutları için rem birimlerini kullanır

Element seçiciler genel stil vermek için iyi çalışsa da, teraryumunuzdaki bitkiler gibi bireysel bileşenleri stilize etmek için daha spesifik seçicilere ihtiyacınız olacak.

Benzersiz Öğeler için ID Seçiciler

ID seçiciler # sembolünü kullanır ve belirli id özelliklerine sahip öğeleri hedefler. ID'ler bir sayfada benzersiz olmalıdır, bu nedenle teraryumunuzun sol ve sağ bitki kapları gibi özel öğeleri stilize etmek için mükemmeldir.

Teraryumunuzdaki bitkilerin yer alacağı yan kaplar için stil oluşturmayı deneyelim:

#left-container {
  background-color: #f5f5f5;
  width: 15%;
  left: 0;
  top: 0;
  position: absolute;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

#right-container {
  background-color: #f5f5f5;
  width: 15%;
  right: 0;
  top: 0;
  position: absolute;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

Bu kodun yaptığı şeyler:

absolute konumlandırmayı kullanarak kapları ekranın sol ve sağ kenarlarına yerleştirir
Ekran boyutuna uyum sağlayan duyarlı yükseklik için vh birimlerini kullanır
box-sizing: border-box özelliğini uygular, böylece dolgu toplam genişliğe dahil edilir
Sıfır değerlerinden gereksiz px birimlerini kaldırır ve kodu daha temiz hale getirir
Gözleri yormayan hafif bir arka plan rengi ayarlar

✅ Kod Kalitesi Meydan Okuması: Bu CSS'in DRY (Kendini Tekrarlama) ilkesini ihlal ettiğini fark ettiniz mi? Bunu hem bir ID hem de bir sınıf kullanarak nasıl yeniden düzenleyebilirsiniz?

Geliştirilmiş yaklaşım:

<div id="left-container" class="container"></div>
<div id="right-container" class="container"></div>

.container {
  background-color: #f5f5f5;
  width: 15%;
  top: 0;
  position: absolute;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

#left-container {
  left: 0;
}

#right-container {
  right: 0;
}

Yeniden Kullanılabilir Stiller için Sınıf Seçiciler

Sınıf seçiciler . sembolünü kullanır ve birden fazla öğeye aynı stilleri uygulamak istediğinizde mükemmeldir. ID'lerin aksine, sınıflar HTML boyunca tekrar kullanılabilir, bu da onları tutarlı stil kalıpları için ideal kılar.

Teraryumumuzda, her bitkinin benzer bir stil alması gerekiyor, ancak aynı zamanda bireysel konumlandırmaya da ihtiyaç duyuyor. Paylaşılan stiller için sınıfların ve benzersiz konumlandırma için ID'lerin bir kombinasyonunu kullanacağız.

Her bitki için HTML yapısı:

<div class="plant-holder">
  <img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.tr.png" />
</div>

Anahtar öğeler açıklandı:

Tüm bitkiler için tutarlı kaplama stilleri sağlamak için class="plant-holder" kullanır
Paylaşılan görüntü stilleri ve davranışı için class="plant" uygular
Bireysel konumlandırma ve JavaScript etkileşimi için benzersiz id="plant1" içerir
Ekran okuyucu erişilebilirliği için açıklayıcı alt metin sağlar

Şimdi bu stilleri style.css dosyanıza ekleyin:

.plant-holder {
  position: relative;
  height: 13%;
  left: -0.6rem;
}

.plant {
  position: absolute;
  max-width: 150%;
  max-height: 150%;
  z-index: 2;
  transition: transform 0.3s ease;
}

.plant:hover {
  transform: scale(1.05);
}

Bu stilleri açıklamak:

Konumlandırma bağlamı oluşturmak için bitki tutucusuna göreli konumlandırma uygular
Tüm bitki tutucularını dikey olarak kaydırmadan sığacak şekilde %13 yükseklik ayarlar
Tutucuları hafifçe sola kaydırarak bitkileri kaplar içinde daha iyi merkezler
Bitkilerin max-width ve max-height özellikleriyle duyarlı bir şekilde ölçeklenmesine izin verir
Bitkileri teraryumdaki diğer öğelerin üzerine yerleştirmek için z-index kullanır
Daha iyi kullanıcı etkileşimi için CSS geçişleriyle hafif bir hover efekti ekler

✅ Eleştirel Düşünme: Neden hem .plant-holder hem de .plant seçicilerine ihtiyacımız var? Sadece birini kullanmaya çalışsaydık ne olurdu?

💡 Tasarım Deseni: Kaplama (.plant-holder) düzen ve konumlandırmayı kontrol ederken, içerik (.plant) görünüm ve ölçeklemeyi kontrol eder. Bu ayrım kodu daha sürdürülebilir ve esnek hale getirir.

CSS Konumlandırmayı Anlamak

CSS konumlandırma, bir oyunun sahne yönetmeni olmak gibidir - her aktörün nerede duracağını ve sahnede nasıl hareket edeceğini yönetirsiniz. Bazı aktörler standart düzene uyar, bazıları ise dramatik etki için özel bir konumlandırmaya ihtiyaç duyar.

Konumlandırmayı anladığınızda, birçok düzen zorluğu yönetilebilir hale gelir. Kullanıcılar kaydırırken üstte kalan bir navigasyon çubuğuna mı ihtiyacınız var? Konumlandırma bunu halleder. Belirli bir konumda görünen bir araç ipucu mu istiyorsunuz? Bu da konumlandırma ile yapılır.

Beş Konum Değeri

Konum Değeri	Davranış	Kullanım Durumu
`static`	Varsayılan akış, top/left/right/bottom'u yok sayar	Normal belge düzeni
`relative`	Normal konumuna göre konumlandırılır	Küçük ayarlamalar, konumlandırma bağlamı oluşturma
`absolute`	En yakın konumlandırılmış ata öğeye göre konumlandırılır	Hassas yerleştirme, üst üste bindirmeler
`fixed`	Görüntüleme alanına göre konumlandırılır	Navigasyon çubukları, yüzer öğeler
`sticky`	Kaydırmaya göre relative ve fixed arasında geçiş yapar	Kaydırma sırasında yapışan başlıklar

Teraryumumuzda Konumlandırma

Teraryumumuz, istenen düzeni oluşturmak için konumlandırma türlerinin stratejik bir kombinasyonunu kullanır:

/* Container positioning */
.container {
  position: absolute; /* Removes from normal flow */
  /* ... other styles ... */
}

/* Plant holder positioning */
.plant-holder {
  position: relative; /* Creates positioning context */
  /* ... other styles ... */
}

/* Plant positioning */
.plant {
  position: absolute; /* Allows precise placement within holder */
  /* ... other styles ... */
}

Konumlandırma stratejisini anlamak:

Mutlak kaplar, normal belge akışından çıkarılır ve ekran kenarlarına sabitlenir
Göreli bitki tutucular, belge akışında kalırken bir konumlandırma bağlamı oluşturur
Mutlak bitkiler, göreli kaplar içinde hassas bir şekilde konumlandırılabilir
Bu kombinasyon, bitkilerin dikey olarak istiflenmesine ve bireysel olarak konumlandırılabilir olmasına olanak tanır

🎯 Neden Önemli: plant öğelerinin bir sonraki derste sürüklenebilir hale gelmesi için mutlak konumlandırmaya ihtiyacı var. Mutlak konumlandırma, onları normal düzen akışından çıkarır ve sürükle-bırak etkileşimlerini mümkün kılar.

✅ Deney Zamanı: Konumlandırma değerlerini değiştirmeyi deneyin ve sonuçları gözlemleyin:

.container'ı absolute yerine relative olarak değiştirirseniz ne olur?
.plant-holder'ı relative yerine absolute olarak ayarlarsanız düzen nasıl değişir?
.plant'ı relative konumlandırmaya geçirirseniz ne olur?

CSS ile Teraryum İnşa Etmek

Şimdi sadece CSS kullanarak bir cam kavanoz yapacağız - hiçbir resim veya grafik yazılımı gerekmiyor.

Konumlandırma ve şeffaflık kullanarak gerçekçi görünümlü cam, gölgeler ve derinlik efektleri oluşturmak, CSS'in görsel yeteneklerini gösterir. Bu teknik, Bauhaus hareketindeki mimarların basit geometrik formları kullanarak karmaşık, güzel yapılar yaratma yöntemlerini yansıtır. Bu prensipleri anladığınızda, birçok web tasarımının arkasındaki CSS tekniklerini tanıyabilirsiniz.

Cam Kavanoz Bileşenlerini Oluşturma

Hadi, teraryum kavanozunu parça parça oluşturalım. Her bir parça, duyarlı tasarım için yüzde tabanlı boyutlandırma ve mutlak konumlandırma kullanır:

.jar-walls {
  height: 80%;
  width: 60%;
  background: #d1e1df;
  border-radius: 1rem;
  position: absolute;
  bottom: 0.5%;
  left: 20%;
  opacity: 0.5;
  z-index: 1;
  box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
}

.jar-top {
  width: 50%;
  height: 5%;
  background: #d1e1df;
  position: absolute;
  bottom: 80.5%;
  left: 25%;
  opacity: 0.7;
  z-index: 1;
  border-radius: 0.5rem 0.5rem 0 0;
}

.jar-bottom {
  width: 50%;
  height: 1%;
  background: #d1e1df;
  position: absolute;
  bottom: 0;
  left: 25%;
  opacity: 0.7;
  border-radius: 0 0 0.5rem 0.5rem;
}

.dirt {
  width: 60%;
  height: 5%;
  background: #3a241d;
  position: absolute;
  border-radius: 0 0 1rem 1rem;
  bottom: 1%;
  left: 20%;
  opacity: 0.7;
  z-index: -1;
}

Teraryum yapısını anlama:

Kullanır yüzde tabanlı boyutlar, tüm ekran boyutlarında duyarlı ölçekleme için
Konumlandırır öğeleri mutlak olarak, onları tam olarak üst üste ve hizalamak için
Uygular farklı opaklık değerleri, cam şeffaflık efekti oluşturmak için
Kullanır z-index katmanlaması, bitkilerin kavanozun içinde görünmesini sağlamak için
Ekler ince kutu gölgesi ve rafine edilmiş kenar yuvarlama, daha gerçekçi bir görünüm için

Yüzde ile Duyarlı Tasarım

Tüm boyutların sabit piksel değerleri yerine yüzde kullanmasına dikkat edin:

Neden önemli:

Sağlar teraryumun herhangi bir ekran boyutunda orantılı olarak ölçeklenmesini
Korur kavanoz bileşenleri arasındaki görsel ilişkileri
Sunar mobil telefonlardan büyük masaüstü monitörlere kadar tutarlı bir deneyim
İzin verir tasarımın görsel düzeni bozmadan uyum sağlamasına

CSS Birimlerinin Kullanımı

Kenarlık yuvarlama için rem birimlerini kullanıyoruz, bu birimler kök yazı tipi boyutuna göre ölçeklenir. Bu, kullanıcı yazı tipi tercihlerini dikkate alan daha erişilebilir tasarımlar oluşturur. CSS göreceli birimler hakkında daha fazla bilgi edinin.

✅ Görsel Deneyim: Bu değerleri değiştirin ve etkilerini gözlemleyin:

Kavanoz opaklığını 0.5'ten 0.8'e değiştirin – cam görünümünü nasıl etkiliyor?
Toprağın rengini #3a241d'den #8B4513'e ayarlayın – görsel etkisi nedir?
Toprağın z-index değerini 2 olarak değiştirin – katmanlama üzerinde ne oluyor?

GitHub Copilot Agent Challenge 🚀

Agent modunu kullanarak aşağıdaki meydan okumayı tamamlayın:

Açıklama: Teraryum bitkilerinin doğal bir rüzgar etkisi simüle ederek hafifçe sallanmasını sağlayan bir CSS animasyonu oluşturun. Bu, CSS animasyonları, dönüşümler ve keyframe'leri pratik yaparken teraryumun görsel çekiciliğini artırmanıza yardımcı olacak.

İpucu: Bitkilerin teraryumda hafifçe sağa sola sallanmasını sağlayan CSS keyframe animasyonları ekleyin. Her bitkiyi hafifçe (2-3 derece) sola ve sağa döndüren bir sallanma animasyonu oluşturun, 3-4 saniye süresince ve .plant sınıfına uygulayın. Animasyonun sonsuz döngüye sahip olduğundan ve doğal bir hareket için bir easing fonksiyonuna sahip olduğundan emin olun.

agent mode hakkında daha fazla bilgi edinin.

🚀 Meydan Okuma: Cam Yansımaları Ekleme

Teraryumunuzu gerçekçi cam yansımalarıyla geliştirmeye hazır mısınız? Bu teknik tasarıma derinlik ve gerçekçilik katacak.

Cam yüzeylerinden ışığın nasıl yansıdığını simüle eden ince vurgular oluşturacaksınız. Bu yaklaşım, Jan van Eyck gibi Rönesans ressamlarının boyalı camı üç boyutlu göstermek için ışık ve yansımayı nasıl kullandığına benzer. İşte hedefiniz:

Meydan okumanız:

Oluşturun cam yansımaları için ince beyaz veya açık renkli oval şekiller
Konumlandırın bunları kavanozun sol tarafında stratejik olarak
Uygulayın gerçekçi ışık yansıması için uygun opaklık ve bulanıklık efektleri
Kullanın border-radius organik, baloncuk benzeri şekiller oluşturmak için
Deneyin daha fazla gerçekçilik için gradyanlar veya kutu gölgeleri

Ders Sonrası Test

Ders sonrası test

CSS Bilginizi Genişletin

CSS başlangıçta karmaşık gelebilir, ancak bu temel kavramları anlamak daha ileri teknikler için sağlam bir temel sağlar.

Bir sonraki CSS öğrenme alanlarınız:

Flexbox - öğelerin hizalanmasını ve dağıtımını basitleştirir
CSS Grid - karmaşık düzenler oluşturmak için güçlü araçlar sunar
CSS Değişkenleri - tekrarı azaltır ve sürdürülebilirliği artırır
Duyarlı tasarım - sitelerin farklı ekran boyutlarında iyi çalışmasını sağlar

Etkileşimli Öğrenme Kaynakları

Bu eğlenceli, uygulamalı oyunlarla bu kavramları pratik yapın:

🐸 Flexbox Froggy - Eğlenceli meydan okumalarla Flexbox'ı öğrenin
🌱 Grid Garden - Sanal havuçlar yetiştirerek CSS Grid'i öğrenin
🎯 CSS Battle - CSS becerilerinizi kodlama meydan okumalarıyla test edin

Ek Öğrenme

Kapsamlı CSS temelleri için bu Microsoft Learn modülünü tamamlayın: HTML uygulamanızı CSS ile stilize edin

Ödev

CSS Refactoring

Feragatname:
Bu belge, AI çeviri hizmeti Co-op Translator kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çeviriler hata veya yanlışlıklar içerebilir. Belgenin orijinal dili, yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan yanlış anlamalar veya yanlış yorumlamalardan sorumlu değiliz.

23 KiB Raw Blame History Unescape Escape

Teraryum Projesi Bölüm 2: CSS'e Giriş

Ders Öncesi Test

CSS ile Başlangıç

Ön Koşul

CSS Dosyanızı Ayarlama

CSS Cascade'i Anlamak

Cascade Önceliğini Deneyimlemek

CSS Kalıtımını Anlamak

Yazı Tipi Kalıtımını Gözlemlemek

CSS Seçicilerini Anlamak

Element Seçiciler (Etiketler)

Benzersiz Öğeler için ID Seçiciler

Yeniden Kullanılabilir Stiller için Sınıf Seçiciler

CSS Konumlandırmayı Anlamak

Beş Konum Değeri

Teraryumumuzda Konumlandırma

CSS ile Teraryum İnşa Etmek

Cam Kavanoz Bileşenlerini Oluşturma

Yüzde ile Duyarlı Tasarım

CSS Birimlerinin Kullanımı

GitHub Copilot Agent Challenge 🚀

🚀 Meydan Okuma: Cam Yansımaları Ekleme

Ders Sonrası Test

CSS Bilginizi Genişletin

Etkileşimli Öğrenme Kaynakları

Ek Öğrenme

Ödev

23 KiB

Raw Blame History Unescape Escape