megatron
19.Ocak.2015, 22:42
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:
HTML 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:
HTML 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>
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
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:
HTML 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:
HTML 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>
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