אחד הדברים החשובים לכל מעצב אתרים הוא הכרת שפת ה – CSS . ללא ידע ב – CSS קשה עד בלתי אפשרי לעסוק בתחום של עיצוב אתרים בימינו.
בעבר עיצוב אתרים היה חלק מהתוכן. עובדה זו גרמה לבעיות רבות. המעצבים בעצם לא שלטו על התצוגה של עמוד האינטרנט. הגולש, באמצעות הגדרות הדפדפן, היה יכול לשנות את העיצוב לחלוטין. בנוסף לכך ישנו הבדל בין הדפדפנים השונים. עיצוב שנראה מושלם בדפדפן אחד הופך לבלתי נסבל בדפדפן אחר.
[adsense]
מעצבי אתרים אומנם התמודדו עם שלל הבעיות, אך הפתרונות היו מאולצים. עיצוב אתרים היה סביר, אך הדרך להגיע לעיצוב הסופי הייתה מסורבלת ומנעה דברים נוספים. האתר היה לא גמיש, לא הותאם לגודל החלונות, וכדומה. הפתרון הנפוץ בקרב מעצבי האתרים היה בשימוש בטבלאות רבות על מנת למקם את הטקסט במקומות הדרושים. הטבלאות לא נועדו במקור לעיצוב, לכן התחזוקה של אתר כזה הייתה קשה ומסורבלת וכמובן גם לא מותאמת למנועי חיפוש.
פתרון זה לא חביב על המעצבים, והם חיפשו פתרונות חלופיים. בסופו של דבר השאלה הייתה – מי ישלוט בעיצוב האתר – המשתמשים או המעצבים? בסופו של דבר ארגון ה – W3C התערב בשאלה וקבע לטובת המעצבים. הצעת הארגון הייתה פשוטה – להפריד בין העיצוב לתוכן. בצורה כזאת המעצבים יתעסקו בעיצוב, ואנשי התוכן בתוכן. על מנת לבצע את ההפרדה הנ"ל נולדה שפת ה – CSS .
'CSS או בשמו המלא Cascading Style Sheets, הינו בעצם סדרה של חוקים. חוקים אלה נועדו לעצב את עמוד האינטרנט או את האתר כולו בצורה שתוכננה על ידי המעצב. כל דפדפן התומך ב – CSS מונחה על ידי חוקים אלה כיצד להציג את התוכן אותו הוא מקבל משרת ואמור להציג לגולש. הוראות עיצוב יכולות להיות משובצות בתוך קוד ה – HTML או להיות מרוכזות בקובץ CSS נפרד. בצורה כזאת קובץ CSS בודד יכול להכתיב את העיצוב לאתר שמכיל אלפי עמודי אינטרנט.
לסיכום, CSS הוא שפה חשובה בתחום של עיצוב אתרים. כל האתרים היום נעזרים ב – CSS על מנת להפריד את העיצוב מהתוכן. בצורה כזאת ניתן להתגבר על מגוון בעיות עיצוביות. כל מעצב אתרים מתחיל חייב להכיר את CSS בצורה טובה.
דוגמה ליצירת דף html + Css פשוט:
מסמך html.
- <html>
- <head>
- <title>Untitled Document</title>
- </head>
- body>
- <p>
- ווביסט – אני חי אינטרנט !
- </p>
- </body>
- </html>
קובץ Css:
- body {
- font-family:Arial, Helvetica, sans-serif;
- font-size:22px;
- }
- .zero {
- width:400px;
- margin: 0 auto;
- }
חיבור בין html ל-Css:
- <link rel="stylesheet" type="text/css" media="all" href="style.css" />
תוצאה מלאה והמושלמת:
- <html>
- <head>
- <title>Webist</title>
- <link rel="stylesheet" type="text/css" media="all" href="style.css" />
- </head>
- </body>
- <div class="zero">
- ווביסט – אני חי אינטרנט !
- </div>
- </body>
- </html>
אחלה פוסט, כמו תמיד
השימוש ב-CSS הוא חשוב לאללה גם במובנים של קידום אתרים, ככל שהיחס מלל לקוד גדול יותר לכיוון המלל כך יותר טוב. CSS משאיר את הקוד נקי וללא צורך בשימוש של ערכים שיכולים לזבל את הקוד..
מאמר מעולה
אהלן יוסי,
איפה אני יכול ללמוד יותר על Css? מצאתי באתר כמה מדריכים אבל אתה כותב מנקודת הנחה שאנשים יודעים את המושגים שאתה מזכיר שם. לצערי אני לא מגיע מחום התכנות ולכן אשמח אם תוכל לכוון אותי איפה אפשר ללמוד יותר על Css