Css dosyalarını Web Dökümanlarına Eklemek
CSS’i (X)HTML sayfalarımıza eklemenin 4 yöntemi vardır. Bu Yöntemleri şimdi hep beraber irdeleyelim. Hangisini kullanacağınıza gerekli açıklamaları yaptıktan sonra sitenizde en iyi performansı alacağını düşündüğünüz metodu seçiniz
1.4.1. Kod içinde (In-line)
Direk olarak (X)HTML elemanın 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.
1.4.2. <style> Elemanı Kullanılarak
<head> kısmında <style> elemanı 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=utf-8″
/>
<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.
1.4.3. Harici CSS Dosyası Kullanımı
Bu metot da CSS kodlarımızı .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=utf-8″
/>
<title>CSS’i Uygulamak</title>
<link rel=”nofollow 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.
1.4.4. @import Ä°le Eklemek
3ü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=utf-8″
/>
<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 ekleyebiliriz böylelikle tekrarlardan kurtulmuş oluruz.
Sonuç olarak burada dört adet CSS uygulama metodu gördük ancak bu metotlardan 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 sayfada kodun bir kısmında yaptığımız değişiklik için tüm css kodu incelenip değiştirtmesi 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=utf-8″
/>
<title>CSS’i Uygulamak</title>
<style type=”text/css”>
@import “urunler.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);
(No Ratings Yet)
Loading ...Bu yazı 7 Kasım 2009 tarihinde Aytaç Cici tarafından Css kategorisi altına yazılmış ve 320 views defa okunmuş.
Yükleniyor ...
1 Yorum yapılmış...
Boya Badana Ustası, El Boyacısı ,Laminat Parke Ustası, Bölme Duvar Fiyatları, Taşyünü Asma Tavan, Fiyatları,Alçı Sıvacı Mesut Usta, Fıratpen, Betopan, Alçıpan Fiyatları,Çim Halı Fiyatları, Kartonpiyer Fiyatları, Granit İşleri