המדריך הבסיסי ל-CSS ב-HTML – פרק א' – מבוא

CSS הוא פורמט לעיצוב דפי אינטרנט. השימוש בפורמט זה מאפשר לנו לעצב את תגיות ה-HTML תוך הפרדה בין עמוד לעמוד

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

יתרונות השפה

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

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

התחביר הבסיסי

שפה זו מורכבת מ-3 עקרונות מרכזיים:

• בוררים
• פקודות\תכונות
• ערכים

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

* ניתן להוסיף הערות לאזור CSS על ידי שימוש בתחביר – /*your comment here*/

יכולות השפה

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

דרכי הטמעת CSS במסמך

• בתוך מאפיין style על התגית:

<aside style="float: right;">
  <a href="">
    <figure>
      <img src="logo.png" width="100" height="100" alt="Description of the image" />
      <figcaption>Caption for the image</figcaption>
    </figure>
  </a>
</aside>

• בתוך תגית style באזור ה-head:

<style>
        table {
          font-family: arial, sans-serif;
          border-collapse: collapse;
          width: 100%;
        }
            
        td, th {
          border: 1px solid #dddddd;
          text-align: left;
          padding: 8px;
        }
            
        tr:nth-child(even) {
          background-color: #dddddd;
        }
</style>

• בתוך קובץ CSS נפרד אשר מקושר באמצעות תגית link:

<link href="style/style.css" rel="stylesheet"/>

בפרק הבא של המדריך נלמד על בוררים.
לקריאה מורחבת על HTML ו-CSS באתר של W3C יש ללחוץ כאן