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>

 

CSS Sınırlamalar

Genişlik ve Yükseklik

Bir nesnenin genişliğini width, yüksekliğini height kodu kullanarak belirleriz. Alacağı değer piksel, punto, Yüzde gibi bir ölçü değeri olacaktır.
 

   .kutu {
      width: 400px;
      height: 400px;
   }
   

Bu stili kullandığımız element 400x400'lük bir alanda yer alacaktır.
 

En Düşük Genişlik ve Yükseklik Değeri

Bir nesnenin minimum yani en düşük sahip olmak zorunda olduğu genişlik için min-width, yükseklik için min-height kodlarından faydalanırız.
 

   .kutu {
      min-width: 100px;
      min-height: 100px;
   }
   

Yukarıdaki örnekte elementin sahip olduğu yükseklik ve genişlik 100 pikselden düşük olursa otomatik olarak 100 piksele büyütülecektir.
 

En Yüksek Genişlik ve Yükseklik Değeri

Bir nesnenin maksimum yani en fazla sahip olabileceği genişlik için max-width, yükseklik için max-height kodlarından faydalanırız.
 

   .kutu {
      max-width: 500px;
      max-height: 200px;
   }
   

Örneği incelersek bu stile sahip bir HTML elementinin genişliği 500 pikseli, yüksekliği 200 pikseli aşamaz. Aşarsa özelliklerin uygulanmadığı başka bir alana taşacaktır. İstenirse sonraki konularda göreceğiniz overflow özelliği ile taşan kısmın gösterilmesi engellenebilir.

 

CSS Gösterme - Gizleme

Bazen HTML elementlerini kullanıcıdan gizlemek gerekebilir. Bir nesnenin görünme şekli ve gizlenmesini display komutu kullanarak yaparız.
 

Bir Elementi Gizlemek/Göstermemek

Bunun için kullanabileceğimiz iki kalıp ifade var:
 

• visibility: hidden; - Element gizlenir ancak elementin sahip olduğu alan boşluk şeklinde sayfada görünecektir.
• display: none; - Element gizlenir ve sahip olduğu alan da sayfada gösterilmez ve yer kaplamaz.

 

Block (Kutu) ve Inline (Satıriçi) İfadeler

Bir HTML elementi kutu yapısında olabilir. Bu durumda sayfada bulabildiği tüm genişliği kullanan bir kare alan kaplayacaklardır. DIV, P, H1 elementleri bu tarz elementlerdir.

Bazı elementler ise satır içinde sadece başladığı ve bittiği yere kadar alan kaplar. Bunlarsa satıriçi (inline) elementlerdir.
 

Bir Elementin Kutu Ya Da Satır İçi Olmasını Sağlamak

Element stiline display'ı kullanarak ekleyeceğimiz şu özellikler HTML elementinin kutu mu yoksa satır parçası mı olacağını belirtmemizi ve değiştirmemizi sağlar:
 

• display: block; - Element kutu şeklinde alan kaplayacaktır. Kullanıldığı anda yeni bir satırdan başlar.
• display: inline; - Element satır içinde yer alacaktır. Kullanıldığı satırda devam edecektir.

Element özelliklerini değiştirmekle ilgili iki örnek verelim. İlk örneğimizde aslında BLOCK (kutu) tarzı olan LI elementini satır içi ifadeye dönüştürüyoruz:
 

   .kutu {

      li { display: inline; }

      span { display: block; }

   }
   

Yukarıdaki ikinci örnekte ise aslında satır içi özelliğe sahip SPAN elementi BLOCK (kutu) yapısına dönüştürülmüştür.