Web sayfalarımızda css kullanmanın, yani css kodlarını sayfalarımıza dahil etmenin 3 yolu vardır:
Css stil dosyasını sayfamıza ekleyerek.
<style> etiketini kullanarak.
html, xhtml kodlarımızda style parametresini kullanarak.
Css stil dosyasını sayfamıza eklemek
Css kodlarını web sayfalarımıza eklerken, tavsiye edilen yöntem dışarıdan bir css dosyasını sayfamıza dahil etmektir. Zira web sitelerimiz tek sayfadan değil
bir çok sayfadan oluşmaktadır. Css kodlarınızı her sayfaya tek kaynak dosyadan eklemezseniz, css kodlarınızda yapacağınız küçük bir değişiklik dahi büyük bir
vakit kaybı olacaktır. Her web sayfanızı ayrı ayrı değiştirmeniz gerekir. Eğer sayfalarınızda .css dosyası kullanırsanız ve her sayfanıza dahil ederseniz,
kaynak css dosyasında yapacağınız değişiklik her sayfanızda aktif olacaktır. Css dosyalarının uzantısı .css'dir. Css kaynak dosyalarını web sayfamıza dahil
ederken <link> etiketini kullanırız.
KOD:<link rel="stylesheet" type="text/css" href="stil.css" />
Link etiketi web sayfamızda <head>...</head> etiketi arasına yazılır. Css dosyası eklenmiş düzgün bir sayfanın temek yapısı şu şekilde olmalıdır:
KOD:<!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'yi web sayfamıza eklemek</title>
<link rel="stylesheet" type="text/css" href="stil.css" />
</head>
<body>
Sayfamızın içeriği
</body>
</html>
Link etiketinin 3 parametresini kullandık. Rel="" parametresi ile kaynak dosyamızın bir css stil dosyası olduğunu, type="" parametresi ile hangi türde stil
style sheet kullanıldığını belirtiyor ve son olarak href="" parametresi ile stil dosyamızın yolunu belirtiyoruz.
<style> Etiketini Kullanmak
Style etiketi link etiketi gibi sayfamızın <head>...</head> etiketi arasında yer alır.
KOD:<!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'yi web sayfamıza eklemek</title>
<style type="text/css">
.kirmizi {
color: red;
</style>
</head>
<body>
<span class="kirmizi">Sayfamızın içeriği</span>
</body>
</html>
Unutmadan şunu da eklemek istiyorum: Harici css dosyalarında <style>...</style> gibi etiketler kullanılmaz sadece css kodları yer alır.
@import Operatörünü Kullanmak
@import operatörü web sayfalarında <style> etiketi ile kullanılır.
KOD:<style type="text/css">
@import "stil.css";
</style>
@import operatörü tek parametre alır. Çift tırnak içerisinde .css kaynak dosyasının yolunu belirtiriz. @import operatörü .css kaynak dosyalarında da <style>
etiketi ile kullanıldığı gibi kullanılabilir.
style Parametresini Kullanmak
Style parametresini kullanmak önerilen bir kodlama şekli değildir. Gerekli olduğunda kullanılmalıdır.
KOD:<span style="color: red">Kırmızı yazı</span>
<span> etiketine style="" parametresini ekliyoruz ve css kodları yazıyoruz.
3 dedim ama 4 yol belirttim. @import operatörü <style> etiketi yada .css kaynak dosyası ile birlikte kullanıldığından ayrı bir yöntem olarak belirtmedim.
Yukarıda da yazdığım gibi, bu yöntemler arasında önerilen yöntem <link> etiketi ile harici bir .css kaynak dosyasını kullanmaktır. Hepinize kolay gelsin.
çok iyi 
Html ( 15 )
