שיעור שבעה עשר- מאפייני הסטייל המרכזיים

פרק 17 - מאפייני הסטייל המרכזיים

יש המון המון מאפיינים שאפשר לגעת בהם.

אנו נלמד את המאפיינים המרכזיים/שימושיים. יאללה נתחיל!

צבע

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

https://www.w3schools.com/colors/colors_names.asp

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

רקע

עד עכשיו, כאשר דיברנו על הרקע – דיברנו על הצבע של הרקע.

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

קודם כל, בשביל לשים תמונה אנחנו צריכים שיהיה לנו תמונה.

אז לכו ותורידו למחשב תמונה, או שתקחו איזה תמונה שקיימת לכם כבר במחשב, ותשימו אותה בתוך התיקייה שבה נמצא הקובץ html.

ברגע שהם נמצאים באותה התיקיה נשתמש במאפיין background-image. ונכניס את הurl כערך:

(הurl הוא הקישור של התמונה. מכיוון שהתמונה נמצאת בתוך התיקיה שבה אנו עובדים אז מספיק רק להכניס את השם של התמונה)

כאן הגדרנו שלכל הdiv-ים שלנו יהיה את הרקע הספציפי ששמנו.

כלומר שוב אם ננתח כמו שעשינו בעבר:

אז הסלקטור – הוא הdiv

המאפיין – הוא התמונה של הרקע

והערך של המאפיין – הוא קישור לתמונה שלנו.

*חשוב לכתוב את השם המדויק של קובץ התמונה אשר נמצא בתיקיה.

משימה:

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

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

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

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

אלמנט כקופסא

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

לכל אלמנט בשפה אפשר להתייחס כקופסא, או כסלסלה. מה הכוונה?

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

כשתעשו זאת, יהיו לכם 4 נקודות שאתם תצטרכו לקחת בחשבון:

מה יש בתוך הסלסלה – content התוכן
איפה אתם ממקמים את התוכן בתוך הסלסלה, כלומר באמצע, בצד ימין, וכו׳ – padding
איך נראית הסלסלה עצמה, כלומר מה הצבע שלה, מה העובי שלה, מה הסטייל שלה וכו׳ – border הגבול
ודבר אחרון, איפה הסלסלה ממוקמת במרחב של הבית, לדוגמא על הספריה בסלון, וגם מה המרחק של מפריטים אחרים, כלומר האם אתם מצמידים אליה ספרים, או נותנים לה קצת מרחב כדי שיהיה לה את המקום שלה – margin

נראה זאת בתמונה הבאה בצורה ברורה:

התמונה נלקחה מהכתובת הבאה:

אז כאשר נרצה לעצב אלמנט בדף אנו נרצה להתייחס ל4 הנק׳ הללו.

דרך טובה לראות איך זה נראה בפועל:

תכנסו לאתר מסוים ותלחצו על f12 וייפתח לכם חלון קטן עם הפרטים על הדף. לדוגמא נלחץ על f12 ביוטיוב:

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

אז נמשיך להסביר את הרעיון של ה׳קופסא׳:

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

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

אז ראשית ניצור div ריק באופן הבא:

וניצור בCSS סלקטור של הdiv, שעדיין אין לו תכונות:

וכעת נתחיל להוסיף לו תכונות:

אורך ורוחב

אנו ננצל הזדמנות זאת על מנת ללמוד על האורך והרוחב של האלמנטים. זה דבר שלא דיברנו עליו, אבל זה זמן טוב.

נגדיר את האורך והרוחב של הdiv. נעשה זאת בעזרת המאפיינים: height, width:

כרגע הגובה יהיה 500 פיקסלים והרוחב יהיה 500 פיקסלים.

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

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

משימה:

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

border – הגבול

הגבול של הdiv הוא בעצם המסגרת עצמה.

אם נרצה להגדיר מאפיינים לגבול נשתמש במאפיין: border.

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

סוג המסגרת:

המאפיין של סוג המסגרת נקרא border-style.

נראה 2 סוגים.

מסגרת שלימה: הערך של המאפיין – solid.

מסגרת מנוקדת: הערך של המאפיין – dotted.

לדוגמא: (הצבע bisque הוא צבע שמוגדר בשפה..)

עובי המסגרת:

המאפיין של עובי המסגרת נקרא border-width.

הערך של העובי יהיה בפיקסלים.

לדוגמא:

(יש גם אפשרות להגדיר את העובי של כל צד בנפרד)

צבע המסגרת:

המאפיין של עובי המסגרת נקרא border-colo.

כמו תמיד – הערך פשוט יהיה שם של צבע.

לדוגמא:

רגע, בואו ניקח רגע נשימה לפני שממשיכים.

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

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

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

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

הpadding כמו שאמרנו, זה המרחק של האלמנט מהגבול שלו.

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

אני גם יכול להגדיר מכל צד של האלמנט מה יהיה המרחק מהגבול. שבצד אחד יהיה צמוד לגבול, וצד שני שיהיה מרחב גדול.

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

משימה:

צרו אלמנט div, ולתוכו תכניסו פסקה/כותרת כרצונכם.
בעזרת תגית הstyle תגדירו את מאפיינים של הdiv – הרקע, אורך, רוחב, border, padding, margin. כל פעם תוסיפו מאפיין אחד, ותשנו את ערכיו – לפחות 10 פעמים לכל מאפיין כדי ש׳תרגישו את זה בידיים׳.
זוכרים שיצרתם את הדף שבו סיפרתם על עצמכם? כעת תגדירו לו סטייל. תגדירו את הסטייל של הפסקאות, של הכותרות וכו׳.

סיכום

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

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

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

פרק הבא – סוגי סלקטורים

פרק 17 - מאפייני הסטייל המרכזיים

שלחו פרטים

שלחו פרטים

שלחו פרטים

שאלה מעולה :)