css בגוף הקוד
אחרי המבוא המרגש שקראתם בדף הקודם, נתחיל בכל זאת מההתחלה, ונראה איך בכל זאת משתמשים בסגנונות בגוף הקוד, בצורה שאינה כ"כ שונה ממה שלמדנו עד עכשיו (למרות שיש הבדלים משמעותיים).עד היום, בשביל לשנות את הצבע של חלק מסוים בטקסט, היינו כותבים:
אבל אפשר גם לכתוב:
ולקבל את אותה תוצאה:
טקסט כחול
מה קרה כאן?
החלפנו את תג ה-font ב-span, והוספנו את המילה style.
<span></span> הם תגים שהמשמעות שלהם היא רק בהגדרת קטע בדף, ללא מעבר שורה. אם תכתבו אותם כך, איך שהם, אין להם שום משמעות. אבל אם תוסיפו להם style=" ", אז כל מה שביניהם יקבל את העיצוב שמוגדר ב-style, במקרה שלנו את הצבע הכחול.
תג דומה מאוד ל-span הוא div. <div></div> מאפשרים גם הם לתת עיצוב לטקסט או תוכן שנמצא ביניהם, אבל הם מתייחסים לעצמם בתור הקווים העליונים והתחתונים של מלבן או ריבוע: ברגע שנכתוב את ה-div הפותח, נעבור לשורה חדשה באופן אוטומטי, וכשנכתוב את ה-div הסוגר, נעבור שוב שורה.
<div style="color: blue;"> הוא עובר שורה ונהייה כחול. </div>
ושוב חוזר לקדמותו.
כאן מופיע טקסט רגיל עד שפתאום, ללא תג br,
אחרי שהבנו מה עושה ה-span וה-div, בואו נראה איך אפשר לשנות את התוכן שלהם:
אחרי המילה style, אפשר להוסיף כמה מאפיינים שרק רוצים. למשל, אפשר גם להגדיש את הטקסט, להגדיל אותו, לשים קו מתחתיו ולשנות לו את הפונט:
ו-
טקסט כחול
העקרון הוא פשוט: כותבים style="property: value; property: value;". את המילה property מחליפים במאפיין, כלומר את מה רוצים לעצב, ואת המילה value מחליפים בערך, כלומר איך רוצים לעצב את זה. בין המאפיין לערך נכתוב תמיד נקודותיים, ואחרי הערך, נקודה פסיק.
את העיצוב ע"י style אפשר להחיל על רב התגים הקיימים ב-html: אפשר על טבלה, תמונה, רשימה, לינקים, קווים מפרידים ועוד.
רשימה של מאפיינים וערכים ב-css תוכלו למצוא כאן. פשוט הציבו את המאפיין והערך הרצוי לכם במקום הנכון.
זוכרים שאמרתי ש-css פירושו התיעלות? בואו נעבור לשיעור הבא, ונראה איך אפשר באמת להתייעל.