Css Giriş Kılavuzu

Orhan Türk tarafından yazıldı | 04 Mart 2010

Arkadaşlar Css Ön Açılımı Nedir  Size Sunuyorum Css Dediğimiz Olay Nedir İlk Önçe Buna Deyinelim

CSS (Cascading Style Sheets – Stil Şablonları), Web dokümanlarına stil eklemek için kullanılan basit ve güçlü bir dildir.

Web sayfalarının yapılarını düşündüğümüzde 3 kısma ayıra biliriz. İçerik kısmı, biçimlendirme kısmı ve dinamik kısım.

İçerik kısmı, HTML kodlarını içeren sayfa asıl içeriğini oluşturan birimleri oluşturma kısımdır. Bu kısım genelde metinlerden oluşsa da, resim, animasyon ve video gibi elemanlarıda içerir.

Biçimlendirme kısmı, içerik kısmını kullanıcıya nasıl görüntüleneceğini gösteren kısımdır. Sayfanın biçimini belirler. Kullanıcıya daha okunaklı ve kullanışlı sayfa sunmak için gerekli elemanları içerir.

Dinamik kısım, Javascript ile yapılan dinamik işlemleri içerir. Etkileşimli sayfalar oluşturmak için kullanılır.

Eskiden ki hala bu şekilde kodlama yapanlar mevcut. İçerik kısmı ve biçimlendirme kısmı içi içe kodlama yapardık, örneğin yazıtipi tanımı için

<font> etiketini kullanırdık. Eski kodlama yöntemi ile zaman, hız ve erişebilirlik açısından büyük kayıplarımız vardı.

CSS biçimlendirme kısmının yönetimini sağlamak için kullanılır. İçerik kısmı ile biçimlendirme kısmının ayrılmasını sağlayan CSS bize birçok avantajlar sağlar. Örneği 10.000 sayfası olan bir siteyi tek css dokümanı yardımı ile biçimlendirmemizi sağlar.

CSS 1996′da W3C tarafından duyuruldu. Son olarak(Ocak 2003’den beri) CSS2.1 sürümü yürürlüktedir. CSS3.0′da çalışmaları devam etmektedir. CSS3.0 için ayrıntılı bilgiye http://www.w3c.org/Style/CSS/current-work adresinden ulaşabilirsiniz.

Tablosuz Web Sayfası kodlama tekniğini kullanmayanlar CSS’in ehemmiyetini tam olarak anlayamayacaktır.

1.2.1. Görünüm Avantajları

CSS HTML’e göre birçok stil özelliğine sahiptir. CSS’in sayfa içeriği öğelerinin sayfa görünümü öğelerinden ayrılması için geliştirildiğini düşünürsek avantajı baştan anlaşılmış olur.

<h1>CSS'e Giriş</h1>

HTML’de bu elemanın(h1) kalın, altı çizili, Artalan rengi kırmızı olarak atama gibi çeşitli özellikler verebiliriz. Ancak bu özellikleri atamak içinde ayrı HTML elemanları kullanmak zorundayız (<strong>, <u>), ancak CSS’de bunu tek bir elemanla yapabiliriz ve ayrıca daha fazla stil özellikleri de atayabiliriz.(örn: kenarlık, rollover vs stillerini ekleyebiliriz.)

h1 {

color: white;

font: italic 11px Arial, serif;

text-decoration: underline;

background: yellow url(titlebg.gif) repeat-x;

border: 1px solid red; margin-bottom: 0; padding: 5px;}

Kullanım Kolaylığı

HTML’de her etikete artı özellikler eklemek için başka bir etiket ve/veya özellik eklememiz gerekmektedir. Bu işlemi geniş çaplı bir sitede yaptığımızı düşünürseniz çok büyük zaman kaybı ve uğraş gerektiğini göreceksiniz.

<h1><font color="blue">Başlık</font></h1>

Bunun gibi onlarca veya yüzlerce başlığınız olduğunu düşünün, gerçekten çok zor. CSS’de aynı işlem için

h1 {color: blue}

Kodunu yazmamız yeterli. Bu elemanın özelliklerinde değişiklik yapmak

istediğimizde sadece burada değiştirerek tüm sitede bu elemanın özelliklerini değiştirmiş olacağız. Ayrıca bu işlemi sadece bu etiket için değil diğer etiketlere de uygulayabiliriz.

h1, h2 {color: blue}

Ayrıca tek bir CSS dosyası ile sitenin tamamını yönetmek web

kodlamacıları için çok büyük  kolaylıktır. Sadece bir dosyada değişlik yaparak tüm sitemizi ara yüzünü yönetebiliriz isterse yüzlerce sayfa olsun.

 Makalede Geçtiğim Tüm  Kelimelerin Hepsi Bir Css Kitabından Alıntıdır İşallah Sizler İçin Yararlı Olmuştur

Saygılarıla

            Orhan Türk