style Niteliği

Bu dersin sonunda bir elemana style niteliğiyle görünüm verebilecek ve tarayıcının yazdıklarınızı nasıl okuduğunu açıklayabileceksiniz.

Neden önce satır içi CSS?

CSS’e Köprü dersinde CSS eklemenin üç yolunu gördünüz ve asıl tercih edilmesi gereken yöntemin ayrı bir dosya olduğunu öğrendiniz. Bu bilgi hâlâ geçerli.

Yine de yeni bir özelliği öğrenirken style niteliği çok kullanışlıdır. Seçici yazmanız gerekmez, sonucu hemen görürsünüz ve yaptığınız değişiklik yalnızca o elemanı etkiler. Bu ünitede en sık kullanılan CSS özelliklerini bu yolla deneyeceksiniz. Öğrendiğiniz her özellik, ayrı bir dosyadaki kuralların içinde de aynen çalışır.

Yazım kuralı

style diğer nitelikler gibi açılış etiketine yazılır. Değeri bir veya daha fazla bildirimden oluşur:

<p style="color: navy; font-size: 20px;">Merhaba</p>

• color ve font-size özelliktir. Neyi değiştireceğinizi söyler.
• navy ve 20px değerdir. Ne olacağını söyler.
• İki nokta : özelliği değerden ayırır.
• Noktalı virgül ; bir bildirimi bitirir.

Son bildirimden sonraki noktalı virgül zorunlu değildir ama her zaman yazın. Sonradan yeni bir özellik eklediğinizde unutulan noktalı virgül, en sık yapılan hatalardan biridir.

Değerleri değiştirip sonucu izleyin:

<h1 style="color: crimson;">Okul Gazetesi</h1>
<p style="color: navy; font-size: 20px;">Bu paragrafta iki bildirim var.</p>
<p style="background-color: gold; color: black; padding: 12px;">Bu paragrafta üç bildirim var.</p>
<p>Bu paragrafın stili yok.</p>

CSS özelliklerinin adları İngilizcedir ve kelimeler tireyle ayrılır: background-color, font-size, letter-spacing.

Elemanın bir parçasını seçmek

Bir cümlenin yalnızca bir kısmını değiştirmek istiyorsanız o kısmı span içine alın. span kendi başına hiçbir şey yapmaz, bu yüzden stil vermek için idealdir.

<p>Toplantı <span style="color: crimson;">cuma</span> günü yapılacak.</p>

Sözcüğün gerçekten önemli olduğunu belirtmek istiyorsanız span yerine strong kullanın. CSS yalnızca görünümü değiştirir, ekran okuyuculara ve arama motorlarına bir şey anlatmaz.

Tırnak içinde tırnak

style değeri çift tırnak içindedir. Değerin içinde de tırnak gerekiyorsa tek tırnak kullanın:

<p style="font-family: 'Courier New', monospace;">Daktilo yazısı</p>

İçeride de çift tırnak kullanırsanız tarayıcı niteliğin orada bittiğini sanır ve stilin geri kalanı kaybolur.

Kalıtım: Bazı özellikler içeri geçer

Bir elemana verdiğiniz yazı rengi, içindeki elemanlara da geçer. Buna kalıtım denir. color, font-size, font-family, line-height, text-align gibi yazıyla ilgili özelliklerin çoğu kalıtılır. Bu sayede body etiketine yazdığınız bir renk bütün sayfayı etkiler.

background-color, padding, margin, border gibi kutuyla ilgili özellikler ise kalıtılmaz.

<div style="color: darkgreen; border: 2px solid crimson; padding: 12px;">
  <p>Bu paragrafa renk vermedik ama yeşil, çünkü rengi dıştaki kutudan aldı.</p>
  <p style="color: crimson;">Bu paragraf kendi rengini seçti.</p>
  <p>Kenarlık ise yalnızca dıştaki kutuda var, paragraflara geçmedi.</p>
</div>

Çatışma olursa ne olur?

Aynı özelliği iki kez yazarsanız sonraki kazanır. style niteliği, aynı eleman için style etiketinde veya CSS dosyasında yazılan kuralların da önüne geçer.

<p style="color: red; color: blue;">Ben maviyim, çünkü son yazılan kazanır.</p>

Bu güç aynı zamanda bir sorundur: Satır içi stili sonradan bir CSS dosyasıyla değiştirmek zorlaşır.

Tarayıcı hatayı söylemez

Tarayıcı anlamadığı bir bildirimi sessizce atlar ve sonrakiyle devam eder. Aşağıda kirmizi geçerli bir renk adı olmadığı için yazı siyah kalır, ama sonraki bildirim yine çalışır.

<p style="color: kirmizi; font-size: 24px;">Renk çalışmadı, boyut çalıştı.</p>

Bir stil çalışmıyorsa geliştirici araçlarını açıp elemanı seçin. Styles bölümünde element.style başlığı altında yazdığınız bildirimleri görürsünüz. Tarayıcının geçersiz bulduğu bildirimlerin üzeri çizilir.

Aynı kodu style etiketine taşımak

Bu ünitede örnekleri style niteliğiyle yazıyoruz, çünkü denemenin en hızlı yolu budur. Bir sayfanın tamamını yazarken ise kuralları head içindeki style etiketine, sınıflarla yazarsınız. Ödevlerde ve sınavlarda genellikle bu istenir.

Özellikler ve değerler aynıdır, yalnızca yazıldıkları yer değişir. Aşağıdaki iki paragraf aynı görünür:

<style>
  .vurgu {
    color: crimson;
    font-size: 20px;
  }
</style>

<p style="color: crimson; font-size: 20px;">style niteliğiyle</p>
<p class="vurgu">style etiketindeki bir sınıfla</p>

Bu ünitede öğrendiğiniz her bildirimi bu şekilde taşıyabilirsiniz: Süslü parantezin içine aynen yazın.

<h2 style="color: crimson;">Duyuru</h2>
<p style="color: navy; font-size: 20px;">Yarın okul tatil.</p>

<p>Sınav <span style="background-color: yellow;">pazartesi</span> günü.</p>

Bu derste öğrendikleriniz

• style niteliği özellik: değer; biçimindeki bildirimlerden oluşur.
• Bir cümlenin parçasına stil vermek için span kullanılır.
• Yazıyla ilgili özelliklerin çoğu içerideki elemanlara geçer, kutuyla ilgili olanlar geçmez.
• Aynı özellik iki kez yazılırsa sonraki kazanır, geçersiz bildirimler sessizce atlanır.