HTML Dersleri
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.
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 Facebook Sayfamız
Programlama Türkiye