הצגת מסמך CSS-XML

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

אופציה ראשונה היא באמצעות CSS שבאמצעותה מציגים גם דפים הכתובים ב- HTML אופציה שנייה היא באמצעות XSL

בפרק זה נציג את CSS ובפרק הבא את XSL

3.0.1 מהי CSS

CSS הוא קיצור של Cascading Style Sheets. עיצוב (style) עוזר לנו בקביעת מראה הדף. ניתן לשמור עיצובים במסמך ניפרד, בעל סיומת CSS ע"י מסמך css אחד ניתן לתאר עיצוב של מסמכים רבים. CSS נועדה לפתירת בעיה ב-HTML איך להפריד את העיצוב של הדף מהמידע בו.

3.0.2 יתרונות

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

להלן דוגמה פשוטה המראה דף XML עם שני מסמכי עיצוב שונים:

הדף עם עיצוב 1
הדף עם עיצוב 2
עיצוב 1
עיצוב 2

מספר עיצובים לתוך עיצוב אחד

ניתן לאחד מספר עיצובים לתוך עיצוב אחד כולל שיתאר את דף ה XML) WEB) כמובן שיכולות להווצר התנגשיות בין מספר עיצובים ולכן ישנן סדר עדיפיות

1. ברירת המחדל של הדפדפן
2. מסמך עיצוב חיצוני
3. מסמך עיצוב פנימי
4. עיצוב של אלמנט בודד

3.0.3 תחביר

התחביר מאד פשוט:

{selector {property : value

• selctor הוא בד"כ אלמנט
• property הוא המאפיין של האלמנט (הנראה) שאותו מעוניינים לשנות
• value הערך שאנו מעוניינים להקצות ל property

{name {color:black

שים לב לצורך בסוגריים מסולסלים

מספר ערכים עבור אלמנט

אם מעוניינים בהשמת כמה ערכים עבור אלמנט אחד אזי חייבים לשים נקודה פסיק ביניהם ד

דגומה

name {color:black ; font-size:10ex}

ניתם לפרש על פני כמה שורות לשם הקריאות כך:

name } ; color:black ; font-size:10ex ; text-align:center {

קבוצות

על מנת לתת לכמה אלמנטים את אותו ערך ניתן לקבץ אותם בקבוצה כך:

 

name,processor,harddisk } color:red {