גליונות סגנון (Style Sheets) – (XSL,CSS)

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

פרנק באומפרי מתייחס לגליונות סגנון ב "Style Sheets for HTML" בהקשר ההיסטורי שלהם כגון…

"בימים בהם ההדפסה היתה מתבצעת באופן ידני, גליונות סגנון לא היו יותר מסט הוראות כתובות אשר ניתנו מהמוציא לאור למדפיס אשר אמרו לו באיזה סגנון להשתמש כאשר הוא מדפיס את כתב ידו של המוציא לאור. באופן מסורתי , העורך מעביר כתב-יד "מסומן" עם הערות תמציתיות כגון למחוק\להשאיר. אז המדפיס יוועץ עם בית הדפוס בקשר לגליון הסגנון המסויים ולטווח המפרט. מפרטים אלו יכילו פרטים כגון גודל הדף , גודל ומשפחת הגופן הרצוי עבור הפסקה ועבור הכותרת , עבור תת הכותרות , וכן הלאה. כמו כן , כמה מרווח לשים בין השורות , אלו שוליים להשאיר , והאם ליישר פסקאות ולאיזה כיוון."

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

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

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

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

ישנם מספר שפות\מפרטים אשר יכולים לעזור ביצירת גליונות סגנון עבור האתר שלך אך 2 מהם נחשבים לנפוצים ביותר:

CSS(Cascading Style Sheets) ו XSL(eXtensible Style Sheet Language).

CSS עובדת בעזרת שימוש בתווית <STYLE> ומאפשרת לך לציין סגנונות בעזרת שפות סקריפטים כגון VBScript. להלן דוגמא קטנה:     

  <HTML>
          <HEAD>
          <TITLE>Test</TITLE>
          <STYLE>
          <!--
          TD {FONT-FAMILY: "TimesRoman", "SANS-SERIF";}
          BODY {FONT-FAMILY: "ARIAL", "SANS-SERIF";}
          -->
          </STYLE>
          </HEAD>
          <BODY>
          This is in Arial
          <TABLE>
          <TR>
          <TD>This is in TimesRoman</TD>
          </TR>
          </TABLE>
          </BODY>
          </HTML>

כפי שבוודאי שיערת , גוף הטקסט יוצג בעזרת הגופן ARIAL והנתונים בתאי הטבלה יוצגו בעזרת הגופן Times Roman.

מקורות נוספים:   

Additional Resources:

לראשהדף

חסרונותXML