כיצד להשתמש לפני ואחרי רכיבי פסאודו ב- CSS

כיצד להשתמש לפני ואחרי רכיבי פסאודו ב- CSS

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





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



כיצד להוסיף את לוח השיעורים ליומן Google

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

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





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

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

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


selector::pseudo-element{
/* css code */
}

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



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

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

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



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

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



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

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


.landingPage{
/* Arranges the text on the image overlay */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/*sets the page to adjust to different screen sizes*/
height: 100vh;
}
.landingPage::before{
content:'';
/*imports an image*/
background: url(https://source.unsplash.com/_1EYIHRG014/1600x900)
no-repeat center/cover;
/*places an overlay on top of the image*/
opacity: 0.4;
/*makes the image visible*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

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





This is the result of using the before pseudo-element
to overlay and image with readable text.


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

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

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

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

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


.required::after{
content: '*';
color: red;
}

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

אפליקציות גוגל פליי ב- Amazon Fire

נכס התוכן

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

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

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

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

לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל 10 דוגמאות קוד CSS פשוטות שתוכל ללמוד תוך 10 דקות

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

קרא הבא נושאים קשורים
  • תִכנוּת
  • עיצוב אתרים
  • CSS
על הסופר קדישא קין(פורסמו 21 מאמרים)

Kadeisha Kean היא מפתחת תוכנה מלאה וכותבת טכנית/טכנולוגית. יש לה את היכולת המובהקת לפשט כמה מהמושגים הטכנולוגיים המורכבים ביותר; לייצר חומר שניתן להבין אותו בקלות על ידי כל טירון טכנולוגי. היא נלהבת לכתוב, לפתח תוכנות מעניינות ולטייל ברחבי העולם (באמצעות סרטים דוקומנטריים).

עוד מ- Kadeisha Kean

הירשם לניוזלטר שלנו

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

לחצו כאן להרשמה