מחשבים, תכנות
CSS, פסאודו, פסאודו: רחף, ילד, היעד
על ידי שילוב של HTML ו- CSS, אתה יכול לשלוט באופן מוחלט את כל האלמנטים של דפי אינטרנט. עם סגנונות אתה יכול לשנות את המראה בקלות מכל בלוק או קו. לעתים קרובות מתכנת צריכה לבצע משימה מורכבת יותר - כדי לשנות את המראה של הרכיב עצמו הוא לא, כחלק נפרד או מדינה מסוימת. במקרה זה, על הסיוע של CSS פסאודו.
פסיאודו פועלים על אותו עיקרון כמו בכיתות הרגילות בבית סימון, אבל פיזית הם לא מציגים כאן. הם יכולים להיבחר על בסיס אלמנטים לא נכללים בפרטי המסמך, אשר לא לבחור בורר כרגיל. הנה דוגמה פשוטה: יש לך כפתור אדום, ואתה רוצה כאשר תרחף זה הפך כחול. תיאורטית, זה יכול להיות מיושם ב- JavaScript, אבל למה זה כל כך קשה? הרבה יותר נוח להשתמש : לרחף CSS. עם שלה העזרה שאתה יכול לתת שום יחידת הפרמטרים כי יופעלו רק כאשר סמן העכבר.
רשימת CSS-הכיתות פסאודו מתעדכנת באופן קבוע. אולי, בזמן שאתה קורא את החומר הזה, מספר חדש מופיע. כדי להתחיל, לשקול לאלה שהופיעו במפרט CSS3.
: ה- N-של-סוג
תניח שיש לך רשימה שבה אתה רוצה להשתמש בצבעים מתחלפים, כלומר, את השורה הראשונה היא, למשל, נכתב באותיות אדומות, והשני - .. כחול, אדום שוב שלישי, רביעי שוב בכחול. בעבר, היה עליך ליצור כיתות חדשות. פריסה של העבר יתווספו לכל אלמנט על מחלקת רשימה, ולאחר מכן שינתה שלהם המראה הסגנונות. זה לא היה יותר מדי בנוח ופריסה מזהמת.
עכשיו הכל יותר קל. השתמשו ממדרגה פסאודו CSS: nth-של-סוג. זה ייתן הזדמנות להשיג את האפקט החזותי הרצוי, מבלי לשנות דבר סימון. העיקרון הוא פשוט: אתה נכנסת בורר, ועל בסוגריים אחרי שם כתיבת נוסחא או מילת מפתח ימצא את האלמנטים הנדרשים. לדוגמה ,: המי יודע-של-סוג (אפילו) יהיה כל עוד אלמנטים, ו: nth-של-סוג (מוזר) - המוזרה. ישנם מספר רב של נוסחאות משמשים לשלוט במדויק. הסוגריים מציינים את המספר האפשרי - בסגנונות במקרה זה שיחול על אלמנט המדד אשר שווה למספר הזה.
: ה- N-ילד
CSS פסאודו-מחלקה זו על עקרון פעולה דומה לקודמו, אך בשונה זה עובד אך ורק עם הילדים של הפריט שנבחר. לדוגמה, אם אתה רוצה להשתמש בו כדי להתאים אישית את המראה של הוא ההורה
לקבלת שליטה מדויקת של הנוסחה ניתן להשתמש. הם די קשים למתחילים, אבל זה שווה קצת יותר לעומק את התחביר של איך הכל הופך להיות קל יותר. הפורמולות הן כדלקמן: An + B, שבו - הוא גורם, ו- B - קיזוז. לדוגמה, אם בסוגריים מצביעים n, הפסאודו-בוחר כל האלמנטים של הצאצא (כי זה לא צוין תנאים נוספים בצורה של א 'וב'). אם תציין את n + 2, כל הרכיבים מלבד הראשון (משום לקזז שווה לשני) ייבחר. והכי חשוב, הפעם כדי ללמוד הלכה למעשה. ניסוי עם רכיבים ילד ונוסחאות שונות.
: הילד האחרון
הכל פשוט. ילד CSS-כיתות פסאודו משמשות כדי לבחור פריט מסוים. זו בוחרת את הילד האחרון של רכיב האב. משמש לעתים קרובות למדי, למשל, כדי לבחור את השורה האחרונה בטבלה או להסיר הזחה מהגוש האחרון כדי למנוע העברתו לשורה הבאה.
: ה- N-אחרון-ילד
לפי עיקרון פעולה דומה המה יודע-הילד כאמור, אלא פועל בכיוון ההפוך, כלומר. א כשמשתמשים אלמנטים יעברו כלפי מעלה. אפשרות זו שימושית אם אתה צריך למצוא את הפריטים האחרונים.
אתה עשוי לחשוב כי פסאודו-השיעורים האלה-אלמנטים פסאודו CSS חסרי תועלת, שכן אתה יכול לעשות דברים היטב על ידי מעמדות קונבנציונליות. זה לא כל כך. : ילד המי יודע ,: nth- האחרון ילד ו אנלוגים שלהם נוח מאוד כאשר עובדים על פרויקטים גדולים - למשל, במקרים שבהם בלוק יש מספר עצום של ילדים. ידני לסדר כיתות ארוך וקשה.
מלא פסיאודו מדינה
מה אם אתה צריך לשנות את המראה של אלמנט במצב מסוים? במקרה זה מספק לחיצה פסאודו CSS, מצביע ומעשים אחרים. הבה נבחן אותם בפירוט.
: קישור
אזכור CSS פסאודו זה, לא כולם, אבל רק אלה שלא ביקרו עדיין. בחודש זה אתה יכול לציין סגנונות עבור אלמנטים , אשר המשתמש טרם עבר.
: בקר
אנלוגית ההתגלמות הקודמת, אשר שולטת רק קישורים כבר בקרו. שילוב שני אלה-כיתות פסאודו, אתה יכול להתאים אישית את המראה של תגי בדיוק כמו שאתה צריך. הערה, עם זאת, כי המדינות מחושבות עבור דפדפנים מסוימים משוחררות אחרי היסטורית טיפול.
פסאודו בכיתה: CSS היעד
אחד פסאודו-הכיתות המעניינות ביותר, אשר אם משתמשים בו במידה מסוימת מחליף את השימוש ב- JavaScript. זה מאפשר שליטה שמזהה ייכלל בשורת הכתובת של הדף. כן, בפעם הראשונה זה קשה להבין. נסו לנתח את הדוגמה.
נניח שאנו נמצאים div חוסם 3 דף עם id מסויים: ID1, ID2, ID3. יש לנו גם שלושה קישורים לערכים המקבילים href: ID1 #, # מזהה 2, ID3 #. כאשר אתה לוחץ על הקישור הראשון בשורת כתובת של דף לאחר הקישור המתאים id יהיה הדף עצמו.
CSS עבור כל div החוסם שצוין תצוגת נכס: אף, כי הוא, הם אינם מוצגים כברירת מחדל. אנו משתמשים יעד: div ולתת לו להציג נכס: בלוק. עכשיו, כאשר אתה לוחץ על הקישורים עם מסוים href, בלוקים עם id המקביל יוקצו display: block, ולכן, הם יתחילו להופיע בדף! כאשר אתה לוחץ על קישור כדי href = http: // אתר / מאמר / 319,683 /% E2% 80% 9D # ID1% E2% 80% 9D יחסום עם ID1, וכן הלאה ..
עדיין לא מבין כלום? נסה להתנסות. צור פריסת עמוד וסגנונות שתואר לעיל. כעבור כמה דקות יש לך הכל דמות גדולה החוצה.
Pseudo שניתן להחיל על כל אלמנט
רוב פסאודו-הקישורים המתוארת לעיל הנדרשים לתפקיד. עם זאת, לא כל האלמנטים צריכים . התגלמויות כמה יכול להיות מיושם על כל חלק של הדף לחלוטין.
- : פעיל משמש בסגנון אלמנטים שעליו המשתמש לוחץ שמאל העכבר כפתור;
- : רחף - CSS עבור אלמנטים שאליו המשתמש מרחף מעל;
- : פוקוס - עבור אותם חלקים של דף, אשר נמצא כעת פוקוס. פסאודו-מחלקה זו משמשת לעתים קרובות לעבוד עם טפסים. לדוגמה, אם אתה רוצה להדגיש שם משתמש קלט קו כאשר המבקר קובע את הסמן מעל מתחיל תווים חיוג.
זכור כי: פעיל תקפים רק בעת הבוערות. מיד לאחר סיום השמאלי בעכבר כפתור מוגדר בעזרת סגנונות ייעלמו והפריט יוצג כפי שהוא מוצג כברירת מחדל. ברוב המקרים, ברמה פסאודו זה רגיל לעבוד עם כפתורים. אתה יכול להגדיר אותם למספר רב של מדינות. לדוגמה, לחצן ברירת המחדל הוא כחול, לרחף - ירוק, לחיצה - אדום, וכו '...
כמובן, רק-כיתות פסאודו נתמכות באופן מלא על ידי דפדפנים מודרניים. לדוגמא, ב IE6 ו- 7 לא יוכלו להשתמש המוקד, ואת הרחף פעיל רק עבור עבודת התייחסות IE6. יש לקוות, אתה לא צריך לעבוד עם אלה הדפדפנים, אבל אם אתה עדיין התעורר הצורך, שימוש מותנה הערות.
פסאודו נוסף
מהאפשרויות המפורטות למעלה הרשימה לא נעצר שם. הודות מודרני CSS אתה יכול לבחור רק את הפריטים כלולים (: מופעל) או פשוט לחתוך החוצה (: נכים), רק מתגים ניכר תיבת ורדיו (: מסומן). תאר בקצרה עוד כמה אפשרויות שאתה יכול להשתמש עבור פקד יסודי יותר את המראה של תוכן.
- : רק-ילד - גלי ניתן להחיל את הסגנון לאלמנט המהווה את יסוד הילד היחיד;
- : Lang - לעבוד עם האלמנטים נתנו שפה באמצעות תכונת lang;
- : שורש - משמש כדי לבחור את אלמנט השורש. בהתאם לכך, כגון תג HTML הוא ;
- : לא - מאוד חזק כלי. היא מאפשרת לך להגביל את השימוש של סגנונות מסוימים של בוררים. הנה דוגמא: .blue-צבע: לא (תוחלת ). בורר כדי להחיל סגנון על כל האלמנטים עם כחול-צבע הכיתה, אם הם לא .
רשימה מלאה של כיתות פסאודו ולא ניתן למתוח על עמוד אחד. רוב האינטרנט מעצבים השימוש בפועל, רק חלק מהם, והעדיף לנהל את המצב עם JavaScript. כן, זה נוח, אבל יש כמה רגעים שבהם יותר יעיל תוצאות יושג קל, באמצעות המתאים פסאודו.
Similar articles
Trending Now