5. צבע של הרקע ותמונות של הרקע בשימוש CSS
יש לנו דף סגנון נחמד וטהור, שדורש כמה חוקים.
מה עכשיו?
אחד הדברים הראשונים שאנו עושים כשאנו קובעים את מראה האתר ברשת, זה הצבת רקע. מסיבה נעלמת לעין, צבע המחדל של רקע דף האינטרנט הוא אפור מזעזע ( דעתכם בנוגע לאיכויות האסתטיות שלו יכולה להיות שונה.). נצטרך להיפטר מזה מיד ( אחרת המבקר באתר יחשוב שהוא פותח ב- 1994).
החוק הראשון שלנו
דף סגנון הוא פשוט שורה של חוקים, אשר מגדירים אלו מרכיבים מושפעים ע"י החוק ואיך המרכיבים המושפעים צריכים להיראות.
יצירת הבורר
במקרה שלנו אנחנו רוצים להשפיע על מראה הגוף - <BODY> בדף. כאשר יוצרים חוק, צריכים ליצור קודם בורר המציין לאילו מרכיבים החוק צריך להיות מיושם. למרכיבים פשוטים, כלומר, כל מרכיבי HTML, כמו:
<BODY>,<P>,<A>,<LI> , וכולי,הבורר הוא פשוט מאוד, פשוט שם הרכיב ללא הסוגריים המחודדים.
כך :
הבורר למרכיבים <P> הוא P
הבורר למרכיבים <A> הוא A
הבורר למרכיבים <LI> הוא LI
בוחן פתע 1:
מהו הבורר עבור <BODY>?
יצירת הגדרות
עכשיו שבחרנו את הגוף בעזרת BODY (ניחשתם את התשובה, נכון?), אנו צריכים לסיים את יצירת החוק ולהגדיר לדפדפן איך צריך לצייר או לכתוב את זה. במקרה שלפנינו, אנו צריכים להציב את צבע הרקע בערך מסוים. זה אחד החלקים הקשים בדפי סגנון: מאגרים עצומים של זיכרון. יש עשרות הגדרות שיכולות לקחת כל מיני ערכים שונים. בחלק האחרון של השיעורים האלה, הוספתי כמה קישורים למשאבים שיכולים להקל קצת על החיים. בין אלה הפניות ברשת לכל ההגדרות והערכים האפשריים שלהן.
במקרה של צבע רקע להגדרה קוראים background-color . בואו ניתן לרקע צבע מימי נחמד, נניח #66CC66 . נותנים להגדרה ערך כאשר משתמשים בצורה התחבירית הבאה:
background-color: #66CC66 - ההגדרה והערך שלה מופרדים ע"י נקודתיים, ואז ע"י רווח. לבסוף, כל ההגדרות שמתקשרות לבורר מסוים, נסגרות בסוגריים, כדי ליצור חוק. במקרה זה,
BODY {background-color: #66CC99}
עכשיו יצרתם את החוק הראשון שלכם.
שימרו את דף הסגנון, ופיתחו את הדף שלכם באינטרנט (זה שיצרנו בשיעור האחרון) בדפדפן,
הרקע בצבע שבחרנו? אם לא, בדקו את הדברים הבאים:
יש לכם דפדפן גרסה 4 ?
האם דף הסגנון שלכם באותה תיקייה קובץ ה-HTML , ויש לו את השם המדויק core-style.css ?
האם התחביר שלכם נכון?
אם אתם משתמשים ב- Navigator האם ה- Javascript מופעל?
מבולבלים לגמרי? זכרו, אין שום בושה ומעט מאוד הוצאה בשימוש בעורך דפי סגנון גולשים..
תמונות רקע
בואו נתחכם מעט ונוסיף תמונת רקע. אנחנו גם נראה את הדוגמא הראשונה לכך שדפי סגנון נותנים לכם יותר מ-HTML פשוט כשהכל מקבל צורה מעוצבת ומסוגננת.
קודם נגדיר את תמונת הרקע, ואח"כ נביט במאפיינים הנוספים.
ל - BODY BODY (גוף) שלנו כבר יש הגדרה אחת, ואנחנו פשוט רוצים להוסיף לרשימה. הגדרת ה - background-image (תמונת רקע) נותנת לנו לקבוע את התמונה מאחורי מרכיב HTML (נכון, גם למרכיבים נוספים ולא רק ל-BODY יכול להיות רקע).
הגדרות נוספות לחוק מופיעות גם הן בסוגריים המסולסלים. כל הגדרה מופרדת מקודמתה ע"י נקודה ופסיק. כתובות URL מפורטות בדפי הסגנון בדרך מיוחדת: ע"י שימוש בתחביר הצורה, url(../gifs/body-bg.gif). Of course a relative or absolute URL is inside the brackets.כמובן ש -URL יחסי או מוחט נמצא בתוך הסוגריים. כך שהגדרת תמונת רקע מוגדרת ע"י
background-image: url(../gifs/body-bg.gif)
כדי לכלול את זה בחוק שיצרנו קודם, נשים את זה בתוך הסוגריים, ונפריד את שתי ההגדרות ע"י נקודה ופסיק.
BODY
{
background-color: #66CC99;
background-image: url(../gifs/body-bg.gif)
}
אנחנו יכולים להוסיף מרחב נייטרלי על מנת שניתן שיהיה קריא, משום שדפי סגנון מתעלמים מכל רווח שהוא לא הכרחי. לפני שנמשיך, תנו לי לציין שיש שיבוש רציני ב- Navigator 4 , מה שאומר שהדפדפן מתייחס ל-URL יחסי כאל URL יחסי לעמוד ( מסמך HTML) ולא לדף הסגנון. על מנת שתמונת הרקע תופיע גם ב- Navigator 4 וב- Explorer 4 , קובץ ה-HTML וקובץ דף הסגנון צריכים להיות באותה תיקייה, באותה רמה.
שימרו את דף הסגנון שלכם, וראו את הדף בעזרת הדפדפן.
יצרנו עכשיו חוק שנותן לגוף הדף צבע רקע ותמונת רקע. בואו נעיף מבט במאפיינים החדשים של דפי סגנון שעליהם רמזתי מוקדם יותר.
מעבר לריצוף
עם HTML, תמונות רקע מרצפות, כלומר, חוזרות על עצמן במאוזן ובמאונך בכל מרחב העמוד. דפי סגנון נותנים לכם הרבה יותר שליטה על הצגת תמונת הרקע. עם דפי סגנון, אתם יכולים להגדיר אם התמונה תופיע פעם אחת, או מרצפת - כמו תמונות רקע רגילות, או רק במאוזן או במאונך.
הגדרת ה- background-repeat (חזרת רקע) מגדירה איזו מהאפשרויות האלה תתקיים. Background-repeat (חזרת רקע) יכול לקחת את הערכים: no-repeat, repeat, repeat-x, repeat-y (סוגי חזרה שונים).
התמונה יכולה להופיע גם במיקום מסוים בעמוד (נניח במרכז, או בפינה השמאלית התחתונה של העמוד). הריצוף יכול להתחיל גם ממקום מוגדר ולא בהכרח מהפינה השמאלית העליונה. הגדרת ה- background-position קובעת את מיקום התמונה. background-position קצת יותר מסובכת, אבל למטרת יצירת תמונה במרכז פשוט נשתמש בערך מרכז מילת המפתח.
תרגיל 1 :
עכשיו, נסו ליצור הגדרות נוספות שייפרטו כיצד תמונת הרקע שלנו תחזור על עצמה ותמוקם.
זיכרו להפריד כל הגדרה חדשה מהקודמת בנקודה ופסיק. תמצאו תשובה לדוגמא בסוף השיעור הזה.
הערה מיוחדת :
background-position לא נתמכת עדיין ע"י Netscape Navigator . התמונה ממוקמת תמיד בפינה השמאלית העליונה של העמוד. אבל background-repeat דווקא עובד.
שתי ההגדרות האלה עובדות ב- IE4 .
שימרו את דף הסגנון שלכם וראו את עבודתכם בדפדפן
מה למדנו בשעה הזאת?
הדבר החשוב ביותר שלמדנו הוא איך להגדיר חוקים. החוק מורכב מבורר (במקרה זה למדנו על בוררי מרכיבי HTML, בקרוב נלמד על אחרים) וסידרה של הגדרות. בדרך, למדנו על הגדרות רקע אפשריות בדפי סגנון. וקיבלנו מידע חשוב על כך שלא הכל מושלם בעולם תמיכת דפי הסגנון בדפדפנים.
הדבר הבא
עכשיו,נלמד על טקסט, הגדרת סגנון- מחדל לעמוד ויצירת כותרות.
תשובה לתרגיל 1 :
נמציב את תמונת הרקע במרכז ועושה כך שהיא לא תחזור על עצמה. זה נותן הרגשה של סימן מים :
BODY
{
background-color: #66CC99;
background-image: url(../gifs/body-bg.gif)
background-repeat: no-repeat;
background-position: center
}
|
