שיעור עשירי- CSS

פרק 10 - CSS - Cascading Style Sheets

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

בשביל זה יש לנו CSS.

בעזרת css אפשר לקחת את האלמנטים ולעצב אותם.

בפרק זה אנו ניגע ממש בבסיס – בהמשך נגיע לפרק שבו נרחיב יותר.

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

הוספת CSS

כדי להוסיף עיצוב של CSS לאלמנט, אנו נוסיף את התכונה style לאלמנט, ובתוך התכונה, נגדיר את הדברים השונים.

נראה דוגמא:

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

מה שיופיע זה:

נסו בעצמכם לראות מה מופיע!

בפרק הקודם למדנו על אלמנט הdiv וראינו דוגמא שבה הכנסנו אלמנטים שונים אל תוך הdiv.

כעת נראה איך בעזרת העיצוב על הdiv אנו נוכל להשפיע על כל האלמנטים שבתוך הdiv.

ניזכר בדוגמא שראינו:

כעת בעזרת style שלמדנו כעת, נוסיף סטייל לdiv.

תריצו אצלכם את הקוד ותראו מה מופיע!

סיכום

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

יש המון תכונות שאפשר לתת לתת לאלמנט, ואינספור אפשרויות של עיצוב הדף שלנו!

כמובן שבעיצוב דף יש המון תכנון ודורש מחשבה ויצירתיות.

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

משימה:

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