CSS Özel İfadeler (Pseudo)

ElementLerin Alt Özellikleri

HTML'de A kodu belli durumlarda belli stiller alabilir. Örneğin fare ile üzerine gelindiğinde (hover) veya ziyaret edildiğinde (visited) farklı farklı stiller kullanmak gerekebilir. İşte bu tarz kullanımlar CSS nin özel kullanımlarıdır.

Pseudo Class olarak ifade edilen bu kullanımda seçimden hemen sonra iki nokta (:) kullanılır ve alt özellik belirtilir. Örneğin aşağıdaki kod tüm linklerin tüm alt özellikleri için geçerli olacaktır:

      a { color: #FF0000; }

Ancak aktifken, üzerine gelindiğinde ya da ziyaret edilmişse nasıl görüneceğini ayrı ayrı şu şekilde belirtebiliriz:

      a:link {color:#FF0000;}    /* ziyaret edilmemiş */
      a:visited {color:#00FF00;} /* ziyaret edilmiş */
      a:hover {color:#FF00FF;}   /* fare üzerinde */
      a:active {color:#0000FF;}  /* seçilmişse */

Eğer kendi belirlediğimiz bir stilde bu alt özellikleri biçimlendireceksek elementten sonra stil adını nokta ile ayırarak yazmalıyız:

      a.kirmizi:visited {color:#FF0000;}

İlk Elemente Özel Stil Belirleme

Aynı elementten birden çok kullandığımız bir yerde sadece ilk elementin diğer elementlerden farklı görünmesi için first-child alt özelliğini kullanırız. Örneğe bakalım:

<html>
 <head>
 <style type="text/css">
    p:first-child i { color:blue; }
 </style>
 </head>

 <body>
  <p>Ben <i>güçlü</i> biriyim. Ben <i>güçlü</i> biriyim.</p>
  <p>Ben <i>güçlü</i> biriyim. Ben <i>güçlü</i> biriyim.</p>
 </body>

</html>

Yukarıdaki kodu bir not defterine yapıştırıp sonunu .html olarak kaydedin ve açın. Göreceksiniz ilk "güçlü" yazısı mavi renkle yazılmış. Bunu diğer tüm elementlerde de kullanmanız mümkündür.

CSS Transparanlık (opacity)

CSS kullanarak kolaylıkla resimlerinize şeffaflık (transparanlık) özelliği verebilirsiniz.

Transparan Resim Yaratmak

CSS3'de yer alan opacity kodu resmin şeffaflık oranını ayarlamamızı sağlar:

   img
   {
      /* Transparanlık oranı 40% */
      opacity: 0.4;

      /* IE8 ve aşağısındaki tarayıcılarda sorun çıkmaması için */
      filter: alpha(opacity=40);
   }

Yukarıda dikkat edildiyse iki kez 40% olduğunu belirttik. Birinci opacity kodumuz tüm güncel tarayıcılar için geçerli. Ancak bu kod Internet Explorer 8 ve aşağısında görüntülenmez. Bu sorunu düzeltmek için IE8 ve aşağı browserların anlayacağı tarz ikinci bir kod yazdık: filter: alpha(opacity=40); Buradaki 40, %40 ı ifade eder.

Fareyle Resmin Transparanlığını Değiştirmek

   img.stil { opacity: 0.5; filter: alpha(opacity=50); }

   img:hover.stil { opacity: 1.0; filter: alpha(opacity=100); }

Arkaplan Üzerinde Transparan Yazı

HTML kodumuz ve stillerimiz:

<html>
<head>
<style type="text/css">
   div.background {
      width:400px;
      height:330px;
      background:url('th_4.jpg') repeat;
      border:2px solid black;
   }
   div.transbox {
      width:300px;
      height:260px;
      margin:30px 50px;
      background-color:#ffffff;
      border:1px solid black;
      opacity:0.6;
      filter:alpha(opacity=60);
   }
   div.transbox p {
      margin:30px 40px;
      font-weight:bold;
      color:#000000;
   }
</style>
</head>

<body>

   <div class="background">
   <div class="transbox">
   <p>"Sevdiği kızı bırakıp gurbete gitmişti genç.
      Fakat aradan geçen yıllar sevgisinde hiç bir azalışa
      neden olmamıştı.Yıllar sonra döndügünde sevdiğinden
      şu sözleri işitti:"A gönlüme hükmeden. Bunca yıl geçti,
      yolunu gözledim. Ne bir haber, ne bir mektup?!. Meğer ne
      kadar vefasızmışsın?."<br /><br />
      Bunun üzerine genç başını önüne eğdi, gözlerinden yaşlar
      akarken cevap verdi:" Ey sevgili! yüzünü görmek benim
      için uğruna ölünecek bir hasret iken, o şerefi postacıya
      mı bağışlasaydım?!"
   </p>
   </div>
   </div>

</body>
</html>

CSS Çıktı Türleri (media)

Sitenizi farklı medya türlerinde (sayfa, ekran, tarayıcı) nasıl görüneceğini ayrı ayrı ayarlamanız için bir CSS kodu olan @media <çıktı türü> kodundan faydalanırız.

En çok kullanılan çıktı türleri:

all - Tüm çıktı türlerinde geçerli
print - Yazıcı tarafından içeriğin nasıl görüneceği
screen - Bilgisayar ekranında nasıl görüneceği
tv - Televizyonda nasıl görüneceği

Örneğin ekranda 14 punto Times New Roman ile görünen yazımızın yazıcıda (printer) 10 punto Arial ile görünmesini şu şekilde sağlayabiliriz:

   @media screen
   {
      p { font: 14pt Times New Roman; }
   }

   @media print
   {
      p { font: 10pt Arial; }
   }

   @media screen, print
   {
      p { font-weight: bold; }
   }

Yukarıdaki 3. örnekte font-weight: bold; ile yazının kalın olacağını belirtik ve bunun her iki tür (print, screen) için geçerli olacağı bilgisini araya virgül koyarak verdik.