CSS Ders 1

by on Tem.05, 2010, under HTML / CSS / JS

Metin Yılmaz CSS Desleri – Ders 1
Cascading Style Sheets’in ilk harflerinden oluşan bir kısaltmadır, bunu Stil Şablonları olarak Türkçemize çevirebiliriz. HTML yazım şekli olarak etiket türünde bir yazım dilidir. Büyük kolaylıklar sağlayan CSS, kullanım kolaylığı web tasarımcıların vazgeçilmezi olmuştur. Her türlü sayfa dizaynında müthiş bir esneklik sağlayan CSS, bağlantılı stil şablonlar ile birden çok sayfayı etkiyebilir, birden çok sayfanın özelliklerini bir kod değişimi değiştirebiliriz. Bu da bize site görünümünü değiştirmek istediğimizde elimizdeki onlarca belki de yüzlerce sayfanın kodlarını değiştirmeden sadece CSS dosyasındaki birkaç kodu değiştirerek yapmamızı sağlar.CSS tek başına etkili değildir HTML, PHP, ASP gibi bir dil ile birlikte kullanılmalıdır.
web yazılımların plugini olarak düşünebilirsiniz.
Stil Şablon’un tarayıcılara eklenmesinden sonra üç versiyonu çıkmıştır. Bunlar:
• CSS 1
• CSS 2
• CSS 3 – Çok akıllı tarayıcımız (!) IE tarafından desteklenmemektedir.
CSS Çeşitleri
Css’in 3 farklı kullanım alanı yani üç farklı çeşidi vardır:
1. Yerel (Inline Style) bir html tagı için kullanılan CSS türüdür.
2. Genel (Header Style) tüm sayfa için, tüm html taglarının değiştirilmesinde kullanılan CSS türüdür.
3. Harici (External Style) birden çok sayfa için kullanılan CSS türüdür. Bu CSS türü ayrı bir dosya olarak çalışmaktadır.
Yerel CSS –Inline Style-
<html>
<head>
<title>CSS Dersleri – Metin Yılmaz</title>
</head>
<body>
<b style=”font-size:12pt; color:blue;”>Inline Style Kullanımı</b>
</body>
</html>
Örneği CSS.html adıyla kaydedip açtığınızda mavi renkte 12 punto olan bir yazı çıkacaktır.
Genel CSS –Header Style-
Genel Stil Şablonları bir önceki örnekte yapılan değişikliğin tüm sayfada olmasını sağlayabilecek bir yapıya sahiptir. <head></head> etiketleri arasında tanımlanırlar
<html>
<head>
<title>CSS Dersleri – Metin Yılmaz</title>
<style type=”text/css”>
b {
font-size:12pt;
color:blue;
}
</style>
</head>
<body>
<b>Header Style Kullanımı</b>
</body>
</html>
Örnekte sayfa içerisinde kullanacağımız tüm b etiketlerinin özellikleri sabitlenmiş, yani tüm b tagları CSS’de ne isteniliyorsa onu yapar hale gelmiştir.
Stil Şablon tanımlamaları <head> </head> etiketleri arasında <style type=”text/css”> ile başlayıp </style> ile bitmelidir.
İpucu:
<!—b { color:blue}–>Etiketi ilekullanılırsa CSS’den anlamayan tarayıcıların bu kısmı geçmesini sağlayabiliriz. Bu işlem orada yazılan her şeyi yorum satırı yapacağından tarayıcı burayı es geçecektir.
Harici CSS –External Style-
Harici CSS ile birden fazla sayfayı yönetmede bize oldukça büyük kolaylıklar sağlar. Yazılışı yukarıdaki örnekler ile birebir aynıdır fakat html dosyasının içerisinde değil ayrı bir sayfada yer alır. Herhangi bir txt dosyasına bile yazılsa ardından .css olarak kaydedilip HTML içerisine <head> </head> etiketleri arasına <link rel=”stylesheet” type=”text/css” href=”dosya.css”> şeklinde eklenerek kullanılır.
Bu sayede sayfada istenilen herhangi bir değişiklikte HTML dosyası yerine sadece bu dosyada yapılacak birkaç değişiklik ile sayfamızın tasarımını değiştirebiliriz.
h1 {
font-size:12pt;
color:blue;
}
h2 {
font:16pt;
color:red;
}
h3 {
font-size:18pt;
color:black;
}
Buradaki kodları style.css olarak kaydededip, html dosyamıza:
<html>
<head>
<title>CSS Dersleri – Metin Yılmaz</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”> </head>
<body>
<h1>CSS Dersleri</h2>
<h2>CSS Dersleri</h2>
<h3>CSS dersleri</h2>
</body>
</html>
Bu öğrendiğimiz CSS kodları ile bazı tagları yönetebiliyor onlara çeşitli özellikler kazandırabiliyoruz.
Bir sonraki dersde id ve class mantığı ile site içerisindeki tüm tagları farklı olarak yönetmeyi öğreneceğiz.
Herkese webli günler…

:

3 Comments for this entry

Bir şeyler yazın