external style sheets - גיליון סגנונות חיצוני
הגענו לרגע שכולם חיכו לו - איך לעצב פעם אחת את כל הסגנונות, וזהו.external style sheet, או בתרגום חופשי "גיליון סגנונות חיצוני", הוא קובץ עם סיומת .css . לא כותבים אותו כמו דף html, עם תגים בהתחלה ובסוף. למעשה, אין בו תגים בכלל. הוא נראה כמו מה שקורה בראש הדף, בין תגי ה- <style> </style>.
בתוך הקובץ הזה, שאנשים לא מקוריים (כן, כולל אותי) נוהגים לקרוא לו style.css, פשוט מופיעה רשימה של סגנונות - תגים, classes, ו-ids.
העיקרון הוא פשוט, וכמו שכבר למדנו: קודם מציינים את הסגנון של מה רוצים לשנות, ואח"כ בתוך סוגריים מסולסלים, כותבים רשימה של המאפיינים והערכים. כדאי לכתוב כל דבר בשורה נפרדת, ולהפריד בין תגים, classes, ו-ids.
זה מראה כללי של דף css:
tag_name {
property: value;
property: value;
property: value;
}
/*------ classes ------*/
.class_name {
property: value;
property: value;
property: value;
}
/*------ ids ------*/
#id_name {
property: value;
property: value;
property: value;
}
השורות שבין הלוכסנים והכוכביות הן חסרות משמעות מבחינת המחשב - הן משמשות כמו הערות ב-html - עוזרות לכם לקרוא את מה שכתבתם.
דוגמה פחות כללית יכולה להיות:
hr {
color: #ffaa00;
width: 50%;
height: 3px;
}
/*------ classes ------*/
.important {
font-size: 14pt;
font-weight: bold;
}
/*------ ids ------*/
#box1 {
border: solid 1px green;
width: 200px;
visibility: hidden;
}
אם אתם רוצים לראות את הקובץ של האתר הזה, למשל, לחצו כאן. בהתאם לדפדפן שלכם יפתח חלון רגיל חדש, או תוכנה כמו frontpage - לא להיבהל!
קישור ל- external style sheet
טוב, אז יצרתם גיליון סגנונות חיצוני - אבל איך תקשרו אותו לדפים שצריכים להשתמש בו?אין בעיה. איפה שהוא בראש הדף (head), כתבו את השורה הבאה:
הדבר היחיד שיכול להיות שתצטרכו לשנות הוא את החלק האחרון: במקום style.css כתבו את הכתובת (והשם) של דף ה-css שלכם.
ישנה גם האפשרות (הלפעמים מאוד מועילה) לקשר בדף אחד לשני גיליונות סגנונות חיצוניים. הבעיה היחידה היא שזה לא עובד עם כל הדפדפנים.