Cihan Demirten
blog-post-1

    Yazar: Cihan Demirten

  • 15 Haziran 2017

Css nedir? Ne işe yarar?

Css web sayfaların görselliğini düzenleyen bir dildir. Bu dil ile, web sayfalarında oluşturulmuş alanların, resimlerin, yazıların formların ayrı ayrı düzenlemesini yapabilir, şekil, renk, konum vb. gibi bir çok özelliğini değiştirebiliriz. 

Örnek olarak css ile neler yapılabilir;

  • Alanların yükseklik ve genişliği değiştirilebilir.
  • Yazıların boyutu, genişliği, rengi değiştirilebilir.
  • Alanlara, sayfalara arka plan renkleri verilebilir.
  • Bölümlerin konumlandırılması yapılabilir.
  • Yazıların, resimlerin veya alanların üzerine geldiğinde, tıklandığında gibi işlemlerde neler olacağı belirlenebilir.

ve bunun gibi aklımıza gelebilecek tasarımsal anlamdaki işlemlerin tümü css ile sayfaya uygulanır. 

Kısaca html, php, asp gibi dilleri bilmek web sayfası yapımında sadece yeterli olmayacaktır.

Tasarımda değişiklik yapmak için sadece css mi bilmemiz gerekir?

Hayır, html bilgisi ile de sayfa içerisinden belli başlı bölümlere düzenleme yapabiliriz. Fakat kapsamlı, daha ayrıntılı tasarım düzenlemesi yapmamız gerekiyorsa css bilmemiz gerekmektedir. 

Css'in işleyişi nasıldır? Css nasıl çalışır ve tanımlanır?

Css, html sayfamızdaki resim, yazı, div, span, section vs. alanlara tanımlanmış class veya id isimlerine yönlendirmeler yaparak çalışır. 

Css sayfalarda 3 ayrı metot ile tanımlanır;

  1. Kod içine gömülü olarak (In-line): Bu metodta css kodlarımız direkt olarak oluşturulan alanımızın içine tanımlanır. 
    <img src="resimCihan.jpg" style="width:250px; height:auto;"> 
  2. Sayfa içerisinde ve style tagleri içerisinde: Bu yapıda css kodları, html, php, asp gibi web dosyalarının içerisinde, head alanı veya diğer bir alanda <style></style> tagları arasına yazılarak kullanılır.
    <style> .ornekAlan { float:left; background-color:white; } </style>
  3. Harici css dökümanını sayfaya gömerek: Bu yapıda css kodları, .css uzantılı bir dokümanın içerisine yazılır ve html dosyasına, dosya yolu gösterilerek gömülür. 
     <link rel="stylesheet" href="style.css" type="text/css"> (Html sayfaya gömme kodu)

Yukarıdaki bilgiler, basit de olsa bir web sayfası geliştiriyorsanız zaten bilmeniz gerek bilgilerdi. Şimdi ise gelelim sass'ın css'e ve bize kattığı faydalara.

Sass Nedir? Ne işe yarar?

Sass, css ile erişmesi zaman alan bölgelere kolayca, hızlıca erişip düzenleme imkanının sunulduğu, tıpkı bir programlama dilinde olduğu gibi değişkenlerin, fonksiyonların döngülerin tanımlandığı, ruby diline benzeyen bir dildir. 

Sass işlemleri ile iç içe kullanılmış divlere veya herhangi başka alanların içerisinde tanımlanmış başka alanlara kolayca müdahale edebilir, önceden tanımladığımız değişkenleri, fonksiyonları çağırıp işlem yapabiliriz.

Şimdi aşağıdaki yapıyı bir inceleyelim.

<div class="div1">
        <a class="a1"></a>
        <div class="div2>
                <img src="resim.jpg">
        </div>
</div>

Csste buraya nasıl müdahele edilir?

.div1 a { color:white; }
.div2 img { width:250px; }

Sass'ta buraya nasıl müdahale edilir?

.div1 {
        a{ color:white; }
        .div2{
                img{width:250px;}
       }
}

Özetle, yukarıdaki örnekte fazla detayına inemesekte içerisinde 1000 lerce satır css kullanıp karmaşaya yol açan css dökümanlarını, sass ile daha düzenli ve anlaşılır hazırlayabilir, sitemizin tüm alanlarına daha çok müdahale edebilir hale getirebiliriz.