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…

Siz neler düşünüyorsunuz? Yazımızı beğendiyseniz aşağıdaki butonlardan tavsiye edebilirsiniz, paylaşabilirsiniz veya yorumlarınızı sunabilirsiniz. Teşekkürler okuduğunuz için!

Bir önceki yazımız olan Bölüm 2 (İleri seviye HTML Dersleri), Doctypes/Doküman türleri başlıklı makalemizde ceviri, docytype ve dokuman hakkında bilgiler verilmektedir. Daha fazla yazımızı görmek için HYTürkyılmaz Dijital pazarlama ve growth hacking blogu anasayfası'yı ziyaret edebilirsiniz. Yazımızı aşağıdaki paylaşım butonlarıyla paylaşarak sevginizi yayınız! Teşekkürler!

Hasan Yasin Türkyılmaz

Sosyolog, dijital stratejist. Dijital medya, reklam ve growth hacking eğitimleri ve hizmetleri sunarım. PC, konsol fark etmez. Oyun oynamayı severim.

Tüm yazıları - Websitesi

Beni takip edin!:
TwitterFacebookLinkedInPinterestGoogle PlusDiggFlickrStumbleUponYouTubeYelpRedditDelicious

  • bunun neresi ileri düzey 🙂

    • nefarkederki

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

  • Mahmut

    İ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.

    • 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.