Stilleri nasıl tanımlayabiliriz?
Stilleri nasıl tanımlayabiliriz?
Stilleri nasıl tanımlayabiliriz?, 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ş
Merhaba,
Önceki dersimizde bunu kısmen açıklamıştık. Şimdi tekrar edelim.
CSS'te stiller 3 şekilde tanımlanabilir:
- Satır İçi Stil
- <style> etiketleri arasında
- Harici bir CSS dosyası kullanarak
Satır İçi Stil
1. Satır İçi Stil
Adından da anlayabileceğimiz gibi bu, style özniteliğini her öğeye satır içi olarak geçirerek tanımladığımız stilleri ifade eder.
Bu kullanım tercih edilmez; çünkü her stilin yeniden kullanılabilirliğini azaltır ve okunabilirliği çok düşüktür.
Aşağıdaki örnekte letter-spacing stili, metindeki her harf arasında 15 piksellik boşluk oluşturmuştur.
<p style="letter-spacing:15px">
Inline Style
</p>style etiketiyle
2. <style> etiketleri arasında
Stil etiketleri arasında tanımlanabilir. Bu tanım da bazı istisnalar dışında (ekranın ilk görüntü alanındaki içerik bölgesi gibi) tercih edilmez.
Örneklerimizi düzenli tutmak için style etiketlerini kullanmaya devam edeceğiz. Ancak belirttiğim istisnai durumlar dışında uygulamalarınızda bunu kullanmanızı önermiyorum.
<html>
<head>
<style>
.root {
color:red;
}
</style>
</head>
<body class>
<div class="root">Test</div>
</body>
</html>Harici CSS Dosyası
3. Harici CSS Dosyası
Şimdi harici CSS dosyalarının nasıl kullanılacağını öğrenelim.
En sık kullanacağımız stil tanımı budur. Öncelikle yalnızca CSS seçicilerini içeren bir dosya oluşturulur.
Ardından ilgili CSS dosyası, head etiketleri arasındaki link öğesi için tanımlanabilir.
Aşağıdaki örnekte style.css dosyası, href özniteliği aracılığıyla link öğesine atanmıştır.
<link rel = "stylesheet" href = "styles.css">
Bu özellik, aynı CSS dosyasının birden fazla dosya tarafından çağrılabilmesi ve yeniden kullanılabilirliğin artırılması için en iyi çözümdür.
Aşağıdaki örnekte harici sınıfı seçen bir stil tanımı oluşturulmuştur.
.external{
color:red;
font-size:30px;
letter-spacing:10px;
}
Aşağıdaki örnekte harici sınıfı seçen bir stil tanımı oluşturulmuştur.
Bu ifadeyi test 1.css adlı dosyaya kaydedip link öğesine atayalım.
<html>
<head>
<link rel="stylesheet"
href="https://coddy.s3.amazonaws.com/css/test_1.css">
</head>
<body>
<div class="external">Hello</div>
</body>
</html>Tebrikler
Tebrikler 🎉
Bu bölümde CSS'te stil tanımlama türlerini öğrendik.
Bir sonraki bölümde id Seçicisi konusunu öğreneceğiz.
Yapay zeka eğitmeniyle HTML öğ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
- 16
- Dersler
- 35
Sıkça Sorulan Sorular
“Stilleri nasıl tanımlayabiliriz?” dersi ücretsiz mi?
Evet — “Stilleri nasıl tanımlayabiliriz?” 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.
“Stilleri nasıl tanımlayabiliriz?” dersinde ne öğreneceğim?
Stilleri nasıl tanımlayabiliriz? 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.
“Stilleri nasıl tanımlayabiliriz?” 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.