CSS/שילוב עם HTML/תרגילים

בדף זה תתרגלו את הנושאים אותם למדתם בפרק CSS/שילוב עם HTML.

שאלה 1[עריכה]

הקטע הבא לקוח מתוך דף HTML ובו טבלה:

.
.
.
<head>
<link rel="stylesheet" type="text/css" href="../style/main.css">
<link rel="stylesheet" type="text/css" href="../style/style.css">
</head>

<body>
  <table style="...">
  .
  .
  </table>
</body>
.
.
.

בגליון main.css לא נכתב דבר, בגליון style.css נכתב שלטבלה צריך להיות רקע לבן, ובפרמטר ה־style נכתב שיש לטבלה רקע אפור. מה יהיה צבע הרקע של הטבלה?

תשובה

ב־CSS, פרמטר ה־style תמיד יגבר על הגדרות המוזנות באמצעות <link>. לכן, אין זה רלוונטי כלל שב־main.css אין תוכן. צבע הרקע של הטבלה יהיה אפור.

שאלה 2[עריכה]

נתון קטע הקוד:

.
.
.
<head>
<link rel="stylesheet" type="text/css" href="../style/main.css">
<link rel="stylesheet" type="text/css" href="../style/style.css">
</head>

<body>
  <table>
  .
  .
  </table>
</body>
.
.
.

בגליון main.css נקבע כי לטבלה יהיה צבע רקע אפור וב־style.css נכתב כי צבע הרקע יהיה לבן. מה יהיה צבע הרקע של הטבלה?

תשובה

כאשר נוצרת סתירה בין גליונות עיצוב מאותה קבוצה (במקרה זה גליונות המוזנים באמצעות <link>), תמיד יגבר הגליון המוזן אחרון, במקרה זה style.css. לכן, צבע הרקע של הטבלה יהיה לבן.

שאלה 3[עריכה]

נתון:

.
.
.
<head>
<link rel="stylesheet" type="text/css" href="../style/main.css">
<link rel="stylesheet" type="text/css" href="../style/style.css">
<style type="text/css">
@import "../style/main.css";
</style>
</head>

<body>
  <table>
  .
  .
  </table>
</body>
.
.
.

בגליון main.css נקבע כי לטבלה יהיה צבע רקע אפור, וב־style.css נכתב כי לטבלה יהיה צבע רקע לבן. מה יהיה צבע הרקע של הטבלה?

תשובה

הגליון style.css מופיע בשאלה אחרי main.css, ועל כן הוא יגבר עליו, על אף שהוא מוזן שנית מאוחר יותר (באמצעות ייבוא), משום ש־<link> תמיד גובר על ייבוא. על כן, צבע הטבלה יהיה לבן.

שאלה 4[עריכה]

בקטע הקוד

.
.
.
<head>
<link rel="stylesheet" type="text/css" href="../style/main.css">
<link rel="stylesheet" type="text/css" href="../style/style.css">
<style type="text/css">
@import "../style/style.css"
.
.
</style>
</head>

<body>
  <table>
  .
  .
  </table>
</body>
.
.
.

בגליון style.css נקבע כי לטבלה יהיה צבע רקע אפור, ב־main.css נקבע כי צבע הרקע יהיה לבן, ובין תגי ה־style נכתב כי צבע הרקע יהיה צהוב. מה יהיה צבע הרקע של הטבלה?

תשובה

את הוראת הייבוא אמנם שמים בין תגי <style>, אך תגים אלו כשלעצמם עדיין גוברים על תגי <link>. על כן צבע הטבלה יהיה צהוב.

שאלה 5[עריכה]

נתון

.
.
.
<head>
<link rel="stylesheet" type="text/css" href="../style/main.css">
<link rel="stylesheet" type="text/css" href="../style/style.css">
<style type="text/css">
@import "../style/style.css";
@import "../style/main.css";
</style>
</head>

<body>
  <table>
  .
  .
  </table>
</body>
.
.
.

ב־main.css נקבע כי צבע הרקע יהיה לבן. ב־style.css נקבע כי צבע הרקע יהיה אפור. מה יהיה צבע הרקע?

תשובה

גם בתגים <link> וגם בייבוא יש סתירה, התג <link> הוא הקובע מבין שניהם והאחרון בקוד מהסוג הזה קובע, לכן צבע הרקע יהיה אפור.