.·°°·.W.·.E.·.L.·.C.·.O.·.M.·.E.·..·°°·.T.·.O.·..·°°·.J.·.A.·.M.·.B.·.A.·°°·..·.P.·.A.·.G.·.E.·°°·.

CSS Nedir?

CSS, Cascading Stylesheet veya Katmanli Sayfa Sitilleri denen ve HTML'e destek saglayan stil komutlari teknolojisidir. HTML içindeki nesnelere etiketleri ile özellikler ekleyerek onlari biçimlendirmenizi saglar.

Hazirladiginiz web sayfasinin World Wide Web Consortium http://www.ceviz.net/www.w3c.org tarafindan belirlenen standartlarda olmasi, amaca ulasmak için gerekli sartlardan biridir. CSS bu standartlara en kolay yoldan ulasmanizi saglayan bir araçtir. Farkli browser türlerinde ayni görüntüyü CSS ile rahatlikla elde edebilirsiniz.

CSS ile bir HTML ögesinin görüntülenme özelliklerini bir kaç farkli sekilde degistirebiliriz:

1. Her sayfaya baska bir *.css uzantili dosyayi,

<STYLE type=text/css media=screen>@import url( cssornek.css );
</STYLE> 
ya da

3. Ya da direk etiketler içinde <table style="..." >, 
<td style="..." >, <p Style=...>" seklinde yazilarak kullanilabilir.

Mesela, basit bir örnek;

<font face="Webdings" size="4">a b c d e f g h i j k l m n o p q r s t u v w y z</font> yazarak asagidaki görüntüyü elde edebiliriz. Webdings fontu asagi yukari her Microsoft isletim sisteminde standart olarak bulundugu için Windows kullanicilarinda bir sorun çikmayacaktir.
a b c d e f g h i j k l m n o p q r s t u v wy z

Disardan ekleyeceginiz ve ya HEAD kismina yazacaginiz style etiketlerini;

TD{background-color: #FFFFFF}
.bgrengi{background-color: #CC66FF}
seklinde yazabilirsiniz. Ancak .bgrengi{... seklinde yazdiginiz zaman <td class="bgrengi"> seklinde class etiketi ile belirtmeniz gerekmektedir. Digerinde TD etiketi olan her alan belirtilen rengi alacaktir zaten.

CSS `de seçicilerde STYLE tagi arasinda, basina nokta koyup isim vererek yaptigimiz stili, katman içinde class etiketiyle çagirabildigimiz gibi birde # isareti ile baslatip çagirabiliriz bu sefer class yerine id kullanmamiz gerekir.

<STYLE type="text/css"> 
#bgrengi {background-color: gray; font-size: 12px; color: maroon}
</STYLE>

seklinde bir style belirleyip;

<P><span id="bgrengi"> www.ceviz.net</span><p><p></p>s eklinde id ile belirttiginiz yazinin backgroundu gri, yazi maroon renginde olacaktir.

Daha çok Javascript ile id seklinde tanimlanan css etiketleri kullanilmaktadir. Bu CSS sekline, ID (kimlikli) denmektedir. Class etiketi ile çagirilanlara ise sinifli denir.CSS-P (Cascading Style Sheet - Positioning)

CSS-P (Cascading Style Sheet - Positioning) ile herhangi bir ögeyi piksel piksel saga sola, asagi yukari kaydirabiliriz. Yani CSS-P etiketleri ile pozisyon ayarlamalari yapabiliriz. simdilik kisa etiket tanimlarini yapip geçecegim ilerde istege göre detaya girebiliriz.

position, Nesnenin nasil konumlanacagini belirler. Aldigi degerler; Absolute, katmanin yerini kesin olarak belirler. Relative, katmanin yerini göreceli (diger ögelere göre degisebilir) olarak belirler. Static ise, katmanin yerini sabit olarak belirler. 
top, Katmanin üst kisimdan kaç piksel asagida olmasi gerektigini belirler. 
left, Katmanin sol kisimdan kaç piksel sagda olmasi gerektigini belirler. 
width, Katmanin genisliginin kaç piksel olacagini belirler. 
height, Katmanin boyunun kaç piksel olacagini belirler. 
clip, Katmanin görünecegi bölgeyi içeren kutucuk. 
overflow, Katmanin belirtilen yükseklik ve genislige sigmayan kismina ne olacagini belirler. Iki deger alir. scroll, kaydirma çubuklari ekler, auto ise kaydirma çubuklarini otomatik olarak belirler. 
visibility, Katmanin görünür veya gizli kalacagini bildirir. Alacagi degerler Explorer`da görünür yapmak için visible ve gizli yapmak için hidden; Netscape`de ise görünür yapmak için show ve gizli yapmak için hide `dir. 
z-index, Katmanin sayfa üzerindeki sira sayisini belirtir. 
Basit bir örnek olarak asagidaki kodlari inceleyebilirsiniz;

<div align="center" style="color: 333333; margin-top: 0; margin-left: 0; font-size : 60px; font-family: verdana"><b>Ceviz</b></div> 
<div align="center" style="color: ffcc66; margin-top: -70; margin-left: 9; font-size : 60px; font-family: verdana"><b>Ceviz</b></div>

Bir Kaç Basit Uygulama

Mesela Listeleme yaparken bizim kullandigimiz örnek;

<STYLE>
OL { list-style-type:circle } </STYLE>

<OL>
<LI> Birinci
<LI> Ikinci
<LI> Üçüncü
</OL>

bu sekilde.

Ama siz OL { list-style-type:Circle } yerine sunlardan birinide seçebilirsiniz;

disc: (içi dolu nokta) 
circle: (içi bos daire) 
square: (içi dolu kare) 
decimal: 1'den baslayan rakamlar. 
lower-roman: Küçük roma rakamlari (i, ii, iii, iv, v, ...) 
upper-roman: Büyük roma rakamlari (I, II, III, IV, V, ...) 
lower-alpha: Küçük ascii harfler (a, b, c, ... z) 
upper-alpha: Büyük ascii harfler (A, B, C, ... Z) 
none: Isaretsiz

ya da

Seklinde yazarak bir imajda atayabilirsiniz.