מהו CSS?
CSS (ראשי תיבות של Cascading Style Sheets) הוא שפת עיצוב המשמשת לתיאור המראה והעיצוב של מסמכים שנכתבים בשפת סימון כמו HTML. באמצעות CSS, ניתן לקבוע כיצד אלמנטים ב-HTML ייראו ויתנהגו, ובכך להפריד בין התוכן (HTML) לעיצוב (CSS).
דוגמה לשימוש ב-CSS:
נניח שיש לנו את התגית הבאה ב-HTML:
<p>זהו טקסט דוגמה.</p>באמצעות CSS, נוכל לעצב את הטקסט בצורה הבאה:
p {
color: blue;
font-size: 20px;
}במקרה זה:
color: blue;קובע שהטקסט יהיה בצבע כחול.font-size: 20px;קובע שגודל הגופן יהיה 20 פיקסלים.
שימושים עיקריים של CSS:
- עיצוב טקסט: שינוי צבע, גופן, גודל, ועוד.
- עיצוב רקע: קביעת צבע רקע, תמונת רקע, ועוד.
- עיצוב תיבות: קביעת רוחב, גובה, שוליים, ריפוד, גבולות, ועוד.
- פריסת עמוד: קביעת מיקומי אלמנטים, יישור, פלקסבוקס, גריד, ועוד.
ראה מדריך וידאו בעברית קורס HTML5 ו-CSS3 מקיף בחינם
סוגי CSS:
- CSS פנימי (Internal CSS): כתיבת קוד ה-CSS בתוך תגית
<style>בתוך קובץ ה-HTML עצמו. - CSS חיצוני (External CSS): יצירת קובץ CSS נפרד וקישורו לקובץ ה-HTML באמצעות תגית
<link>. - CSS מוטבע (Inline CSS): כתיבת קוד ה-CSS ישירות בתוך התגית באמצעות ה-Attribute
style.
יתרונות השימוש ב-CSS:
- הפרדה בין תוכן לעיצוב: מאפשר לשמור על קוד HTML נקי ומסודר.
- תחזוקה קלה יותר: שינוי עיצוב באתר שלם על ידי עריכת קובץ CSS אחד בלבד.
- חוויית משתמש משופרת: עיצובים עשירים ומותאמים אישית המשפרים את הנראות והנגישות.