סגנונות מתאר של CSS: לא רק גבול

ה CSS נכס מתאר הוא נכס מבלבל. כאשר אתה לומד על כך לראשונה, קשה להבין במה הוא שונה אפילו מרחוק מנכס הגבול. ה- W3C מסביר כי יש את ההבדלים הבאים:

  • מתאר לא תופס מקום.
  • קווי המתאר עשויים להיות לא מלבניים.

מתאר לא תופס מקום

אמירה זו כשלעצמה מבלבלת. כיצד אובייקט בדף האינטרנט שלך לא יכול לתפוס מקום בדף האינטרנט? אך אם אתה חושב שדף האינטרנט שלך הוא כמו בצל, כל פריט בדף עשוי להיות מרובד על גבי פריט אחר. מאפיין המתאר אינו תופס מקום מכיוון שהוא ממוקם תמיד על גבי תיבת האלמנט.

כאשר מתאר מוצב סביב אלמנט, אין לזה כל השפעה על אופן פריסת אותו אלמנט על הדף. זה לא משנה את גודל האלמנט או את המיקום שלו. אם תשים מתאר על אלמנט, זה ייקח את אותה כמות מקום כאילו לא היה לך מתאר של אותו אלמנט. זה לא נכון לגבי א גבול. גבול על אלמנט מתווסף לרוחב ולגובה החיצוני של האלמנט. אז אם היה לך תמונה ברוחב של 50 פיקסלים, עם גבול של 2 פיקסלים, זה היה לוקח 54 פיקסלים (2 פיקסלים לכל גבול צדדי). אותה תמונה עם קו מתאר של 2 פיקסלים תפנה רק 50 פיקסלים בעמוד שלך, המתאר יוצג מעל הקצה החיצוני של התמונה.

קווי מתאר עשויים להיות לא מלבניים

instagram viewer

לפני שתתחיל לחשוב "מגניב, עכשיו אני יכול לצייר מעגלים", תחשוב שוב. לאמירה זו יש משמעות שונה ממה שאתה יכול לחשוב. כשאתה שם גבול על אלמנט, הדפדפן מפרש את האלמנט כאילו היה תיבה מלבנית ענקית אחת. אם התיבה מתחלקת למספר שורות, הדפדפן פשוט משאיר את הקצוות פתוחים מכיוון שהתיבה אינה סגורה. זה כאילו שהדפדפן רואה את הגבול עם מסך רחב לאין שיעור - מספיק רחב כדי שגבול זה יהיה מלבן אחד רציף.

לעומת זאת, מאפיין המתאר לוקח בחשבון קצוות. אם אלמנט מתואר משתרע על פני מספר שורות, המתאר נסגר בסוף השורה ונפתח שוב בשורה הבאה. במידת האפשר, המתאר יישאר מחובר גם כן ויוצר צורה לא מלבנית.

שימושים במאפיין המתאר

אחד השימושים הטובים ביותר במאפיין המתאר הוא הדגשת מונחי חיפוש. אתרים רבים עושים זאת עם צבע רקע, אך תוכל גם להשתמש במאפיין המתאר ולא לדאוג להוסיף רווחים נוספים בדפים שלך.

מאפיין צבע המתאר מקבל את המונח "הפוך" שהופך את צבע המתאר להיפוך מהרקע הנוכחי. זה מאפשר לך להדגיש אלמנטים בדפי אינטרנט דינמיים מבלי שתצטרך לדעת מה משתמשים בצבעים.

אתה יכול גם להשתמש במאפיין המתאר כדי להסיר את הקו המקווקו סביב קישורים פעילים. מאמר זה מתוך טריקים של CSS מראה כיצד הסר את המתווה המקווקו.

instagram story viewer