Youtube Channel
cssd3
Ders 3
CSS’yi web dokümanlarına eklemek
CSS’yi web dokumanlarına eklemenin 4 yolu bulunmaktadır:
1 Kod içerisine eklemek
CSS kodumuzu <div ile başlayan katmanımızın içine yazarak <div></div> katmanları içerisindeki şeyi CSS ile renklendirmiş oluruz.
Ör:
<div style="color:#020202">Deneme Yazısı</div>
Burada css kodumuzu eklemedeki en önemli faktör <div kodumuzun devamıza style="color:#020202" diye devam eden bir stil kodu (yani CSS kodu) eklememizdendir…
2 <style></style> elemanlarını kullanarak CSS kodunu eklemek
Bunu yaparken head kısmına (Bedava-Sitem kullanıcılarında Tasarım Üzeri) oluşturduğumuz CSS kodunu <style> </style> taglarının arasına yapıştırdıktan sonra ekleyerek gerçekleşmektedir.
Ör (Ücretli site kullanıcıları için):
<!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=utf-8"
/>
<title>CSS’yi web’e aktarma</title>
Kısmı ile
</head> kısmının arasına
<style type="text/css">
div{
color:#020202;
}
</style> <style> </style> tagları arasında ki kodlar yapıştırıldıktan sonra eklenir..
Ör (Bedava-Sitem kullanıcıları için):
Tasarım Ayarları
Gelişmiş Ayarlar
Tasarımın Üzerindeki Yazı kısmına CSS kodumuz yapıştırılılalarak eklenir…
Kod:
<style type="text/css">
div{
color:#020202;
}
</style>
3 CSS dosyası kullanılarak ekleme yapma
Bu işlemi yaparken ilk önce bir CSS editöründen CSS kodumuzu oluşturduktan sonra oluşturduğumuz dosyayı .css olarak kaydedelim. Sonra dosyayı upload edelim. Upload ettikten sonra değişmeyecek olan css dosya ekleme elemanına URL adresimizi yapıştıralım.
Bizim kullanacağımız dosya adı style.css olsun…
CSS dosyası ekleme elemanı:
<link rel="stylesheet" type="text/css" href="style.css" />
URL adresimizi style.css kısmına yapıştıralım.
Daha sonra head tagı arasına (Bedava-Sitem’de Tasarım Üzerindeki Yazı) kısmına ekleyelim…
Bu yolu kullanmanın avantajı misal bir dosyayı indirdiğinizde bir daha indirirseniz o dosyayı daha hızlı inecektir buda aynı mantık bir kullanıcı CSS dosyasını Ana sayfanızda bir kere yükleyecek sonra diğer sayfalara ana sayfanızdan daha hızlı erişim sağlayacak…
2 @import ile CSS dosyası eklemek
Bu ekleme yöntemi 3. yönteme benzer bir yöntemdir. Sadece link rel ile başlayan elemanımızı değiştiriyoruz..
Ör:
@import "style.css";
Kullandığımız dosya aynı dosya sadece elemanımızı değiştirerek head tagı arasına (Bedava-Sitem’de Tasarım Üzerindeki Yazı) kısmına ekleyelim…