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
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
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
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
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
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.
| 
