CSS 20 Temmuz 2009

CSS’i Web Dokümanlarına Ekleme

CSS bize birçok avantajlar saglar. Örnegin 10.000 sayfası olan bir siteyi tek css dokümanı yardımı ile biçimlendirmemizi saglar. Peki hazırladığımız css sayfasını HTML sayfamıza nasıl ekleyeceğiz. Bunun için 4 yöntem var:

[blockquote color=blue]Kod içinde kullanmak:[/blockquote]

Direk olarak (X)HTML elemanın içine style özelliği kullanılarak uygulamak.

<div style=\"color:red\">Deneme yazımız</div>

  [blockquote color=blue]<style> elemanı kullanılarak:[/blockquote]

<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>

Avantajı HTML kod ile CSS birbirinden ayrılmış olmasıdır.

[blockquote color=blue]Harici CSS dosyası kullanımı:[/blockquote]

Bu metot da CSS kodlarımızı .css uzantılı bir dosyaya kaydederiz.

ornek.css dosyası içeriği:

p {
color: red;
}
a {
color: blue;
}
 

 

 

Daha sonra bu kodu istediğimiz 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=\"stylesheet\" type=\"text/css\" href=\"ornek.css\" />
</head>
 [blockquote color=blue]@import ile eklemek:[/blockquote]

 

Bu yöntemin diğerlerine göre en büyük avantajı bir kere yazılan kod, istenilen tüm sayfalara eklenebilmesidir. Bu sayede harici eklenen css kodu bir kere yüklendikten sonra diğer kullandığımız sayfalarda tekrar yüklenmeyerek bize hız kazandıracaktı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 \"ornek.css\";
</style>
</head>
 

Bu yöntemle eklenen harici css dosyası eski web tarayıcıları tarafından görüntülenemeyecektir. Bu yöntem pek tercih edilmez. 

Bunu da Oku:  HTML Nedir?

Yazar Bilgileri

Emrah emrah19may@hotmail.com
1981 Samsun doğumlu ve Gazi Üniversitesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi mezunu. Bilişim Teknolojileri Öğretmeni olarak görev yapmakta olup DMOZ Editörü, Web-Grafik Tasarımı ve SEO eğitmeni.

Yorum Yap