CSS/תחביר כללי

מתוך ויקיספר, אוסף ספרי הלימוד והמדריכים החופשי.

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

[עריכה] תחביר כללי

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

table { background-color: grey; }

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

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

table {
  background-color: grey;
}

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

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

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

שימו לב גם לדרך בה קבענו את גודל הטקסט: בתג <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 {
  color: red;
}

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

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

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

[עריכה] id

מה תעשו כאשר תרצו לקבוע הגדרות CSS לפריט המופיע רק פעם אחת בדף - סרגל ניווט, למשל. סביר להניח שתעשו שימוש בתגים כמו <div> או <table>. במידה ותנסו לעצב אותם באמצעות גליון CSS, תאלצו להחיל את ההגדרות על כל פריטי ה־<div> או ה־<table>, וזה לא מה שברצונכם לעשות. כדי לעצב פריט ספיציפי, תשתמשו ככל הנראה בפרמטר 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 המסומן ב־id="nav" ועל כל תג שיסומן ב־id="content":

table, div#nav, #content {
.
.

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

table#content a {
.
.

[עריכה] שימושים אחרים

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

[עריכה] class

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

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

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

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

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

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

.redLink {
  color: red;
}

אין אפשרות לגשת לקבוצת תגים בעלי class משותף באמצעות JavaScript.

[עריכה] תרגול

• תרגילים