CSS (Stil Şablonu) Çeşitleri
Bu yazıda CSS çeşitleri örnekler ile açıklanmıştır. Dreamweaver ile CSS Oluşturmak ile ilgili yazıya buradan ulaşabilirsiniz.
Stil şablonları yerel CSS, genel CSS ve harici CSS olmak üzere 3 çeşittir.
Yerel CSS : Bu tür CSS’ler body bölümünde kullanılırlar ve sadece kullanıldıkları yerde geçerlidirler.
Yerel CSS Örneği :
<html>
<head> <title>yerel css kullanımı</title> </head>
<body>
<h3>CSS kullanımı yok</h3><br>
<h3 style=font-size:20pt; color:blue>CSS ile biçimlendirilmiş</h3>
</body>
</html>Örnekte h3 tagı 4. ve 5. satırlarda kullanılmış. İkinci kullanımda CSS biçimlendirmesi uygulandığı için yazı 20pt boyutunda ve mavi renkte olacaktır.
Genel CSS :
Bu CSS ise head bölümünde yazılır ve body bölümünde istenilen yerden çağrılarak sayfa içerisinde istenilen her noktaya uygulanırlar.
Genel CSS Örneği :
<html>
<head>
<title>Genel CSS Örneği</title>
<style type=”text/css”>
<!– h3 {font-size:20pt; color:blue} –>
</style>
</head>
<body>
<h3>Stil Sayfası Uygulaması</h3>
</body></html>Örnekte görüldüğü gibi genel css tanımlaması head bölümünde <style type=”text/css”> ile </css> bölümleri arasında yapılır. <!– ile –> işaretleri arasına yazılmasının nedeni CSS tanımayan tarayıcıların bu bölümü pas geçmeleri içindir. Bu örnekte de h3 tagı ile biçimlendirme yapılmıştır. h3 tagına 20pt yazı boyutu ve mavi renk atandığı için sayfada kullanılacak bütün h3 tagları yazıyı 20pt boyutunda ve mavi renkte yapacaktır.
Harici Stil Şablonları : Global stil şablonları da denir. En kullanışlı ve en yaygın stil şablonudur. Bu stil şablonları ayrı bir sayfa olarak oluşturulur. css uzantılı bu sayfa sayesinde site içerisinde istenilen her sayfada bu css uzantılı sayfada tanımlı olan biçimlendirmeler kullanılabilir.Örneğin Joomla site templatelerde template_css.css isimli bir sitil dosyası vardır. Bu dosya yine template dosyası içerisindeki index.php isimli sayfadan çağrılır ve bu css dosyadaki özellikler index.php tarafından kullanılır. Oluşturulmuş stil sayfasını bir sayfada kullanabilmek için tek yapılması gereken <head> </head> tagları arasına aşağıdaki kodu yazmaktır.<link rel=”stylesheet” type=”text/css” href=”dosyaismi.css” mce_href=”dosyaismi.css”>
Harici Stil Şablonu Örneği :Bu örnek için iki tane sayfa kullanmak gerekir. Bu sayfalardan biri css uzantılı harici sitil sayfası, diğeri ise bu stil sayfasını kullanacak olan sayfadır. Örneğimizde index.html ve stilim.css isimli iki sayfa kullanacağız.
stilim.css Sayfasının Kodları :h2 {font-size:11pt; color:blue}
h3 {font-size:18pt; color:green}
h4 {font-size:14pt; color:blue} Burada h2, h3 ve h4 biçimleri oluşturulmuştur. Şimdi bu biçimleri index.html içerisinden çağırıp kullanacağız.
index.html Sayfasının Kodları :
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”stilim.css” mce_href=”stilim.css” >
</head>
<body>
<h2>ilk biçim</h2>
<h3>ikinci biçim</h3>
<h4>üçüncü biçim</h4>
</body></html>
Bu örnekte <link rel=”stylesheet” type=”text/css” href=”stilim.css” mce_href=”stilim.css”> kodu ile stilim.css dosyası çağrılıyor ve bu dosyadaki h2,h3 ve h4 biçimlendirmeleri otomatik olarak devreye giriyor. Sayfada kullanılan bütün h2,h3 ve h4 biçimlendirmeleri bu sitil sayfasında belirtilen biçime uygun olarak gerçekleşiyor.
