|
CSSi 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 CSSinde 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);
 |
