מאפיין CSS width מגדיר את רוחב אזור התוכן של האלמנט. אזור זה הוא הרווח בין הגבול, הריפוד והשוליים של אלמנט. יתר על כן, מאפיין רוחב CSS עם הערך ' התאמה-תוכן ” יתאים את רוחב האלמנט בהתאם לתוכן.
מחקר זה יסביר את מאפיין הרוחב של ה-CSS עם הערך התאמה-תוכן.
כיצד להשתמש במאפיין רוחב CSS עם ערך התאמה-תוכן?
לצורך השימוש במאפיין רוחב CSS עם ערך התאמה לתוכן, בדוק את התחביר הנתון:
רוחב: התאמה-תוכן
דוגמא
ב-HTML, הוסף שלושה רכיבי div עם אותו שם מחלקה ' קופסא ' ושלושה כיתות שונות ' צבע-1 ', ' צבע-2 ', ו' צבע-3 ', בהתאמה. הוסף רכיב
בתוך כל div כדי להוסיף תוכן לדף האינטרנט:
< div מעמד = 'צבע קופסה-1' >
< ע > תוכן התאמת רוחב CSS ע >
div >
< div מעמד = 'צבע קופסה-2' >
< ע > שלום עולם ! ע >
div >
< div מעמד = 'צבע קופסה-3' >
< ע > עבודת צוות מתחילה בבניית אמון. אנחנו צוות שעובד ל משימה משותפת. ע >
div >
הנה הפלט של קוד ה-HTML:
עד כה, דנו בדף HTML. כעת, בסעיף הבא, ניישם סגנונות CSS שונים על רכיבי HTML כדי לגרום להם להיראות טוב יותר. בדוגמה המתמשכת, נבדוק את ההתנהגות של ' רוֹחַב 'נכס בעל הערך' תוכן התאמה ' ב-CSS.
סגנון 'קופסה' div
.קופסא {רוחב: התאמה-תוכן;
גובה: 50 פיקסלים;
צבע: Ghostwhite;
ריפוד: 6 פיקסלים;
שוליים: 2px;
גודל גופן: 18px;
}
ה ' .קופסא ' מתייחס לתיבת הכיתה div. להלן המאפיינים המוחלים עליו:
-
- ' רוֹחַב 'נכס עם הערך' תוכן התאמה ' משתמש בשטח הפנוי, אך הוא לא יחרוג מהתוכן.
- ' גוֹבַה ' הוא התכונה שקובעת את גובה האלמנט.
- ' צֶבַע ' מגדיר את צבע הגופן של האלמנט.
- ' ריפוד 'מאפיין מייצר מרחב בתוך הגבול של האלמנט או סביב התוכן.
- ' שולים ' קובע את החלל מסביב לאלמנט.
- ' גודל גופן ' המאפיין קובע את גודל הגופן.
סגנון 'color-1' div
.צֶבַע- 1 {צבע רקע: #00ABB3;
}
ה ' צבע רקע המאפיין מוגדר ל' .color-1 ' div.
סגנון 'צבע-2' div
.צֶבַע- 2 {צבע רקע: #083AA9;
}
סגנון 'צבע-3' div
צבע רקע: #4C6793;
}
ניתן לראות כי רוחב האלמנט מוגדר שווה לתוכן:
זה מצוין! למדנו בהצלחה את השימוש ב-CSS ' רוֹחַב 'נכס עם הערך' התאמה-תוכן '.
סיכום
מאפיין ה-CSS width מאפשר לנו להשתמש במספר ערכים. ערכים אלה הם באחוזים, פיקסלים או יותר. כדי להגדיר אותו בהתאם לתוכן, ' התאמה-תוכן ניתן להגדיר ערך. פוסט זה תיאר את מאפיין הרוחב של ה-CSS עם הערך התאמה-תוכן עם הדגמה מעשית.