Ana sayfa » Teknoloji » HTML Dersleri » 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ı

tarafından Hasan Yasin Türkyılmaz
0 yorum 52 gösterim

Ç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…

Alakalı yazılarım

0 yorum

mehmetay405114272 5 Ekim 2013 - 12:46

bunun neresi ileri düzey 🙂

Yanıtla
nefarkederki 5 Ekim 2013 - 13:23

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

Yanıtla
Mahmut 22 Aralık 2016 - 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.

Yanıtla
hyturkyilmaz 22 Aralık 2016 - 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.

Yanıtla

Bu site çerezleri kullanarak deneyiminizi artırmakta. Bilgilerinizi satmamakta, spam amacıyla yapılan reklamlarda da kullanmamakta. Sizlere faydalı içerikler sunarak öğrenmeniz için çabalamakta. Kabul et Devamını oku

%d blogcu bunu beğendi: