נעצב את האתר באמצעות CSS: נשנה צבעים וריווח, נוסיף מחלקת עיצוב ונראה את התוצאה בדפדפן אחרי כל שינוי.
מה נלמד
- להשתמש במחלקת עיצוב ולזהות selector.
- להבדיל בין color, background ו־padding.
- לראות תוצאה מיידית של שינוי CSS.
פותחים ומריצים
פתחו את תיקיית הפרויקט שבה עבדתם, שמרו את הקבצים והריצו את האתר. בדקו שהשינוי מהמפגש הקודם מופיע לפני שמנסים שינוי חדש.
מעבדה קטנה בעיצוב
פתחו wwwroot/css/site.css. הפעילו dotnet watch או Hot Reload. שנו רק את --forest, שמרו וצפו בתוצאה. אחר כך שנו padding והחזירו לערך נעים לעין. class="intro" מקשרת בין אזור HTML לכלל .intro. מחלקת CSS היא שם של כלל עיצוב; היא אינה מחלקה בשפת C#. משתני CSS מרכזים את פלטת הצבעים במקום אחד.
השינויים בקוד
RazorTaba/Pages/Index.cshtml
בקובץ הקיים בצעו את השינוי הבא. סימני + ו־- מציינים שינוי ואינם חלק מהקוד:
--- a/RazorTaba/Pages/Index.cshtml
+++ b/RazorTaba/Pages/Index.cshtml
@@ -2,8 +2,9 @@
@model IndexModel
@{
ViewData["Title"] = "בית";
}
+<section class="intro">
<h1>החיות שלי</h1>
<p>ברוכים הבאים לפינה שלי בטבע. נכיר חיות, נקרא עליהן ונלמד איך מטפלים בהן.</p>
<h2>מה תמצאו כאן?</h2>
<ul>
@@ -12,4 +13,5 @@
<li>המלצות שלי להיכרות מקרוב</li>
</ul>
<a href="https://he.wikipedia.org/wiki/שועל">לקריאה על שועלים</a>
<img src="~/images/fox.svg" alt="איור של שועל" width="180" />
+</section>
RazorTaba/wwwroot/css/site.css
בקובץ הקיים בצעו את השינוי הבא. סימני + ו־- מציינים שינוי ואינם חלק מהקוד:
--- a/RazorTaba/wwwroot/css/site.css
+++ b/RazorTaba/wwwroot/css/site.css
@@ -1,2 +1,14 @@
-/* נשנה את העיצוב בשיעור CSS. */
-body { font-family: Arial, sans-serif; }
+:root {
+ --forest: #173f35;
+ --leaf: #4d7058;
+ --paper: #f7f5ed;
+ --accent: #e6b66b;
+}
+body { margin: 0; font-family: Arial, sans-serif; color: var(--forest); background: var(--paper); line-height: 1.7; }
+a { color: var(--forest); text-underline-offset: .25em; }
+.site-header { background: #fff; border-bottom: 1px solid #d8dfd3; }
+.brand { font-size: 1.35rem; font-weight: 800; margin-inline-end: auto; text-decoration: none; }
+.intro { background: var(--forest); color: #fff; border-radius: 1.5rem; padding: 3rem; }
+.intro h1 { font-size: clamp(2rem, 6vw, 4rem); font-weight: 800; }
+.intro a { color: var(--accent); }
+footer { border-top: 1px solid #d8dfd3; margin-top: 3rem; color: var(--leaf); }
מריצים ובודקים
- הרקע בהיר ואזור הפתיחה כהה.
- שינוי –forest משנה את העיצוב בלי לשנות HTML.
- במסך צר הכותרת אינה חורגת.
משימה אישית ובדיקת הבנה
בחרו פלטה משלכם ושנו ריווח אחד. הסבירו איזה selector משפיע על הכותרת ואיזה על הקישורים. שמרו ובדקו את שינוי הצבעים לפני שמנסים שינוי נוסף.
בסיום שינוי: שמרו את הקבצים, בדקו את האתר בדפדפן והסבירו מה שיניתם. המשיכו להתנסות בתוכן ובעיצוב באותה תיקיית פרויקט.
AI יכול לעזור להבין הודעת שגיאה ולנפות תקלה. אתם אחראים לכתוב, לבדוק ולהסביר את הקוד; אין להפעיל סוכן שיכתוב את הפרויקט.