Πώς να σχεδιάσετε έγγραφα XML με CSS

click fraud protection

Η δημιουργία ενός εγγράφου XML, η σύνταξη του DTD και η ανάλυση του με πρόγραμμα περιήγησης είναι εντάξει, αλλά πώς θα εμφανιστεί το έγγραφο όταν το βλέπετε; XML δεν είναι γλώσσα παρουσίασης. Τα έγγραφα που έχουν γραφτεί με XML δεν θα έχουν καμία μορφοποίηση.

Τρόπος προβολής XML

Το κλειδί για την προβολή XML σε ένα πρόγραμμα περιήγησης είναι Cascading Style Sheets. Τα φύλλα στυλ σάς επιτρέπουν να ορίσετε κάθε πτυχή του εγγράφου XML σας, από το μέγεθος και το χρώμα του κειμένου σας έως το φόντο και τη θέση των αντικειμένων που δεν είναι κείμενο.

Ας υποθέσουμε ότι έχετε ένα έγγραφο XML:


]>
Τζούντι
Λαϊάρ
Τζένιφερ
Μπρένταν

Εάν επρόκειτο να προβάλετε αυτό το έγγραφο σε πρόγραμμα περιήγησης έτοιμο για XML, όπως ο Internet Explorer, θα εμφανιστεί κάτι τέτοιο:

Τζούντι Λιάαρντ Τζένιφερ Μπρένταν

Τι γίνεται όμως αν θέλετε να κάνετε διάκριση μεταξύ των στοιχείων γονέα και παιδιού; Ή ακόμη και να κάνετε μια οπτική διάκριση μεταξύ όλων των στοιχείων του εγγράφου. Δεν μπορείτε να το κάνετε αυτό με XML και δεν πρόκειται για γλώσσα που προορίζεται να χρησιμοποιηθεί για προβολή.

instagram viewer

Στυλ XML

Ευτυχώς, είναι εύκολο στη χρήση Διαδοχικά φύλλα στυλ, ή CSS, σε έγγραφα XML για να καθορίσετε πώς θέλετε να εμφανίζονται αυτά τα έγγραφα και εφαρμογές όταν προβάλλονται σε πρόγραμμα περιήγησης. Για το παραπάνω έγγραφο, μπορείτε να ορίσετε το στυλ κάθε ετικέτας με τον ίδιο τρόπο που θα κάνατε με ένα έγγραφο HTML.

Για παράδειγμα, σε HTML ίσως θέλετε να ορίσετε όλο το κείμενο εντός των ετικετών παραγράφου (

Π {
font-family: verdana, geneva, helvetica;
χρώμα φόντου: # 00ff00;
}

Οι ίδιοι κανόνες ισχύουν για έγγραφα XML. Κάθε ετικέτα σε XML μπορεί να οριστεί στο έγγραφο XML:

οικογένεια {
χρώμα: # 000000;
}
γονέας {
font-family: Arial Black;
χρώμα: # ff0000;
περίγραμμα: στερεό 5px;
πλάτος: 300 εικονοστοιχεία;
}
παιδί {
font-family: verdana, helvetica;
χρώμα: # cc0000;
περίγραμμα: στερεό 5px;
περίγραμμα-χρώμα: # cc0000;
}

Μόλις έχετε το έγγραφο XML και γράφετε το φύλλο στυλ σας, πρέπει να τα συνδυάσετε. Παρόμοια με την εντολή συνδέσμου σε HTML, τοποθετείτε μια γραμμή στο πάνω μέρος του εγγράφου XML (κάτω από τη δήλωση XML), αναφέροντας στον αναλυτή XML πού να βρείτε το φύλλο στυλ. Για παράδειγμα:


Όπως αναφέρθηκε παραπάνω, αυτή η γραμμή πρέπει να βρίσκεται κάτω από τη δήλωση αλλά πριν από οποιοδήποτε από τα στοιχεία του εγγράφου XML.

Συνολικά, το έγγραφο XML θα έγραφε:


]>
Τζούντι
Λαϊάρ
Τζένιφερ
Μπρένταν
instagram story viewer