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.
<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 "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
@import url(/css/iskelet.css); @import url(/css/fontlar.css); @import url(/css/renkler.css); @import url(/css/urunlereozel.css);
Eyvallah hocam sağolasın hallettim.
dediğiniz gibi css css üztüne binmiş.:)
grşz.
İyi çalışmalar
Saygılarımla.
css üst üste binmiş tanımlamalar tekniğidir yani bir nesneye birden fazla özellik atanmış ise belli bir sırya göre sadece bir değeri alır. mutemelen bundan olabilir.
http://www.fatihhayrioglu.com/?p=180
bir göz at
tabi eğer başka bir sorun yoksa
Selam başım tarayıcıda gözükmeyen css lerle dertte.
aşağıda yazdığım css ler DW da gözüküyor fakat sayfayı açtığımda tarayıcıda hiçbir css gözükmüyor.(ie7 ve Mozilla Firefox da)
/* CSS Document */
yazdığım css in şu kısmı çalışmıyor.
.urun_etiket
{
font-family:thoma;
font-size:13px;
color:#666666;
}
.urun_fiyat
{
font-family:thoma;
font-size:16px;
color:#FF0099;
font-weight:bold;
}
.ilgiceken_urunler
{
background:#FFFFFF;
border-width:1px;
border-color:#999999;
height:65px;
}
Yorumlarınızı çok açil bekliyorum lütfen…
sağolasın
Selam başım tarayıcıda gözükmeyen css lerle dertte.
aşağıda yazdığım css ler DW da gözüküyor fakat sayfayı açtığımda tarayıcıda hiçbir css gözükmüyor.(ie7 ve Mozilla Firefox da)
/* CSS Document */
.top_banner
{
width:250;
height:1004;
}
.middle_banner
{
text-align:center;
right:500px;
}
.menu_sepet
{
background:#FF0000;
}
.dynamic_menu
{
background:url(images/dynamic_adr.png);
background-position:center;
margin-right:230;
margin-left:232;
}
body
{
background:url(images/ard.jpg);
background-position:top center;
background-repeat:repeat-y;
text-align: center;
#container {width: 760px; margin: 0 auto; text-align: left;
}
#menuCont
{
position:absolute;
left:50px;
top:0px;
width:975px;
height:153px;
z-index:300000;
visibility:hidden;
}
.urun_etiket
{
font-family:thoma;
font-size:13px;
color:#666666;
}
.urun_fiyat
{
font-family:thoma;
font-size:16px;
color:#FF0099;
font-weight:bold;
}
.ilgiceken_urunler
{
background:#FFFFFF;
border-width:1px;
border-color:#999999;
height:65px;
}
Yorumlarınızı çok açil bekliyorum lütfen…
Can anlatıklarını bir araya getirip bri sonuç çıkaramadım. Daha falza bilgi veya link verebilirsen belki yardımcı olabilirim.
ayrıca sitenin sağ tarafına reklam alıcağım için chip dergisinin ki gibi kendisini ayarlamasını da istiyorum
cevaplarınızı bekliyorum
iyi çalışmalar
Selam arkadaşlar ben bu 3. yöntemi kullanmak istedim biraz uğraştım ama anlamadım
benim site layer içine alınmış tablolardan oluşmakta 2 layer var 2. si inline frame içinde yani değişken olan 2. sayfa
sorunum ise laptopta çalışıyorum siteyi sola kaydırıp sağ tarafa reklam alıcam fakat çözünürlük pc den pc ye değiştiği için yada tarayıcıdan tarayıcıya şu kodu önerdiler
{
width:760px;
text-align:left;
left:99%;
margin-left:-380px;
position:absolute;
}
sizin verdiğiniz 3. yöntemle bunu siteye eklemek istedim fakat nasıl olucak. Tam olarak layerların içine teker teker mi atıyım yoksa nasıl olabilir. birde
CSS’i Uygulamak
bunu frontpage de siteye eklerken üzerinde nereleri değiştirmem gerekiyor kod tarafından oldukça kısır ım yardımlarınızı bekliyorum ilk defa css ile çalışıyorum
Bana kalırsa butonlara ayrı bir css dosyası yapmaya gerek yok. geneltanimlar.css gibi bir css dosyası oluşturup yaptığmız genel tanımları bunu içine yazabiliriz. h1, h2, input, button gibi genel tanımları bu css içine yazbiliriz.
Bu arada Hüseyin kusura bakma mesajını Doğan olmasa göremiyordum. Ara sıra unutuyor insan demek ki :/
mesela sadece butonlar için bir css dosyası olustur.
css bilgilerini gir daha sonra 3 yada 4. kural ile dosyanın yerini göster…
UStad butonlara nasıl yapcaz bunu