HTML Stilleri

Sayfa yapısını kurmayı ve yollarla diğer dosyalara işaret etmeyi zaten biliyorsunuz. Yeni başlayanların sonraki sorusu içeriğin nasıl göründüğünü değiştirmektir: metin rengi, arka plan ve boyut. Erken HTML pratiğinde bunu style özniteliğiyle yapabilirsiniz. Bu, CSS fikirlerine küçük bir kapıdır — demolar ve tarayıcıda hızlı denemeler için faydalıdır — oysa tam site tasarımı öğrenme yolunuzda daha sonra düzgün CSS’e taşınır. Şimdilik amaç tüm portalı süslemek değil; kısa property:value çiftlerini güvenle okuyup yazmaktır.

style özniteliği nedir?

style özniteliği, CSS bildirimlerini doğrudan bir HTML öğesinin başlangıç etiketine eklemenizi sağlar. Tarayıcı bu bildirimleri okur ve o öğeyi buna göre boyar. Sıfırdan ikinci bir dil icat etmiyorsunuz: HTML’nin zaten sağladığı yerde kısa CSS kuralları yazıyorsunuz. Bu yüzden satır içi stil iyi bir öğretim aracıdır: neden ile sonucu tek etikette görürsünüz. Profesyonel projeler nadiren tüm tasarımı özniteliklerde tutar — bu sorun değil; önce sözdizimini öğrenin, sonra görünümü ortak bir yere taşıyın.

Doğrudan yanıt

Görünümü bir öğede style="property: value;" ile ekleyin. Başlangıç özellikleri color (metin ön plan rengi), background-color (içeriğin arkasındaki alan) ve font-size (metin boyutu) içerir. Tüm listeyi tırnak içine alın — aksi halde HTML öznitelik ayrıştırması bozulur. Birden fazla bildirimi noktalı virgülle ayırın. Gerçek çok sayfalı sitelerde aynı görünümü her etikette tekrarlamamak için bir CSS dosyası veya <style> bloğu tercih edin. Bu derste net satır içi bildirimleri okuyup yazmaya odaklanın: önce sözdizimi doğruluğu, sonra ölçeklenebilirlik.

Özellik ve değer, birer birer

Her bildirimin bir özelliği (ne değiştirmek istediğiniz) ve bir değeri (nasıl görünmesi gerektiği) vardır. Aralarında iki nokta vardır. Yeni başlayanlar büyük bir liste ezberlemeden önce birkaç özelliği iyi öğrenmelidir.

Örneği okumak

• color: blue yalnızca o paragrafın metin rengini değiştirir
• background-color: lightyellow metnin arkasındaki alanı boyar
• font-size: 24px boyutu ayarlar; px yeni başlayanlar için yaygın bir birimdir
• Her paragrafın kendi style="..." değeri vardır, böylece üç etki ayrı ve kolay görülür kalır
• blue gibi adlandırılmış renkler pratik için uygundur; daha sonra #336699 gibi hex değerleri de göreceksiniz
  Tarayıcıda hiçbir şey değişmezse dosyayı kaydettiğinizi, sayfayı yenilediğinizi ve tüm style değerinin etrafındaki tırnakları koruduğunuzu doğrulayın. Çoğu «hiçbir şey görünmüyor» vakası, unutulmuş kayıt veya kelime işlemciden gelen kıvrık tırnaklardan kaynaklanır.

Tek öznitelikte birkaç bildirim

Bildirimleri tek bir style özniteliği içinde birleştirebilirsiniz. HTML okunaklı kalsın ve bir hafta sonra kendi yazdığınızı anlayabilesiniz diye listeyi kısa tutun. Her bildirimi noktalı virgülle bitirin — sonuncuyu da eklemek sorun değildir ve sonra düzenlerken çoğu zaman daha nettir. Tek öznitelikte bildirim sırası genelde soldan sağa okunur; demoda «mükemmel» özellik sırasından çok açıklık önemlidir.

Bu kalıp neden önemli

• Bir öğe renk, arka plan ve boyutu birlikte taşıyabilir
• Noktalı virgüller bildirimleri ayırır; tarayıcı her çifti ayrıştırabilir
• #f0f0f0 bir hex renktir; yeni başlayanlar için zorunlu değildir ama gerçek CSS’te yaygındır
• Paragrafın içindeki görünür cümle normal HTML metnidir; yalnızca style özniteliği görünümü değiştirir
  İlk gün tek özniteliğe on tasarım kararı sıkıştırmayın. Önce iki veya üç net özellikle sözdizimini öğrenin.

Farklı öğelerde style

style özniteliği yalnızca p ile sınırlı değildir. Başlıklar, span’ler ve birçok başka öğe onu aynı şekilde kullanabilir. Bu, stilin sihirli bir global anahtar olmadığını — bağladığınız öğeyi izlediğini — görmenize yardım eder. Başlık ile paragrafları yan yana karşılaştırınca yerelliği daha hızlı anlarsınız: her etiket kendi bildirim kümesini taşır.

Nelere dikkat edin

• h1 rengi paragrafları otomatik olarak yeniden stillendirmez
• İkinci paragraf arka plan ile yazı tipini birleştirir
• Satır içi stil yereldir: o öğeyi etkiler (ve normal CSS kurallarına göre çocukları da etkileyebilir — ama şimdilik demoları basit tutun)

Şimdi satır içi style, sonra CSS

Satır içi style deneyler için hızlıdır: bir değeri değiştirirsiniz, kaydedip yeniledikten sonra sonucu hemen görürsünüz. Yirmi sayfanın aynı lacivert başlık rengine ihtiyacı olduğunda ve yirmi özniteliği teker teker düzenlemeniz gerektiğinde acı verir. Paylaşılan CSS — belgenin head bölümünde bir <style> bloğu veya harici bir .css dosyası — görünümü tek yerde tutar ve «bir sayfayı unuttum» riskini düşürür. Bu kursun ilerisinde ayrı CSS öğrenimi vardır. Bu HTML oturumunda işiniz property:value fikrini anlamak ve birkaç doğru satır içi örnek yazmaktır; satır içi stili tüm sitenin nihai mimarisi gibi görmemek.

Düzenleyicinizde pratik

1. Bir h1 ve üç kısa paragraf içeren bir sayfa oluşturun.
2. İlk paragrafa metin color verin.
3. İkincisine background-color verin.
4. Üçüncüsüne color ve font-size kombinasyonu verin.
5. İsteğe bağlı olarak h1’i kendi style ile renklendirin.
6. Kaydedip yenileyin. Her bloğun farklı göründüğünü doğrulayın — renk, arka plan ve boyut ilk bakışta okunabilmeli.
7. Bilerek bir örneği bozun (tırnak veya px kaldırın), yenileyin, hatayı görün, sonra düzeltin.
   Bozuk bir style üzerinde çalışmak, yalnızca mükemmel örnekleri kopyalamaktan daha hızlı tırnak ve birim öğretir. Tarayıcıda tam olarak neyin «bozulduğunu» not edin: çoğu zaman eksik tırnak, kaybolan px veya karışan color ile background-colordır.

Stillerinizi gizleyen hatalar

• Değerin etrafındaki tırnakları unutmak: style=color:red normal HTML öznitelik yazımında geçersizdir
• color (metin) ile background-color (metnin arkası) karıştırmak ve «renk hiçbir şey yapmadı» sanmak
• Boyutun birim istediği yerde birimi atlamak (birçok yeni başlayan durumunda 24px yerine font-size: 24)
• Özniteliklerde düz tırnakları kıvrık tırnaklarla değiştiren bir kelime işlemci kullanmak
• Sonraki paylaşılan CSS’i öğrenmek yerine tüm sayfa tasarımını satır içi stillere sıkıştırmak
• Dosyayı değiştirip yenilemeden önce kaydetmeyi unutmak — tarayıcı hâlâ eski sürümü gösterir
• Özellik adında fazla boşluk veya yazım hatası olan bir örnek kopyalamak — tarayıcı bilinmeyen bildirimi sessizce yok sayar

Özet

• style özniteliği bir HTML öğesine CSS bildirimleri ekler
• property: value; yazın ve tüm listeyi tırnak içinde tutun
• Başlangıç özellikleri: color, background-color, font-size
• Birkaç bildirimi noktalı virgülle birleştirin; demoları kısa ve okunaklı tutun
• Satır içi stil öğrenme ve küçük deneyler için mükemmeldir; tüm sitenin tasarımını sürdürmek için değil
• Görünümü tek yerden kontrol etmek istediğinizde paylaşılan CSS öğrenme yolunda sıradadır
• Her zaman kaydet + yenile ile doğrulayın; stiller «gizemli» şekilde başarısız olduğunda tırnak ve birimleri kontrol edin
• Önce tek öğede net sözdizimi — sonra CSS ile tekrarlanabilir tasarım