Daha önce bahs ettiğimiz gibi XML belge içeriği ve sunumu birbirinden ayırmıştır. XML belgelerinin görsel olarak biçimlenlendirilerek sunumu CSS (Cascading Style Sheets) veya XSL (eXtensible Style Language) kullanılarak gerçekleştirilir.
CSS (Cascading Style Sheets)
CSS HTML ve XML belgelerini görüntüleme amaçıyla kullanılan bir biçimleme dilidir. CSS biçim sayfaları (sytle sheets) belge elemanlarına uygulanacak olan bir kurallar kümesi içerir. Her bir kural elemanların nasıl biçimlendirleceğini belirler. Biçim kuralları aşağıdaki yapıya sahiptir:
css:
Seçiçi {özellik1: değer1;
özellik2: değer2;
......
}
Özellikler (properties) seçicinin (selector) belirtiği elemanların nasıl formatlanaçağı konusunda biçimleme ifadeleri içerir. Aşağıdaki HTML paragrafının mavi renkte, Arial fontunda 14pt büyüklükte göstermek istediğimizi varsayalım.
HTML:
<p> CSS basit bir biçimleler için kullanılır
</p>
Bu pararafı istediğimiz şekilde formatlayacak bir CSS kuralı örneği verilmiştir:
css:
p { display : block;
color: blue;
font-family : Arial;
font-size: 14pt;
}
HTML elemanlarının nasıl biçimlendirileceğini CSS kuralları kullanarak belirtiğimiz gibi, XML belgelerindeki elemanlarıda CSS kuralları kullanarak biçimlendiredirebiliriz.
Örneğin <isim> Selim Akyokuş </isim> elemanını kalın, 16pt ve Times font’unda biçimlendirmek için aşağıdaki CSS kuralını kullanabiliriz.
css:
isim { display : block;
font-family : Times, serif;
font-size: 16pt;
font-weight : bold;
}
XML belgelerini CSS kurallarını içeren CSS biçim dosyasına ilişkilendirmek için xml-stylesheet işlem komutu kullanılır. Örneğin aşağıdaki işlem komutu Şekil 4’te verilen adressbook.xml XML belgesini adressbook.css CSS kural dosyası ile ilişkilendirmektedir.
XML:
<?xml-stylesheet type=”text/css” href=”Adressbook.css”>
Bu işlem komutunun adresbook.xml belgesini adressbook.css teki kurallara göre biçimlendirilmesi için belgenin başlangıcına konulması gerekmektedir. Şekil 4’de verilen adressbook.xml belgesini biçimlendirmek için oluşturulan adressbook.css CSS biçim dosyası aşağıda aşağıda verilmiştir.
css:
contact {
display: block;
width: 350px;
padding: 10px;
margin-bottom: 10px;
border: 4px double black;
background-color: silver;
color: blue;
text-align: center;
}
name {
display: block;
font-family: Times, serif;
font-size: 16pt;
font-weight: bold;
}
address {
display: block;
font-family: Times, serif;
font-size: 14pt;
}
city, state, zip {
display: inline;
font-family: Times, serif;
font-size: 14pt;
}
phone, email, web, company {
display: none;
}
CSS basit biçimlendirme işlemleri için iyi bir yöntemdir. Karmaşık biçimlendirme işlemleri için XSL dili tercih edilir.
Arkadaşınıza gönderin
