Satır İçi Stiller
Öğelerinizin görünümünü doğrudan HTML içinde değiştirin
Satır İçi Stiller, CoddyKit'te ücretsiz bir HTML for Kids dersidir. Bu, 4 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 4 dersten oluşur.
Arka Plan Rengi Ekleme
background-color özelliğini kullanarak öğelerinizin öne çıkmasını sağlayabilirsiniz.
Örnek:
<p style="background-color: yellow;">This text has a yellow background.</p>
Satır İçi Stiller: HTML Kodunuza Basit Biçimlendirmeler Ekleme
Satır içi stiller dersine hoş geldiniz! Bugün, style özniteliğini kullanarak HTML içindeki öğeleri doğrudan nasıl biçimlendireceğinizi öğreneceksiniz.
Satır İçi Stiller Nedir?
Satır içi stiller, style özniteliğini kullanarak doğrudan bir HTML etiketine CSS eklemenizi sağlar. Sayfanızı biçimlendirmenin en basit yolu budur.
Örnek:
<p style="color: red;">This is red text!</p>
color: red; ifadesi metin rengini kırmızıya dönüştürür.
Yazı Tipi Boyutunu Değiştirme
Metninizin boyutunu değiştirmek için font-size özelliğini kullanın.
Örnek:
<p style="font-size: 24px;">This text is 24 pixels large.</p>
Birden Çok Stili Birleştirme
Satır içi stiller, birden çok CSS özelliğini birleştirmenize olanak tanır. Her özelliği noktalı virgülle ; ayırın.
Örnek:
<p style="color: white; background-color: black; font-size: 18px;">
This text has multiple styles!
</p>
Diğer Öğeleri Biçimlendirme
Satır içi stiller; başlıklar, düğmeler ve görseller gibi tüm HTML öğeleriyle çalışır.
Örnek:
<h1 style="color: green;">Styled Heading</h1>
<button style="background-color: coral; color: white; padding: 10px;">
Styled Button
</button>
Kendiniz Deneyin
Satır içi stiller kullanarak bir web sayfası oluşturalım. Başlangıç için bir örnek aşağıda verilmiştir:
<!DOCTYPE html>
<html>
<head>
<title>Inline Styles Example</title>
</head>
<body>
<h1 style="color: purple;">Welcome to My Styled Page</h1>
<p style="color: gray; font-size: 16px;">
This is an example of inline styling.
</p>
<button style="background-color: lightblue; padding: 10px; border: none;">
Click Me!
</button>
</body>
</html>
Harika İş!
Tebrikler! HTML öğelerinize basit ve etkili biçimlendirmeler eklemek için satır içi stilleri nasıl kullanacağınızı öğrendiniz. Satır içi stiller hızlı değişiklikler için harikadır; ancak web sayfanız büyüdükçe daha gelişmiş biçimlendirme tekniklerine ihtiyaç duyacaksınız. Bir sonraki derste CSS temellerini inceleyeceğiz. Profesyonel web sayfaları tasarlamaya hazır olun!
style Özniteliğini Kullanma
Satır İçi Stiller Nedir?
Satır içi stiller, style özniteliğini kullanarak doğrudan bir HTML etiketine CSS eklemenizi sağlar. Sayfanızı biçimlendirmenin en basit yolu budur.
Örnek:
<p style="color: red;">This is red text!</p>
color: red; ifadesi metin rengini kırmızıya dönüştürür.
<p style="color: red;">This is red text.</p>
Sıkça Sorulan Sorular
“Satır İçi Stiller” dersi ücretsiz mi?
Evet — “Satır İçi Stiller” 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 4 dersten oluşur.
“Satır İçi Stiller” dersinde ne öğreneceğim?
Öğelerinizin görünümünü doğrudan HTML içinde değiştirin 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, 4 dersinin 1. dersidir.
“Satır İçi Stiller” 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.
Bu kursun tüm dersleri
- Satır İçi Stiller
- CSS Temelleri
- Renkler ve Arka Planlar
- Metin Biçimlendirme