כדי למנוע חזרה על קוד, אנו משתמשים במספר מחלקות ב-HTML ו-CSS. עם CSS, אנו יכולים גם להגדיר ולעצב את שתי המחלקות יחד ולהשתמש במספר מחלקות באלמנט אחד על ידי הקצאת מזהי מחלקות שונים. ניתן לבצע גישה זו על ידי שימוש בתחביר המופרד מרווחים כדי להוסיף מחלקות מרובות לרכיב HTML אחד.
במאמר זה נלמד כיצד להוסיף מחלקות מרובות לרכיב אחד.
כיצד להשתמש במספר מחלקות ב-CSS?
כדי להשתמש בשתי מחלקות או יותר באלמנט אחד, כל מזהה מחלקה יופרד ברווח.
עליך לעקוב אחר התחביר הבא כדי להשתמש במספר מחלקות באלמנט אחד:
< h1 class = 'class_1 class_2 class_3' > מְסִירָה... ח >
ברכיב HTML בודד, אתה יכול לכלול יותר ממחלקה אחת על ידי הפרדתן באמצעות רווח. לנוחיותכם, הנה דוגמה.
דוגמה: שימוש במספר מחלקות ב-CSS
בדוגמה שלהלן, ניצור:
- כותרת המשתמשת בתג
ומקצה את שם הכיתה ' כּוֹתֶרֶת '.
- לאחר מכן, ניצור כותרת נוספת ונקצה אותה לשתי מחלקות שונות: ' כּוֹתֶרֶת ' ו' קַו '. מזהי מחלקות אלה מופרדים על ידי רווח:
HTML
h1 >
< h1 מעמד = 'שורת כותרת' >
כיתות מרובות ב אלמנט אחד
h1 >
כעת, בואו נעבור לקובץ ה-CSS ונחיל כמה מאפייני CSS המפורטים להלן:
- הגדר צבע רקע לכותרת באמצעות הפונקציה rgb() בתור ' (69, 51, 151) '.
- הגדר את סגנון הגופן ' נטוי ' לכותרת.
בכיתה HTML, הכותרת הראשונה משתמשת בשם המחלקה ' כּוֹתֶרֶת '. אז, הסגנון שצוין במחלקה שצוינה מיושם בכותרת הראשונה:
.כּוֹתֶרֶת {
צבע רקע: rgb ( 69 , 51 , 151 ) ;
סגנון גופן: נטוי
}
בשביל ה ' קַו בכיתה, יש לנו:
- הגדר את צבע הכותרת באמצעות הפונקציה rgb() בתור ' (255, 0, 0) '.
- החל את שורת עיטור הטקסט בתור ' לָשִׂים דָגֵשׁ '.
הכותרת השנייה תשתמש בסגנונות של שתי הכיתות: ' כּוֹתֶרֶת ' ו' קַו ' מעמד:
.קַו {צבע: rgb ( 255 , 0 , 0 ) ;
text-decoration-line:line;
}
לאחר היישום, בדוק את התוצאה:
מהפלט, אתה יכול לראות שהכותרת השנייה משתמשת בשתי מחלקות ה-CSS.
סיכום
כדי להשתמש במספר מחלקות ברכיב אחד, השתמש במזהי מחלקה שונים המופרדים ברווחים לבנים. באמצעות זה, נוכל להחיל מאפייני CSS שונים בבת אחת. זה מאפשר לנו לעשות שימוש חוזר במחלקה שבה קיימים אלמנטים דומים. מאמר זה הסביר כיצד להשתמש במספר מחלקות באלמנט בודד ולעצב אותו יחד עם דוגמה.