CSS מוטמע
חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 6 מתוך 76.
CSS מוטבע היא שיטה להוספת סגנונות CSS ישירות לרכיב HTML באמצעות המאפיין style. הגישה הזו מאפשרת לך להחיל סגנונות ייחודיים על רכיבים בודדים ללא צורך בגיליונות סגנונות חיצוניים או פנימיים. סגנונות מוטבעים שימושיים לביצוע שינויים מהירים וספציפיים בסגנון של רכיב יחיד.
הנה התחביר הבסיסי לשימוש ב-CSS מוטבע:
<element style="property: value;"></element><element>: רכיב ה-HTML שברצונך לעצב.style: מאפיין שמכיל את הצהרות ה-CSS.
property: מאפיין ה-CSS שברצונך להגדיר (למשל, color, font-size).value: הערך שברצונך להגדיר למאפיין (למשל, blue, 16px).
לדוגמה:
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>בדוגמה הזו, לרכיב הפסקה יש סגנונות מוטמעים שמגדירים את צבע הטקסט לכחול ואת גודל הגופן ל־16 פיקסלים. סגנונות אלה יחולו רק על רכיב הפסקה הספציפי הזה.
אתגר
קלניתן לך מסמך HTML עם אלמנט פסקה. השתמש ב-CSS מוטבע כדי לעצב את הפסקה באמצעות המאפיינים הבאים:
- הגדר את צבע הטקסט לאדום.
- הגדר את גודל הגופן ל-18 פיקסלים.
עיין בדוגמה בשיעור לקבלת הנחיות!
נסו בעצמכם
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
בחנו את עצמכםהשיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה עיצוב באמצעות CSS
תרגלו בעצמכם: Web אונליין