CSS’i (X)HTML sayfalarýmýza eklemenin 4 yöntemi vardýr.
1- Kod içinde (In-line)
Direk olarak (X)HTML elementin içine style özelliði kullanýlarak uygulamak.
<div style="color:red">Deneme yazýmýz</div>
Tüm CSS komutlarýný kodlarýn içine direk uygulamak önerilen bir kodlama þekli deðildir. Ancak özel durumlarda kullanýlabilir.
2- style Elementi kullanýlarak
<head> kýsmýnda <style> elementi içinde CSS kodumuzu yazarak uygulamak.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>CSS’i Uygulamak </title>
<style type="text/css">
div{
color:red;
}
</style>
</head>
Birinci yönteme göre avantajý (X)HTML kod ile CSS bir birinden ayrýþtýrýlmýþ olmasýdýr.
3- Harici Stil þžablonu Kullanýmý
Bu metod da CSS kodlarýmzý .css uzantýlý bir dosyaya kaydederiz. ornek.css
p {
color: red;
}
a {
color: blue;
}
Daha sonra bu kodu gereken sayfalarýmýza uygularýz.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>CSS’i Uygulamak</title>
<link rel="stylesheet" type="text/css" href="ornek.css" />
</head>
Bu yöntemin diðerlerine göre en büyük avantajý bir kere yazýlan kod lazým olan tüm sayfalara eklenebilmesidir. Bu sayede harici eklenen css kodu bir kere yüklendikten sonra diðer kullandýðýmýz sayfalarda tekrar yüklenemeyerek bize hýz kazandýracaktýr.
4- @import ile eklemek
üncü yöntem ile kullanýmý benzerdir.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>CSS’i Uygulamak</title>
<style type="text/css">
@import "ornek.css";
</style>
</head>
Bu yöntemle eklenen harici css dosyasý eski web tarayýcýlarý tarafýndan görüntülenemeyecektir.(Örn: NN4)
@import ile eklenen kod link ile eklenen kodlamadan önce yorumlanýr web tarayýcýlarý tarafýndan. Ayrýca css dosyalarýmýzda @import özelliðini kullanarak devamlý kullandýðmýz kodlarý css dosyamýza harici olarak ekleyebilriz böylelikle tekrarlardan kurtulmuþ oluruz. (11.10.2006 güncellendi )
Sonuç olarak burada dört adet CSS uygulama metodu gördük ancak bu metodlardan dördüncüsü avantajlarý bakýmýndan önerilen bir yöntemdir.
Ayrýca içeriði büyük olan sitelerde css kodunun parçalara ayrýlmasý ve kullanýlan sayfa CSS’inde hangi parçalar gerekli ise onlarýn import edilmesi önerilir. Bu sayfade kodun bir kýsmýnda yaptýðýmýz deðiþiklik için tüm css kodu incelenip deðiþtirlmesi gerekmez ve kod yönetimi kolaylaþýr.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>CSS’i Uygulamak</title>
<style type="text/css">
@import "urunler.css";
</style>
</head>
Ürünler bölümü için bir css dosyasý ekleyelim sonra parçalara ayýrdýðýmýz css kodlarýnýn ürünlere lazým olanlarýný urunler.css içine ekleyelim.
CSS’i Web Sayfalarýna Eklemek
Normal
