CSS’i Web Sayfalarına Eklemek

**Ceybi** · 28 Ocak 2012, 02:59

[Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...]

1- Kod içinde (In-line)

Direk olarak (X)HTML elementin içine style özelliği kullanılarak uygulamak.
1
<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.
01
02
03
04
05
06
07
08
09
10
11
<!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>
<**** **********="Content-Type" *********"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
1
2
3
4
5
6
7
p {
color: red;
}

a {
color: blue;
}

Daha sonra bu kodu gereken sayfalarımıza uygularız.
1
2
3
4
5
6
7
<!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>
<**** **********="Content-Type" *********"text/html; charset=iso-8859-9" />
<title>CSS'i Uygulamak</title>
<link rel="**********" 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.
1
2
3
4
5
6
7
8
9
<!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>
<**** **********="Content-Type" *********"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.
1
2
3
4
5
6
7
8
9
<!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>
<**** **********="Content-Type" *********"text/html; charset=iso-8859-9" />
<title>CSS'i Uygulamak</title>
<style type="text/css">
@import "ornek.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.
urunler.css
1
2
3
4
@import url(/css/iskelet.css);
@import url(/css/fontlar.css);
@import url(/css/renkler.css);
@import url(/css/urunlereozel.css);

28 Ocak 2012, 02:59	#1
Ceybi Mareşal Üyelik Tarihi: 12 Ocak 2012 Mesajlar: 789 Rep Puanı : 10 Rep Derecesi :	CSS’i Web Sayfalarına Eklemek [Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...] 1- Kod içinde (In-line) Direk olarak (X)HTML elementin içine style özelliği kullanılarak uygulamak. 1 <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. 01 02 03 04 05 06 07 08 09 10 11 <!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> <** ******="Content-Type" *****"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 1 2 3 4 5 6 7 p { color: red; } a { color: blue; } Daha sonra bu kodu gereken sayfalarımıza uygularız. 1 2 3 4 5 6 7 <!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> < ******="Content-Type" *****"text/html; charset=iso-8859-9" /> <title>CSS'i Uygulamak</title> <link rel="******" 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. 1 2 3 4 5 6 7 8 9 <!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> < ******="Content-Type" *****"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. 1 2 3 4 5 6 7 8 9 <!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> < ******="Content-Type" *****"text/html; charset=iso-8859-9" /> <title>CSS'i Uygulamak</title> <style type="text/css"> @import "ornek.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. urunler.css** 1 2 3 4 @import url(/css/iskelet.css); @import url(/css/fontlar.css); @import url(/css/renkler.css); @import url(/css/urunlereozel.css); Share Share this post on Digg Del.icio.us Technorati Twitter

Seçenekler
Yazdırılabilir şekli göster Sayfayı E-Mail olarak gönder
Stil
Normal Hybrid-Şeklinde gösterime geç Ağaç şeklinde gösterime geç

Benzer Konular
Konu	Konuyu Açan	Forum	Cevap	Son Mesaj
Dreamweaver'da Tarih ve Saat Eklemek	Ceybi	Dreamweaver	0	30 Ocak 2012 12:35
CSS’de Kısaltmalar	Ceybi	CSS	0	28 Ocak 2012 03:00
CSS’in Yapısı	Ceybi	CSS	0	28 Ocak 2012 02:49
CSS’e başlamak	Ceybi	CSS	0	28 Ocak 2012 02:47

Sponsor Linkler (Lütfen Sitemize Destek Olmak İçin Günde Bir Kez Tıklayınız)