Styling Dokumen XML dengan CSS

Buat Tampilan XML Anda Bagaimana Anda Menginginkannya dengan Cascading Style Sheets

Membuat dokumen XML, menulis DTD, dan menguraikannya dengan browser semuanya baik-baik saja, tetapi bagaimana dokumen akan ditampilkan ketika Anda melihatnya? XML bukan bahasa tampilan. Bahkan, dokumen yang ditulis dengan XML tidak akan memiliki format sama sekali.

Jadi, Bagaimana Saya Melihat XML Saya?

Kunci untuk melihat XML di browser adalah Cascading Style Sheets. Style sheet memungkinkan Anda untuk menentukan setiap aspek dokumen XML Anda, mulai dari ukuran dan warna teks Anda hingga latar belakang dan posisi objek non-teks Anda.

Katakanlah Anda memiliki dokumen XML:

]> Judy Layard Jennifer Brendan

Jika Anda melihat dokumen itu di browser siap XML, seperti Internet Explorer, itu akan menampilkan sesuatu seperti ini:

Judy Layard Jennifer Brendan

Tetapi bagaimana jika Anda ingin membedakan antara elemen induk dan anak? Atau bahkan membuat perbedaan visual antara semua elemen dalam dokumen. Anda tidak dapat melakukannya dengan XML, dan itu bukan bahasa yang dimaksudkan untuk digunakan untuk tampilan.

Tapi untungnya, mudah untuk menggunakan Cascading Style Sheets , atau CSS, dalam dokumen XML untuk menentukan bagaimana Anda ingin dokumen dan aplikasi itu ditampilkan ketika dilihat di browser. Untuk dokumen di atas, Anda dapat menentukan gaya masing-masing tag dengan cara yang sama seperti dokumen HTML.

Misalnya, dalam HTML Anda mungkin ingin mendefinisikan semua teks dalam tag paragraf (

) dengan font menghadap Verdana, Jenewa, atau Helvetica dan warna latar belakang berwarna hijau. Untuk menentukan bahwa dalam stylesheet sehingga semua paragraf seperti itu, Anda akan menulis:

p {font-family: verdana, geneva, helvetica; warna latar: # 00ff00; }

Aturan yang sama berfungsi untuk dokumen XML. Setiap tag dalam XML dapat didefinisikan dalam dokumen XML:

keluarga {warna: # 000000; } induk {font-family: Arial Black; warna: # ff0000; border: 5px padat; width: 300px; } anak {font-family: verdana, helvetica; warna: # cc0000; border: 5px padat; warna pembatas: # cc0000; }

Setelah Anda memiliki dokumen XML dan stylesheet Anda tertulis, Anda perlu menyatukannya. Mirip dengan perintah tautan dalam HTML, Anda meletakkan garis di bagian atas dokumen XML Anda (di bawah deklarasi XML), memberi tahu parser XML tempat untuk menemukan stylesheet. Sebagai contoh:

Seperti yang saya katakan di atas, baris ini harus ditemukan di bawah Deklarasi tetapi sebelum salah satu elemen dalam dokumen XML.

Menyatukan semuanya, dokumen XML Anda akan membaca:

< ! ELEMENT anak (#PCDATA)>]> Judy Layard Jennifer Brendan