שיעור שישה עשר- style

פרק 16 - style

הקדמה

תקשיבו,שאתם מתקדמים אין כמוכם בעולם..

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

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

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

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

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

אבל האמת שלCSS יש הרבה יותר מה להציע לנו. בעזרת CSS, יש לנו שליטה מלאה על איך ייראה הדף שלנו.

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

שנתחיל?

איפה כותבים? דרך ראשונה

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

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

לדוגמא יצרנו פסקה עם רקע:

שימו לב שזו תבנית מאוד ברורה: style בשביל להגדיר שזה CSS (כמו שscript אמר שזה ג׳אוהסקריפט), לאחר מכן איזה מאפיין שאנו רוצים להגדיר, במקרה זה background (שזה הרקע) ואחריה הגדרנו את הערך של המאפייןֿ, במקרה זה איזה צבע. כמובן שבפרק זה נראה עוד סוגי מאפיינים כאמור.

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

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

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

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

דרך שניה

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

אנחנו יכולים תחת התגית של הhead (עד עכשיו השתמשנו בה רק עבור הtitle שהגדיר את השם של הדף, זוכרים? ), להגדיר תגית חדשה: style.

בתוך התגית של הstyle אנו נגדיר את המאפיינים והתכונות של כל האלמנטים שנרצה.

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

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

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

איך זה נראה בפועל

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

נתחיל בהכי פשוט, ראשית ניצור את התגית של הstyle בתוך הhead:

הגדרות לפי סוג של אלמנט

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

לדוגמא: נגדיר שכל הפסקאות בדף יהיו בצבע ירוק:

הגדרת הסטייל מורכבת מ3 חלקים (לפי החיצים):

1. הסלקטור – הselector.

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

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

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

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

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

3. הערך של המאפיין: המאפיין הוא צבע: אז בערך צריך להיות איזה צבע. (לכל מאפיין ניתן ערך בהתאם לסוג שלו. למאפיין של גובה – ניתן ערך של מספרי של מרחק)

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

בואו נוסיף לדוגמא עוד חלק קטן, רק כדי שנקבל עוד טיפה מושג:

כאן פשוט הוספנו עוד מאפיין: הרקע של הפסקאות.

סיכום

פגשנו דרך חדשה שבה אפשר להגדיר את הסטייל של האלמנטים.

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

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

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

פרק הבא: מאפייני הסטייל המרכזיים

פרק 16 - style

כל הזכויות שמורות לבנימין טק

אבל עזבו זכויות, אנחנו בעיקר מרגישים מחוייבות לעודד פה בבנימין חדשנות ויזמות בראש קהילתי נעים ומזמין :)

שלחו פרטים

שלחו פרטים

שלחו פרטים

שאלה מעולה :)