CSS

מתוך ויקיספר
קפיצה אל: ניווט, חיפוש
75%.svg

ספר זה טרם הושלם ונמצא עדיין בכתיבה.

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

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

בטח ראיתם אתרים שמכילים המון דפים. אז , איך מעצבים אותם? הרי לא מעצבים כל דף בנפרד! התשובה לשאלה הזו היא השפה CSS ‏(Cascading Style Sheets, גיליונות סגנון מדורגים). עם css תחסוך זמן רב בעיצוב האתר. בעזרת מדריך זה תלמדו לעשות עיצוב אחיד למספר רב של מסמכי HTML. ולכל מי שחושב אחרת - HTML היא לא(!)שפת עיצוב !

ידע קודם[עריכה]

דרוש ידע HTML, לפני תחילת הלימוד במדריך זה. לכל בעלי ידע בסיסי מומלץ לחזור שוב על המדריך.

הקדמה[עריכה]

דפי אינטרנט נכתבים בשפת HTML. כל דף HTML מכיל אלמנטים בתגי HTML. ניתן לשייך לכל אלמנט בנפרד הגדרות עיצוב ע"י מאפייני האלמנט. אך זה יהיה עיצוב שגוי של האתר, כי נניח שהאתר כולל 20 מסמכי HTML, ונניח שכל מסמך מכיל 20 אלמנטים. ולכל אלמנט אנו נשייך הגדרות עיצוב. אז יהיו לנו 400 הגדרות עיצוב. ובד"כ, אתר אינטרנט, שומר על אחידות בעיצוב שלו בין הדפים השונים, אז כפועל יוצא, נקבל הגדרות עיצוב שתחזורנה על עצמן, כלומר שכפול של קוד(=עיצוב שגוי). CSS באה לפתור את הבעיה הזו: נגדיר קובץ CSS (בד"כ אחד או שניים), שיכיל את כל הגדרות העיצוב של האתר, כל הגדרת עיצוב שחוזרת על עצמה, תכתבו רק פעם אחת בקובץ ה-CSS. (למשל, שכל הפסקאות <p> יהיו עם font מסוג DAVID). וכך נמנע משכפול של קוד. וכן, אם בעתיד נדרש לבצע שינוי בעיצוב של האתר, נצטרך לבצע זאת רק בקובץ ה-CSS, ולא באינספור דפים של HTML.

יתרונותיו של CSS[עריכה]

  1. עיצוב אחיד לדפי HTML.
  2. W3C שמתווה את עתיד האינטרנט, מכוונת לכך שתגי HTML שמשמשים לעיצוב כגון:
    <i> <big> <font> <u> <strike> <s> <center> לא יהיו ב-HTML5 ומעלה. ולכן יהיה צורך לדעת CSS, בשביל לעצב את מסמך ה-HTML.
  3. ב-CSS, אנו יכולים להמנע מלשכפל את הקוד שמגדיר את עיצוב האתר, אז ניתן לשנות עיצוב ללא עריכה בכל דף HTML, מסמכי ה-HTML, הופכים להיות קלים יותר לתחזוקה, כי הם מכילים פחות תוכן. וגם זמן הטעינה של מסמכי ה-HTML בדפדפן מתקצר, כי הם כעת שוקלים פחות, הדפים צורכים פחות רוחב דף, וכן הם צורכים פחות שטח אחסון על שרת האתר.
  4. ידע ב־CSS יסייע מאוד למי מכם שיעבור ל־XHTML, ויהיה הכרחי למי שיחליט לעבוד ב־XHTML Script.

דפדפנים[עריכה]

בחירת הדפדפן היא נקודה חשובה: קיימים הבדלים בין התוצאות שמספקים דפדפנים שונים. דפים שיוצגו כראוי ב־Internet Explorer, למשל, עשויים שלא להיות מוצגים כראוי בדפדפנים כמו אופרה או פיירפוקס. עם זאת, דפים שמוצגים כראוי באופרה/פיירפוקס מוצגים כמעט תמיד באופן תקין ב־Internet Explorer. (על מנת להבטיח את עצמכם, מומלץ שתעבדו עם פיירפוקס). פיירפוקס הוא מוצר חינמי וחופשי אותו ניתן להשיג ברשת ללא כל בעיה ולהפעיל בו במקום. בנוסף לכך פיירפוקס הוא מתנה למתכנתים , בשל כל התוספות הייחודיות שניתן להתקין עליו.

קישורים חיצוניים[עריכה]

בניית אתרים באינטרנט
תכנות צד-לקוח: JavaScript‏, CSS‏, XML‏, HTML
תכנות צד שרת: SQL‏, PHP‏, ASP‏, ASP.NET‏, JSP
תוכנות גרפיקה: פוטושופ, פלאש, GIMP
שיווק: שיווק באינטרנט, תכנית שותפים