רוחב וגובה

חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 37 מתוך 76.

ב-CSS, המאפיינים width ו-height משמשים להגדרת המידות של אזור התוכן של רכיב. מאפיינים אלה חיוניים לשליטה בגודל ובפריסה של רכיבים בדפי האינטרנט שלך.

הנה התחביר הבסיסי לשימוש במאפיינים width ו־height:

selector {
    width: value;
    height: value;
}

width: רוחב אזור התוכן של הרכיב.

height: הגובה של אזור התוכן של הרכיב.

value: ערך הרוחב או הגובה הרצוי, שאפשר לציין בפיקסלים (px), ביחידות em (em), באחוזים (%) או ביחידות CSS תקינות אחרות. אפשר גם להשתמש במילת המפתח auto כדי לאפשר לדפדפן לחשב אוטומטית את הרוחב או הגובה על סמך התוכן.

לדוגמה:

div {
    width: 300px;
    height: 200px;
}

img {
    width: 100%;
    height: auto;
}

בדוגמה הזו, לכל רכיבי <div> יש רוחב של 300px וגובה של 200px, ואילו לכל רכיבי <img> יש רוחב שתופס 100% מרוחב רכיב האב שלהם וגובה שמחושב אוטומטית כדי לשמור על יחס הגובה-רוחב.

אתגר

קל

ניתן לך מסמך HTML עם חלוקה (<div>) ותמונה (<img>). המשימה שלך היא להשתמש במאפיינים width ו-height כדי להגדיר את המידות של הרכיבים האלה. פעל לפי השלבים הבאים:

כתוב כלל CSS שמכוון לרכיב <div>. הגדר את width ל-400px ואת height ל-250px.
כתוב כלל CSS שמכוון לרכיב <img>. הגדר את width ל-300px ואת height ל-auto.

נסו בעצמכם

<html>
<head>
    <title>Width and Height</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div style="border:2px solid black;">This is a division.</div>
    <img src="https://img.freepik.com/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-54865.jpg" alt="Image">
</body>
</html>