CSS/תחביר כללי

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

תחביר כללי

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

table { background-color: gray; }

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

צורה נוספת לכתיבת הקטע הקודם היא:

table {
  background-color: gray;
}

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

h1 {
  font-size: 120%;
  color: red;
}

כך מספיק לסמן כל כותרת ב־<h1>, ואין צורך להוסיף עוד כלום. מרגע שקישרנו בין דף ה־HTML לבין גליון ה־CSS, כל טקסט שנשים בין תגי <h1> יצבע באדום וייכתב בגופן גדול. בכך חסכנו מאמץ רב.

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

חשוב! שימו לב היטב לתחביר בו נכתבת כל הגדרה: [מציין] { [פרמטר]: [ערך]; } הקפידו על נקודה-פסיק אחרי, כלומר מימין, הערך.

הערות

הערות הן קטעים בדף מהם הדפדפן מתעלם כאשר הוא קורא את דף ה־CSS. הערות נכתבות בין סימן /* לסימן */, וניתן למקם אותן בכל מקום בדף. לדוגמה, בקטע הבא:

/*
צביעת והגדלת כותרות
*/

h1 {               /*  בחירת שם התג  */
  font-size: 120%;     /*  קביעת הגודל  */
  color: red;       /*  צבע אדום  */
}

הוספנו הערות המתעדות את מה שעשינו. כפי שאתם יכולים לראות, ניתן להוסיף הערה בשורה נפרדת או בהמשך שורה קיימת, וניתן להכניס אף יותר משורה אחת של הערות בין סימני ה־/* וה־*/.

אל תזלזלו בהערות! ישנם מתחילים שנתקעים בבעיה כאשר הם לא מבינים את הקוד אשר כתבו!

מציינים (selectors)

"וגם"

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

h1 {
  font-size: 120%;
  color: red;
}

a {
  font-size: 120%;
  color: red;
}

אך דרך יעילה יותר תהיה:

h1, a {  /*  הפסיק מסמן את המילה "וגם", כך שלמעשה מה שכתוב כאן הוא "כותרת וגם קישור"  */
  font-size: 120%;
  color: red;
}

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

קינון

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

h1  {
  color: red;
}

h1 a {  /*  שימו לב שכאן, בניגוד לדוגמה הקודמת, אין פסיק  */
  color: blue;
}

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

בהמשך נלמד על מציינים מתקדמים יותר, בפרק מציינים מתקדמים.

id

מה תעשו כאשר תרצו לקבוע הגדרות CSS לפריט המופיע רק פעם אחת בדף - סרגל ניווט, למשל? סביר להניח שתעשו שימוש בתגים כמו <div> או <table>. במידה ותנסו לעצב אותם באמצעות גליון CSS, תאלצו להחיל את ההגדרות על כל פריטי ה־<div> או ה־<table>, וזה לא מה שברצונכם לעשות. כדי לעצב פריט ספיציפי, תשתמשו ככל הנראה בפרמטר style (אשר אינו התג <style>).אך בצורה זו תאבדו את היתרון החשוב ביותר ב־CSS, בכך ששינוי בסרגל הניווט ידרוש מעבר ידני דף אחר דף.

כדי לגשת לפריט ספיציפי בדף שלכם, השתמשו בפרמטר "id", אותו ניתן לשייך לכל תג ב־HTML. לדוגמה, אם תרצו לתת לסרגל הניווט שלכם צבע גבול אפור:

.
.
.
<div id="nav">
.
.
.
</div>

גליון העיצוב יראה כך:

div#nav {   /* סימן ה־# מפריד בין שם התג לבין שם ה־id  */
  border-color: grey;
}

שימו לב שבמידה ותשנו בדף ה־HTML את ה־<div> לתג אחר, <table>, למשל, ההגדרות לא ישפיעו יותר. תאלצו לשנות את השורה:

div#nav {
.
.
.

לשורה:

table#nav {
.
.
.

כדי להמנע מבעיות מסוג זה, תוכלו לכתוב:

#nav {
.
.

כלומר, מבלי לציין את סוג התג אליו מוצמד ה־id.

ניתן לשלב מציינים יחד עם התייחסות ל־id. קטע הקוד הבא, למשל, יחיל הגדרות על כל טבלה, על div המסומן ב־<div ... id="nav" ...> ועל כל תג שיסומן ב־id="content":

table, div#nav, #content {
.
.

קטע הקוד הבא יחיל הגדרות על כל קישור המופיע בתוך טבלה שה־id שלה הוא "content":

table#content a {
.
.

שימושים אחרים

ניתן לגשת לאובייקטים ב־Javascript על פי ה־id שלהם באמצעות הפונקציה getElementById().

חשוב! אין להשתמש באותו id יותר מפעם אחת בדף.

class

class="..." הוא מאפיין בעל תכונות זהות לאלו של ה־id, אך ניתן להחיל אותו על יותר מתג אחד.

כדי ליצור קבוצה של קישורים שיופיעו בצבע אדום, למשל, נסמן כל אחד מהם ב־class="redLink":

.
.
.
<a href="..." title="..." class="redLink">
.
.
.

ונכתוב בגליון ה־CSS:

a.redLink {   /* סימן הנקודה מפריד בין שם התג לבין שם ה־class  */
  color: red;
}

כמו ב־id, קטע זה שקול לקטע:

.redLink {
  color: red;
}

כאשר ל־id השתמשנו בסולמית (#). ול־class בנקודה (.).

כדי לגשת לקבוצת תגים בעלי class משותף באמצעות JavaScript יש להשתמש במתודה document.getElementsByClassName.

תרגול

• תרגילים

הפרק הקודם: שילוב עם HTML

תחביר כללי תרגילים

הפרק הבא: טקסט