שיעור 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 פועלת ואיך להתחיל להשתמש בה.