 Sınıfların kullanılması
Belli özelliklere sahip birden çok eleman tanımlayacaksanız veya hazırladığınız belli bir sitil kalıbını birden çok yerde kullanacaksanız bir sitil sınıfı oluşturmanız sizin açınızdan bir kolaylık olacaktır. Böylece hazırladığınız sitilin sınıf ismini belirterek istediğiniz bölüme bu sitilleri uygulayabilirsiniz. Bir sitil sınıfı tanımlarken sınıf ismini önüne bir nokta ( . ) koyarak belirmek zorundasınız. Mesela onemli sınıfı oluşturacaksanız ve bu sınıfın uygulandığı yerlerde font büyüklüğünü ve rengini değiştirmek istediğimizi var sayarsak :
<STYLE>
<!--
.onemli {
font-size: 16;
font-color: blue;
}
// -->
</STYLE> Şeklinde bir tanımlama yapabiliriz. Burada .onemli bir sınıf ismidir ve istediğimiz taga uygulayabiliriz. Bir sınıfı herhangi bir elemana uygulamak için o elemanın CLASS özelliğini kullanıyoruz. Mesela yukarıdaki .onemli sınıfını herhangi bir <B> tagına uygulamak istersek :
bu bölüm
<B CLASS="onemli"> onemli </B>
sınıf ile oluşturuldu. şeklinde bir ifade gereklidir. Hazırladığımız onemli sınıfını sadece <B> tagı içerisinde değil mesela herhangi bir <P> veya <DIV> tagı ile birliktede kullanabiliriz. Bu şekilde bir kullanım sadece sınıf ismi belirtilen taga etki edecek ve diğer taglara herhangi bir etki etmeyecektir. Örnek uygulamamızı yapalım :
<HTML>
<HEAD>
<TITLE> Sitillerin kullanımları </TITLE>
<STYLE>
.onemli
{
background-color : black;
color : white;
font-size:14;
font-type:verdana;
margin : 20;
border-width:1;
border-color:red;
border-style:solid;
}
.buyuk
{
background-color : yellow;
color: blue;
font-size:24;
}
</STYLE>
</HEAD>
<BODY>
<H1> Sitil uygulamaları</H1>
Bu bölümde sitil sınıflarının kullanılmasını görüyoruz.
<DIV CLASS="onemli">
<B CLASS="buyuk">S</B>ınıflar bize birden çok alana aynı
sitilleri uygulamamızda büyük kolaylıklar oluştururlar.
</DIV>
<P><SPAN CLASS="buyuk">B</SPAN>üyük kolaylıklar sağlar.
Böylece aynı özelliklere
sahip bölümler için yeni sitiller hazırlamak zorunda kalmayız.
</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. Yukarıdaki örneğimizin sonucunu görmek için tıklayınız . <A href="belgeler/css/denemeler/sitilkullanimi2.htm">tıklayınız</A>
 |
Bu içeriğe ait yorumları masaüstüne alabilirsiniz
