26 Mart 2020

XML dökümanlarını CSS ile zenginleştirebilirsiniz. Harici CSS dosyasını çağırmak için;

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="stil.css"?>

stil.css dosyasını çağırmak için önce xml başlangıç etiketini ekliyoruz. Sonrasında href=”stil.css” kısmına css dosyamızı çağırıyoruz.

Şimdi kutuphane.xml diye bir dosya oluşturuyoruz ve bunu stil.css ile içeriğini biçimlendiriyoruz.

Önce kutuphane.xml oluşturalım ve CSS dosyasının yolunu ekleyelim.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="stil.css"?>
<kitaplar>  
	<kitap isbn="9759954949">  
		<adi>Yunus Emre Divanı</adi>  
		<yazar gorev="Derleyici">Selim Yağmur</yazar>  
		<dil>Türkçe</dil>  
		<baski>8</baski>  
		<tarih>  
			<yil>2014</yil>  
			<ay>04</ay>  
			<gun>01</gun>  
		</tarih>  
	</kitap>  
	<kitap isbn="9753386203">  
		<adi>Risaletü'n-Nushiyye Yunus Emre</adi>  
		<yazar gorev="Çevirmen">Prof. Dr. Umay Türkeş Günay</yazar>  
		<dil>Türkçe</dil>  
		<baski>3</baski>  
		<tarih>  
			<yil>2009</yil>  
			<ay>01</ay>  
			<gun>01</gun>  
		</tarih>  
	</kitap>  
</kitaplar> 

Şimdi stil.css hazırlayalım.

kitaplar {
	padding: 10px;
}

kitap {
	display: block;
}

kitap adi {
	color:blue;
	font-size: 20px;
	display: block;
}

kitap yazar, dil, baski, tarih {
	display: block;
	margin-left: 10px;
}

Hazırladığımız css uyguladığımızda aşağıdaki gibi bir ekran görüntüsü verir.

Eğer CSS ile biçimlendirmeseydik sonuç aşağıdaki gibi olurdu.