🚀 HTML Styles: Elementlere 'Real-Time' Müdahale

Elementlerin 'Inspector' Paneli: Style Niteliği

Selamlar. Bugüne kadar hep iskeletten bahsettik, şimdi o iskelete biraz renk ve karakter katma vakti. HTML'de bir elementin görünümünü (renk, boyut, yazı tipi vb.) değiştirmenin en hızlı yolu style niteliğini kullanmaktır. Buna web dünyasında Inline Styling (Satır İçi Stil) diyoruz.

Bunu bir oyun motorunun (örneğin Godot veya Unity) arayüzündeki 'Inspector' paneline benzetebilirsiniz. Bir objeyi seçip sağ taraftan rengini anında değiştirmek neyse, HTML etiketinin içine style="color: red;" yazmak da tam olarak odur.

Sözdizimi (Syntax)

style niteliği şu şekilde çalışır: <etiket style="özellik: değer;">

Birden fazla özellik eklemek isterseniz aralarına ; (noktalı virgül) koymanız yeterlidir.

Biz Neon Pong projesinin ilk prototiplerini çıkarırken, CSS dosyalarıyla vakit kaybetmemek için tüm neon efektlerini ve renk değişimlerini doğrudan bu style niteliği üzerinden test etmiştik. Hızlıca 'Acaba bu neon mavisi mi daha iyi durur yoksa pembe mi?' diye bakmak için muazzam bir yöntemdir. Ancak unutmayın; büyük projelerde tüm kodun içine bu stilleri dağıtmak, oyun kodunda 'spaghetti code' yazmak gibidir; yönetmesi zorlaşır. Şimdilik temel mantığı kavramak için bu yolu kullanacağız.

Bilmen Gereken Temel Özellikler

• color: Yazı rengini belirler.
• background-color: Elementin arka plan rengini belirler.
• font-size: Yazı boyutunu (px, rem vb. cinsinden) ayarlar.
• text-align: Metni hizalar (left, center, right).
• border: Elementin etrafına çerçeve çizer.

Küçük bir tavsiye: style niteliği pratik olsa da, gerçek hayatta stil işlerini CSS dosyalarına taşımalıyız. Bu dersin amacı, bir elemente 'anında' nasıl hükmedebileceğinizi göstermekti. Bir sonraki derste metinlerin içindeki vurguları (Formatting) nasıl yapacağımızı konuşacağız. Kodla kalın!

Ovid Notu: ovidgame.com