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

כך ניתן להשתמש באלמנטים פסאודו ב- CSS.

אלמנטים פסאודו נפוצים

יש רשימה מקיפה של אלמנטים פסאודו הזמינים כדי להקל על חייו של מפתח אתרים. חלק מאלמנטים פסאודו אלה כוללים:

• לפני
• לאחר
• רקע
• שורה ראשונה
• מכתב ראשון

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

דוגמאות מבנה פסאודו-אלמנטים

בורר:: אלמנט פסאודו {
/ * קוד css * /
} 

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

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

שימוש באלמנט ה- Pseudo לפני ב- CSS

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

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

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

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

שימוש בדוגמה לפני פסאודו-אלמנט

.דף נחיתה{
/ * מסדר את הטקסט בכיסוי התמונה * /
תצוגה: flex;
כיוון פלקס: עמוד;
justify-content: center;
פריטי יישור: מרכז;
יישור טקסט: מרכז;
/ * מגדיר את העמוד להתאמה לגדלי מסך שונים * /
גובה: 100vh;
}
.landingPage:: לפני {
תוֹכֶן:'';
/ * מייבא תמונה * /
רקע: url ( https://source.unsplash.com/_1EYIHRG014/1600x900)
מרכז / כיסוי ללא חזרה;
/ * מניח שכבת על מעל התמונה * /
אטימות: 0.4;
/ * הופך את התמונה לגלויה * /
עמדה: מוחלט;
למעלה: 0;
משמאל: 0;
רוחב: 100%;
גובה: 100%;
}

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

שימוש באלמנט הפסאודו לפני


זו תוצאה של שימוש בפסבדו-אלמנט לפני
לכיסוי ותמונה עם טקסט קריא.

זה יביא להצבת שכבת-על על התמונה ולהצגת טקסט ברור מעל, כפי שמוצג בתמונה למטה:

שימוש באלמנט Pseudo After ב- CSS

שימוש מעשי עבור אלמנט הפסאודו לאחר הוא סיוע ביצירת טופס HTML. מרבית הטפסים נוצרים עם קבוצה של שדות הדורשים נתונים לצורך הגשת הטופס בהצלחה.

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

שימוש בדוגמאת After Pseudo-element

.דרוש:: אחרי {
תוכן: '*';
צבע אדום;
} 

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

נכס התוכן

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

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

כעת תוכלו להשתמש באלמנטים פסאודו ב- CSS

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

10 דוגמאות פשוטות לקוד CSS שתוכלו ללמוד תוך 10 דקות

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

קרא הבא

על הסופר