CSS Stil Dosyalari
Hazır stil şablonları oluşturduğumuz ve bundan yararlandığımız stil dosyaları ya da HTML belgemizin stil bölümü belge içerisinde ya da başka bir dosyaya bağlantı vererek şu şekilde kullanılır:Belge içinde:
HTML Kodu
<style type="text/css" rel="stylesheet"> <!-- (Stiller burada belirtilir) --> </style>
Bir not defteri yardımıyla stilleri belirlediğimiz (bu dosyada HTML kodları kullanılmaz) dosyaya bağlantı vererek stilleri tanıtmak için:
HTML Kodu
<link href="stil_dosyasi.css" type="text/css" rel="stylesheet" />
Her iki yolla da stillerimizi tanıtmamız mümkün. Fakat HTML belgemizin boyutunun şişmemesi için ayrı bir dosyaya yazıp LINK komutu ile çekmek daha iyi olacaktır.
Stil Belirlemek
Stil belirlemek için formatımız " .stiladı { stiller; } " şeklindedir. Stil adından önce kullandığımız nokta ilgili tüm class tanımlamaları için geçerli olduğunu anlatır. Başına HTML kodunu alarak sadece o nesneye özel yapabilme şansımız var. Örnekleri inceleyelim:
HTML Kodu
.stilim { font: 12pt Tahoma, Verdana; color: #FF0000; } td.stilim { width: 100px; font: 10pt Tahoma, Verdana; color: #000000; }
Tüm ilgili nesneler için (mesela tüm textarea - metin kutuları için) özellik belirmek istersek bu kez nokta kullanmadan kodu küçük harfle yazar ve özellikleri belirtiriz:
HTML Kodu
body { background-color: #EFEFEF; font: 8pt Tahoma, Verdana; color: #000000; } td { font: 10pt Tahoma, Verdana; color: #FF0000; }
Dikkat edildiyse stil özelliği belirlerken " ozellik: deger; " şeklinde yazıyoruz. Nesnenin desteklediği özelliğe göre bunları kullanabiliriz. Bunlardan en önemlileri ve ne işe yaradıklarını aşağıdaki tabloda görebilirsiniz:
Arkaplan ile İlgili Özellikler
| Özellik | Açıklama |
| background-color: renk; | Arkaplan rengini belirleriz. |
| background-image: url('dosya'); | Arkaplan resmi belirleriz. |
| background-repeat: tekrar; | Arkaplanın tekrar edilip edilmeyeceği. Bu değer no-repeat ise tekrar yok, repeat-x ise sağa tekrarlı, repeat-y ise aşağı tekrarlı, repeat ise tekrarlı anlamlar ifade eder. |
| background: renk url('dosya') tekrar; | Yukarıdaki css kodlarını tek bir komutta kullandık. |
Yazı ile İlgili Özellikler
| Özellik | Açıklama |
| font: boyut, yazıtipleri; | Boyut piksel olarak belirtildikten sonra yazıtipleri sıralanır ve aralara virgül konur. |
| color: renk; | Yazı rengini belirleriz. |
| font-weight: bold; | Kalın yazmak. |
| font-style: italic; | Sağa yatık yazmak. |
| text-align: hiza; | Metinleri hizalamak. left sola, right sağa, center ortalanmış, justify iki yana hizalar. |
Boyut ile İlgili Özellikler
| Özellik | Açıklama |
| width: deger; | Genişliği belirtiriz. |
| height: deger; | Yüksekliği belirtiriz. |
Kenar ile İlgili Özellikler
| Özellik | Açıklama |
| border: boyut; | Kenarlık boyutu piksel olarak belirtilir. Kenarlık kullanmayacaksak 0px olmalıdır. |
| border: boyut renk durum; | Boyutla birlikte kenarlık rengini ve durumu (solid = normal, dotted = çizgili) belirtilir. |
Stil Kullanmaya Bir Örnek: Stil dosyamızda belirlediğimiz özellikleri DIV (HTML için bir alan) kodu kullanarak nasıl kullanabiliriz. Aşağıdaki örneği inceleyelim:
HTML Kodu
<style type="text/css" rel="stylesheet"> <!-- .ornek { font: 10pt Tahoma, Verdana, Arial; color: #0000C0; } --> </style> <div class="ornek"> Bu belirlediğimiz stille bir yazı... </div>
HTML Görünümü
Bu belirlediğimiz stille bir yazı...
Görüldüğü üzere herhangi bir koda class="stiladı" özelliği eklersek, onunla ilgili düzenlemeler gerçekleşmiş oluyor. Burada en basit anlatımıyla anlatılan CSS dosyalarının daha değişik komutları da bulunmakta, fakat başlangıç için en ideali bunları öğrenmektir.
