CSS Dersleri
Temel Bilgiler
CSS Nedir?
CSS Kod Yapısı
CSS ID ve Class Seçimi
CSS Nasıl Eklenir?

CSS Stilleri
CSS Arkaplanlar
CSS Yazılar
CSS Yazı Tipleri
CSS Bağlantılar
CSS Listeleme
CSS Tablolar

Kenarlıklar
CSS Kutu Modeli
CSS Kenarlıklar (Border)
CSS Dış Kenarlık (Outline)
CSS Dıştan Boşluk (Margin)
CSS İçten Boşluk (Padding)

CSS İleri Düzey
CSS Gruplama ve Üzerine Yazma
CSS Sınırlamalar
CSS Gösterme - Gizleme
CSS Pozisyon Belirleme (position)
CSS Kaydırma (float)
CSS Hizalama (align)
CSS Özel İfadeler (Pseudo)
CSS Transparanlık (opacity)
CSS Çıktı Türleri (media)
CSS Özellik Seçimi (Attribute)
CSS'ye Genel Bakış

Bağlantılar
HTML Dersleri
JavaScript Dersleri
CSS Dersleri
ASP Dersleri
PHP Dersleri
MySQL Komutları
jQuery Dersleri
Venus Programlama

Ana Sayfa Bize Ulaşın

CSS Gruplama ve Üzerine Yazma



Gruplama

Birden fazla stilde sıklıkla kullanılan CSS komutları varsa, bunları toplu olarak yazıp özelliği bir kez yazma şansına sahibiz. Buna gruplama diyoruz. Örneğe bakalım:

   h1 { color: green; }
   h2 { color: green; }
   p { color: green; }
   

Yukarıda görüldüğü gibi üç element için de tek bir özellik belirtilmiş. Bu da rengin yeşil olması. Bu kodu kısaltmak için element ve stil adlarını aralara virgül gelecek şekilde sıralayabiliriz. Şöyle ki:

   h1, h2, p { color: green; }
   

Verdiğimiz elementlerin tamamı yeşil renkli görünecektir.

Üzerine Yazma

Bazen tüm elementleri kapsayacak kodlar yazarız. Ancak bir ya da birkaç element bundan farklı olmalıdır. İşte bu durumda tüm elementlerde geçerli olan özellikleri değiştirmemiz gerekebilir.

Şu şekil bir HTML kodumuz olsun:

   <p>Bu bir paragraf</p>

   <p>Bu da bir paragraf ancak farklı bir stili olacak</p>

   <p>Bu da bir paragraf ve 1. paragraf ile aynı olacak</p>
   

Tüm P elementleri için genel özellikleri belirledikten sonra, farklı olmasını istediğimiz 2. paragraf özelliklerini yeni bir stil adı oluşturarak yazıyoruz. Geriye kalan ilgili paragrafa class="stil_adı" eklemek olacaktır.

   p {
      font: 10pt Tahoma;
      color: gray;
   }
   .kirmizi p {
      color: red;
   }
   

Yukarıdaki kısım incelendiğinde tüm <P> elementleri 10 punto Tahoma ve gri olacaktır. Ancak class belirtip kirmizi yazdığımız P diğerlerinden farklı olarak kırmızı renkli olacaktır.

   <p>Genel stile sahip paragraf</p>

   <p class="kirmizi">Kırmızı renkli olacak paragraf</p>

   <p>Diğer bir genel stile sahip paragraf</p>
   

Tüm hakları saklıdır. Lütfen kaynak belirtmeden sitenizde yayınlamayın. Web Sitesi © 2014