CSS/שילוב עם HTML
ישנן 2 דרכים להפעיל גליון CSS בדף HTML:
|
קישור עריכה
הדרך הראשונה לגרום לגליון CSS להשפיע על דף כלשהו היא להוסיף בחלק ה־<head> שלו תג <link>:
<link rel="stylesheet" type="text/css" href="style.css">
או בתחביר XHTML תקני:
<link rel="stylesheet" type="text/css" href="style.css" />
את "style.css" יש להחליף בשם הקובץ שבו תחזיקו את גליון ה־CSS.הקישור יכול להיות יחסי , או ישיר. תוכלו להשתמש במספר תגי <link> אם תרצו - אך בדרך-כלל מומלץ וכדאי להשתמש באחד שניים שלושה , ולא יותר. הרי כך אנו מאבדים את כל העיניין בCSS , גיליונות מעטים להרבה דפים.
על ידי יצירת קובץ CSS מרכזי וקישור אליו באמצעות קישור או ייבוא (ראו בהמשך), תוכלו לחסוך מאמץ כתיבה רב: לאחר שתקשרו את הקובץ לכל דפי האתר שלכם, שינוי בגליון ישתקף בכל הדפים המשתמשים בו, ולא תצטרכו לעבור על כל הדפים אחד אחרי השני ולשנות אותם.
ייבוא עריכה
ייבוא היא הדרך השנייה.
הכניסו את הטקסט הבא בין תגי ה־<style> (עליהם יוסבר להלן):
@import "style.css";
גם כאן ניתן להשתמש בקישור ישיר או יחסי, ולייבא יותר מקובץ אחד ( ניתן לייבא גם מתוך קובץ המקושר בקישור).
התג <style> עריכה
תג ה־<style> יבוא תמיד בתוך ה־<head> או בתוך ה-<body> והתחביר שלו הוא:
<style type="text/css">
.
.
.
.
</style>
בין שני התגים הללו יש לכתוב את הגדרות ה־CSS (עליהן נלמד בהמשך) כאילו היו כתובות בקובץ נפרד.
פרמטר style עריכה
כל מי שמשתמש ב־HTML או ב־XML יודע שלכל תג ניתן להצמיד פרמטרים. לדוגמה, בקטעי ה־HTML הבאים:
<table width="100%">
<div align="right">
table ו־div הם שמות תגים ו־width ו־align הם פרמטרים הנקשרים לתג. 100% ו־right הם ערכי הפרמטרים.
באופן דומה, ניתן להשתמש גם בפרמטר style:
<table style="...">
<div style="...">
הערכים שמקבל style הם הגדרות CSS לתג אליו נקשר הפרמטר.
דירוג עריכה
התכונה החשובה ביותר של CSS היא הדירוג. מאפיין הנכתב בין תגי <style>, למשל, עשוי להיות מבוטל אם פרמטר ה־style הרלוונטי יצור סתירה. לדוגמה: אם בין תגי ה־<style> קבענו שלטבלה מסוימת יהיה רקע שחור, אך בתג הטבלה עצמה קבענו רקע כחול, הרקע שהדפדפן יתן לטבלה יהיה כחול ולא שחור. כלומר, ישנו סדר מסוים של תעדוף:
- בעל העדיפות הגבוהה ביותר הוא פרמטר ה-style שבתוך הקוד של ה-html שמיצר את התוכן המשמעותי של הדף. הוא בעל עדיפות גבוהה יותר מתג ה-style הממוקם בתוך הbody או הhead.
- אחר-כך בא תג ה-<style> המיוחד, זה שממוקם בתוך הbody או הhead, או הייבוא. בתוך התג, מי שמצויין אחרון- הוא הקובע.
- בעל העדיפות הנמוכה ביותר הוא תג הקישור.
כלומר, מאפיינים בפרמטר style הם ה"חזקים ביותר", בעוד שקישורים הם ה"חלשים ביותר".
גם בתוך הקבוצות הנ"ל ישנו סדר מסוים. לדוגמה:
<link rel="stylesheet" type="text/css" href="general.css">
<link rel="stylesheet" type="text/css" href="main.css">
במידה ותתרחש סתירה בין גליונות העיצוב, הגליון האחרון ברשימה הוא זה שיקבע. לכן אם ב־general.css קבענו שלטבלה יהיה רקע אדום, אך ב־main.css נקבע צבע ירוק, הטבלה תוצג עם צבע רקע ירוק ולא אדום. אותו הדין גם בדוגמה הבאה:
@import "general.css";
@import "main.css";
אז מה עדיף? יתרונות וחסרונות עריכה
קישור/ייבוא :
יתרונות:
- בעזרת הקישור , ניתן יהיה לקבוע קובץ אחד או שניים בלבד , והם יחליטו על עיצוב האתר.
- לדעת המון מתכנתים הקישור הוא הנוח ביותר.
- הקישור מאוד ייעיל בעבודתו וחוסך כתיבה ומרץ רבים.
חסרונות:
- בגלל שזהו רק קובץ אחד , ויש אלמנטים שלא מופיעים באותו הדף , העלייה תהיה יותר איטית , בשל החיפוש בכל הקובץ.
- לעיתים יהיו לא מעט אלמנטים ואפילו די הרבה , שהם יחידים במינם , ואז העיצוב לא נוח, מה שמוביל אותנו - או להוסיף את התג style , או להשתמש בdiv ובspan (=מעין תיבות), מה שלפעמים הופך את הדף לבלתי קריא.
התג style
יתרונות:
- ממש נוח כאשר משנים את עיצוב התכנים ואת התכנים בו זמנית.
- קריא וניתן למעקב בקלות.
חסרונות:
- הדף יותר כבד.
- כך העיצוב לא יחול על כל הקבצים באתר , וגם לא על רובם - רק על הקובץ הספציפי הזה!
האלמנט style
יתרון:
- אין שימוש בעיצוב לחוד , מעצבים "על המקום".
חסרון:
- יש המון אלמנטים לעצב , מה שהופך את הקובץ ללא קריא , כבד , מתיש וצורך מרץ בעבודה.
| - | שילוב עם HTML תרגילים |
הפרק הבא: תחביר כללי |