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

בדף זה 5 שאלות בנושא תחביר CSS.

שאלה 1 עריכה

בדף HTML העושה שימוש בגיליון ה־CSS הבא, איזה טקסט ייכתב בגופן גדול יותר: זה הנמצא בטבלה או זה הנמצא בכותרת?

table {
  font-size: 50px;
}

h1 {
  font-size: 100px;
}

התשובה

גודלה של כל אות המופיעה בטבלה יהיה 50 פיקסל, בעוד שגודל כל אות בכותרת יהיה 100 פיקסל. לפיכך, הטקסט בכותרת יהיה גדול יותר.

שאלה 2 עריכה

בדף HTML העושה שימוש בגיליון ה־CSS הבא, איזה טקסט ייכתב בגופן גדול יותר: זה הנמצא בטבלה או זה הנמצא בכותרת?

table {
  font-size: 50px;
}

h1, table h1 {
  font-size: 100px;
}

התשובה

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

שאלה 3 עריכה

בדף HTML העושה שימוש בגיליון ה־CSS הבא, איזה טקסט ייכתב בגופן גדול יותר: זה הנמצא בטבלה או זה הנמצא בכותרת?

table {
  font-size: 50px;
}

h1, table#nav h1 {
  font-size: 100px;
}

התשובה

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

שאלה 4 עריכה

מה יהיה צבע הגופן של כל אחד מהקישורים שבדף ה־HTML הבא?

<html>
.
.
.
  <div id="navigation-bar">
    <h3><a href="..." title="Main Page" class="nav-links">Main Page</a></h3>
    <div id="box1">
      <p><a href="..." title="link1" class="nav-links">link1</a></p>
    </div>
    <div id="box2">
      <p><a href="..." title="link2" class="nav-links">link2</a></p>
    </div>
  </div>
.
.
.
</html>

a.nav-links {
  color: blue;
}

div h3 a {
  color: red;
}

#box1 p .nav-links {
  color: black;
}

div#box2 p a.nav-links {
  color: green;
}

התשובה

נתחיל בקישור הראשון: אנו יכולים לראות שה־class שלו הוא "nav-links". בגיליון העיצוב אנו רואים כי קישורים המסומנים בצורה זו מופיעים בצבע כחול. לפיכך אנו יכולים להניח שצבע הקישור יהיה כחול. אלא שבהמשך ניתן לראות כי קישורים בעלי class="nav-links" הנמצאים בתוך כותרת מדרגה 3 יופיעו בצבע אדום. אם נמשיך לקרוא, נראה כי כל יתר ההתייחסויות אינן תקפות לגבי הקישור הספיציפי הזה, ועל כן התשובה היא אדום.

נעבור לקישור השני, שגם ה־class שלו נקבע כ־nav-links. אנו חוזרים וקוראים את גליון העיצוב, ושוב מניחים כי צבעו יהיה כחול. ההמשך, הנוגע לקישורים בתוך כותרות, אינו משפיע לגבי קישור זה, היות והוא לא נמצא בתוך כותרת, אך לא כך לגבי הקטע שאחריו: קישור המסומן ב־class="nav-links" הנמצא בתוך פסקה המצויה אף היא בתוך כל תג שהוא המסומן ב־id="box1"id="box1" יופיע בצבע שחור. ההמשך אינו רלוונטי לגבי קישור ספיציפי זה. שימוש לב לכך שגם לו היינו מחליפים את <div id="box1"> ב־<table id="box1">, לא היה כל הבדל, היות ובגיליון עצמו לא צוין שמו של התג שצריך להיות מסומן ב־id="box1".

הקישור השלישי זהה לשני, אלא שהוא מקונן בתוך div שה־id שלו נקבע על "box2". לפיכך, הצבע שלו הוא ירוק. שימו לב לכך שכאן לו ניתן להחליף בין התגים, היות ומצויין במפורש שה־id="box2" חייב להיות משוייך ל־div.

שאלה 5 עריכה

מה יהיה צבעו של כל פרק בתוכן העניינים?

<html>
.
.
.
  <table class="table-of-contents">
    <tr>
      <td>
        <div class="colored-text">Chapter 1</div>
      </td>
    </tr>
    <tr>
      <td>
        <span class="colored-text">Chapter 2</span>
      </td>
    </tr>
  </table>

  <div class="table-of-contents">
    <p><div class="colored-text">Chapter 3</div></p>
    <p><span class="colored-text">Chapter 4</span></p>
  </div>
.
.
.
</html>

.table-of-contents div.colored-text {
  color: black;
}

.table-of-contents span.colored-text {
  color: red;
}

התשובה

הפרק הראשון והפרק השלישי (chapter 1 ו- chapter 3) יהיו בצבע שחור, והפרק השני והפרק הרביעי (chapter 2 ו- chapter 4) בצבע אדום. כל הקישורים מקוננים בתגית בקלאס table-of-contents וסוג התגית לא משפיע. הם גם כולם מקוננים בתוך תגית עם קלאס colored-text אך פה סוג התגית משנה, הפרקים הראשון והשלישי בתוך תגית div ולכן הם שחורים והפרקים השני והשלישי בתוך תגית span ולכן הם אדומים.