CSS ile Biçimlendirme Teknikleri, Dinamik
HTML
CSS Stillerine Neden Ġhtiyaç Duyulur
Etiketleri incelerken gördüğümüz üzere biçimlendirme ile
metin iç içe girmekteydi. Böylece hem metnin
etiketlerden ayrılması hemde GOOGLE gibi arama
motorlarının sayfamızı indexlemesi zorlaĢmaktadır.
Biçimlendirme etiketleri kullanarak diyelimki belgenizdeki
tablo baĢlıklarını hep aynı stilde yazmak istiyorsunuz. O
zaman çaresiz her tablo baĢlığını tek tek biçimlendirmek
zorundasınız. Oysa CSS teknolojisi Word içinde tanımlı
hazır biçimlendirmeler gibi biçimlendirme blokları
kullanmaya izin verir. Tablo baĢlığı örneğine geri
dönersek, bu baĢlığı bir stil olarak tanımlar –örneğin 14
punto, Tahoma, Kalın ve ortalanmıĢ, mavi zemin
renginde- bu stili kaydettiğimiz dosyayı HTML içinde
kullanarak sitemizin (sitenin geneli sadece sayfa değil)
genelinde sadece stilin adını vererek ilgili biçimlendirmeyi
uygulayabiliriz. Dahada güzeli, stiller tek bir dosyadan
geldiği için stil dosyasındaki bir değiĢiklik anında tüm
sitemizde uygulanacaktır. Tablo baĢlığı örneğindeki gibi
örneği forntu değiĢtirsek yada zemin rengini değiĢtirsek
tüm sitemizde ne kadar tablo varsa bu stil hepsi için
değiĢtirilmiĢ olacaktır.
CSS bu açıdan büyük kolaylıktır. Ancak unutmayalım ki
tarayıcılar içerik gibi CSS etiketlerini de kendilerine göre
yorumlamaktadırlar.
ġüphesiz tek fayda bu değildir. Biçimleri sayfa kodlarında
sürekli tekrarlamak aynı zamanda gereksiz kod
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
121
yığınlarına yol açacak sayafaların kod uzunlukları
gereksiz yere artmıĢ olacaktır. Bu yüzden sayfalarımız
azda olsa daha geç açılacaktır. Bu ―az da olsa‖
görecelidir. Örneğin tabloda çok fazla satır sütun varsa
ve bunlar biçimlendirme içeriyorsa sayfanın açılması
normalden çok daha uzun sürecektir. Bunun alternatifi
olarak CSS stilleri genel olarak tek bir dosyadan
çağrılırlar ve kullanım için hafızaya yığılır, adı geçtikçe
çağrılarak kullanılır.
CSS web sayfasını biçimlendirmede HTML den daha geniĢ
imkânlar sunar. Örneğin div etiketiyle bir katman
oluĢturabiliriz ama hizalama dıĢında baĢka bir özelliğini
değiĢtiremeyiz. Ancak CSS ile katmanın sayfa içindeki
konumu, arka plan rengi, kenarlık tipi, yazı rengi,
kanlınlığı vb. pek çok özelliğini belirleyebiliriz.
CSS sadece biçimlendime iĢlemi için değil sayfanın
iskeletini tanımlamaktada kullanılır. Bunun için için
ekranın ayrılan her bir parçası ayrı bir katman gibi ele
alınır ve bu sayede tablo kullanmadan üstelik framesetler
lede uğraĢmadan sayfanın çatısını oluĢturabiliriz.
Cascading Style Sheets -CSS ve Kullanım ġekilleri
Web sayfalarını biçimlendirme konusunu ilk ele
aldığımızda yerel biçimlendirme yoluna gitmiĢ ve neyi
biçimlendireceksek o etikete ait kodları hemen orada
yazmıĢtık. CSS etiketleri ise hafızaya yığırlır demiĢtik.
CSS sayfa içinde üç Ģekilde kullanılabilir.
1. Yerel (Inline)
2. Sayfa içi global (Embedded)
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
122
3. Site içi global (Linked)
Yerel Stil ġablonu
Yerel Stil ġablonlar, uygulanacak etiketi sadece bir kez
bulunduğu yerde etkiler.
Örnek:
<html>
<head>
<title>Css</title>
</head>
<body>
<h2>CSS Kullanımı</h2><br>
<h2 style=font-size:20pt; color:blue>CSS
Kullanımı</h2>
</body>
</html>
Görüldüğü gibi bu Ģekilde sadece o an kullanılan etikete
etki edilmiĢtir.
Dezavantajı : Bu kullanımı font taglarının kullanımı
arasında pek bir fark yoktur. Anlık çözümdür ve CSS in
genel mantığına aykırıdır.
Sayfa Ġçi Global Stil ġablonu
Global Stil Ģablonları bir önceki örnekte yaptığımız gibi
h2 etiketinin (yada diğer bir etiketin) tüm sayfada aynı
özellikte olması istendiğinde kullanılır. Bunu için Stil
Ģablon özellikleri sayfanın baĢlangıcında
(<head></head> etiketleri arasında) tanımlanır.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
123
Örnek:
<html>
<head>
<title>Css</title>
<style type="text/css">
<!-- h2 {font-size:20pt; color:blue} -->
</style>
</head>
<body>
<h2>Web Teknikleri</h2>
</body>
</html>
Yukarıdaki örnekte sayfa içerisinde kullanacağımız tüm
h2 etiketlerinin özellikleri sabitlenmiĢtir. Yani sayfa
içerisinde nerede kullanırsanız kullanın h2 etiketinin stil
özellikleri hep aynı kullanılacaktır. Stil Ģablon
tanımlamaları <head> </head> etiketleri arasında
<style type="text/css"> ile baĢlayıp </style> ile
bitmelidir.
Dezavantajı : Tanımlanan stiller her sayfada
tekrarlanmıĢ olur. Diyelim ki stillerinin toplamda 5 kb yer
tutuyor olsun 500 de sayfanız olsun. Stiller 2500 KB yer
tutuyor demektir. Ayrıca her sayfa için CSS stilleri de
tarayıcıya yeniden gönderilecek ve gereksiz trafik
oluĢacaktır. Hepsinden beteri ise bir stilde değiĢiklik
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
124
yaparsanız diğer sayfaları da değiĢtirmeniz gerekir. 3-5
sayfa için bu kolaydır belki ama binlerce sayfadan oluĢan
bir portal düĢünürseniz bu iĢin ne derece zahmetli
olacağı açıktır. Ayrıca bir sayfada farklı diğerinde farklı
biçimlere yer verilmiĢ olabilir. Buda sitenin tutarlılığını
düĢürür.
Site Ġçi Global Stil ġablonu
Global stil Ģablonunu, sitemiz içerisindeki tüm sayfalarda
kullanmak istediğimizde uygulanabilecek bir tekniktir. En
çok kullanılan biçimde budur. Uygularken, stillerimizi
yukarıda örneklerini verdiğimiz Ģekilde hazırlarız. Fakat
bu stil listesini html dosyamızın içerisinde değil de boĢ
bir sayfaya yazarız ve css uzantılı bir Ģekilde kaydederiz.
Ardından da html dosyamızın içerisine yine <head>
</head> etiketleri arasına <link rel="stylesheet"
type="text/css" href="dosya_ismi.css"> Ģeklinde
ekleriz.
Örnek
h1 {font-size:13pt; color:green}
h2 {font:20pt; color:blue}
h3 {font-size:15pt; color:red}
Yukarıda verilen örnekteki dosyayı stil.css olarak
kaydedip, html dosyamıza geçelim. Html dosyamızın
kodları:
Örnek:
<html>
<head>
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
125
<title>Css</title>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<h1>Web Teknikleri</h2>
<h2>Web Teknikleri</h2>
<h3>Web Teknikleri</h2>
</body>
</html>
HTML dosyasının kodları arasında geçen <link
rel="stylesheet" type="text/css" href="stil.css"> kodu
stil.css dosyasındaki stil özelliklerini kullanmamızı sağlar.
Avantajları :
1. CSS dosyası hafızada durduğundan CSS her
seferinde web serverdan yeniden istenmez.
2. CSS dosyası bir tane olduğundan sayfalar küçülür.
Böylece bu iki madde siteyi daha hızlı hale getirir
ve gereksiz trafiği önler.
3. CSS dosyasında yapılacak bir değiĢiklik anında tüm
siteye yansıyacaktır.
4. Sitenin tamamı biçimlendirme açısından tutarlı hale
gelir.
Birden fazla stil Ģablonu verilirse Tarayıcı ne yapar?
ġimdi bir Cd rafı düĢünelim. Elimize geçen tüm CD
kutularını buna üst üste yığıyoruz ve kural olarak CD
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
126
aramamız gerektiğinden hep rafın üstünden altına doğru
aramaya baĢlayacağımızı varsayıyoruz. Peki aynı stil
Ģablonu iki yada daha fazla sayıda tanımlanırsa ne olacak
? Bu durumda olacak olan Ģudur. Rafın üstünden altına
doğru arama yapılır bulunan ilk eĢitlikte iĢe arama biter.
Kısaca öncelik hep en son tanımalanan stilin olur. Özetle
1. Bir HTML sayfaya iki LINK komutu ile ardarda iki
ayrı CSS dosyası bağlarsanız, ikisinde de aynı ada
stil Ģablonu içeriyorsa, ikincisindeki, yani Cd rafının
en üstündeki komutlar geçerli olur.
2. Bir HTML‘e biri LINK, diğeri EMBED iki ayrı stil
bilgisi verilirse ve ikisinde de aynı ada sahip stil
Ģablonu var ise, ikincisi, yani HTML‘in içinde
EMBED olanı geçerli olur; çünkü HTML önce dıĢ
dosyayı okuyacak, onun üstüne kendi içindeki
stilleri koyacaktır.
3. Son olarak, bir sayfada hem LINK, hem EMBED stil
bağlantısı olsa ve diyelim ki bir HTML etiketinin
önünde onu biçimlendiren bir yerel stil komutu
(INLINE stil) bulunsa, en son okunan yerel stil
komutu olacağı için, tarayıcı ilk iki stili bir kenara
bırakıp, INLINE stili uygulayacaktır.
Hiç yorum yok:
Yorum Gönder