HEAD tagı içerisine sitillerin yerleştirilmesi
Hazırladığımız sitilleri <HEAD> tagı içerisine yerleştirebiliriz. Bu daha kullanışlı bir yöntemdir. Burada önemli olan sitilleri nasıl tanımlayacağımız ve taglara nasıl uygulayacağımızdır. Aşağıdaki yöntemlerle sitilleri taglara uygulayabiliriz.
- Eleman ID sinin kullanılması.
- Sınıfların kullanılması.
- Taglara sitillerin uygulanması.
- Anlamsal sitillerin oluşturulması.
Öncelikle HEAD tagı içerisinde sitillerin nasıl uygulanacağını görelim. Bunun için
<STYLE> tagını kullanıyoruz. Kullanım şekli :
Kod:
<HEAD> <STYLE> </STYLE> </HEAD>
<!-- ve --> tagları kullanılacak sitillerin sitilleri desteklemeyen browserlerden gizlemek için kullanılmaktadır.
Kullanılacak sitiller bölümüne kendi sitillerimizi yazıyoruz. Aşağıdaki örneği inceleyiniz :
Kod:
<HTML> <HEAD> <TITLE> Sitillerin kullanımları </TITLE> <STYLE> BODY { background-color : black; color : white; font-size:14; font-type:verdana; margin : 20; } DIV { background-color : yellow; color: blue; font-size:14; } B { color: red; } H1 { border-color: red; border-width:1; border-style:solid; } </STYLE> </HEAD> <BODY> <H1> Sitil uygulamaları</H1> Bu bölümde sitillerin HEAD tagı içerisinde kullanılmasını inceliyoruz. Bunun için <B> STYLE tagını </B> kullanıyoruz.
Kod:
<P> <DIV> Böylece daha kolay olarak sitilleri sayfalarımıza uygulayabiliyoruz. </DIV> <P>Sitillerin bu şekilde uygulanmaları tasarımcıların işlerini daha kolaylaştırıyor. </BODY> </HTML>
Eleman ID sinin kullanılması
Sitil uygulanacak belirli bir eleman varsa bu tagın ID si kullanılarak istenilen sitilleri belirlenebilir.
ID tüm html tagları için kullanılan bir özelliktir ve sadece o taga ait olan bir kimlik verilmesini sağlar. Bir sayfa içerisinde aynı ID olarak tanımlanan bir isim başka bir tag için kullanılamaz.
Bir tag içerisinde ID şu şekilde kullanılır.
Kod:
<TAG ID="bir_isim"> tagın içeriği </TAG>
Burada TAG yerine IDsini belirteceğimiz herhangi bir tagı yerleştirebiliriz. bir_isim yerinede ID olarak kullanacağımız bir isim yerleştireceğiz. Bu isim başka bir tag için ID olarak kullanılamaz.
Bir sitil tanımlamasında veya herhangi bir script dili ile bir program yazıldığında ( mesela javascript ile ) ID kullanılarak istediğimiz tag üzerinde işlemler yapabiliriz. Şimdi bir örnek üzerinde ID belirterek sitillerin kullanımını görelim.
Kod:
<HTML> <HEAD> <TITLE> Sitillerin kullanımları </TITLE> <STYLE> #anabolum { background-color : black; color : white; font-size:14; font-type:verdana; margin : 20; } #aciklama { background-color : yellow; color: blue; font-size:14; } B { color: red; } H1 { border-color: red; border-width:1; border-style:solid; } </STYLE> </HEAD> <BODY> <DIV ID="anabolum"> <H1> Sitil uygulamaları</H1> Bu bölümde sitillerin HEAD tagı içerisinde kullanılmasını inceliyoruz. Bunun için <B> STYLE tagını </B> kullanıyoruz. <P> <DIV ID="aciklama"> Böylece daha kolay olarak sitilleri sayfalarımıza uygulayabiliyoruz. </DIV> <P>Sitillerin bu şekilde uygulanmaları tasarımcıların işlerini daha kolaylaştırıyor. </DIV> </BODY> </HTML> Sitil tanımlaması yapılırken ID önüne # diyez işareti getirilmelidir. Eleman IDsi genel olarak dHTML programlarında kullanılmaktadır. Böylece istenilen elemanın özelliği JavaScript içerisinden rahatlıkla değiştirilebilmektedir.