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