מה זה שפת CSS

מאת admin, 6 נובמבר, 2022

שפת CSS או בשם מלא (Cascading Style Sheets; גיליונות סגנון מדורגים) היא שפת מחשב מסוג שפת עיצוב המורכבת מתכונות וערכים שאותם מיישמים לאלמנטים ועצמים נוספים שאותם אנו רוצים לעצב.

פקודת CSS תיהיה למשל "צבע הטקסט בדף מסוג X באתר" והערך יהיה למשל "שחור".

שפת מחשב זו משמשת לעיצוב בסיס וכלכלי של כלל אתרי הווב הקיימים.

חשיבות למידת שפת CSS

לפי דעתי כל בעל אתר (המתחזק אתרו בעצמו, במידת מה) צריך ללמוד עקרונות יסוד ב-CSS.

אין זה הגיוני שבעל אתר יתקשר למתכנת ויזמין אצלו שעת עבודה בשביל שינויי CSS מינוריים כמו שינוי גודל תמונה מ-200 פיקסלים ל-400 פיקסלים או שינוי צבע רקע, סוג גבול וכדומה.
יש כמובן אופרציות הרבה יותר מורכבות שגם אותן ניתן לבצע לבד כמו יצירת מפרסים (grids) להצגת גלריית תמונות ריספונסיבית (כלומר, שמתאימה הן למובייל והן לדסקטופ) עם פקודה כמו flex, אבל זה העיקר.

עבודה עם שפת CSS

במסגרת העבודה עם השפה כל גיליון CSS משויך לתגית HTML, כאשר פעולה זו יכולה להיעשות בשלושה צורות:

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

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

לדעתי CSS הוא כלי שכל בעל אתר ווב (וכל אדם המעוניין להיכנס לעולם הווב) צריך להכיר לפחות ברמת הפקודות הבסיסיות והיכולת לשנות (לקסטם, To customize) באופן בסיסי, ערכת עיצוב קיימת.

בעברי הרחוק, כשבניתי אתר הווב המשמעותי הראשון שלי (אז דרך חברה ששכרתי את שירותיה), גיליתי כמה חשוב לבעל אתר לדעת CSS וכמה הדבר יכול להקל עליו בעת העבודה עם החברה המפתחת.

דרכים לעבוד עם שפת CSS

1) ייחוס עיצוב תוך-קבצית ללא סלקטור

ייחוס עיצוב תוך-קבצית ללא סלקטור היא שיטה לייחוס שפת עיצוב למבנים.

<div style="background-color: red">

בקוד העיצוב לעיל הגדרתי צבע רקע של מבנה בתוך תג ה div של המבנה עצמו.

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

2) ייחוס עיצוב תוך-קבצית עם סלקטור

ייחוס עיצוב תוך-קבצית עם סלקטור היא שיטת ייחוס עיצוב למבנה דרך סלקטור שהוגדר בקובץ שמכיל את המבנה.

<!DOCTYPE html>
<html>
    <head>
        <style>
            :root {
                --p: red;
                --s: green;
                --a: blue;
            }

            div {background-color: var(--p)}
    </style>
</head>

    <body>
        <div>myDivision</div>
    </body>
</html>

ייחוס עיצוב חוץ-קבצי עם סלקטור

ייחוס עיצוב חוץ-קבצי עם סלקטור הוא ייחוס עיצוב למבנה דרך קובץ חיצוני (כלומר, קובץ שאיננו הקובץ שמכיל את קוד המבנה) וזאת בהתבסס הן על קישור בין הקבצים והן על סלקטור.

בקוד העיצוב להלן הגדרתי עיצוב לכל המבנים מסוג div (מונח בשפת שפת HTML) בקובץ אשר מכיל את קוד העיצוב להלן:

<link 
    rel="stylesheet"
    href="StyleSheet.css"
    type="text/css"
/>

<style>
    :root {
        --p: red;
        --s: green;
        --a: blue;
}

div {background-color: var(--p)}
</style>

<div class="menu_general"></div>
תג
עיצוב אתרים