אתגר סיכום #1
חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 29 מתוך 76.
אתגר
קלעכשיו, לאחר ששלטת בטכניקות שונות לעיצוב טקסט ורקעים באמצעות CSS, הגיע הזמן להעמיד את הידע שלך למבחן באתגר מקיף. תיישם את מה שלמדת על צבעים, קודי hex, ערכי RGB ושקיפות באמצעות RGBA כדי ליצור עיצוב מסוים.
ניתן לך מסמך HTML ובו כותרת (<h1>), פסקה (<p>) וחלוקה (<div>). המשימה שלך היא להשתמש במאפייני עיצוב הטקסט והרקע שלמדת כדי לעצב את הרכיבים האלה כך שיתאימו לעיצוב שמוצג בתמונה שלהלן:
פעל לפי השלבים הבאים:
- כתוב כלל CSS שמכוון לרכיב
<h1>. הגדר אתcolorל-white, אתbackground-colorל-#000080(כחול כהה), ואתtext-alignל-center. - כתוב כלל CSS שמכוון לרכיב
<p>. הגדר אתcolorל-#FFFFFF(לבן), אתbackground-colorל-rgba(0, 0, 0, 0.5)(שחור שקוף למחצה), ואתfont-sizeל-18px. - כתוב כלל CSS שמכוון לרכיב
<div>. הגדר אתbackground-colorל-rgba(237, 170, 26, 1)(צהוב זהוב), ואתcolorל-white.
נסו בעצמכם
<html>
<head>
<title>Recap Challenge #1</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<div>This is a division.</div>
</body>
</html>כל השיעורים ביחידה עיצוב באמצעות CSS
תרגלו בעצמכם: Web אונליין