2. מבוא לדפי סגנון הגולשים בקצרה.
אם אתם יודעים מהם דפי סגנון אתם יכולים
לקפוץ לתוך האש עכשיו.
אם אתם רוצים לדעת קצת יותר לגביהם, על
חוקים, הגדרות, אמירות ובוררים, אז זה מה
שנכסה בחלק הזה.
למה אנחנו צריכים דפי סגנון?
חשבו עד כמה זה חסר תועלת לסמן כל חלק
של HTML ( כל מרכיב של HTML ) עם תיאור איך הוא
אמור להיראות. אתם רוצים שכל הכותרות
באתר שלכם יהיו כתובות בגופן מסוים, נניח
Helvetica, ושהטקסט באתר שלכם יהיה כתוב בגופן
אחר, נניח Verdana. בשביל לעשות זאת, כל כותרת
מסומנת עם הגופן הרצוי. וכך גם כל פיסקה
או מרכיב אחר.
זה לוקח זמן ועושה את העמודים שלכם
גדולים יותר ( תחשבו על מאות Font
Face=Verdana של תגים, אשר תופסים
מקום). ואל תנסו לחשוב אפילו על מה שיקרה
כש - Verdana יתיישן ותרצו להשתמש ב - Minion Web
במקומו. במה פעולות של מצא והחלף זה ייקח?
בכמה קבצים?
מהם דפי סגנון?
עכשיו אתם יודעים למה אנחנו צריכים דפי
סגנון. אבל מהם בדיוק?
חשבו על דף סגנון כעל סידרה של הוראות
שאומרות לדפדפן איך לצייר או לכתוב סוג
מסוים של מרכיב HTML. בעצם, זה כל מה שזה.לכל
אחת מההוראות, או חוקים יש שני חלקים.
דבר ראשון, בורר אומר לדפדפן איזה
מרכיבים בעמוד נשלטים ע"י חוק מסוים.
לחוקים יש גם מספר הגדרות, שאומרות
לדפדפן איך לצייר מרכיבים שנבררו ע"י
החוק. במהלך השיעורים האלה נחקור מספר
סוגים שונים של בוררים שניתן להשתמש בהם
בדפי סגנון והגדרות שונות שניתן ליישם
אותן על מרכיבים בעמוד.
חוקים אלה מוכלים בדף סגנון גולש. זה לא
יותר ממסמך טקסט, עם הסיומת .css משהו כמו
core_style.css.
לכל אחד מהחוקים, שעליהם נלמד יותר עוד
מעט, יש צורה פשוטה למדי. הבורר, אחריו
סידרה של הגדרות, אשר מוקפים בסוגריים
מסולסלים.
למשל
{P {font-size: 120%
בוחר כל פיסקה,
ועושה את גודלה 120% ממרכיבה המקורי.
אז איך הם עובדים?
איך הדפדפן יודע שיש דף סגנון לעמוד כשהוא טוען אותו? או שיש קישור לדף הסגנון,או שדף הסגנון מעוגן בראש מסמך HTML. נלמד לעשות זאת בשיעור: עיצוב האתר שלכם.
כאשר הדפדפן טוען את העמוד, הוא מזהה את הקישור, או את דף הסגנון המשובץ בעמוד ומשתמש נו כדי לעצב את האתר שלכם.
הדבר הבא
הדבר הבא שנעשה הוא לבדוק שיש לכם את כל הכלים הדרושים כדי להתחיל, ואז ניצור את דף הסגנון הראשון שלנו.
|
