CSS (Stil) Dosyaları
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:
CSS 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:
CSS 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>
</textarea></div><br>
<div class="code1">HTML Görünümü<br> <div class="code3">
<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>
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.