CSS nedir?

CSS (Cascading Style Sheet), bir dökümanın sunumu için geliştirilen bir tür işaretleme (markup) dilidir.

Bu dil yaygın olarak html ve xhtml ile geliştirilmiş web sayfalarınına şekil vermede uygulanmakta, fakat herhangi bir xml dokümanı için de uygulanması mümkündür. Web sayfalarında tercih edilme nedeni tasarımı standartlaştırıp, bir yerde yazılıp heryerde kullanma imkanını sağlayabilmesidir.

CSS dilinin 3. versiyonu için çalışmalar devam etmetedir ve bu dilin standartları World Wide web Consortium (W3C) tarafından belirlenmektedir. HTML bize metin biçimlendirme alanında çok geniş olanaklar sunar.

CSS, uzun yazılışıyla Cascading Style Sheets, veya Türkçesiyle Stil şablonları ise bunu bir adım daha öteye götürür, bize sayfalarımız için global şablonlar hazırlama olanağı verdiği gibi, tek bir harfin stilini; yani renk, font, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki bu esnekliğidir.

css

Bir web sayfası içerisinde zaten estetik kuralları gereği yüzlerce renk ve font kullanmayız. Genelde birbiriyle uyumlu birkaç renk ve birkaç font kullanırız ki, bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir sefer tanımlayıp bütün web sayfamızda kullanabiliriz.Bu şekilde güncelleme yaparken de onlarca sayfayı değiştirmekten kurtuluruz.

CSS kodları HTML kodlarının içine yazılırlar. Türüne göre body veya head bölümlerinde yer alabilirler. Bunların dışında harici CSS dosyaları oluşturulup bunlar gerektiğinde HTML belgesi içerisinde çağırılabilirler. Hemen hemen her konuda olduğu gibi CSS konusunda da Microsoft Internet Explorer ve Netscape farklı yorumlar ortaya koyarlar. Bu noktada her iki browser'ın da aynı/benzer yorumlayacağı kodlar yazmak en uygunudur.

Yapı taşları incelendiğinde, bir web dokümanı 3 katmandan oluşur denebilir: İçerik, sunum ve davranış. İçerik katmanı mutlaka bulunmalıdır. Bu katman, okuyucuya sunulmak istenen bilgilerden oluşur. İçerik, yapısını ve söz dizimini oluşturan HTML kullanılarak sayfaya gömülür. Günümüzde web’deki içeriğin çoğunluğu metin tabanlı olmakla birlikte imaj, animasyon, ses, video ve yayınlamak istediğin herhangi bir şey de içerik katmanına dahil olabilir.

Sunum katmanı, hazırlanan web dokümanına ulaşan kişiye, içeriğin nasıl görüneceğini tanımlar. Bir web sayfasına erişmenin en genel yolu tabi ki bir tarayıcı (explorer) kullanmaktır. Davranış katmanı, web dokümanı ile kullanıcı arasında gerçek zamanlı bir etkileşimi dahil eder. Bu görev JavaScript gibi bir script dili ile gerçekleştirilir.

Buradaki etkileşim, hazırlanan formdaki textbox kontrolünün boş geçilip geçilmemesinden masaüstü uygulaması gibi görünen gelişmiş bir web uygulamasına kadar herşey olabilir. Üç katmanı aynı dokümanda iç içe yazmak mümkündür. Ancak bunları ayırmanın önemli bir avantajı vardır. Diğer katmana müdahele etmeden bir katmanda güncelleme yapabilir veya tamamen değiştirebilirsininiz.

CSS (Cascading Style Sheets), bir web sayfasında sunum katmanını kontrol etmek için önerilen yoldur. HTML ile bir sayfanın kullanıcıya nasıl görüneceğini belirleyebilirsin. Ancak CSS kullanmak, içeriğin stil kodlarından tamamen ayrı tutulması açısından avantajlıdır. Örneğin 1000 ayrı web sayfasından oluşan bir sitenin görsel ayarları tek bir css dosyasında saklanabilir. Ayrıca CSS, HTML’deki görsel elementlerin kullanımına göre sayfa üzerinde daha fazla kontrol, dolayısıyla daha rahat bir çalışma ortamı sunar.

Satır içi CSS

Satır içi CSS, HTML etiketlerimizin STYLE özelliğinden faydalanılarak kullanılır. Satır içi CSS’e sadece o etikete özel CSS özelliklerinin eklenmesini istediğimiz durumlarda başvururuz. Örnek verecek olursak, sayfamızda iki ve ya daha fazla linkimiz var. Biz bu linklerden sadece bir tanesinin kırmızı renkli olmasını istiyoruz. Bu durumda satır içi CSS kullanmamız daha doğru ve mantıklı olandır.

Yerel Stil Şablonu

Yerel stil şablonları HTML belgesinin body bölümüne yazılırlar. Sadece bir kereliğine, yazıldıkları yerde etkili olurlar.

<html>
<head>
<title>Yerel CSS</title>
<METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
</head>
<body>
<h1>Deneme</h1>
<h1 style="color:teal ;font-size:15">Deneme</h1>
<h1>Deneme</h1>
</body>
</html>

Yukarıdaki örnekte yazdığımız ilk kelime normal , ikincisi ise belirtilen renkte ve boyutta görünecek. 3. kelime ise tekrar normal görünecek, bu da yerel şablonların bir kerelik olduğunu ispatlıyor.

Sayfa içi CSS

Sayfa içi CSS, CSS kodlarımızın HEAD etiketlerinin arasına yazılarak kullanıldığı yöntemdir. CSSkodlarımızı HEAD etiketlerimizin arasında oluşturduğumuz STYLE etiketlerinin içerisine yerleştiririz. Bu yöntemle tüm sayfamızın CSS kodlarını tek bir yerde toplamış oluruz. Örneğin sayfamızda linklerimiz var ve bu linklerin hepsinin kırmızı olmasını istiyoruz.

Bu durumda sayfa içi CSS yönteminden faydalanırız. Değişiklik yapmamız gerektiği durumlarda tek bir yerde yapacağımız değişiklik tüm linklerimizi etkileyecektir. Bizim yukarıda yapmış olduğumuz örnekte çok fayda görmeyebilirsiniz fakat 100 tane link olan bir HTML sayfada her linkte satır içi CSS kullanmış olsaydık değişiklik yapmak için her link için ayrı ayrı uğraşacaktık. Sayfa içi CSS ile bu işlemi tek bir yerde yapacağız.

Harici CSS

Harici CSS, CSS kodlarından oluşan .css uzantılı dosyaları ifade etmektedir. Burada CSS kodları tamamen HTML kodlarından ayrılmaktadır. Bir sayfadan fazla HTML sayfasından oluşan web projelerinde harici CSS dosyaları oluşturarak CSS kodlarını her sayfada kullanabiliriz. Bu bizim gereksiz kod yazmamızı önlemiş olur.

Ayrıca web sitesi bir bütündür ve sayfalar bu bütünün birer parçalarıdır. Bu parçaları görünüm olarak standardize etmemiz gerekmektedir. Her sayfanın görsel tasarımı birbirinden tamamen farklı olursa web sitemiz adeta yamalı bir pantolona benzeyecektir. Harici CSS dosyaları oluşturarak az kod yazarak çok iş yapabilirsiniz.

CSS kullanmanın avantajları

CSS ile görsel katmanın özelleştirilmesinin sunduğu en önemli avantajlar şöyle sıralanabilir:

• Bütün stil ayarları, sınırlı sayıda css dosyasında saklanır. Bunun, çok sayıda sayfadan oluşan web sitesinin bakımı üzerindeki pozitif etkisi yadsınamaz. Tek bir stil dosyasını güncellemek, yüzlerce web sayfası üzerinde değişiklik yapmaktan çok daha efektif olacaktır.

• Uygulamanın tükettiği internet bant genişliğinden yapılan tasarruf, kayda değerdir. Css dosyası, yapılan ilk talebin ardından istemci bilgisayarda önbelleğe alınarak saklanır. Aynı css dosyasını kullanan diğer sayfa taleplerinde buradan çağrılarak kullanılır; yani her seferinde tekrar tekrar karşı taraftan yüklenmez. Internet bant genişliğinin bu şekilde az kullanımı, site sahibine maliyetlerin düşmesi olarak geri döner. Bunun yanında siteyi görüntüleyen ziyaretçinin sayfayı daha hızlı yüklemesini sağlar.

• İçerik ile sunum katmanının (görsel ayarların) ayrılması, site sahibine içeriği başka amaçlarla (RSS besleme yada metni sese dönüştüren sistemlerde) kullanırken de büyük kolaylık sağlar.

Yorumlar

Bu sayfa ait yorum bulunamadı. İlk yorum yapan siz olun.

Yorum ekle

Vazgeç