שימוש בשפת CSS

עיצוב אתרים מתקדם

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


האלמנטים המרכזיים הניתנים לשינוי באמצעות CSS:


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

יתרונות וחסרונות בשימוש ב-CSS

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


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