שיעור 1 - מה זה CSS?
יכול להיות שכבר שמעת על CSS מבלי לדעת מה היא באמת. בשיעור זה תלמד יותר על CSS ומה היא יכולה לעשות עבורך.
CSS הם ראשי התיבות של Cascading Style Sheets ובתרגום לעברית - גיליונות עיצוב מדורגים.
מה אני יכול לעשות עם CSS?
CSS היא שפת עיצוב שמגדירה את תבנית העיצוב של מסמכי HTML. למשל, CSS מטפלת בגופנים, צבעים, גבולות, שורות, גובה, רוחב, תמונות רקע, מיקום מתקדם ודברים רבים נוספים. המתן ותראה.
בשפת HTML יכול להיעשות שימוש לא נכון להוספת תבניות עיצוב לאתרי אינטרנט. לעומת זאת, CSS מציעה יותר אפשרויות והיא מדויקת ומתקדמת יותר. CSS תומכת בכל הדפדפנים הקיימים היום ולאחר מספר שיעורים במדריך זה תוכל ליצור בעצמך גיליונות עיצוב באמצעות CSS כדי להעניק לאתר שלך מראה מדהים.
מה ההבדל בין CSS ו-HTML?
HTML משמשת להגדרת מבנה התוכן. CSS משמשת לעיצוב תוכן מובנה.
טוב... זה אולי נשמע קצת טכני ומבלבל אבל אנא, המשך בקריאה, בקרוב זה ישמע לך ברור והגיוני מאוד.
פעם, בימים הטובים כשמדונה הייתה בתולה ובחור בשם טים
ברנס-לי המציא את רשת האינטרנט העולמית, שפת ה-HTML
שימשה
רק להוספת מבנה לטקסט. מחבר יכול היה לסמן את הטקסט שלו ב-"זוהי כותרת" או "זוהי
פסקה" באמצעות תגי HTML
דוגמת
<h1>
ו-<p>.
ככל שרשת האינטרנט הפכה פופולארית יותר, מעצבי אתרים
החלו לחפש אפשרויות להוספת תבניות עיצוב למסמכים שלהם. כדי להיענות לביקוש זה,
יצרני הדפדפנים (בתקופה ההיא נטסקייפ ומיקרוסופט) המציאו תגי
HTML
חדשים, לדוגמה, התג
<font>
שהיה שונה מתגי ה-HTML
המקוריים בכך שהגדיר
תבנית עיצוב ולא מבנה.
זה הוביל למצב בו נעשה שימוש שגוי ותדיר
בתגי מבנה מקוריים כדוגמת
<table>
לעיצוב מבנה דפים במקום ייעודם
המקורי - הוספת מבנה לטקסט. בנוסף, תגי מבנה חדשים ורבים כדוגמת
<blink>
נתמכו רק על ידי סוג אחד של דפדפן. "אתה צריך את דפדפן
X כדי לראות דף זה" הפכה להודעה שכיחה באתרי אינטרנט.
CSS הומצאה לתיקון מצב זה בכך שנתנה בידי מעצבי אתרים תבניות עיצוב מתקדמות הנתמכות על ידי כל הדפדפנים. בו בזמן, ההפרדה של סגנון ההצגה מהתוכן, הפכה את תחזוקת אתרי האינטרנט למשימה הרבה יותר קלה.
אלו תועלות CSS תיתן לי?
CSS הייתה מהפיכה בעולם עיצוב האתרים. היתרונות הממשיים של CSS כוללים:
- שליטה על תבנית העיצוב של מסמכים רבים מגיליון עיצוב אחד.
- שליטה מדויקת יותר על תבנית העיצוב.
- מימוש תבניות עיצוב שונות לסוגי מדיה שונים (תצוגת מסך, הדפסה וכו').
- מספר רב של טכניקות עיצוב מתקדמות ומתוחכמות.
בשיעור הבא נלמד כיצד CSS פועלת ואיך להתחיל להשתמש בה.