Stilleri Aynı Sayfadan Çağırmak

Bir önceki yazımda sayfamıza css dosyalarının dışarıdan nasıl bağlanacağını göstermiştim. Bu yazıda ise css nin aynı sayfada nasıl yer aldığını ve kullanıldığını anlatmaya çalışacağım. Gerçi Dreamweaver gibi bir web editörü kullanıyorsanız program bu işlemi otomatik olarak da gerçekleştirebilir.

Herşeyden önce sayfamızda bir stil kullanmak istiyorsak önce ilgili kodları yazmalıyız ve bu kodları mutlaka sayfa başında yazmaya özen gösterin. Şimdi aşağıdaki örnek kodu bir inceleyelim.

<style type="text/css">
<!--
body {
     background-color: #ffffff;
     background-image: url(images/bkg.jpg);
     background-repeat: repeat;
}
.style1 {
     font-family: Arial, Helvetica, sans-serif;
     color: #6582BE;
}
-->
</style>

Kodlarımızın düzgün çalışması için değerleri yukarıda da görüldüğü gibi <style type=”text/css”> <!– ile –> </style> satırların arasına yazmalıyız. Bu satırları da siz yazmak zorundasınız. Her bloğun adından önce bir nokta konulduğuna; bloktaki değerlerin noktalı virgül işareti ile sonlandırıldığına ve tüm değerlerin köşeli parantezler içinde yer aldığına dikkat edin yoksa kod çalışmayacaktır.

Kodun ilk bloğunda arkaplan özellikleri, ikinci bloğunda ise style1 etiketli yazılara ait özellikler var. Hangi kod ne işe yarıyor az çok tahmin edebiliyorsunuzdur. Eğer edemiyorsanız da ilerde sıfırdan bir css kodu yazmayı göstermeyi planlıyorum.

Şimdi yukarıdaki gibi kodu yazdıktan sonra bunu nasıl çağıracağımızı gösterelim. Aşağıdaki kodu inceleyiniz.

<span class="style1">HayalEt Yazılım</span>

 Böylece yazımız style1 bloğunda belirtilen özelliklere göre şekillenecektir. Eğer özellik vermek istediğimiz nesne bir yazı değil de mesele bir metin kutusu olsaydı o zamanda şöyle yapacaktık.

<input name="textfield" type="text" class="style1" id="textfield">

Eğer düz metine bir stil uygulamıyorsak >span> etiketini kullanmamıza gerek olmadığını bu örnekten anlayabiliriz.

<hr> <p> gibi html etiketleri için de stil tanımlayabiliyoruz. Üstelik eğer bunlar için sadece bir tane stil tanımlarsak her seferide bunların hangi stil dosyası ile çalışacaklarını göstermek için de kod yazmaya gerek kalmıyor. Bu işlemin nasıl yapıldığını da bir sonraki yazımda anlatacağım.