CSS: Giriş

İlk CSS derslerimi 2011 yılında 14 bölümlük bir seri halinde hazırlamıştım.. Ancak aradan uzun bir zaman geçti ve bir çok şey gelişti, değişti.. Bu sebepten dolayı dersleri yeniden çekmeye karar verdim.. Bu ilk dersimizde ise aşağıdaki sorulara cevap bulacağız;

CSS Nedir?
CSS Dosyası Nasıl Oluşturulur?
CSS Dosyası HTML Sayfasına Nasıl Çağrılır?
HTML Sayfasında Inline CSS Nasıl Yazılır?
CSS’in Genel Yapısı
CSS’de Açıklama Satırı
CSS Hataları Hakkında


CSS Nedir?

Cascading Style Sheets’in baş harflerinden oluşan CSS, stil şablonları olarak tanımlanabilir. Kısaca html sayfamızda düzeni sağlamak için kullanabileceğimiz bir teknolojidir.

CSS Dosyası Nasıl Oluşturulur?

Css dosyalarının uzantıları .css olmak zorundadır.. Adının herhangi bir önemi yoktur, önemli olan uzantısıdır.. Herhangi bir metin editörü yardımı ile kolayca bir css dosyası oluşturulabilir. Ya da elle oluşturmak isterseniz bir metin belgesi oluşturup adını style.css olarak değiştirmeniz yeterlidir.

CSS Dosyası HTML Sayfasına Nasıl Çağrılır?

Oluşturduğumuz CSS dosyalarını HTML sayfamıza çağırmanın 2 farklı yolu vardır.. 1. yol link etiketini kullanmak, 2. yol ise style etiketini kullanarak import ile çağırmaktır.

Link ile Çağırma

Head etiketleri arasında aşağıdaki gibi tanımlanır;

<link rel="stylesheet" type="text/css" href="style.css" />

href : stil dosyasının yoludur.

@import ile Çağırma

Head ya da body etikerleri arasında aşağıdaki gibi tanımlanır ve çağırılır;

<style type="text/css">
@import "style.css";
@import url("style2.css");
</style>

Not: @import işleminden önce herhangi bir CSS kodu olmamalıdır aksi halde import işlemi çalışmaz.

HTML Sayfasında Inline CSS Nasıl Yazılır?

Bunun içinde ya style etiketi kullanılır ya da style niteliği kullanılır.. Genel kapsamda stil kodu yazmak için etiketi, sadece bir nesneye uygulamak için ise niteliği kullanabiliriz.

<style type="text/css">
h1 { color: red }
</style>

ya da ..

<h1 style="color: blue">erbilen.net</h1>

CSS’in Genel Yapısı

Bunu daha iyi anlayabilmeniz için bir görsel hazırladım.. Resim zaten her şeyi basitçe açıklamaktadır.. Daha ayrıntılı bilgi için videoya göz atabilirsiniz;

CSS: Giriş

CSS’de Açıklama Satırı

Ve tabi ki CSS’te de açıklama satırı mevcuttur 🙂 Tarayıcı bunu dikkate almaz, sadece sizin için bir önemi vardır.. Ve aşağıdaki şekilde tanımlanır;

/*
   bu bir açıklama satırıdır
   http://www.erbilen.net
*/

Yayınlayan

Tayfun Erbilen

2009'dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“CSS: Giriş” üzerine 14 yorum

  1. hocam sizin, bir web sitesini wordpress e uyarlamayı anlatan bi dersiniz var mı? aradaım bulamadım 🙂 yoksa ceksenız süper olur 😀

  2. @AbdulSamet, wordpress ile hiç uğraşmadığım için derslerini de hazırlayamam ne yazık ki 🙂

  3. @AbdulSamet Sitemde wordpress tema yapımıyla ilgili bir çok konu mevcut : http://www.ismailbayram.net
    Bir seneyi açkındır senin videolarını izliyorum. Ve bu kadar şeyi nasıl öğredini çok merak ediyorum gerçekten.

  4. @İsmail Bayram, bilgim öyle abartılacak kadar çok olduğunda bu sorunu cevaplarım inşallah 🙂

  5. Tayfun kardesim ellerine emeğine sağlık devamını bekliyoruz çok güzel bir ders olmus

  6. Tayfun abi, inline css'de hover yapabilir miyiz? Yani <a style=""></a> dedikten sonra style= kısmında hover yazabilir miyiz? Yoksa yine style dosyasında mı a:hover yazmamız gerekir?

  7. @Yasin Uygun, eğer style etiketini kullanırsan yapabilirsin.. Ama nesne üzerinde style niteliği kullanıyorsan bildiğim kadarıya yapamazsın.. Ancak alternatif olarak javascript kullanabilirsin.. Örneğin;

    <div onmouseout="this.style.color = 'black'" onmouseover="this.style.color = 'blue'">test</div>
  8. yapmış olduğunuz dersleri zevkle izliyor ve uygulamaya çalışıyorum bu güzel çalışmalarınız için size ,varsa ekibinize teşekür ederim

    css gibi düzenli php derleri ve html5 dersleriniz bulamadım 🙁

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir