כיצד לעצב מסמכי XML באמצעות CSS

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

כיצד להציג XML

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

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


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

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

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

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

סטיילינג XML

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

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

instagram viewer
p {
משפחת גופנים: ורדנה, ז'נבה, הלווטיקה;
צבע רקע: # 00ff00;
}

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

משפחה {
צבע: # 000000;
}
הורה {
משפחת גופנים: Arial Black;
צבע: # ff0000;
גבול: מוצק 5px;
רוחב: 300 פיקסלים;
}
ילד {
משפחת פונטים: ורדנה, הלווטיקה;
צבע: # cc0000;
גבול: מוצק 5px;
גבול צבע: # cc0000;
}

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


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

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


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