CSS NEDİR ?

CSS  (CASCADING STYLE SHEETS)  

Günümüzde estetik , modern ve cihaz uyumlu web site tasarımlarının oluşmasında  önemli yere sahip olan  CSS , HTML ile beraber kullanılmaktadır. HTML sayfaları ve elemanları üzerinde kolayca görünüm odaklı iyileştirmelerin yapılmasını sağlar.

CSS NEDİR?

CSS , "Basamaklı (geçişli) Stil Sayfaları" anlamına gelir.  HTML ile hazırlanan  sayfalara  yada sayfadaki  elemanlara biçim özellikleri  ekleyip , canlılık  katan  Web dilidir. 

HTML için kullanılan klasik İSKELET tanımını düşünürsek , CSS bu iskeleti GİYDİREN YAPI olacaktır. HTML elemanlarının görünümlerini belirler.

Sayfa tasarımını özelleştirmek, görsel zenginlik sağlamak ve farklı cihazlara uygun hâle getirmek için CSS kullanılır..

CSS İLE NELER YAPILABİLİR?

Css, temelde sayfa tasarımının tüm kontrolünü HTML'den devralarak , body içndeki saf HTML Kodlarını azaltacaktır. Buda kod takibini oldukça  kolaylaştırır. Örneğin, HTML'de yazı rengi ve boyutu belirlemek istediğimz her yerde  FONT etiketi açmak ve parametrelerini  kullanmak gerekiyordu. Ancak CSS ile buna gerek kalmayacak, kısa ve basit kodlarla font özellikleri uygulanabilecektir.

CSS, sayfadaki her elemanı bir nesneymiş gibi biçimlendirebilir. Her elemanın etrafında gizli bir kutu varmış gibi düşünebilirsiniz...

Kısaca CSS ile;

• istenilen boyutta ve tipte yazılar yazılabilir , 
• <br> yada &nbsp; kullanmadan iç ve dış  boşluklar oluşturulabilir ,
• bir etiketin sahip olduğu özellikleri değiştiriebilir,
• farklı yerlerde kullanılmak üzere biçim sınıfları oluşturulabilir,
• elemanlara farklı şekiller ve gölgeler verilebilir..
• modern menüler ve animasyonlar oluşturulabilir.
• tasarımların tüm cihazlarda düzgün görünmesi sağlanabilir.. 

Bunlar gibi daha bir çok özellik sayılabilir.  Günümüzde hala geliştirilmekte olan CSS  ile hoş, kullanıcı dostu, estetik görünümlü siteler tasarlanabilmektedir.

1.  
2.  
3.  

...

...

...

...

Previous Next

CSS ile HTML'de takıldığımız  sınırlılıklar ve kod fazlalığı ortadan kalkacağından  esnek, sade ve çok çeşitli yapılar oluşturabiliriz.

RESPONSİVE (DUYARLI) TASARIMLAR

Özellikle farklı ekran ölçülerine sahip cihazların (mobil,tablet vs..) yaygınlaşması ile beraber  CSS, web tasarımlarının tüm cihazlara uyumluluğu için daha da önemli hale gelmiştir. Duyarlı yada responsive tasarım olarak adlandırılan bu tasarımlarda farklı ekranlarda tasarımın ve görünümün nasıl olacağını CSS kodları (media) belirler.

TASARIM KOLAYLIGI

Bir web sayfası hazırlanırken  gereken çok sayıda renk veya font özelliğini HTML ile her defasında ayrı ayrı etiket olarak yazmak  gerekirken, CSS ile  bir defada tanımlanıp tüm sayfada kullanılabilir. Böylelikle bir değişiklik yapmamız  gerektiğinde sayfanın her yerinde değişiklik yapmak yerine, mevcut CSS kodları  üzerinde değişiklik yaparak tüm sayfalara etki etmesi sağlanır. 

CSS

<!--  Sayfadaki tüm P'lerin yazı rengi kırmızı olur  -->

<style>  
    p {color:#f00 }    
</style>

HTML

<p> 1  Lorem Ipsum - P </p>
<p> 2  Lorem Ipsum - P </p>
<p> 3  Lorem Ipsum - P </p>

EKRAN

CSS ile bir etikete doğrudan biçim özellikleri aktarılabileceği gibi , oluşturulan özellik paketleri ile (class)  aynı özellikler birden fazla etikete de uygulanabilir..

CSS

<!--  Sayfadaki  "color-red" class'ı verilmiş tüm etiketlerin yazı rengi kırmızı olur -->

<style>  
    .color-red {color:#f00 }    
</style>

HTML

<p class="color-red">  Lorem Ipsum - P </p>
<span class="color-red"> Lorem Ipsum - Span </p>
<div class="color-red"> Lorem Ipsum - Div </div>

EKRAN

Css kodları, body veya head bölümlerinde yer almak üzere HTML kodlarının içine  yazılarak kullanılır. Ayrıca .css uzantılı harici CSS dosyaları oluşturarak,  farklı sayfalarda link ile çağırıp aynı özellikleri kullanabiliriz. 

 <link rel="stylesheet" type="text/css" href="site.css"> 

Görüşmek üzere...