Get Adobe Flash player
דף הבית עקרונות ותחביר מהי שפת CSS

המטרה המקורית של מפתחי שפת HTML בתחילת דרכה, היתה הכנת כלי להצגת תוכן.

התגים שהיו בשימוש בתחילת הדרך, שימשו לצורך ארגון וסידור התוכן. התג <h1> ציין כותרת, התג <br> נועד לשבירת שורה וכו'.

עם הזמן, כשהופיעה גרסת HTML 3.2, היא ענתה גם לצורך חדש שהגיע מהמשתמשים - עיצוב התוכן. גרסה זו כללה כבר תגים חדשים, <font> למשל, ושינויי עיצוב כשליטה בגודל האות, צבעה או סוג הגופן למשל, הפכו לדבר שגרתי.

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

כתשובה לבעייה, פיתחה W3C (הארגון העולמי של האינטרנט - World Wide Web Consortium) שפה חדשה שתשתמש כשפת עזר ל HTML ושתיקח על עצמה את עיצוב האתר, את שפת ה CSS.

בצורה כזו חזר ה-HTML לתפקודו המקורי - הצגת התוכן וארגונו על המסך, והעיצוב עבר אל כלי העזר, ה-CSS

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

העבודה עם CSS משיגה אם כן שתי מטרות:

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

מהי שפת CSS

שפת העזר CSS היא שפה בעלת תחביר עצמאי, שונה מ HTML אך בנויה להשתלבות בתוכו.

משמעות השם CSS היא "גליונות סגנון מדורגים" ובאנגלית Cascaded Style Sheets, והשם מעיד על עקרון עבודתה. הוראות ה CSS נכתבים במקובץ אך ברמות חשיבות מדורגות. 

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

  • בקובץ חיצוני התומך באתר כולו
  • בראש דף בודד
  • הוראה נקודתית בתוך שורה בודדת

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

הוראות ה CSS גוברות על עיצוב ה HTML. אם הוראת CSS קובעת למשל שהתג <p> יהיה מיושר לימין, היא תחול על כל הפסקאות שבדף. מתן תכונת HTML וערך בשורה מסוימת, למשל <p align="center"> לא תועיל, ושינוי הפסקה יתבצע רק באמצעות הוראת CSS נקודתית.

האלמנטים עליהם שולטת CSS

תגים קיימים:

כפי שתראה פרק הבא, יכולה ה-CSS לשנות (עד רמה מסויימת) תכנות מוקדם של תגים. התג <p> למשל, פותח פסקה. את זה CSS לא יכולה לשנות. אולם תכונות הפסקה שתיפתח, הם בהחלט בשליטת התכנה.

סגנון חדש כללי:

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

סגנון חדש נקודתי:

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

אל השיעור הבא