CSS

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

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

ידע קודם

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

הקדמה

דפי אינטרנט נכתבים בשפת HTML. כל דף HTML מכיל אלמנטים בתגי HTML. ניתן לשייך לכל אלמנט בנפרד הגדרות עיצוב על ידי מאפייני האלמנט. אך זה יהיה עיצוב שגוי של האתר, כי נניח שהאתר כולל 20 מסמכי HTML, ונניח שכל מסמך מכיל 20 אלמנטים. ולכל אלמנט אנו נשייך הגדרות עיצוב. אז יהיו לנו 400 הגדרות עיצוב, ובדרך כלל אתר אינטרנט שומר על אחידות בעיצוב שלו בין הדפים השונים. אז כפועל יוצא, נקבל הגדרות עיצוב שתחזורנה על עצמן, כלומר שכפול של קוד (יגרום לעיצוב שגוי). CSS באה לפתור את הבעיה הזו: נגדיר קובץ CSS (בדרך כלל אחד או שניים), שיכיל את כל הגדרות העיצוב של האתר. כל הגדרת עיצוב שחוזרת על עצמה תיכתב רק פעם אחת בקובץ ה־CSS. (למשל, כל הפסקאות <p> יהיו עם גופן מסוג "David", או שכל כותרת מסוג <h1> תוצג בגופן גדול ובצבע אדום). וכך נמַנע משכפול של קוד. כמו כן, אם בעתיד נדרש לבצע שינוי בעיצוב של האתר, נצטרך לבצע זאת רק בקובץ ה־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‏, PERL
תוכנות גרפיקה:	פוטושופ, פלאש, GIMP
שיווק:	שיווק באינטרנט, תכנית שותפים