ברוכים הבאים לחלק הראשון של מדריך CSS בעברית.

דרישות קדם

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

מה זה CSS?

CSS זה ראשי תיבות של cascading style sheets, שזה, בתרגום חופשי, גליונות עיצוב מדורגים.
באופן כללי, בניית דף אינטרנט דורשת שלושה דברים:

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

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

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

 

סביבת פיתוח ל- CSS

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

יצירת קובץ CSS

בואו נתחיל בבניית דף אינטרנט חדש. צרו תיקייה חדשה במחשב, שתהיה ריקה בשלב ראשון. לאחר מכן, פתחו את VS Code ובחרו file → open folder. בחרו את התיקייה החדשה שיצרתם. כעת:

  1. מתוך VS Code, צרו קובץ חדש ותנו לו את השם index.html.

  2. קובץ זה, כתבו את התבנית המינימלית הבסיסית של HTML. לצורך כך תוכלו להשתמש בקיצור של VS Code - פשוט הקלידו ! (סימן קריאה) ויוצג לכם תפריט ממנו תוכלו לבחור Emmet abbreviation של דף HTML. זה יוסיף לדף את המינימום שאנחנו צריכים כדי להתחיל לעבוד עם קובץ ה- HTML.

     

  3. מתוך VS Code, צרו קובץ חדש ותנו לו את השם styles.css.

  4. כעת עלינו לקשר את קובץ ה- CSS לקובץ ה- HTML. חזרו לקובץ ה- HTML, ובתוך ה- head הוסיפו את השורה הבאה:

<link rel="stylesheet" href="styles.css">

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

בדיקה ראשונית של קובץ ה- CSS

כדי לבדוק שיצרנו וקישרנו את קובץ ה- CSS באופן תקין, נוסיף עיצוב בסיסי לדף שלנו. הוסיפו את הקוד הבא לקובץ ה- CSS:

body {
   background: blue;
}

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

 

ברכות, יצרתם גיליון CSS ועיצבתם את דף האינטרנט שלכם :slight_smile: