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> הוא הקובע מבין שניהם והאחרון בקוד מהסוג הזה קובע, לכן צבע הרקע יהיה אפור.