CSS'E GİRİŞ CSS DERSLERİ-1

CSS nedir?

“Cascading Style Sheet” ifadesinin kısaltması olan CSS Türkçe’ye “Basamaklı Stil Şablonları” ya da sadece “Stil Şablonları” olarak çevrilir. HTML’nin temel bir uzantısı olarak ortaya çıkan CSS, web sayfalarına stil vermek, HTML elemanlarının görünümlerini değiştirmek için kullanılmaktadır. CSS ile bir web sayfasındaki tek bir HTML elemanı değiştirilebildiği gibi tüm sayfayı değiştirmek de mümkün olmaktadır.

CSS ile ilgili temel kavramlar:

• CSS, web sayfalarının görünümünü güzelleştirmek, farklı ekran büyüklüğündeki cihazlarda web sayfalarının tasarımını ve sayfa elemanlarının yerleşimini sağlamak için kullanılmaktadır.

• HTML, sadece sayfanın iskeletini, yapısını oluşturma görevini üstlenmiştir. Sayfanın görünüm problemini çözme işini ise CSS üstlenmiştir.

• HTML 3.2 sürümüne <font> etiketi ve color özelliği getirilmiş ancak bu büyük problemlerin ortaya çıkmasına neden olmuştur. Bu gibi problemlerin çözülmesi için World Wide Web Consortium (W3C) tarafından CSS oluşturulmuştur. HTML’nin diğer sürümlerinden stil oluşturma etiketleri ve özellikler (attribute) kaldırılmıştır.

• CSS ile bir sayfanın bir elemanı, bir sayfayı ya da birçok sayfayı tek seferde değiştirmek mümkündür.

• CSS, web geliştiricilerini bir çok yükten kurtarmış ve HTML dokümanlarındaki karmaşıklığa son vermiştir.

• CSS’i sayfaya uygulayabilmek, HTML dokümanı içerisinde yapılabildiği gibi (internal CSS), harici CSS dosyası oluşturularak da yapılabilir.(external CSS)

• Harici CSS dosyası .css uzantılıdır ve Windows’ta not defterinin .txt olan uzantısı, .css olarak değiştirilerek oluşturulabilinmektedir. Gelişmiş metin editörlerde de aynı şekilde harici css dosyalarının uzantısı .css olmalıdır.

• CSS kimler için gereklidir? Profesyonel web geliştiricileri, öğrenciler, web site yöneticileri ve bloggerlar CSS bilmek durumundadır.

• CSS’i daha iyi anlayabilmek ve etkili kullanabilmek için HTML ve XHTML dilllerini iyi bilmek gerekmektedir.

CSS’in sağladığı avantajlar:

• Zaman tasarrufu: CSS ile bir stil oluşturduktan sonra, her seferinde sayfada aynı stili oluşturmak gerekmez, oluşturulan bu stili bir çok sayfaya ya da bir sayfanın istenilen elemanı için kullanılabilir. Bu da zaman tasarrufu sağlar.
• Sayfanın hızlı yüklenmesini sağlar:  Bir CSS stili yazıldıktan sonra, her seferinde bir eleman için aynı CSS yapısını yazmak gerekmemektedir. Ne kadar az kod yazılırsa, sayfanın yüklenme süresi o kadar artacaktır.
• Bakımı kolaylaştırır: Yazılan CSS’in değiştirilmesiyle stilin uygulandığı tüm elemanlar aynı anda değişmiş olur. Stilleri değiştirmek kolaylaşır.

• HTML’den daha fazla özellik (attribute) barındırır: HTML attribute’lerinden daha çok attribute taşır. Bu da sadece HTML ile bir sayfa oluşturmaktan daha çok imkan tanıdığı anlamına gelmektedir.

• Bir çok cihaz ile uyumludur: CSS ile oluşturulan web sayfaları bir çok cihazda çalışır. Mobil cihazlarda uyumlu çalıştığı gibi, CSS ile oluşturulan sayfaların yazdırmak (baskısını yapmak) mümkündür.
• CSS evrensel web standardıdır:  HTML’deki stil oluşturma özellikleri kaldırılarak bu görevler CSS’e devredilmiştir. Bu yönüyle CSS evrensel bir web standardıdır.

• Çevrimdışı saklama: CSS, web sitelerini yerel bilgisayarlarda çevrimdışı saklayabilmektedir. Bu özelliği ile web sitesinin hızlı yüklenmesini ve tüm performansının artmasını sağlamaktadır.

• Platformlara bağımlı değildir: CSS her tür tarayıcıda çalışabilmektedir ve hiç bir platforma bağlı değildir.

CSS’in kurucusu kim?

CSS, Hakon Wium Lie tarafından 1994’te icat edildi. W3C’da oluşturulan bir çalışma grubu CSS oluşturmak için çalışmalar yürüttü. 1996’da “Specification” adında bir belge yayınlayan W3C, yazılım geliştiren ilgili kuruluşlara CSS’i önerdi. (W3C, internetin nasıl çalışması gerektiği ile ilgili bağımsız kuruluşlara öneriler getiren bir kuruluştur.)

CSS versiyonları

• CSS1: 1996’da W3C tarafından önerildi. CSS dilinin belirlenmesinin yanı sıra HTML etiketleri ile görsel bir model önerildi.
• CSS2: 1998’de W3C tarafından CSS1 üzerinde oluşturuldu. Eleman konumlandırma, fontları indirme, işitsel cihazları destekleme ve yazdırma (print) gibi medya özellikleri desteği getirildi.
• CSS3: 1999’da W3C tarafından önerilen bu modelde en önemli yenilik, modül olarak adlandırılan “dokümanın bölümlere ayrılmasıdır”.  CSS3’teki bu modülleri başlıklar halinde aşağıda sıralamaktayız. Bu modüller CSS’ün üzerine inşa edildiği modüllerdir ve derslerimizde bunları ayrıntılı olarak göreceğiz.

CSS3 modülleri

• Selectors
• Box Model
• Backgrounds and Borders
• Image Values and Replaced Content
• Text Effects
• 2D/3D Transformations
• Animations
• Multiple Column Layout
• User Interface