השתמש בנושא זה כדי ללמוד את המושגים הבסיסיים של CSS, כגון כללי CSS, בוררים, ירושה ועוד. כמו כן, למד כיצד לשייך CSS עם דפי האינטרנט שלך ב-Dreamweaver.
אודות CSS (Cascading Style Sheets)
Cascading Style Sheets (CSS) הוא אוסף של כללי עיצוב השולטים במראה של תוכן בדף אינטרנט. השימוש בסגנונות CSS לעיצוב דף מפריד בין התוכן לתצוגה.תוכן הדף שלכם—קוד ה-HTML—נמצא בקובץ ה-HTML, וכללי ה-CSS המגדירים את ההצגה של הקוד נמצאים בקובץ אחר (גליון סגנונות חיצוני) או בחלק אחר של מסמך ה-HTML (בדרך כלל בקטע ה-head).הפרדה bין תוכן להצגה מקלה מאוד על שמירת המראה של האתר שלכם ממקום מרכזי מכיוון שאתם לא צריכים לעדכן כל מאפיין בכל דף בכל פעם שאתם רוצים לבצע שינוי. הפרדה בין תוכן להצגה גם גורמת לקוד HTML פשוט ונקי יותר, המספק זמני טעינה קצרים יותר בדפדפן ומפשט ניווט עבור אנשים עם בעיות נגישות (לדוגמה, אלה המשתמשים בקוראי מסך).
CSS נותן לכם גמישות רבה ושליטה על המראה המדויק של הדף שלכם. עם CSS אתם יכולים לשלוט במאפייני טקסט רבים כולל גופנים ספציפיים וגדלי גופן; מודגש, נטוי, לסמן בקו תחתון וצללי טקסט; צבע טקסט וצבע רקע; צבע קישור וקו תחתון של קישור; ועוד הרבה. באמצעות שימוש ב-CSS לשליטה בגופנים שלכם, אתם יכולים גם להבטיח טיפול עקבי יותר בפריסת הדף והמראה שלכם בדפדפנים מרובים.
בנוסף לעיצוב טקסט, אתם יכולים להשתמש ב-CSS כדי לשלוט בעיצוב ובמיקום של אלמנטים ברמת בלוק בדף אינטרנט.אלמנט ברמת בלוק הוא פיסת תוכן עצמאית, הנפרדת בדרך כלל בשורה חדשה ב-HTML, ומעוצבת ויזואלית כבלוק. לדוגמה, תגי h1, תגי p ותגי div כולם יוצרים אלמנטים ברמת בלוק בדף אינטרנט. אתם יכולים להגדיר שוליים וגבולות עבור אלמנטים ברמת בלוק, למקם אותם במקום ספציפי, להוסיף להם צבע רקע, להציף טקסט סביבם ועוד.מניפולציה של אלמנטים ברמת הבלוק היא למהדרין הדרך שבה אתם מעצבים דפים באמצעות CSS.
אודות כללי CSS
כלל עיצוב CSS מורכב משני חלקים – הבורר וההצהרה (או ברוב המקרים, בלוק של הצהרות). הבורר הוא מונח (כגון p, h1,שם מחלקה או זיהוי) שמזהה את האלמנט המעוצב, ובלוק ההצהרה מגדיר מהן מאפייני הסגנון. בדוגמה הבאה, h1 הוא הבורר, וכל מה שנמצא בין הסוגריים המסולסלים ({}) הוא בלוק ההצהרה:
h1 {
font-size: 16 פיקסלים;
font-family: Helvetica;
font-weight:bold;
}
הצהרה נפרדת מורכבת משני חלקים, המאפיין (כמו font-family) והערך (כמו 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 (.css) נפרד וחיצוני (לא קובץ HTML).קובץ זה מקושר לעמוד אחד או יותר באתר אינטרנט באמצעות קישור או כלל @import בחלק ה-head של מסמך.
גיליונות סגנונות CSS פנימיים (או מוטבעים)
אוספים של כללי CSS הכלולים בתגית style בחלק הראש של מסמך HTML.
סגנונות בתוך שורה
מוגדרים במופעים מסוימים של תגים לאורך מסמך HTML. (לא מומלץ להשתמש בסגנונות בתוך שורה).
Dreamweaver מזהה סגנונות המוגדרים במסמכים קיימים כל עוד הם תואמים להנחיות סגנון CSS.Dreamweaver גם מציג את רוב הסגנונות המוחלים ישירות בתצוגת העיצוב.(תצוגה מקדימה של המסמך בחלון דפדפן, עם זאת, נותנת לכם את העיבוד "החי" המדויק ביותר של העמוד.)חלק מסגנונות CSS מוצגים בצורה שונה ב-Microsoft Internet Explorer, Netscape, Opera, Apple Safari או דפדפנים אחרים, וחלק לא נתמכים כרגע על ידי אף דפדפן.
אודות סגנונות מדורגים
המונח מדורג מתייחס לאופן שבו דפדפן מציג בסופו של דבר סגנונות עבור אלמנטים מסוימים בעמוד אינטרנט.שלושה מקורות שונים אחראים לסגנונות שאתם רואים בעמוד אינטרנט: גיליון הסגנונות שנוצר על ידי יוצר העמוד, הבחירות המותאמות של המשתמש בסגנון (אם יש), והסגנונות ברירת המחדל של הדפדפן עצמו.הנושאים הקודמים מתארים יצירת סגנונות עבור עמוד אינטרנט כיוצר גם של עמוד האינטרנט וגם של גיליון הסגנונות המצורף לעמוד זה.אבל לדפדפנים יש גם גיליונות סגנונות ברירת מחדל משלהם המכתיבים את העיבוד של עמודי אינטרנט, ונוסף על כך, משתמשים יכולים להתאים את הדפדפנים שלהם על ידי ביצוע בחירות המתאימות את התצוגה של עמודי אינטרנט.המראה הסופי של עמוד אינטרנט הוא תוצאה של הכללים מכל שלושת המקורות האלה שמתחברים יחד (או "מדורגים") כדי לעבד את עמוד האינטרנט בצורה אופטימלית.
תג נפוץ—תג הפסקה, או תג <p>—ממחיש את הרעיון.כברירת מחדל, דפדפנים מגיעים עם גיליונות סגנונות המגדירים את הגופן וגודל הגופן עבור טקסט פסקה (כלומר, טקסט שנמצא בין התגיות <p> בקוד HTML).ב-Internet Explorer, לדוגמה, כל טקסט הגוף, כולל טקסט פסקה, מוצג בגופן Times New Roman, Medium כברירת מחדל.
עם זאת, כיוצר עמוד אינטרנט, אתם יכולים ליצור גיליון סגנונות שדורס את סגנון ברירת המחדל של הדפדפן עבור גופן הפסקה וגודל הגופן.לדוגמה, אתם יכולים ליצור את הכלל הבא בגיליון הסגנונות שלכם:
p {
font-family: Arial;
font-size: small;
}
כשמשתמש טוען את הדף, הגופן של הפסקה והגדרות גודל הגופן שקבעתם כמחברים עוקפות את הגדרות הטקסט הרגילות של הדפדפן עבור פסקאות.
משתמשים יכולים לבחור אפשרויות כדי להתאים את התצוגה של הדפדפן בצורה אופטימלית לשימוש שלהם. ב-Internet Explorer, לדוגמה, המשתמש יכול לבחור View > Text Size > Largest כדי להגדיל את גופן הדף לגודל קריא יותר אם הם חושבים שהגופן קטן מדי. בסופו של דבר (לפחות במקרה הזה), הבחירה של המשתמש עוקפת הן את סגנונות הדפדפן הרגילים עבור גודל גופן הפסקה והן את סגנונות הפסקה שיצר מחבר דף האינטרנט.
ירושה היא חלק חשוב נוסף בתצוגה המדורגת. המאפיינים של רוב האלמנטים בדף אינטרנט עוברים בירושה – לדוגמה, תגי פסקה יורשים מאפיינים מסוימים מתגי body, תגי span יורשים מאפיינים מסוימים מתגי פסקה, וכן הלאה. לכן, אם תיצרו את הכלל הבא בגיליון הסגנונות שלכם:
body {
font-family: Arial;
font-style: italic;
}
כל טקסט הפסקה בדף האינטרנט (וכן טקסט המקבל בירושה מאפיינים מתג הפסקה) יהיה בגופן Arial נטוי, משום שתג הפסקה מקבל בירושה מאפיינים אלה מתג גוף הטקסט. עם זאת, תוכל לקבוע כללים מפורטים יותר וליצור סגנונות הדורסים את הנוסחה הרגילה לקבלה בירושה. לדוגמה, אם תיצור את הכללים הבאים בגיליון הסגנונות:
body {
font-family: Arial;
font-style: italic;
}
p {
font-family: Courier;
font-style: normal;
}
כל טקסט הגוף יהיה 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.
אודות מאפייני 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 קיבלו את ערכי ברירת המחדל שלהם.
h1 {
משקל גופן: מודגש;
גודל גופן: 16pt;
גובה שורה: 18pt;
משפחת גופן: Arial;
וריאציית גופן: רגיל;
סגנון גופן: רגיל;
font-stretch: normal;
font-size-adjust: none
}
כאשר נכתב כמאפיין קיצור יחיד, אותו כלל עשוי להופיע כך:
h1 { font: bold 16pt/18pt Arial }
כאשר נכתב באמצעות סימון קיצור, הערכים המושמטים מקבלים באופן אוטומטי את הערכים ההתחלתיים שלהם. כך, הדוגמה הקודמת לקיצור משמיטה את התגים font-variant, font-style, font-stretch, ו-font-size-adjust.
אם הסגנונות שלכם מוגדרים במיקום אחד או יותר (לדוגמה, הן מוטמעים בדף HTML והן מיובאים מגיליון סגנון חיצוני) באמצעות הצורות הקצרות והארוכות של תחביר CSS, היו מודעים לכך שמאפיינים מושמטים בכלל קיצור עלולים לעקוף (או לעבור בירושה) מאפיינים שמוגדרים באופן מפורש בכלל אחר.
מסיבה זו, Dreamweaver משתמש בצורה הארוכה של סימון CSS כברירת מחדל. הדבר מונע בעיות אפשריות הנגרמות על ידי כלל קיצור שעוקף כלל מפורש. אם אתם פותחים דף אתר שקודד באמצעות סימון קיצור CSS ב-Dreamweaver, היו מודעים לכך ש-Dreamweaver יצור כלי CSS חדשים בצורה המפורטת. תוכלו לציין כיצד Dreamweaver יוצר ועורך כללי CSS על ידי שינוי העדפות עריכת CSS בקטגוריית CSS Styles בתיבת הדו-שיח Preferences (Edit > Preferences ב-Windows; Dreamweaver > Preferences ב-Macintosh).
Dreamweaver ו-CSS
ב-Dreamweaver, תוכלו לעבוד עם CSS במספר דרכים:
- ניתן להשתמש ב-CSS Designer כדי לבנות את ה-CSS שלך עם מינימום קידוד. לקבלת מידע נוסף על CSS Designer, ראה פריסת עמודים באמצעות CSS Designer.
- כמו כן, ניתן לקודד את ה-CSS ידנית. למידע נוסף על תכונות הקידוד שמציע Dreamweaver, ראו סביבת קידוד ב-Dreamweaver.
- אם אתה מעדיף לעבוד עם קבצי Sass, Scss או Less, תוכל לקודד את הקבצים שלך בעזרת התחביר המועדף עליך ולהשתמש בו ב-Dreamweaver. למידע נוסף, ראו מעבדי CSS מקדימים.
בניית אתרי אינטרנט יפהפיים ב-Dreamweaver
עיצוב כתיבת קוד וניהול אתרי אינטרנט דינמיים בכלי רב עוצמה כולל.
