CSS Ders 2 (ID ve Class)

1. Class Kullanımı
   Bir HTML kaynağına baktığınızda bir element (tag) özelliği olarak class="stil" şeklinde bir özellik belirtildiğini görebiliriz.

   <div class="stil">Hoş Geldiniz!</div>

   Yukarıdaki div elementi içinde yer alan class="stil", o div elementi için CSS özellikleri belirtmemizi sağlayan bir yoldur. CSS dosyasında da bunun özellikleri olarak .stil{} classı bu şekilde tanımlanır.

   .stil {
         font: 10pt Tahoma, Verdana;
         color: blue;
      }

   Nokta (.) ile başlayan bir stil oluşturduk ve adını biz verdik. Bu demektir ki class="stil" ile belirttiğimiz tüm elementler 10 punto Tahoma yazı tipinde ve mavi (blue) renginde olacaktır.
   Class özelliğinin avantajları
   Kendimizin adlandırdığı özel stiller yaratmak ve kullanmak
   Bir stili birden fazla elementte kullanabilmek
   Stillere CSS de yer verip HTML kodlarımızı sürekli tekrarlanan uzun CSS kodlarından arındırmak
2. ID Kullanımı
   ID özelliği ile de stiller yaratabiliriz. CLASS'tan farklı yanları:
   Sadece tek bir elementte kullanılabilir.
   Aynı id değeri iki elemente verilemez (Her id sadece tek bir elementte kullanılabilir).
   Stil dosyamızda CLASS'da . (nokta) kullanırdık, ancak id özelliğine göre stilleme yapacaksak # (diyez) kullanırız.

   <div id="stil">Hoş Geldiniz!</div>

   Örnekte ID değeri "stil" olan bir DIV elementi görüyoruz. CSS dosyamızda bu elemente özel stil tasarlarken aşağıdaki şekilde kod yapısını oluşturmalıyız:

   #stil {
         font: 10pt Tahoma, Verdana;
         color: blue;
      }

   Görüldüğü gibi bu kez diyez (#) ile başlattık. Sadece tek bir elemente özel stil tasarlamış olduk (Neden? Çünkü başka bir elementte yine id değeri "stil" belirtilemez.)

İlgili Konular

0 Yorum