אם אתה מחפש להחיל כללי סגנון על האתר שלך, אז בוררים הם המשאב המצוין. ישנם מספר סוגים של סלקטורים, חלקם פופולריים יותר. בשביל זה היום אנו מראים לך מה הם בוררי תכונות ב-CSS, כדי שתוכל להפיק את המרב מכלים אלה.
באמצעות CSS תוכלו להשתמש במספר אפשרויות שיעזרו לכם מאוד בהצגת האתר שלכם. בוררי תכונות הם ישמשו לתחום אלמנטים ולהקל על עבודת ההתאמה האישית. למרות שהנושא הזה יכול להיות מסובך עבור אנשים שאינם מקושרים אליו, למידה עליו יכולה לפתוח עבורך דלתות רבות.
מה המשמעות של CSS?
אם אתם מקושרים לעולם עיצוב אתרים, שמעתם את המונח הזה לעתים קרובות. גיליונות בסגנון מדורג (CSS) היא שפת תכנות המאפשרת ליצור ולשנות מסמך HTML במהירות ובקלות. המשמעות היא שזו שפה שבה ניתן לנהל את העיצוב, לבצע שינויים, הצגה, שיפורים וגם להתאים אישית את דפי האינטרנט. השם שלו נובע מהעובדה שהוא מאפשר לך לחשב מאפיינים שעברו בירושה מאחר על מספר גיליונות. בעיצוב אתרים זה נקרא מפל.
מה הם בוררי תכונות ב-CSS?
בוררי CSS הם הכלים שבהם אתה משתמש כדי להגדיר את הסגנון שאתה רוצה לתת לרכיבי ה-CSS שלך. ישנם סוגים רבים של בוררים בשפה זו, כל אחד עם תחביר ושימוש משלו. שימוש בכללי התכנות הנכונים עוזר לדפדפן להחיל מאפיינים מסוימים על אלמנטים שצוינו.
מצד, בוררי תכונות הם אחד מסוגי הבוררים שיש לנו ב-CSS. הם שימושיים מאוד, אם כי לפעמים אינם מוכרים כמו בוררים נפוצים אחרים כגון בוררי מחלקות או תגים. בוררי CSS רגילים ציין על אילו שדות ברצוננו להחיל סגנונות.
ב-CSS, בוררים משמשים לתחום את רכיבי ה-HTML של דף האינטרנט שלנו שעליו אנו רוצים להחיל סגנון. ל-CSS יש סלקטורים רבים המאפשרים לבחור אלמנטים בדיוק רב בעת החלת סגנונות. מה שנקרא בוררי תכונות אלו מבטיחים שתבחר רכיבי HTML על סמך התכונות ו/או הערכים שלהם.
מהם סוגי בוררי התכונות?
[שם מאפיין] בוחר אלמנטים בעלי התכונה בשם attribute_name מוגדרת ללא קשר לערך שלה.
[attribute_name=value] בוחר אלמנטים שהתכונה שלהם בשם attribute_name מוגדרת לערך השווה לערך.
[תכונה_שם~=ערך] בוחר אלמנטים שיש להם תכונה בשם attribute_name set ולפחות אחד מערכי התכונה הוא value.
[תכונה_שם|=ערך], בוחר אלמנטים שיש להם תכונה בשם attribute_name set.
[attribute_name$=value] בחר תגים שהתכונה שלהם מסתיימת בערך זה.
[שם_תכונה^=ערך] בוחר תגים שהתכונה שלהם מתחילה בערך זה.
איך לקשר בין אותיות גדולות וקטנות?
אם אתה רוצה לקשר את הערכים של התכונות ללא רגישות רישיות, אתה יכול להשתמש בערך "i" לפני סוגר הסוגר. דגל זה אומר לדפדפן להתאים לכל תווי ה-ASCII, ללא קשר אם הם באותיות גדולות או קטנות. ללא דגל זה, ערכים משורשרים בהתאם להנחיות השפה תלויות-רישיות של המסמך. HTML הוא תלוי רישיות.
מהם אופרטורים של בורר תכונות?
אנחנו יכולים להשתמש כמה אופרטורים לבוררי תכונות שאינם כל כך ידועים, ומאפשרים לנו לחדד באופן משמעותי את הופעתם של ערכים מסוימים בתכונות שנבדקו.
אלו הם האופרטורים הזמינים בבוררי תכונות
*= (מכיל): האופרטור * מאפשר לך לבחור אלמנטים שיש להם מחרוזת ספציפית כערך של תכונה לפחות פעם אחת.
^= (מופיע בתחילת ערך התכונה): בחר אלמנטים בעלי תכונה שהערך שלה מתחיל במחרוזת מסוימת.
$= (מופיע בסוף ערך התכונה): בוחר אלמנטים בעלי תכונה שהערך שלה מסתיים במחרוזת ספציפית.
~= (מכיל מילה מדויקת או מופרד ברווחים): בוחר אלמנטים שלערך התכונה שלהם יש תוכן התואם בדיוק למחרוזת שצוינה, או שמכיל מילה מופרדת ברווחים עם מחרוזת שצוינה.
|= (מכיל את המילה המדויקת או מופרד במקפים): דומה לאמור לעיל, אך ניתן להפריד את המילה באמצעות מקפים במקום רווחים.
כיצד להשתמש בבורר ב-CSS?
ישנן שתי דרכים אפשריות להשתמש בבורר ב-CSS. אם יש לך קוד HTML וקוד CSS באותו מסמך, כל מה שאתה צריך לעשות הוא להוסיף בורר CSS בראש האתר שלך.
מצד שני, אם ה-HTML וה-CSS שלך נמצאים במסמכים נפרדים, ייתכן שיש לך מסמך בשם index.html ומסמך נוסף בשם style.css. הקובץ index.html חייב לכלול שורת קוד הקוראת לקובץ ה-CSS, כדי שהסגנונות יוצגו כהלכה באתר האינטרנט שלך.
אילו סוגים נוספים של בוררים אנו מוצאים ב-CSS?
יש קבוצות שונות של בוררים. היו מודעים לאיזה סוג בורר אתם צריכים יעזור לך להשתמש בכלי האידיאלי עבור הפרויקט שלך. לכן אנו מראים לך כמה למטה:
בוררי סוג, מחלקה ומזהה
קבוצה זו כוללת בוררים המגבילים רכיב HTML, כמו קובץ. הוא מכיל גם בוררים המגבילים מחלקה או מזהה.
פסאודו-מעמדות ופסאודו-אלמנטים
קבוצה זו של בוררים כוללת כיתות פסאודו, אשר הם מעצבים מצבים ספציפיים של אלמנט. לדוגמה, הפסאודו-קלאס הרחף בוחר אלמנט רק כאשר העכבר מרחף מעליו. כולל גם פסאודו-אלמנטים שבוחרים חלק מסוים של אלמנט ולא את האלמנט עצמו
קומבינרים
דרך סדרת סלקטורים זו בוררים אחרים משולבים, במטרה להפריד בין אלמנטים שונים של המסמכים שלנו.
בורר אוניברסלי
באופן אוטומטי הכוכבית (*) שהיא סמל הבורר האוניברסלי, בוחר את כל הרכיבים של מסמך מסוים.
בורר תעודות זהות
סוג זה הושג במטרה לבחור אלמנטים המבוססים על תכונת ה-ID.
אם אתה מחפש לשלוט בכל מה שקורה באתר, ללא ספק הדרך הטובה ביותר להשיג את זה היא באמצעות עיצוב משלך. עבורם אתה יכול להשתמש בכלים כגון בוררי תכונות. כך אם תהיתם מהם בוררי התכונות ב-CSS, במאמר זה אנו מקווים שנתנו לך את התשובות. אם אתה חושב שהשארנו משהו חשוב, הודע לנו בתגובות.
