CSS: אלמנטים פסאודו וכיתות פסאודו

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

מה זה?

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

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

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

אחרי: אחרי

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

כולם, כנראה, ראו לפחות פעם אחתפרסומים של פרסומים, ולאחר מכן את המילים: "חדשנות", "חדש" או "הלם", "מועדפים", "הטוב ביותר", "סופר", וכו 'אובייקטים אלה צוינו באמצעות CSS לאחר פסאודו אלמנט.

כדי ליצור מיקום כזה, עליך להוסיף את הקוד הבא לגיליון סגנונות מדורגים:

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

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

לפני: לפני

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

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

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

אפוס סאגה: הראשון

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

זה אלמנט pseudo CSS יש שני מאפיינים - קו ומכתב:

• מכתב - משנה את האות הראשונה של קטע זה של הטקסט, אלאליו הוא הוסיף. לכן, הוא יוצר טיפת טיפה - אלמנט שבו הבסיס הוא מספר שורות נמוך יחסית לטקסט הראשי. כדי להגדיר פרמטר זה בגיליון סגנונות מדורגים, עליך להגדיר את המאפיינים עבור הפסקה. לדוגמה, P: אות ראשונה {***} - וכבר בין הסוגריים מציינים את כל הדרושפרמטרים כגון צבע, גופן, גודל. אם האות הראשונה היא ליצור רק עבור הפסקה הראשונה, אז מחלקה חדשה נוצרת (בדיוק כמו בדוגמה עם חדש: אחרי).
• קו - עמדה זו משנה לחלוטין את השורה הראשונהפסקה. זה מאוד נוח לשימוש בפרסומים מדעיים, אם אתה צריך להדגיש מידע חשוב. זה כתוב כמו דוגמאות אחרות. אבל כאן חשוב לזכור שהפסאודו-אלמנט אינו בוחר משפט, אלא חוט. בהתאם לדפדפן שבו המשתמש משתמש, השורה הראשונה עשויה להיות ארוכה יותר או קצרה יותר, לכן חשוב לוודא כי הבחירה הזו לא נראית מגוחכת. זה היה עבור מקרים כאלה כי אלמנט פסאודו של השבר שורה נוצר ב- CSS.

שורה חדשה

למעשה, אלמנט זה משמש לעתים נדירות, כיזה בהצלחה מחליף את התג. עם זאת, ישנם מצבים שבהם יש צורך לציין שורה הפסקה על ידי אלמנטים פסאודו. למטרות אלה, אתה יכול להשתמש בו לאחר. לשם כך, הקוד הבא נכתב: לאחר {content: "A"; white-space: pre;}. שם הכיתוב צריך להיכתב בין סוגריים של תג הפתיחה, מיד עם סגירתו, מעבר השורה עוקב אחריו.

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

תחביר פסבדו-תחביר

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

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

• בורר: Pseudo-class {מאפייני סגנון: צבע, גודל, כניסה, מיקום וכו '}

שיעורים אלה ניתן לחלק לשלוש קבוצות עיקריות:

• אלה הקובעים את מצבו של האלמנט;
• אלה השייכים לאלמנטים פסאודו;
• מעמדות פיקטיביים המגדירים את שפת התוכן.

פסאודו-מעמדות ומצב אלמנטים

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

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

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

במיוחד עבור אלמנטים pseudo CSS

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

• ב: ילד ראשון {color: red; }

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

כמו כן : ילד ראשון השתמש כדי להסיר את הכניסה בפסקה הראשונה, ולאחר מכן במקום צבע: אדום; יהיה צורך לכתוב text-indent: 0;, ו- B מוחלף על ידי P (מציין גם את התג שאחראי לתחילת הפיסקה).

שפת תוכן

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

• שם המחלקה: lang (שפה) {מאפייני טקסט (צבע, גופן, תצוגה וכו ')}

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

מסקנות

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