CSS'ye giriş
CSS'ye giriş
CSS'ye giriş, CoddyKit'te ücretsiz bir HTML for Kids dersidir. Bu, 1 dersinin 1. 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, HTML for Kids öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML for Kids kursu toplamda 1 dersten oluşur.
Giriş 1
Merhaba,
Önceki bölümde CSS'in ne olduğunu ve neden kullanmamız gerektiğini öğrendik. Şimdi basit bir örnekle hızlı bir giriş yapmak istiyorum.
Basit bir HTML sayfası tanımlayalım.
<html>
<body>
<h1>Hello CSS</h1>
</body>
</html>Satır İçi Stil
Şimdi Merhaba CSS başlığımızın rengini kırmızı yapmak istediğimizi düşünelim. Bunun için neredeyse her HTML etiketine eklenebilen style özniteliğini kullanacağız.
Bu öznitelikle her öğede satır içi bir stil tanımlayabiliriz.
Önizleme bölümüne baktığımızda başlığın renginin kırmızıya dönüştüğünü göreceğiz.
color: red;
Öğenin yazı tipi rengini bir stil tanımıyla değiştirdik.
<h1 style="color:red;">Hello CSS</h1>Satır İçi Stil 2
HTML'de etiketlere davranış ve öznitelik atamak için öznitelikleri kullandığımızı söylediğimizi hatırlayacaksınız.
Bu özniteliklerin stil açısından en önemlilerinden biri, etiketler için stil tanımlamak üzere style özniteliğini kullanmamızdır.
Satır İçi Stil 3
Şimdi yeni bir stil ekleyelim. font-size ile metin boyutunu artırabiliriz.
Birden fazla stil tanımlarken stilleri noktalı virgüllerle ayırmamız gerekir.
Aşağıdaki örnekte renk ve font-size stilleri noktalı virgüllerle ayrılmıştır.
<h1 style="color:red;font-size:50px;">
Hello CoddyKit
</h1>Stil Tanımı
Stil eklerken söz dizimi önemlidir.
styleName: styleValue;
Stili yukarıdaki gibi atamamız gerektiğini tekrar hatırlayalım.
Örnek
Şimdi örneğimizi biraz daha genişletelim.
<html>
<body>
<h1>Hello CoddyKit</h1>
<p>Lorem Ipsum is simply dummy
text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s,
when an unknown printer took a galley of
type and scrambled it to make a
type specimen book.</p>
<h1>Hello CSS</h1>
</body>
</html>Örnek 2
Bu örnekte tüm metinlerin rengini kırmızı yapmak istiyoruz. Her etiket için stili aşağıdaki gibi tanımlayabiliriz.
<html>
<body>
<h1 style="color:red;">Hello Coddy</h1>
<p style="color:red;">
Lorem Ipsum is simply dummy
text of the printing and typesetting industry
Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,
when an unknown printer took a galley
of type and scrambled it to
make a type specimen book.</p>
<h1 style="color:red;">Hello CSS</h1>
</body>
</html>CSS Seçicisi
Ama bu şekilde pek iyi görünmüyor, değil mi?
Çünkü artık sayfada 3 öğe var ve her birinin metin rengini kırmızı yaptık. Ancak bu sayının 3000'e çıktığını düşünürsek her biri için bir stil tanımlamak pek anlamlı olmaz.
Bunun yerine, her öğeyi satır içi olarak tanımlamak yerine CSS seçicilerini kullanmamız gerekir.
Giriş 12
Şimdi seçici kavramını öğrenelim.
CSS seçicileri, HTML öğelerini biçimlendirmek için belgede bulunan ilgili HTML öğesini seçmekten sorumludur.
Yani adından da anlayabileceğimiz gibi HTML öğelerini seçerler. 😂
CSS seçicileri, HTML belgesindeki <style> etiketleri arasında veya harici bir CSS dosyasında tanımlanmalıdır.
Örneklerimizde genellikle style etiketleri arasında bulunan tanımı kullanacağız. Ancak stili harici bir CSS dosyasında tanımlamak daha doğrudur.
Giriş 13
Nokta işlecini ve sınıf adını, style etiketleri arasında bir sınıf tanımlamak için kullanırız. Stil tanımları ise süslü parantezler arasında yapılır.
.class-name {
font-size:22px;
color:red;
}
Aşağıdaki örnekte, style etiketleri arasında my-component adlı bir sınıf tanımladık ve ilgili sınıfa font-size stilini atadık.
<style>
.my-component{
font-size:22px;
}
</style>
Şimdi iki paragraf öğesi tanımlayalım
Şimdi my-component sınıfına sahip iki paragraf öğesi tanımlayalım.
Bu tanımdan sonra her iki paragraf da aynı sınıf adına sahip olduğu için CSS seçicisi tarafından seçilecek ve yazı tipi boyutları 22px olarak güncellenecektir.
<style>
.my-component{
font-size:22px;
}
</style>
<p class="my-component">Hello CoddyKit</p>
<p class="my-component">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aenean maximus neque diam,
in tristique tortor volutpat a. Vivamus porttitor
id est et suscipit. Duis interdum at sem sed vestibulum.
Phasellus sit amet ullamcorper libero, a vestibulum libero.
Fusce laoreet nunc a pharetra viverra.
</p>Giriş 6
Bir seçiciye birden fazla stil atayabiliriz.
Aşağıdaki örnekte hem font-size hem de renk stili aynı seçicide tanımlanmıştır.
<style>
.my-component{
font-size:22px;
color:red;
}
</style>CSS Seçicilerini İç İçe Yerleştirme
Aşağıdaki HTML kodunu inceleyelim.
Bir paragraf öğesi tanımlanmış ve bu öğeye 'Hello CSS Selectors' içeriğini içeren bir span öğesi eklenmiştir.
Bu durumda paragraf öğesinin span öğesinin ebeveyni olduğunu söyleyebiliriz.
Öte yandan span öğesi de p öğesinin çocuğudur.
Tıpkı canlılarda olduğu gibi, kod bloğundaki yerleşimlerine göre HTML öğelerini ebeveyn-çocuk ilişkileri içinde kullanacağız.
<p>
<span>Hello CSS Selectors</span>
</p>CSS Seçicisinde İç İçe Yapı 2
Örneğimizi biraz daha genişletelim ve öğeler arasındaki hiyerarşiyi tekrar inceleyelim.
- Aşağıdaki örneğe göre
- <span> ve <a> öğeleri birbirinin kardeşidir.
- <span> ve <a> öğeleri div öğesinin alt öğeleridir.
- <span> ve <a>, <p> öğesinin çocuklarıdır.
- <p> öğesi <div> öğesinin çocuğudur.
<div>
<p>
<span>Hello CSS Selectors</span>
<a href="https://coddykit.com">
Go CoddyKit
</a>
</p>
</div>Ağaç modelini inceleme
Yukarıdaki görsele daha yakından bakalım.
Aşağıdaki HTML kod örneği bir ağaç modeline dönüştürülmüştür.
Ağaç modelinin aslında ebeveyn-çocuk hiyerarşisinin bir yansıması olduğuna dikkat edin.
<!DOCTYPE html>
<html>
<head>
<title>CoddyKit</title>
<meta charset="UTF-8">
</head>
<body>
<h1>This is a Heading</h1>
<p>
<a href="#">Link</a>
<br/>
<span>lorem ipsum</span>
</p>
</body>
</html>
Peki bu hiyerarşik ilişkiyi ne zaman kullanırız?
Peki bu hiyerarşik ilişkiyi ne zaman kullanırız?
Önce bir örnek yapıp bir problem ortaya koyalım. Ardından bu hiyerarşiyi kullanarak nasıl çözüm üretebileceğimizi görelim.
Aşağıdaki kod örneğine bakalım.
Tüm metinleri kırmızıya boyamak istediğimizi varsayalım. Bu durumda şimdiye kadar iki farklı kullanım öğrendik.
- İlk ve en kötü yöntem olarak, stil (style = "color: red") özniteliğini her öğeye satır içi olarak tanımlayacağız.
- İkinci olarak red-txt adlı bir sınıf tanımlayıp her öğeye öznitelik olarak atayacağız (class = "red-txt").
Ama bunu yapmanın daha kolay bir yolu var. 🥳
<div class="root">
<span>This is a span element</span>
<div>
<p>This is a p element</p>
<p><span>
This is a span element
</span>
</p>
</div>
</div>Peki bu hiyerarşik ilişkiyi ne zaman kullanırız? 2
Yukarıdaki koda tekrar göz atalım.
root adlı sınıfa sahip div öğesine dikkat ettiğimizde, bunun örneğimizdeki tüm öğelerin aslında atası olduğunu görürüz.
İnsanlarda genetik özellikler atalardan alt soylara aktarılır. CSS'te bir ataya atanan stil, alt soylara da yansır.
Bu durumda, ilgili div öğesini seçen bir stil tanımı yaptığımızda, tüm alt soylarının bu tanımdan etkilenmesini bekleyebiliriz.
Hadi yapalım.
Peki bu hiyerarşik ilişkiyi ne zaman kullanırız? 3
Nokta işlecinin yardımıyla root adlı bir sınıf tanımlayalım ve bu sınıfın içine bir stil tanımı (color: red) yazalım.
root sınıfına sahip tüm öğeleri seçecek ve kendisinin ve alt soylarının metin renklerini kırmızı yapacaktır.
Önizleme bölümüne baktığımızda tüm metinlerin kırmızıya dönüştüğünü göreceğiz.
<style>
.root{
color:red;
}
</style>
<div class="root">
<span>This is a span element</span>
<div>
<p>This is a p element</p>
<p>
<span>
This is a span element
</span>
</p>
</div>
</div>Kalıtım
Bu kavramı CSS'te Inheritance olarak ifade edebiliriz. Bu özellik sayesinde kodumuzu daha kısa yazmayı öğrendik.
Önceki örnekte olduğu gibi, aynı özelliği her öğe için tek tek tanımlamak yerine bu özelliği ata öğeye tanımladık ve kod tekrarını önledik.
Head Öğesinin Yerleştirilmesi
Önceki örneklerde style öğesini yazdığımız HTML öğesinin hemen yanına ekledik.
Ancak style etiketinin eklenmesi gereken doğru yer head etiketlerinin arasıdır.
Kullanım ise aşağıdaki gibi daha doğru olacaktır.
<!DOCTYPE html>
<html>
<head>
<style>
.hello{
font-size:30px;
}
</style>
</head>
<body>
<h1 class="hello">This is a Heading</h1>
</body>
</html>kodlarımızı mümkün olduğunca kısa ve yeniden kullanılabilir yazmak
Kod yazarken kodlarımızı mümkün olduğunca kısa ve yeniden kullanılabilir yazmamız gerekir.
Tebrikler
Tebrikler 🎉
Bu bölümde Seçici ve Kalıtım kavramlarını öğrendik.
Bir sonraki bölümde CSS'te stil tanımlama türlerini öğreneceğiz.
Sıkça Sorulan Sorular
“CSS'ye giriş” dersi ücretsiz mi?
Evet — “CSS'ye giriş” 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 HTML for Kids kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML for Kids kursu toplamda 1 dersten oluşur.
“CSS'ye giriş” dersinde ne öğreneceğim?
CSS'ye giriş HTML for Kids 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.
HTML for Kids öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML for Kids, 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, 1 dersinin 1. dersidir.
“CSS'ye giriş” 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 HTML for Kids dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML for Kids 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.