Zeki Can - WordPress

  CSS

Css Class Kullanımı

Css kod yapısını incelemiştik. HTML elementleri için stiller belirlediğimiz gibi kendimize özel elementlere stiller belirleyip kullanabiliriz.

Bir html kaynağını inceleyelim. Alttaki html kaynağına baktığımızda class=”stilim” şeklinde bir özellik belirtilmiş.

<div class="stilim">Sitemize Hoş Geldiniz!</div>

Üstteki div elementi içinde yer alan class=”stilim”, o div elementi için CSS özellikleri belirtmemizi sağlıyor. Bu şekilde div elementlerimize o div’e ait özellikler ekleyebiliriz. Yukarıdaki div için verdiğimiz stilim kılasını CSS dosyamızda inceleyelim.

.stilim {
      float:right;
      font: 12pt Tahoma, Verdana;
      color: red;
   }

Nokta (.) ile başlayan bir stil oluşturduk ve adını stilim koyduk. Bu demektir ki class=”stilim” ile belirttiğimiz tüm elementler 12 punto büyüklükte yazılacak, yazı tipi olarak Tahoma yazı tipi kullanılacak ve kırmızı (red) renginde olacaklardır. Sitemizde bunun gibi stiller kullanarak kullandığımız elementlere kolayca stiller tanımlayabilir istediğimiz yerlerde kullanabiliriz.

Örneğin; tüm a etiketlerinde bu stili kullanılmasını istiyoruz. O zaman yapmamız gereken kullanım şekli;

a.stilim {
      float:right;
      font: 12pt Tahoma, Verdana;
      color: red;
   }

şeklinde olacaktır. Bu şekilde css dosyamıza girdiğimizde tüm a etiketine sahip elementlerimiz 12 punto büyüklüğünde, Tahoma yazı tipinde, kırmızı renkte olacaktır.

Bir örnekle daha devam edelim. a etiketinde olduğu gibi başka etiketlerde de tüm etiketler için tek bir tanımlama yapabiliriz. div etiketi için tanımlamamızı yapalım.

div.stilim {
background-color:#FFFFFF;
height:50px;
left:0;right:0;
width:100%;display:inline-block;
border-bottom:5px solid #34B3BD;
}

“.stilim” yani seçim adımızın başına div getirmemiz yeterli olacaktır. Bu şekilde girdiğimizde bu CSS kodu sadece DIV elementlerinde kullanılabilir olacaktır.

Sitemizde CLASS özelliği kullanmanın bize sağlayacağı yararlara baktığımızda;

• Kendimizin adlandırdığı  sitemizdeki bölümlere özel stiller belirleyebiliriz
• Bir stili birden fazla elementte kullanabiliriz.
• Stillere CSS de yer verip HTML kodlarımızı sürekli tekrarlanan uzun CSS kodlarından arındırabiliriz.
• Daha temiz bir kod yapısına sahip olabiliriz.
• Kullanım kolaylığı sağlayabiliriz.

/* DikKutularım */
.dikkutu{background-color:#FFFFFF;position:relative;box-shadow:1px 1px 3px #AAAAAA;width:160px;height:280px;}
.dikkutu h5{font-family:calibri;font-size:12px;margin:8px 0px 2px 0px;text-align:center;display:inline-block;}
.dikkutu h5 a{color:#000000;text-transform:uppercase;}
.dikkutu h5 a:hover{color:#409096;}

Örneğin üstteki kodlarda ben dikkutu adında bir class belirlemişim. Sonrasında burda kullanılan h5 etiketinin özellik ve değerlerini belirtmişim. Üstteki kod stil dosyamdaki yani style.css dosyamdaki tanımlama.

<div class="dikkutu">
<h5><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h5>
</div>

Üstte olduğu gibi dikkutu class dosyamı tanımlarken div içine clasımın adını belirtiyorum. Biraz inceledikten sonra kolayca kavrayabileceksiniz.

Bir sonraki yazımızda Css ID Kullanımı konusunu inceleyeceğiz.

  Benzer Yazılar

  Yorumlar

  Kategoriler

  Arama Yap

  Son yorumlar