CSS Nedir?
CSS kelimesi, ingilizce Cascading Style Sheets kelimelerinin baş harflerinin kullanılmasıyla oluşturulmuştur. Türkçe olarak css nedir derseniz, Katmanlı Sayfa Stilleri’dir. CSS’den genel olarak bahsedecek olursak, HTML dilinin dizaynına yardımcı işlemler bütünü diyebiliriz. Web tasarımla uğraşıyorsanız özellikle html bir websitesi hazırlıyor iseniz tasarım ile ilgili sorunlar baş göstermektedir. Ya istediğiniz gibi olmaz ya da tasarımdan tam verim alamayabilirsiniz. İşte bu noktada CSS bizim yardımımıza yetişiyor ve kodladığımız sitenin dizaynını kodlamamıza yardımcı oluyor. CSS dili sayesinde yaptığımız web sayfası içindeki öğeler için farklı özellikler atayabiliyoruz. Bu yazım dilinin bu kadar gözde olmasının sebebi ise, kullanım açısından webmasterlara kolaylık ve esneklik sağlaması. Bu esneklik ve kolaylık sonucundada karşımıza görsel olarak göze hoş gelen tasarımlar çıkabiliyor. Webmasterlara sağlanan bu kolaylık ve esneklik sayesinde ise hazırladığımız alt sayfaları da tek tek değiştirmeden sadece oluşturduğumuz CSS dosyasını değiştirerek sitemizin tüm sayfalarına entegre edebiliyoruz.
Css nedirin cevabının ardından css'nin kullanım türlerine geçelim.
Üç Çeşit CSS türü vardır. Bunlar,
Genel CSS
Harici CSS
Yerel CSS’dir.
Bu CSS türlerini kısaca açıklayacak olursak, Harici CSS, “.css” uzantısına sahip olup bir dosya şeklinde kayıt edilir. Kayıt edilen bu dosyayı web sitemizin istediğimiz sayfasında kullanma anlamındadır. Yerel CSS, sadece yaptığınız web site sayfasında nereye tanımlamış iseniz orada geçerli olan CSSlerdir. Genel CSS ise, yapmış olduğunuz websitesinin tüm sayfasını kapsamaktadır. Ayrıca CSS1,CSS2, CSS3 olmak üzere üç versiyona sahiptir.
CSS’nin bu türleri hakkında biraz kod bilgisi verecek olursak daha iyi açıklayabiliriz.
Yerel CSS:
[php]
<html>
<head>
<title>Örnek Sitemiz</title>
<****content=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
</head>
<body>
<h1>Örnek</h1>
<h1 style="color:teal ;font-size:18">Örnek</h1>
<h1>Örnek</h1>
</body>
</html>
[/php]
Yukarıda yaptığımız basit kodlamada, oluşturduğumuz ilk kelimemiz normal şekilde, ikinci kelimemiz belirttiğimiz renk ve boyutta, 3. kelimemiz ise tekrardan normal şekilde görünecektir. Bu Yerel CSS kodlamasına bir örnektir.
Harici CSS:
[php]
h1 {font-size:18; color:blue}
h2 {font-size:15; color:black}
h3 {font-size:25; color:white}
[/php]
yukarıda oluşturduğumuz html kodunu ornek.css şeklinde kaydediyoruz. Kaydedilen yerin aynı dizin olmasına özen gösterin. Sonrasında ise aşağıdaki kod kısmını yazabiliriz.
[php]
<html>
<head>
<title>Örnek: css nedir</title>
<****content=text/html;CHARSET=iso-8859-9 http-equiv= Content-Type>
<link rel="stylesheet" type="text/CSS" href="ornek.css">
</head>
<body>
<h1>Örnek 1</h1>
<h2>Örnek 2</h2>
<h3>Örnek 3</h2>
</body>
</html>
[/php]
Yukarıdaki kodlamada gördüğünüz üzere ve
[php]<link rel="stylesheet" type= "text/CSS" href= "ornek.css">[/php]
şeklinde yazmış olduğumuz kodda oluşturduğumuz ornek.css dosyasını çağırmak için kullanıyoruz. Bu şekilde kullanımlara ise Harici CSS diyoruz.
Genel CSS
Genel CSS’de ise, oluşturduğumuz html belgesinin head kısmına yazılır ve bu sayede tüm sayfayı etkileyebiliriz. Aşağıdaki kod ile genel css’nin çalışma mantığını az çok anlayabilirsiniz.
[php]
<html>
<head>
<title>Örnek: css nedir</title>
<****content=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
<style type="text/CSS">
<!--h1 {color:teal; font-size:18}-->
</style>
</head>
<body>
<h1>Örnek 1</h1>
<h1>Örnek 2</h1>
<h1>Örnek 3</h1>
</body>
</html>
[/php]
Yerel CSS kısmında yazdığımız koddan farklı olarak, oluşturduğumuz üç kelimede kod içinde belirttiğimiz özelliklere uygun olarak görüntülendir. Kodu yazar iken,
[php]<style type="text/CSS">[/php]
ile başlayarak
[php]</style>[/php]
kodu ile bitiriyoruz.
[php]<!--' ' -->[/php]
kısımları ise CSS’yi bilmeyen eski sürümlü tarayıcılardan saklamaya yarar.
Hazırlamış olduğunuz CSSli bir web sayfasının belirli standartlara sahip olup olmadığını kontrol etmeniz için www.w3c.org adresindeki siteyi ziyaret edebilirsiniz. Bu site World Wide Web Consortium’un web sayfası olup buradan sayfa standartlarınızı kontrol etme imkanınız vardır. CSS’nin özelliklerine değinecek olursak, CSS dili,
*.css uzantısı şeklinde kayıt edilmekte olup, sayfanın hızlı bir şekilde açılmasını sağlamaktadır.
Öğeler üzerine style="" şeklinde öğelere özel tanımlar ekleyebilirsiniz.
Oluşturduğunuz html sayfasındaki öğelerin görünümlerini belirlemektedir.
Hem bu özelliklerinden dolayı, hem de webmasterlar için kullanım kolaylığı sağladığı için CSS günümüz web tasarımcılığı ile uğraşan kişiler için vazgeçilmez bir olanaktır. İnternet ortamından yeni yapılan bir çok sitenin artık CSS ile yapıldığını, hatta eski dizayna sahip sitelerinde aynı dizaynlarını veya yeni dizaynlarını CSS ile yaptığını görebilirsiniz.
İlgili şu konulara bakabilirsiniz;
Css örnekleri içeren kaynak siteler
Css Menü Yapımı
Dış Bağlantılar
Css nedir sorgusu için ingilizce kaynaklar.
Css Nedir Videosu
http://www.youtube.com/watch?v=FClNUA2udqs
Hiç yorum yok:
Yorum Gönder