וובמאסטר - תיכנות ובניית אתרים

מדריך CSS - הקדמה

גיא בורשטיין/‏ 15 פברואר, 2003
F+
F-

ברוכים הבאים למדריך CSS, המקום ללמוד בו CSS בקלות ובהנאה!

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

לשם המחשה, נניח שיש לנו את דף ה- HTML הבא:

<!DOCTYPE html>
<
html>
<
head>
  <title>CSS Sample</title>
</
head>
<
body>
  <p>This is text 1</p>
  <p>This is text 2</p>
</
body>
</
html
>

שבהרצה בדפדפן נראה כך:

מדריך CSS

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

p {
  color: red;
}

שימוש בקוד הזה יגרום לדף להיות מוצג בדפדפן באופן הבא:

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

מה צריך לדעת כדי ללמוד CSS?

באמצעות אילו כלים כותבים CSS?

כיוון שקובץ CSS הוא קובץ טקסט לכל דבר, כל עורך טקסט פשוט מספיק כדי למלא את המשימה.

לרוב, נשתמש בכלים מובנים יותר לצורך בניית האתרים ובהם נשתמש כם לכתיבת CSS.

מדריך זה מתבסס על WebMatrix בתור הכלי שאיתו נבנים האתרים.

התקנת WebMatrix ובניית אתר ראשון עם הגדרות CSS

כדי לעבוד עם WebMatrix נדרשת מערכת הפעלה Windows XP או גירסא מתקדמת יותר.

כדי להוריד את WebMatrix בצורה המהירה ביותר ובחינם, לחצו על כפתור התקנה:

מדריך CSS

הלחיצה תוביל אתכם לאתר ההורדה של WebMatrix העושה שימוש ב- Web Platform Installer – כלי שהופך את תהליך ההתקנה של מגוון תוכנות לבניית אתרים למשהו מהיר ביותר. אם עדיין לא התקנתם את ה- Web Platform Installer, לחצו כל הכפתור הירוק הגדול:

מדריך CSS

ההתקנה של Web Platform Installer תסתיים מהר מאד, ולאחריה יופיע מסך ההתקנה של WebMatrix:

מדריך CSS

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

מדריך CSS

אשרו את ההתקנה ע”י לחיצה על הכפתור I Accept ותהליך ההתקנה יתחיל. התהליך עשוי להמשך מספר דקות, אך לא דורש התערבות כלשהי.

מדריך CSS

בסיום התקנת WebMatrix, יופיע מסך הסיכום, המפרט את הרכיבים שהותקנו.

מדריך CSS

לחצו על הקישור Launch כדי להפעיל את WebMatrix ולהתחיל ללמוד לבנות אתרים עם HTML ו- CSS.

מדריך CSS

בניית אתר פשוט ב-  HTML בשילוב CSS

1. במסך הפתיחה של WebMatrix נלחץ על האפשרות Site From Template ליצירת אתר המבוסס על תבנית מוכנה מראש.

מדריך CSS

2. בחר בתבנית ששמה Empty Site וקרא לה HelloHTML.

מדריך CSS

3. לחץ על OK. ‏ WebMatrix יצור את האתר החדש ויפתח אותו לתחילת עבודה.
בחלק העליון של הכלי, ישנו סרגל כלים מסוג Ribbon ומעליו בפינה השמאלית סרגל הגישה המהירה. בחלק השמאלי התחתון של הכלי, תמצאו את רשימת סביבות העבודה, שמשפיע על מה שנראה בחלק המרכזי של הכלי, בו נערוך את קבצי ה- HTML.
בתחתית החלון תמצאו את סרגל ההתראות הצהוב המופיע כאשר ישנן הודעות חשובות שיש לשים לב אליהן במהלך העבודה.

מדריך CSS

4. מבין סביבות העבודה בכלי בחלקו השמאלי התחתון, בחר בסביבת העבודה לניהול קבצי האתר (Files), בה תוכל לעבוד עם הקבצים והתיקיות. לאחר הבחירה יופיע עץ הקבצים של האתר.

מדריך CSS

5. הוסף דף חדש לאתר. בסרגל הכלים העליון לחץ על הכפתור New.

מדריך CSS

WebMatrix מציג רשימה ובה סוגי הקבצים אותם ניתן להוסיף לאתר – ביניהם קבצי HTML.

מדריך CSS

6. בחר להוסיף קובץ מסוג HTML ובשדה Name הקלד index.html.

7. לחץ על OK.
WebMatrix ייצור את הקובץ החדש ויפתח אותו בעורך הקוד.

מדריך CSS

8. ערוך את תוכן קובץ ה- HTML והוסף את ה- HTML המודגש לתוך הדף.

<!DOCTYPE html>
<
html>
<
head>
  <title>CSS Sample</title>
</
head>
<
body>
  <p>This is text 1</p>
  <p>This is text 2</p
>
</
body>
</
html
>

9. בסרגל הגישה המהירה לחץ על Save.

    מדריך CSS

10. הצג את הדף שכתבת. בסרגל הכלים העליון לחץ על הכפתור Launch.

מדריך CSS

11. WebMatrix מפעיל שרת Web (מסוג IIS Express) שאפשר להשתמש בו כדי לבדוק את הדפים במחשב שלך. הדף היצרת יוצג בדפדפן.

 

מדריך CSS

12. הוסף את הגדרת ה- CSS הבאה (החלק המודגש) לתוך דף ה- HTML שבנית בתוך WebMatrix:

<!DOCTYPE html>
<
html>
<
head>
  <title>CSS Sample</title>
  <style type="text/css">
    p {
      color: red;
    }
  </style
>
</
head>
<
body>
  <p>This is text 1</p>
  <p>This is text 2</p>
</
body>
</
html
>

13. הרץ שוב את האתר שבנית (ע”י F12) ושים לב כי הגדרת ה- CSS שהוספת שינתה את צבע הטקסט בדף.

מדריך CSS

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

גיא בורשטיין

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

תגובות בפייסבוק

תגובות למאמר



תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות