CSS’e Giriş
CSS Stillerini Sayfaya Dahil Etmek
Kod Satırından Giriş
HTML etiketlerini yerleştirirken etiketin “style” özelliğini kullanarak stilleri girebiliriz. Bu tür bir kullanıma kirli kodlama denir, kaynak kod karmaşıklaşır.
<a style=”text-align:left; …”>…</a>
<style></style> Etiketinde Giriş
Sayfa içerisinde geçerli olan bir stil giriş metodudur. Bu metodu genellikle o sayfaya mahsus stiller gerektiğinde kullanabiliriz.
<style>
a{ text-aling:left;
…
}
</style>
Harici Dosya Kullanmak
Yukarıdaki örnekte bulunan stillerin alt alta bulunduğu bir dosyayı css uzantısında kaydedip sayfamıza çağırabiliriz.
<link href=”stil.css” rel=”stylesheet” type=”text/css” />
İmport Etmek
Sürekli olarak kullandığımız stilleri harici dosya ekler gibi ekliyoruz.
<style>
@import “stil.css”;
</style>
CSS Ölçü Birimleri
Göreceli Değerler
DOM nesnelerinden belirlenen ana nesneye göre diğer nesnelerin konumlandırılmasıdır. Birimleri em, ex, px, % dir. Tarayıcılarda <body> ana nesnesinin varsayılan font büyüklüğü 16px’dir.
Mutlak Değerler
Bu ölçü birimleri ise ekran çözünürlüğünü veya varsayılan yazı büyüklüğünü değiştirseniz dahi değişmeyen kesin değerlerdir. Birimleri in, cmi mm, pt, pc dir.
Renkler
Işığı temel alarak doğadaki tüm renklerin kodları bu üç temel renge (Red, Green, Blue) referansla belirtilir. Dört değişik renk tanımlama şekli vardır.
|
Özellik
|
Açıklama
|
|
#RRGGBB
|
Hexadecimal değerler olup #F56366 şeklinde gösterilir.
|
|
#RGB
|
Yukarıdaki değerlerin kısaltmasıdır. #F66
|
|
Reg(R,G,B)
|
0 ile 255 arasında onluk sayı düzeninde girilen değerlerdir. rgb(255,99,102)
|
|
Egb(R%,G%,B%)
|
0 ile 100 arasında ana renklerin yoğunluğu belirtilir. rgb(25%,40%,0%)
|
CSS’de Seçiciler
ID Seçiciler
Web sayfalarındaki DOM elemanlarının birer id değerleri vardır ve o nesneye mahsustur. Aynı id’ye sahip ikinci bir nesne olamaz. ID seçiciler # işareti ile belirtilir.
<style>
#div1 {background-color: red;}
#div2 {background-color:pink;}
</style>
<div id=”div1”> Kırmızı alan</div>
<div id=”div2”>Pembe alan</div>
Sınıf Seçiciler
Aynı stilin bir veya birden fazla nesneye verilmesi veya bir nesneye birden fazla stilin uygulanması anlamına gelir.
<style>
.kirmizi {background-color:red;}
span.sag {background-color:#09F;}
span.sol {background-color:#0C3;}
.gri {background-color:#CCC;}
.gri.iptal {background-color:#FC6;}
</style>
<div class=”gri”>
<div class=”kirmizi”>1. Alan</div>
<p class=”kirmizi”>2. Alan</p>
<span class=”sag”>Mesaj gönder</span>
<span class=”sol”>Mesaj gönder</span>
<span class=”gri iptal”>İptal</span>
</div>
Tag Seçiciler
HTML nesneleri aynı zamanda otomatik seçicidir. Dikkat edilecek husus, stillerin sayfadaki aynı türdeki nesnelere uygulanmasıdır.
<style>
div {background-color:red;}
p {background-color:#0C3;}
span {background-color:#09F;}
</style>
<div>
<p>2. Alan</p>
<span class=”sag”>Mesaj gönder</span>
</div>
Diğer Seçiciler
Web sayfası tasarlarken nesnelerin içerisine başka nesneler de yerleştirilebilir. Bu şekilde arka arkaya devam eden hiyerarşik bir yapı oluşacaktır. Aşağıdaki HTML sayfasını inceleyelim.
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html”; charset=”utf-8” />
<title>Stil öğreniyoruz.</title>
</head>
<body>
<p>
<a>drzeki.com</a><br>
<strong>Kalın yazı</strong>
</p>
<ul>
<li>Liste 1</li>
<li>Liste 2<br><em>İtalik yazı</em><br><span>Span</span></li>
</li>
</body>
</html>
Bu yapıda her düzey altında bir alt düzey bulunup bu düzeylerde de nesneler bulunmaktadır. Her alt düzeydeki nesneler bir üsttekinin çocuğu, iki seviye üsttekinin ise torunu konumundadır.
– Çocuk Seçiciler (E > F)
<p> paragrafını ebeveyn olarak düşünürsek <a> ve <strong> nesneleri çocuk olacaktır. Aynı şekilde <ul> nesnesinin çocukları iki adet </li> nesnesidir. Diğer <li> nesnesinin altındaki nesneler seçilmez.
<style>
P > a {color:#03F;}
ul li > em {color:#03F;}
</style>
<p>
<a>drzeki.com</a><br>
<strong>Kalın yazı</strong>
</p>
<ul>
<li>Liste 1</li>
<li>Liste 2 <br>
<em>İtalik yazı</em><br>
<span>Span</style>
</li>
</ul>
2. <li> nesnesinin altında <em> ve <span> çocuk olduğu için <em> üzerinden seçim yapıldığından <em> mavi yazılacaktır.
– Torun Seçiciler (E F)
Yukarıdaki kodu dikkatlice incelediyseniz nesnenin iki düzey altındaki nesneler eğer birbirlerine bağlı iseler o nesnenin torunlarıdır. Bu nesneler birbirlerinden boşluk ile ayrılır.
<style>
body a {color:#F00;}
html ul span {color:gren;}
ul em {color:#F00;}
</style>
<p>
<a >drzeki.com</a><br>
<strong>Kalın yazı</strong>
</p>
<ul>
<li>Liste 1</li>
<li>Liste 2</li>
<em>İtalik yazı</em><br>
<span>Span</span>
</li>
</li>
Burada <body> nesnesi 2. düzeyde, <a> nesnesi ise 4. düzeydedir. <a>, <body> ‘nin torunu konumundadır. Aynı şekilde <li> ‘de öyledir. <ul> nesnesinin torunu ise <em> ‘dir. Eğer <em> ‘nin altında da nesneler olsaydı onlara pembe renk uygulanmayacaktı.
– Bitişik Kardeş Seçiciler (E + F)
Aynı düzeydeki yan yana nesnelerden ikincisine stil uygulanır.
<style>
p + div {background-color:#3CF;}
</style>
<p>
<a>drzeki.com</a><br>
<strong>Kalın yazı</strong>
</p>
<div>Katman</div>
<li>Liste 1</li>
<li>Liste 2<br>
<em>İtalik yazı</em><br>
<span>Span</span>
</li>
</ul>
<p> nesnesinin altındaki bütün nesnelerin arka planı mavi olur.
– Özellik Seçicileri
Nesnelerin içerisinde barındırdıkları alt özelliklere göre de o nesnelere stil uygulayabiliriz.
<style>
a[href$=”com”] {background-color:#3CF;}
</style>
<a href=http://drzeki.com>drzeki.com</a>
