מאמר זה מביא נושא מעניין וחשוב המכונה בוחרים ועוקבים אחריו בהפגנה מעשית תומכת. המצביעים הבאים יוסקרו במאמר זה,
- עיצוב אלמנטים של HTML
- בוחרי CSS
- בורר זיהוי CSS
- בורר מחלקות CSS
- בורר אוניברסלי של CSS
- בוחרי קבוצות CSS
אז בואו נתחיל אז,
עיצוב אלמנטים של HTML
בואו להבין מה זה CSS לפני שנגיע לבוחרי CSS. אם יש להתייחס ל- HTML כשלד, אז CSS (גליונות סגנון מדורגים) הוא כמו השרירים והעור. המוח הוא JavaScript. לכן, עבור דף אינטרנט, סגנונות CSS הם למעשה הפריסה והעיצוב. ממש ממיקום התמונות והטקסט ועד לגופן הגופן וצבע הרקע, CSS שולט במראה האלמנטים של HTML בדפדפן.
אתה יכול להבין טוב יותר את CSS, אם יש לך מושג טוב על מה הם בוחרי CSS. בוחרים אלה מאפשרים לך למקד לאלמנטים ספציפיים של HTML כך שתוכל להחיל עליהם את הסגנון הנכון.
בואו נבין כיצד נוכל לבחור אלמנטים של HTML,
כיצד לבחור אלמנטים?
נניח, אתה רוצה שכותרת מסוימת תהיה מעוצבת אחרת משאר התוכן בדף אינטרנט. כעת, באמצעות בוחרי CSS תוכלו למקד אלמנט HTML זה כדי לעצב אותו באופן שונה. בוחרי CSS עוזרים בהגדרת האלמנטים עליהם חלה קבוצה מסוימת של כללי CSS. ישנם סוגים שונים של בוחרי CSS המאפשרים לך לבחור במדויק את האלמנטים שברצונך לעצב. אתה יכול לתת לכל דף האינטרנט סגנון כללי, ואז לעבוד בדרכך לעצב אלמנטים אחרים של הדף.
סלקטורים הם חלק מכלל CSS, ובוחרים אלה מגיעים ממש לפני הכרזת חסימות CSS. להבנה טובה יותר, ניתן להתייחס לתמונה למטה.
ממשיך הלאה עם המאמר של CSS Selectors
בוחרי CSS
בורר זה מאפשר לך לבחור אלמנט HTML לפי שמו.
שקול את הקוד שלהלן:
מחרוזת להמרת תאריך בג'אווה
p {text-align: center center: magenta}סגנון זה יוחל על כל פיסקה.
פסקה 1
סעיף 2
קוד זה ייתן לך את הפלט הבא:
סגנון זה יוחל על כל פיסקה
פסקה 1
סעיף 2
בקוד שלעיל, אלמנטים ה- HTML היו ממוקדים במרכז וצבעם 'מג'נטה'.
ממשיך הלאה עם המאמר של CSS Selectors
בורר זיהוי CSS
על ידי בחירת תכונת id של אלמנט HTML, באפשרותך לבחור את האלמנט הספציפי הזה. מכיוון שהמזהה הוא ייחודי לדף, אתה יכול לבחור את האלמנט הנכון באמצעות תכונת id.
אתה יכול לבחור את רכיב ה- HTML באמצעות '#' ואחריו המזהה של אותו רכיב. למשל, '# firstname' בוחר את האלמנט שבו המזהה הוא 'firstname'.
שקול את הקוד הבא:
# para1 {text-align: צבע מרכז: כתום}שלום עולם
פסקה זו לא תושפע.
הפלט של הקוד הנ'ל הוא:
שלום עולם
פסקה זו לא תושפע.
כפי שניתן לראות בפלט שלעיל, על ידי הכללת id = ”para1 ″, הצלחנו לשנות את צבע האלמנט לכתום. האלמנט הנוסף שאין בו את זה נותר בלתי מושפע.
ממשיך הלאה עם המאמר של CSS Selectors
בורר מחלקות CSS
באמצעות בורר הכיתות תוכלו לבחור אלמנטים של HTML בעלי תכונת מחלקה ספציפית. ניתן להגדיר את הבורר באמצעות נקודה (סמל נקודה מלאה) ואחריו שם הכיתה. לדוגמה, .intro בוחר את האלמנטים שבהם הכיתה היא 'מבוא'. דבר אחד שיש לזכור הוא שלעולם לא תוכל להתחיל שם כיתה עם מספר.
שקול את הקוד הבא:
.center {text-align: center center: pink}הכותרת הזו ורודה וממוקדת במרכז.
פסקה זו ורודה וממוקדת במרכז.
הפלט של הקוד שלעיל הוא:
הכותרת הזו ורודה וממוקדת במרכז.
פסקה זו ורודה וממוקדת במרכז.
אתה יכול להשתמש בבחירת מחלקות CSS עבור אלמנט ספציפי. אם ברצונך לעצב רק אלמנט ספציפי אחד, תוכל להשתמש בשם האלמנט יחד עם בורר הכיתות.
לדוגמה, שקול את הקוד הבא:
p.center {text-align: צבע מרכז: ורוד}כותרת זו אינה מושפעת
פסקה זו ורודה וממוקדת במרכז.
הפלט של הקוד שלעיל הוא:
כותרת זו אינה מושפעת
פסקה זו ורודה וממוקדת במרכז.
כפי שניתן לראות בפלט, הכותרת h2 אינה מושפעת מהסגנון. מכיוון שציינו 'p.center', רק הפסקה מושפעת מהסגנון.
ממשיך הלאה עם מאמר זה של CSS Selectors,
בורר אוניברסלי של CSS
סוג זה של בורר יכול להיחשב כדמות תו כללי הבוחר את כל האלמנטים בדף. הוא בוחר את כל האלמנטים בדף, והוא מצוין על ידי '*'.
לדוגמה, שקול את הקוד שלהלן:
* {color: dark-green-font-size: 30px}זהו מבחן (גופן קטן יותר)
זו פסקה.
הפלט של הקוד הנ'ל הוא:
שלום עולם
זהו מבחן (גופן קטן יותר)
זו פסקה.
כפי שניתן לראות בפלט, לכל האלמנטים המוגדרים באמצעות בורר הקבוצה אותה הגדרת סגנון - הם ממוקדים במרכז וצבע הגופן הוא ציאן.
זה מביא אותנו לסוף מאמר זה.
בדוק את שלנו שמגיע עם הדרכה חיה בהנחיית מדריך וניסיון פרויקט אמיתי. הכשרה זו גורמת לך להיות בקיאים במיומנויות לעבוד עם טכנולוגיות אינטרנט מקדימות וקדמיות. הוא כולל הדרכה בנושא פיתוח אתרים, jQuery, Angular, NodeJS, ExpressJS ו- MongoDB.
יש לך שאלה עבורנו? אנא הזכיר זאת בסעיף ההערות במאמר ונחזור אליך.