Html - CSS (Stil) Dosyaları

 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.