Top

Bölüm 3 (İleri seviye HTML Dersleri), Style / Stiller / Css kullanımı

Bölüm 3 (İleri seviye HTML Dersleri), Style / Stiller / Css kullanımı

Çeviriler tırnak içinde gösterilir. Çevirilerin kaynağı; w3schools.com‘dur. Çeviri haricindekiler bana aittir. Temel HTML derslerine de bakabilirsiniz bu konuya yabancıysanız. 16 Bölümdür ve ilk bölüme buradan ulaşabilirsiniz. Editör olarak; Notepad++, Dreamweaver ya da w3Schools’a ait paylaşacak olduğum online editörü kullanabilirsiniz.


Style Nasıl Kullanılır?

HTML 4.0’dan itibaren tüm biçimlendirmeler HTML belgesinden kaldırılmış ve bir stil dosyasında depolanmaya başlanmıştır. Bu stil dosyasının adı da CSS’tir. Daha önce değinmiştik.

Tarayıcı bir stil dosyasını okuduğunda bağlantılı olan belgeyi biçimlendirir.

Bir stil dosyasını ya da içeriğini 3 şekilde ekleyebiliriz;

  • Harici bir dosyadan
  • Dahili bir dosyadan
  • Satır içi stilleriyle

Harici Stil Dosyası

Stil birçok sayfaya uygulandığında en ideal olan yöntemdir. Harici bir dosya ile Tüm sitenin görünüşünü tek bir dosyadan değiştirebilirsiniz. <link> etiketi ile her bir sayfa stil dosyasına bağlanır ve link etiketi head bölgesinde yer alır.

<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>

gibi…

Dahili Stil Dosyası

Özgün bir stile sahip tek bir sayfa söz konusu olduğunda kullanılabilir. Dahili stiller <head> bölgesinde yer alır ve <style> etiketi kullanılarak yazılır.

<head>
<style type=”text/css”>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

gibi…

Satır içi Stiller

Bu ise bir elementte belirli bir değişiklik yapmayı düşündüğümüz özgün stillendirme yapmak istediğimizde kullanılır.

Satır içi stili kullanmak, ilgili etiketin içindeyken style özelliğinin kullanımı ile mümkün olur. Style özelliği CSS özelliklerinden herhangi birisini içerebilir.  Aşağıdaki örnekte yazının biçimlendirilmesini görebilirsiniz;

<p style=”color:blue;margin-left:20px;”>This is a paragraph.</p>

Daha detaylı bir şekilde CSS anlatımım olacak. HTML 5 ile beraber.

Gördüğümüz etiketler; <style> ve <link /> bu bölümde.

Yararlı olması dileğiyle…

No Comments
  • mehmetay405114272
    5 Ekim 2013 at 12:46

    bunun neresi ileri düzey 🙂

    • nefarkederki
      5 Ekim 2013 at 13:23

      Okuduğunuz takdirde, ilk paragrafta w3schools’tan çevirdiğimi belirttim. Oradaki kategorinin takibine göre bunlar ileri düzey…

  • Mahmut
    22 Aralık 2016 at 04:05

    İleri seviye diye böyle saçma sapan bi makale yazmayın lütfen, insanların gelişimini engellemekten başka bi işe yaradığı yok.

    • hyturkyilmaz
      22 Aralık 2016 at 12:35

      Merhaba Mahmut, bu dersler w3schools.org’un çevirilerini içeriyor aslına bakarsan. Temiz ve sade Türkçe’yle de aktarmaya çalıştım. Başlığın direkt olarak benim tarafımdan verilmediğini belirteyim.