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);
.arkaplan{
background color:red;
}
bu kodu arkaplan.css olarak kaydettim ama php sayfama include ettiğimde calışmıyor hata da vermiyor nasıl olacak ya? sayfamın arkaplanını değiştireceğim ama ??
Firebug ile kontrol edin
hiç bişe anlamadım adam gıbı acıklayın
Hocam bu dersleri videolu anlatım şeklind eyapmayı düşündünüz mü hiç bence daha yararlı olacağı düşüncesindeyim mesela bir site nin yapımını css ile düzenleyeek anlatmak böylece kafalardaki sorularda gider diye düşünüyorum size bakarak nasıl düzenlediğinizi görmüş ve uygulamış oluruz çünkü teşekkürler
Video daha çok uğraşı isteyen bir iş yazmak bile bazen zor geliyor bana. Video işini Volkan Görgülü yaptı inşallah devamı gelir.
hocam öncelikle teşekkürler
verdiğiniz kodları kopyala yapıştır yapıp önce css i sonrada html aynı klasöre yapıştırdım
sadece tittle bölümü görünüyor
nerde hata yaptığımı birtürlü anlayamadım lütfen yardım
örneği görebileceğim bir link varsa bakabilirim
teşekkürler ;)
hocam tek tek kodları koymuşsun ama birde komple koysan ne olurdu sanki…uğraş dur
Kodların her biri ayrı bir yöntem. Amaç tek tek bunların nasıl kullanıldığını açıklamk olduğu için hepsini birden varmek mantıksız olurdu.
arkadaşlar aynı klasör içerisinde bi tane css dosyası bi tanede html sayfası açtım ama bi türlü css dosyası ile html arasındaki bağlantıyı kuramadım sizin yukarıda yaptığınızı buradaki kopyalayıp yapıştırdım css dosyasının ismini yazdım ama olmadı
acaba buradaki css dosyasını belgelerim/yeniklasör/örnek.css diyemi yazmalıyım linkini
2.
3.
4.
5.CSS’i Uygulamak
6.
7.
css dosyanız ve html dosyanız aynı klasör de ise
şeklinde ekleyebilrisiniz. Ama klasör farklı ise bunu belirtmelisiniz.
draeamweaver da common(komutlar) menüsü aktifliğini yitirdi.Tamamen kulalnılmaz hale geldi menünün üstüne geldiğimde uyarı veriyor nasıl düzeltebilirim…
(şimdiden teşekkürler)
herkese iyi çalışmalar
Bu konu hakkında bir bilgim yok.
Fatih hocam gerçekten emeğine sağlıl benim gibi web konusunda hiç bir bilgisi olmayan biri bile sayenizde kendi sitesini yapacak cesareti buldu…Şuan yapmaya çalışıyorum…VE sizin vermiş olduğunuz bu eşsiz bilgiler gerçekten ışık tutuyor…
ellerinize saglik
tesekkür ederiz bilgiler icin