אז אחרי שקראתם את ההקדמה לCSS אתם בוודאי כבר מתים להתחיל
אז, איך מתחילים עם CSS
(או דף עיצוב קסקדי, מה שזה לא יהיה)
כשדפדפן מזהה שדף אינטרנט (HTML) מכיל CSS, הוא יעצב את המסמך בהתאם לדף העיצוב.
ישנם 3 דרכים עיקריות לעצב דף עם CSS:
- דף עיצוב חיצוני
- דף עיצוב פנימי
- עיצוב בתוך שורות הקוד (נקרא גם ספגטי)
דף עיצוב חיצוני
דף עיצוב חיצוני הוא אידיאלי כאשר העיצוב חל על הרבה דפים (למשל אתר שלם). בעזרת דף עיצוב חיצוני,
אפשר לשנות את המראה של כל הדפים במקום אחד.
על מנת שהדפדפן ידע שדף העיצוב החיצוני צריך לחול על מסמך הHTML שלנו נשתמש בתגית <link>.
תגית ה<link> ממוקמת בתוך ה<head>.
לדוגמא:
קובץ הCSS אינו צריך להכיל תגיות html כלשהן ואמור להישמר עם סיומת css.
דוגמא לתוכן של קובץ CSS:
(במקום "margin-left:20px" כמו שצריך). זה יעבוד בIE אבל עלול לגרום לצרות בגרסאות ישנות של firefox ו-opera.
דף עיצוב פנימי
בדף עיצוב פנימי נשתמש כאשר למסמך יחיד יש סגנון מיוחד.
נגדיר עיצוב פנימי בתוך איזור ה-<head> של דף הhtml באמצעות תגית ה<style>.
למשל:
עיצוב אינליין
עיצוב זה מאבד הרבה מהיתרונות של דפי עיצוב מכיוון שהוא מערבב את התוכן עם האופן שבו הוא יוצג
השקע מחשבה לפני בחירתך להשתמש בשיטה זו.
באופן עקרוני לא משתמשים בעיצוב אין ליין
על מנת להשתמש בעיצוב אינליין הכנס את התכונה <style> בתגית המתאימה.
בתוך תכונת <style> ניתן להכניס כל מאפיין של css.
הדוגמא הבאה מראה איך לשנות את הצבע ולגרום לפיסקה להישאר בצד שמאל: