CSS/תחביר כללי/תרגילים: הבדלים בין גרסאות בדף
תוכן שנמחק תוכן שנוסף
מ קישורים |
מ הכנסת התשובות לדף השאלות + הוספת תשובה |
||
שורה 1:
בדף זה 5 שאלות בנושא '''[[CSS/תחביר כללי|תחביר CSS]]'''
== שאלה 1 ==
בדף HTML העושה שימוש בגיליון ה־CSS הבא, איזה טקסט ייכתב בגופן גדול יותר: זה הנמצא בטבלה או זה הנמצא בכותרת?
<pre style="direction: ltr;">
table {
font-size: 50px;
שורה 13 ⟵ 14:
</pre>
{{מוסתר|התשובה|2=
גודלה של כל אות המופיעה בטבלה יהיה 50 פיקסל, בעוד שגודל כל אות בכותרת יהיה 100 פיקסל. לפיכך, הטקסט ב'''כותרת''' יהיה גדול יותר.
}}
== שאלה 2 ==
בדף HTML העושה שימוש בגיליון ה־CSS הבא, איזה טקסט ייכתב בגופן גדול יותר: זה הנמצא בטבלה או זה הנמצא בכותרת?
<pre
table {
font-size: 50px;
שורה 25 ⟵ 29:
</pre>
{{מוסתר|התשובה|2=
שאלה זו זהה לשאלה הקודמת, אלא שהפעם אנו דואגים גם לגודלן של כותרות המקוננות בתוך טבלאות. במציאות, אגב, אין בכך צורך.
}}
== שאלה 3 ==
בדף HTML העושה שימוש בגיליון ה־CSS הבא, איזה טקסט ייכתב בגופן גדול יותר: זה הנמצא בטבלה או זה הנמצא בכותרת?
<pre
table {
font-size: 50px;
שורה 37 ⟵ 44:
</pre>
{{מוסתר|התשובה|2=
שאלה זו זהה לשאלה 2, אלא שהפעם לא מתייחסים לכל טבלה, אלא לטבלה ספיציפית. חשוב לציין שמבחינת התוצאה הסופית המופיעה בדף ה־HTML, אין כל הבדל בין שלושת גליון העיצוב הללו.
}}
== שאלה 4 ==
מה יהיה צבע הגופן של כל אחד מהקישורים שבדף ה־HTML הבא?
<pre
<html>
.
שורה 59 ⟵ 69:
</pre>
<pre
a.nav-links {
color: blue;
שורה 77 ⟵ 87:
</pre>
{{מוסתר|התשובה|2=
נתחיל בקישור הראשון: אנו יכולים לראות שה־class שלו הוא "nav-links". בגיליון העיצוב אנו רואים כי קישורים המסומנים בצורה זו מופיעים בצבע כחול. לפיכך אנו יכולים להניח שצבע הקישור יהיה כחול. אלא שבהמשך ניתן לראות כי קישורים בעלי <code>class="nav-links"</code> הנמצאים בתוך כותרת מדרגה 3 יופיעו בצבע אדום. אם נמשיך לקרוא, נראה כי כל יתר ההתייחסויות אינן תקפות לגבי הקישור הספיציפי הזה, ועל כן התשובה היא '''אדום'''.
נעבור לקישור השני, שגם ה־class שלו נקבע כ־nav-links. אנו חוזרים וקוראים את גליון העיצוב, ושוב מניחים כי צבעו יהיה כחול. ההמשך, הנוגע לקישורים בתוך כותרות, אינו משפיע לגבי קישור זה, היות והוא לא נמצא בתוך כותרת, אך לא כך לגבי הקטע שאחריו: קישור המסומן ב־<code>class="nav-links"</code> הנמצא בתוך פסקה המצויה אף היא בתוך כל תג שהוא המסומן ב־<code>id="box1"</code> יופיע בצבע '''שחור'''. ההמשך אינו רלוונטי לגבי קישור ספיציפי זה. שימוש לב לכך שגם לו היינו מחליפים את <code><'''<nowiki>div</nowiki>''' id="box1"></code> ב־<code><'''<nowiki>table</nowiki>''' id="box1"></code>, לא היה כל הבדל, היות ובגיליון עצמו לא צוין שמו של התג שצריך להיות מסומן ב־<code>id="box1"</code>.
הקישור השלישי זהה לשני, אלא שהוא מקונן בתוך div שה־id שלו נקבע על "box2". לפיכך, הצבע שלו הוא '''ירוק'''. שימו לב לכך שכאן לו ניתן להחליף בין התגים, היות ומצויין במפורש שה־<code>id="box2"</code> חייב להיות משוייך ל־div.
}}
== שאלה 5 ==
מה יהיה צבעו של כל פרק בתוכן העניינים?
<pre
<html>
.
שורה 107 ⟵ 125:
</pre>
<pre
.table-of-contents div.colored-text {
color: black;
שורה 116 ⟵ 134:
}
</pre>
{{מוסתר|התשובה|2=
הפרק הראשון והפרק השלישי (chapter 1 ו- chapter 3) יהיו בצבע '''שחור''', והפרק השני והפרק הרביעי (chapter 2 ו- chapter 4) בצבע '''אדום'''. כל הקישורים מקוננים בתגית בקלאס <code>table-of-contents</code> וסוג התגית לא משפיע. הם גם כולם מקוננים בתוך תגית עם קלאס <code>colored-text</code> אך פה סוג התגית משנה, הפרקים הראשון והשלישי בתוך תגית <code>div</code> ולכן הם שחורים והפרקים השני והשלישי בתוך תגית <code>span</code> ולכן הם אדומים.
}}
| |||