בורר תכונות CSS3 מיקוד סוג הקובץ
ה בוררי תכונות היא תכונה שימושית מאוד כדי לבחור רכיב מבלי להוסיף מיותר id או שיעורים. כל עוד אלמנט ממוקד יש תכונה כמו href, src ו הקלד אנחנו לא צריכים לעשות זאת.
סלקטורים תכונה למעשה היו מסביב מאז CSS 2.1, ועכשיו עם כמה סוגים נוספים של בוררי תכונות שנוספו במפרטי CSS3, אנו יכולים למקד את התכונה של האלמנט אפילו ביתר פירוט.
בנוסף, במאמר זה, אנחנו הולכים להשתמש באחד התחביר כדי לבחור את סוג קובץ זה מוכנס כחלק מהערך של התכונה.
תחביר ותמיכה בדפדפן
ה סוג קובץ הוא תמיד בסוף שם הקובץ. אז, כדי לבחור את זה סוג קובץ אנו יכולים להשתמש בתחביר הבא [attr $ = "value"]. תחביר זה משתמש $ = אופרטור שיכוון לסוף ערך המאפיין, לדוגמה:
[href $ = "pdf"]: לפני background: url ('... /images/document-pdf-text.png') ללא חזרה; קטע הקוד שלמעלה יבחר כל קישור שאליו מסתיים ערך המאפיין .PDF והוסף סמל של Word-document ב- :לפני אלמנט פסאודו.
מקורYou אייקונים פוגה
אמנם זהו ניצול נפוץ של בורר זה, אנחנו בהחלט יכולים ללכת מעבר לזה.
לגבי תאימות דפדפן; אם כי תחביר זה מוצג באופן רשמי כמפרט CSS3, הוא למעשה נתמך מאז Internet Explorer 7, אז אתה יכול בבטחה ליישם את כל העיצובים שלך.
הדוגמה
לעולם לא תדע אם לא תנסה. אנחנו רק צריכים לנסות משהו חדש כדי לקבל הבנה טובה יותר של משהו שאנחנו לא מבינים עדיין. אז הנה, אנחנו הולכים להוכיח כיצד תחביר זה יכול להיות מועיל מאוד שימושי למקד אלמנט מסוים במבנה HTML שהיה פעם קשה ליישם רק באמצעות CSS רגיל.
להלן, יש לנו מבנה HTML5 לרשימה של שלוש תמונות עם הכיתוב שלה. זה רק לצורך הדגמה, הסימון שלך לא צריך להיות בדיוק כמו קטע הבא (למשל, ייתכן שיהיה רק תמונה אחת או אפילו שלוש תמונות נוספות), אבל הנקודה היא שאתה יודע איך זה תחביר ניתן להחיל מבנה HTML מסוים.
-
jpg -
png -
gif
לכל אחת מהתמונות המפורטות למעלה יש את הפורמטים או התוספים הבאים, jpg, png, ו gif. יש להם גם כיתוב המייצג את הרחבת התמונה; כיתוב זה יפעל כתווית התמונה.
אז, הנה התוכנית, אנחנו הולכים לתת צבעי רקע שונים עבור הכיתוב עבור כל הרחבה תמונה שונה. תמונת JPG תקבל ירוק צבע הכיתוב, PNG יקבלו כחול, ולבסוף את gif תקבל סגול.
ראשית, בואו להגדיר את המיקום של הדמות תג יחסית, כי אנחנו הולכים לחול מוחלטת מיקום עבור הכיתוב.
צורה/ למצב: יחסית;
הוסף מעט קישוט לתמונות עם גבולות וצללים.
img border: 5px solid #ccc; -webkit-box-shadow: 1px 1px 3px 0px rgba (0, 0, 0, .5); box-shadow: 1px 1px 3px 0px rgba (0, 0, 0, .5);
ואז, אנו קובעים את סגנון ברירת המחדל ואת המיקום עבור הכיתוב. הכיתוב או התווית של התמונה יהיו בגודל 50 פיקסלים.
img + figcaption color: #fff; תפקיד מוחלט top you01; .. you רוחב: 50px; גובה: 50px; line-height: 50px; text-align: center;
עכשיו הגיע הזמן להוסיף את צבע הרקע. לשם כך, אנו יכולים לשלב את בורר התכונות עם בורר האחים הסמוך, +.
img [src $ = ". jpg"] + figcaption background-color: # a8b700;
קטע הקוד שלמעלה ימקד לכל תמונה כאשר מאפיין המקור מסתיים ב- .jpg, אז בורר סמוכים ימצאו את האלמנט ליד זה. במקרה זה איור תתווסף עם # a8b700 צבע רקע.
והנה כל הקודים עבור שאר הפורמטים של התמונות, .png ו- .gif.
img [src $ = ". png"] + Picturecaption background-color: # 389abe; img [src $ = ". gif"] + figcaption background-color: # 8960a7;
עכשיו, בואו לראות איך זה מתברר לחיות מתוך הקישור הדגמה למטה, או אחר אתה יכול להוריד את המקור כדי לבחון אותו באופן לא מקוון.
- הדגמה
- הורד מקור
מקורות תמונה הם כדלקמן: MacPro 1, MacPro 2 ו MacPro 3
סיכום
אנו מקווים שתוכל לראות את הצד האלגנטי של הסטיילינג באמצעות בורר מיוחד, כמו מה שניסינו להדגים למעלה באמצעות בורר התכונות. אז, בפעם הבאה שאתה מעצב את ה- HTML שלך, אנו ממליצים לך לעשות קצת מחקר על אם הסטיילינג שלך יכול להיות מיושם באמצעות בורר מיוחד, ולא להרוס את הסימון שלך מובנים כראוי עם תוספת שיעורים או id.
יש למעשה שני בוררים חדשים מסוג זה אשר אנו יכסה את ההודעות הבאות, אז תישאר מכוון.
