הכרת CSS ‏(Cascading Style Sheets)

CSS ‏(Cascading Style Sheets) הוא אוסף כללי עיצוב השולטים במראה של תוכן בדף אינטרנט. שימוש בסגנונות CSS לעיצוב דף מפריד בין התוכן לבין אופן התצוגה שלו. תוכן הדף – קוד HTML – מאוחסן בקובץ HTML עצמו, ואילו כללי CSS המגדירים את התצוגה של הקוד מאוחסנים בקובץ אחר (גיליון סגנון חיצוני) או בחלק אחר של מסמך HTML (בדרך כלל באזור הכותרת). הפרדה בין התוכן לבין אופן התצוגה שלו מקלה על תחזוקת המראה של האתר ממיקום מרכזי, משום שאין צורך לעדכן כל מאפיין בדף כשברצונך להכניס שינויים. הפרדה בין התוכן לבין אופן התצוגה שלו גם יוצרת קוד HTML פשוט ונקי יותר, המציע זמני טעינה קצרים יותר בדפדפן ומפשט את הניווט לאנשים הסובלים מבעיות נגישות (לדוגמה, כאלה המשתמשים בקוראי מסך).

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

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

אודות כללי CSS

כלל עיצוב CSS כולל שני חלקים – בורר והצהרה (או ברוב המקרים, גוש הצהרות). הבורר הוא מונח (כגון p‏, h1,שם מחלקה או מזהה) המזהה את הרכיב המעוצב, וגוש ההצהרות מגדיר את מאפייני הסגנון. בדוגמה הבאה, h1 הוא הבורר, וכל מה שבסוגריים המסולסלים ({}) הוא גוש ההצהרה:

הצהרה בודדת כוללת שני חלקים, המאפיין (כגון משפחת גופנים) וערך (כגון Helvetica). בכלל CSS הקודם, סגנון מיוחד נוצר לתגי h1: הטקסט לכל תגי h1 המקושרים לסגנון זה יהיה בגודל 16 פיקסלים, בגופן Helvetica מודגש.

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

ניתן להגדיר את סוגי הסגנונות הבאים ב-Dreamweaver‏:

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

• סגנונות תגי HTML מגדירים מחד ש את העיצוב של תג מסוים, לדוגמה h1. כשיוצרים או משנים סגנון CSS לתג h1, כל הטקסט המעוצב בעזרת תג h1 מתעדכן מיד.

• סגנונות מתקדמים מגדירים מחדש את העיצוב לשילוב מסוים של רכיבים, או לצורות בורר אחרות המותרות בסגנון CSS (לדוגמה הבורר td h2 חל בכל פעם שכותרת h2 מופיעה בתא בטבלה). סגנונות מתקדמים יכולים גם להגדיר מחדש את העיצוב של תגים הכוללים תכונת id מסוימת (לדוגמה, הסגנונות המוגדרים על-ידי ‎#myStyle חלים על כל התגים שהכוללים את הזוג תכונה-ערך ‎id="myStyle"‎).

כללי CSS יכולים להימצא במיקומים הבאים:

אוספים של כללי CSS מאוחסנים בקובץ CSS חיצוני נפרד (עם הסיומת CSS) (ולא כקובץ HTML). קובץ זה מקושר לדף אחד או יותר באתר אינטרנט בעזרת קישור או כלל ‎@import באזור הכותרת של המסמך.

אוספים של כללי CSS הנכללים בתג style באזור הכותרת של מסמך HTML.

מוגדרים במופעים מסוימים של תגים לאורך מסמך HTML. (לא מומלץ להשתמש בסגנונות בתוך שורה).

Dreamweaver מזהה סגנונות שהוגדרו במסמכים קיימים, כל עוד הם עומדים בהנחיות לסגנון CSS. Dreamweaver גם מעבד את רוב הסגנונות שהוחלו על המסמך ישירות בתצוגת Design. (עם זאת, תצוגה מקדימה של המסמך בחלון דפדפן מציגה את תוצאות העיבוד "החיות" והמדויקות ביותר של העמוד). יש סגנונות CSS המעובדים בצורה שונה ב-Microsoft Internet Explorer‏, Netscape‏, Opera‏, Apple Safari ודפדפנים אחרים, ויש כאלה ששום דפדפן אינו תומך בהם כרגע.

אודות סגנונות מדורגים

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

תג נפוץ – תג הפסקה, או התג <p> – מדגים מושג זה. כברירת מחדל, דפדפנים מגיעים עם גיליונות סגנונות המגדירים את הגופן וגודל הגופן לטקסט פסקה (כלומר, טקסט שבין תגי <p> בקוד HTML). למשל ב-Internet Explorer, כל גוף הטקסט, כולל טקסט פסקה, מוצג כברירת מחדל בגופן Times New Roman בינוני.

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

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

משתמשים יכולים לבצע בחירות כדי להתאים אישית את תצוגת הדפדפן באופן מיטבי לשימושם. למשל ב-Internet Explorer, המשתמש יכול לבחור View >‏ Text Size >‏ Largest כדי להגדיל את הגופן בדף לגודל הקריא ביותר אם הוא חושב שהגופן קטן מדי. בסופו של דבר (לפחות במקרה זה), הבחירה של המשתמש דורסת גם את סגנונות ברירת המחדל של הדפדפן לגודל גופן פסקה וגם את סגנונות הפסקה שנוצרו על-ידי מחבר דף האינטרנט.

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

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

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

השילוב של כל הגורמים שנידונו לעיל, בנוסף לגורמים אחרים כגון הגדרות CSS ייחודיות (מערכת המעניקה משקל שונה לסוגים מסוימים של כללי CSS) והסדר של כללי CSS, יוצרים בסופו של דבר תצוגה מדורגת מורכבת, כשפריטים בעדיפות גבוהה יותר דורסים מאפיינים בעדיפות נמוכה יותר. למידע נוסף בנושא הכללים השולטים בתצוגה מדורגת, בירושה ובתכונות ייחודיות, בקר בכתובת www.w3.org/TR/CSS2/cascade.html.

אודות עיצוב טקסט ו-CSS

כברירת מחדל, Dreamweaver משתמש ב-Cascading Style Sheets ‏(CSS) לעיצוב טקסט. הסגנונות שתחיל על טקסט בעזרת מפקח המאפיינים או פקודות בתפריט יוצרים כללי CSS המוטבעים בכותרת המסמך הנוכחי.

ניתן גם להשתמש ב-CSS Designer כדי ליצור ולערוך כללי CSS ומאפיינים של כללים אלה. CSS Designer הוא עורך יציב בהרבה ממפקח המאפיינים, ומציג את כל כללי CSS שהוגדרו למסמך הנוכחי, בין שהם מוטבעים בכותרת המסמך ובין שהם מוטבעים בגיליון סגנונות חיצוני. Adobe ממליצה להשתמש ב-CSS Designer (במקום ב-Property inspector) ככלי העיקרי ליצירה ולעריכה של CSS. כתוצאה מכך, הקוד שתיצור יהיה נקי יותר, ויהיה קל יותר לתחזק אותו.

לקבלת מידע נוסף על CSS Designer, ראה פריסת עמודים באמצעות CSS Designer.

בנוסף לסגנונות ולגיליונות הסגנונות שתיצור, ניתן להשתמש בגיליונות סגנונות הכלולים ב-Dreamweaver להחלת סגנונות על מסמכים.

לערכת לימוד בנושא עיצוב טקסט בעזרת CSS, ראה www.adobe.com/go/vid0153_il.

אודות מאפייני CSS מקוצר

מפרט CSS מתיר יצירת סגנונות בעזרת תחביר מקוצר הנקרא CSS מקוצר. CSS מקוצר מאפשר לציין ערכים של מספר מאפיינים בהצהרה אחת. לדוגמה, המאפיין font מאפשר להגדיר מאפייני font-style‏, font-variant‏, font-weight‏, font-size‏, line-height ו-font-family בשורה אחת.

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

לדוגמה, הכלל h1 המוצג למטה משתמש בתחביר CSS מלא. שים לב כי למאפיינים font-variant‏, font-stretch‏, font-size-adjust ו-font-style הוקצו ערכי ברירת המחדל שלהם.

בעת שכתוב הכלל ככלל אחד מקוצר, אותו כלל עשוי להופיע כך:

כשכותבים בעזרת תחביר מקוצר, לערכים שהושמטו יוקצו אוטומטית ערכי ברירת המחדל שלהם. בדוגמה המקוצרת הקודמת, הושמטו התגים font-variant‏, font-style‏, font-stretch ו-font-size-adjust.

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

מסיבה זו, Dreamweaver משתמש כברירת מחדל בצורה המלאה של תחביר CSS. הדבר מונע בעיות אפשריות הנגרמות מכלל מקוצר הדורס כלל מלא. אם תפתח דף אינטרנט שקודד בתחביר CSS מקוצר ב-Dreamweaver, יש לשים לב ש-Dreamweaver ייצור כל כלל CSS חדש בתחביר CSS מלא. ניתן לציין כיצד Dreamweaver ייצור ויערוך כללי CSS על-ידי שינוי העדפות עריכת CSS באזור CSS Styles בתיבת הדו-שיח Preferences ‏(Edit >‏ Preferences ב-Windows‏; Dreamweaver >‏ Preferences ב-Macintosh).

Dreamweaver ו-CSS

ב-Dreamweaver, ניתן להשתמש ב-CSS במספר דרכים:

• ניתן להשתמש ב-CSS Designer כדי לבנות את ה-CSS שלך עם מינימום קידוד. למידע נוסף, אנא ראו פריסת עמודים בעזרת CSS Designer.
• כמו כן, ניתן לקודד את ה-CSS ידנית. למידע נוסף לגבי תכונות הקידוד של Dreamweaver, ראו סביבת קידוד ב-Dreamweaver.
• אם אתה מעדיף לעבוד עם קבצי Sass, Scss או Less, תוכל לקודד את הקבצים שלך בעזרת התחביר המועדף עליך ולהשתמש בו ב-Dreamweaver. למידע נוסף, ראוCSS preprocessors