|
CSS’i Web Sayfalarýna Eklemek
1- Kod içinde (In-line)
Direk olarak (X)HTML elementin içine style özelliði kullanýlarak
uygulamak.
view sourceprint?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.
view sourceprint?01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02.<html xmlns="http://www.w3.org/1999/xhtml">
03.<head>
04.<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9"
/>
05.<title>CSS'i Uygulamak </title>
06.<style type="text/css">
07.div{
08.color:red;
09.}
10.</style>
11.</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
view sourceprint?1.p {
2.
color: red;
3.}
4.
5.a {
6.
color: blue;
7.}
Daha sonra bu kodu gereken sayfalarýmýza uygularýz.
view sourceprint?1.<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.<html xmlns="http://www.w3.org/1999/xhtml">
3.<head>
4.<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9"
/>
5.<title>CSS'i Uygulamak</title>
6.<link rel="stylesheet" type="text/css" href="ornek.css" />
7.</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.
view sourceprint?01.<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02.<html xmlns="http://www.w3.org/1999/xhtml">
03.<head>
04.<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9"
/>
05.<title>CSS'i Uygulamak</title>
06.<style type="text/css">
07.@import "ornek.css";
08.</style>
09.</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.
view sourceprint?01.<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02.<html xmlns="http://www.w3.org/1999/xhtml">
03.<head>
04.<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9"
/>
05.<title>CSS'i Uygulamak</title>
06.<style type="text/css">
07.@import "ornek.css";
08.</style>
09.</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
view sourceprint?1.@import url(/css/iskelet.css);
2.@import url(/css/fontlar.css);
3.@import url(/css/renkler.css);
4.@import url(/css/urunlereozel.css);
 |
