HTML Dersleri
HTML'ye Giriş
HTML Dili
Genel Bakış
Elementler
Basit Kodlar
Özellikler
Biçimlendirme
Özel Karakterler
Bağlantılar
Frame Kullanmak
Tablolar
Listeleme
Form Nesneleri
Resim Eklemek
Arkaplan Kullanmak
Renkler

Üst Düzey HTML
CSS (Stil) Dosyaları
META Taglar
Script Kullanmak
Tüm Kodlar
Tüm Fonksiyonlar

Bağlantılar
HTML Dersleri
JavaScript Dersleri
CSS Dersleri
ASP Dersleri
PHP Dersleri
MySQL Komutları
jQuery Dersleri
Venus Programlama
Görsel Programlama

Ana Sayfa Bize Ulaşın

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.

Tüm hakları saklıdır. Lütfen kaynak belirtmeden sitenizde yayınlamayın. Web Sitesi © 2014