עיצוב מסמכי XML עם CSS

הפוך את ה- XML ​​שלך נראה איך אתה רוצה את זה עם גיליונות סגנון מדורגים

יצירת מסמך XML, כתיבת ה- DTD, וניתוחו עם דפדפן זה בסדר גמור, אך כיצד יוצג המסמך בעת הצגתו? XML אינו שפת תצוגה. למעשה, מסמכים שנכתבו ב- XML ​​לא יהיו בפורמט כלל.

אז, איך אני מציג XML שלי?

המפתח להצגת XML בדפדפן הוא גיליונות סגנון מדורגים. גיליונות סגנון מאפשרים לך להגדיר את כל ההיבטים של מסמך ה- XML ​​שלך, מהגודל והצבע של הטקסט שלך לרקע ולמיקום של אובייקטי הטקסט שאינם שלך.

נניח שיש לך מסמך XML:

< ]> Judy Layard ג'ניפר ברנדן

אם היית מציג את המסמך בדפדפן מוכן ל- XML, כגון Internet Explorer, הוא יציג משהו כזה:

ג'ודי לייארד ג'ניפר ברנדן

אבל מה אם אתה רוצה להבדיל בין ההורה אלמנטים הילד? או אפילו לעשות הבחנה ויזואלית בין כל האלמנטים במסמך. אתה לא יכול לעשות את זה עם XML, וזה לא שפה שאמורה לשמש לתצוגה.

אבל למרבה המזל, קל להשתמש גיליונות סגנון מדורגים , או CSS, במסמכי XML כדי להגדיר איך אתה רוצה אותם מסמכים ויישומים להציג בעת הצגת בדפדפן. עבור המסמך הנ"ל, ניתן להגדיר את הסגנון של כל אחד מהתגים באותו אופן שבו היית משתמש במסמך HTML.

לדוגמה, ב- HTML ייתכן שתרצה להגדיר את כל הטקסט בתגי פסקה (

) עם צבע הגופן Verdana, Geneva או Helvetica וצבע הרקע הירוק. כדי להגדיר את זה בגיליון סגנונות כך שכל הפסקאות יהיו כאלה, תכתוב:

p {font-family: verdana, geneva, helvetica; צבע רקע: # 00ff00; }

אותם כללים עובדים עבור מסמכי XML. כל תג ב- XML ​​יכול להיות מוגדר במסמך XML:

משפחה {color: # 000000; } אב {font-family: Arial Black; צבע: # ff0000; border: solid 5px; רוחב: 300px; } ילד {font-family: verdana, helvetica; צבע: # cc0000; border: solid 5px; border-color: # cc0000; }

ברגע שיש לך את מסמך ה- XML ​​שלך stylesheet כתוב, אתה צריך לשים אותם יחד. בדומה לפקודת הקישור ב- HTML, אתה מציב שורה בחלק העליון של מסמך ה- XML ​​שלך (מתחת להצהרת ה- XML), ומציין את מנתח ה- XML ​​היכן למצוא את גיליון הסגנונות. לדוגמה:

כפי שאמרתי לעיל, שורה זו צריכה להימצא מתחת הצהרה אבל לפני כל האלמנטים במסמך XML.

לשים את כל זה ביחד, מסמך ה- XML ​​שלך יהיה לקרוא:

< < אלמנט ילד (#PCDATA)>]> <<<<<<<<<<<<<<<<<<<