23 Mart 2014 Pazar

CSS Dersleri 1 CSS Giriş


Merhabalar herkese. Yep yeni bir alan ve onun konu anlatımları ile beraberiz. HTML derslerimi takip ediyorsanız öğrendiğimiz şeylerin bizi CSS ide artık bilmemiz gerektiği noktasına götürmüştür.  Bu nedenle artık diğer HTML derslerine devam ederken aynı zamanda CSS de öğrenmeye çalışacağız.

Bu dersleri öğrenmeye çalışan arkadaşın mutlaka temel düzeyde HTML bilgisine sahip olması gerekmektedir. Yoksa anlattığım hiç bir şey onlar için bir anlam ifade etmeyecektir.

O zaman Bismillah diyelim ve başlayalım.


İlk dersimiz CSS i tanıma şeklinde mekaniğini öğrenme şeklinde olacak. 

CSS İngilizce ifadesi (Cascading Style Sheets) olan Türkçede Stil Şablon dediğimiz HTML'e ek olarak gelen, metin ve format biçimlendirme işlemleri için kullanılan bir işaret dili yada teknolojisidir diyebiliriz.

Zaten biz HTML diye bir işaretleme dili biliyoruz CSS e ne gerek  var ki sorusu aklımıza gelebilecek ilk sorulardan biri. 

Şöyle açıklayalım sebebini, mesela HTML ile bir web sayfası tasarlıyorsunuz oluşturduğunuz alanların genişliği, yüksekliği, fontları  renkleri falan bütün her şeyi bu özellikleri vereceğiniz taglar içinde yazmanız gerekirdi. CSS bizi bu amelelikten kurtarıyor diyebiliriz.

Daha somut bir örnek verelim.

Mesela sayfanızda 4 tane başlık kısmı olsun. 

<h1 style="color:red ; font:arial">1. Başlık</h1>

<h1 style="color:red ; font:arial">2. Başlık</h1>

<h1 style="color:red ; font:arial">3. Başlık</h1>

<h1 style="color:red ; font:arial">4. Başlık</h1>

Bu şekilde 4 tane başlık olduğunu varsaydık. Gördüğünüz gibi her bir başlık için renk ve fontunu ayrı ayrı belirttim. CSS teknolojisini geliştiren mühendisler şunu düşünmüşler, madem aynı etiket ile yazdığım tüm kodların özellikleri bazen aynı olabiliyor niçin biz her defasında bu kodları yazalım ki o etiketin özelliklerini ortak bir alanda yazsak ve bu özellikleri oradan bu etikete sahip olan alanlar çekse demişler ve bu amaçla CSS teknolojisini geliştirmişler.

Peki bu kadar çok tercih edilme sebebi sadece bu mu?

Tabi ki değil arkadaşlar.Biraz daha detaylı düşünelim. Sadece Facebook sayfasını düşünün 1 Milyar kullanıcısı var. Bu da sadece kullanıcıların profilleri için 1 milyar HTML sayfası demek. 

Düşünelim şimdi Mark artık sitenin yazı şeklinden sıkıldı ve değiştirmek istiyor şu anda Arial ama Mark bunu Georgia yapmak istiyor. CSS olmasaydı olacak işlem şuydu Facebook ta çalışan tüm mühendisler 1 Milyar kullanıcının sayfalarına tek tek girecek ve font ismini Georgia olarak değiştirmek zorunda kalacaktı. Ama CSS in öyle bir özelliği var ki bu işlemi sadece saniyeler içinde yapılmasını sağlıyor. 

Nedir o ?

CSS dosyaları başka dosyalara bağlantı sağlayarak çalışabilmektedir. Yani biz bir etikete ait özellikleri bir CSS dosyası içinde yazıp bu CSS dosyasını istediğim kadar HTML dosyasına bağlayabilir o dosyalardan çağırabilirim. İşte bu özellik belkide CSS i Web tasarımcılar arasında vazgeçilmez kılmıştır.

Tabi bunun bize sağladığı bir avantaj daha var. 

Bir internet sayfasını açtığınızda tarayıcı onun anasayfa dosyası içindeki yazılan kodları tek tek çalıştırır ve sayfa şeklini HTML dosyasındaki kodlara göre alır. Düşünüyorum CSS olmasaydı ve biz her özelliği kendi tag i içinde belirtmek zorunda kalsaydık tam bir HTML kod karmaşası ile karşı karşıya kalacaktık bu sayfanın şişmesine sayfanın geç yüklenmesine belkide sırf bu yüzden kullanıcının sayfamızı terk etmesine neden olacaktı. 

Hızın her şey demek olduğu çağımızda bu göz ardı edilemeyecek kadar büyük bir eksiklik olurdu. 
Ama CSS bizi böylesi bir durumdan da kurtarır. Her kod defalarca çalışacağına bir kere CSS dosyası çağrılır ön belleğe alır onu tarayıcı ve defalarca oradan kodları çeker. Bu da sayfamızın arka planında bir kod kalabalığı oluşmasını engeller ön tarafta da kullanıcı için istedikleri hızı sağlar. Bu yüzden de CSS kullanmalıyız diyoruz.

Son olarak CSS mekaniğinden bahsedelim ve kodlama işlemlerimizi diğer derslerimize bırakarak huzurdan ayrılayım.

CSS çalışma mantığı iç içe kümeler şeklindedir. 

Ne demek istiyorum?

Bunu anlamak için şunu yapabilirsiniz Google açalım ve tarayıcı üzerinde sağ tıklayıp Ögeyi Denetle sekmesine tıklayalım. Bize sayfanın alt tarafında sayfanın kodlarının olduğu bölüme götürecek bu işlem. Şimdi sağ tarafta dikkat etmemiz gereken iki nokta var birincisi  Matched CSS Rules kısmı.



Burası sayfanın CSS kodlarını gördüğümüz kısım. Burada istediğimiz değişiklikleri yapıp Google sayfasının bile yapısını kendimiz için değiştirebiliriz. 

CSS kısmının yapısını ise biraz aşağıya inip Metrics kısmına tıklayarak görebiliriz.



Metrics yani belirtilen uzunlukların X ve Y düzleminde gösterilen kısmıdır. İşte CSS böyle bir mekanik ile çalışmaktadır.  

Evet böylelikle CSS hakkında yüzeyselde olsa temel bir bilgi sahibi olduk. Diğer derslerimizde görüşmek üzere diyor ve huzurdan ayrılıyorum. Çalışan arkadaşlarıma kolaylıklar dilerim. Vesselam.

Olumlu yada olumsuz yorumlarınızla destek olursanız sevinirim.

KONUNUN YAZARI NCFKR
DİĞER KONU ANLATIMLARI İÇİN TIKLA VE ÖĞREN

Hiç yorum yok:

Yorum Gönder