כיצד למקד למחלקת CSS בתוך מחלקת CSS אחרת

Kyzd Lmqd Lmhlqt Css Btwk Mhlqt Css Hrt



לשיעורים יש תפקיד מכריע כאשר דנים במפרט של כל רכיב ב-CSS או בכל שפת תכנות אחרת. כדי לבטא כמה סגנונות ואפקטים על רכיבי HTML, מחלקות נוצרות ב-CSS. על ידי מתן ערכי המאפיין, ניתן להוסיף את כל מאפייני ה-CSS לגוף המחלקה.

פוסט זה יפרט על מיקוד למחלקת CSS בתוך מחלקת CSS אחרת.

כיצד למקד למחלקת CSS בתוך מחלקת CSS אחרת?

כדי למקד למחלקת CSS בתוך מחלקת CSS אחרת, תחילה, צור מיכלי div והוסף תכונות מחלקה בכל מיכל. לאחר מכן, גש לשיעור אחד או יותר ב-CSS על ידי שימוש בשם/ערך שלהם.







שלב 1: הוסף מיכל 'div'.

תחילה, הוסף אלמנט div בעזרת '

'. לאחר מכן, הקצו תכונה מחלקה לשימוש נוסף.



שלב 2: צור מיכלי 'div' מקוננים

לאחר מכן, צור מיכלי div מקוננים על ידי ביצוע אותו הליך של שלב 1:



< div מעמד = 'תוכן עיקרי' >

< div מעמד = 'שולחן' >

< div מעמד = 'שׁוּרָה' >

< div מעמד = 'שָׁסוּעַ' > לְהִתְחַתֵן < / div >

< div מעמד = 'ג-ימין' > ג'ֵק < / div >

< div מעמד = 'שָׁסוּעַ' > טום < / div >

< div מעמד = 'ג-ימין' > יולי < / div >

< / div >

< / div >

< / div >

תְפוּקָה





שלב 3: החל סטיילינג על מיכל 'div' ראשי

גישה ל' הראשי div מיכל בעזרת שם המחלקה בתור ' .תוכן עיקרי ”:



.תוכן עיקרי {

רוֹחַב : 40% ;

שולים : 0 אוטומטי ;

צֶבַע : כְּחוֹל ;

גבול : 2 פיקסלים מְנוּקָד כְּחוֹל ;

יישור טקסט : מֶרְכָּז ;

}

כאן:

  • ' רוֹחַב ' מציין את גודל הרוחב של האלמנט.
  • ' שולים ” מקצה שטח סביב האלמנט מחוץ לגבול המוגדר.
  • ' צֶבַע ' מגדיר את הצבע עבור הטקסט שנוסף באלמנט.
  • ' גבול ' מגדיר קו מתאר או גבול סביב האלמנט ב-HTML.
  • ' יישור טקסט ' מגדיר את היישור של הטקסט של האלמנט.

שלב 4: סגנון שיעור נוסף

גש למחלקה הראשית של CSS ולמחלקות מקוננות אחרות באמצעות השמות שלהן. לאחר מכן, הגדר את רוחב המיכל על ידי ציון הערך לפי בחירתך:

.תוכן עיקרי .שולחן {

רוֹחַב : 80% ;

}

יתר על כן, גש למחלקה האחרת על ידי ביצוע אותו נוהל כמו לעיל והחל את מאפייני ה-CSS המוזכרים בקטע הקוד שלהלן:

.תוכן עיקרי .c-right {

לְהַצִיג : בלוק מוטבע ;

גודל גופן : 20 פיקסלים ;

}

לפי קטע הקוד לעיל:

  • ' לְהַצִיג 'מאפיין משמש להגדרת התצוגה של אלמנט.
  • ' גודל גופן ” מציין את גודל הטקסט שנוסף במיכל.

כעת, גש למחלקות האחרות על ידי שימוש באותה שיטה והחל את מאפייני ה-CSS הבאים כפי שהוזכר להלן:

.תוכן עיקרי .שָׁסוּעַ {

רוֹחַב : 140 פיקסלים ;

שוליים-ימין : 6 פיקסלים ;

גודל גופן : 16 פיקסלים ;

}

לשם כך, נחיל ' רוֹחַב ', ' שוליים-ימין ' ו' גודל גופן ' למטרות סטיילינג.

יתר על כן, גש ל' הראשי div ' מכיל לצד מיכל div מקונן אחר על ידי שימוש בשם המחלקה שלהם והחל את מאפייני ה-CSS הבאים

.רָאשִׁי .c-right {

רוֹחַב : אוטומטי ;

גודל גופן : 15 פיקסלים ;

צֶבַע : #fff ;

שוליים-ימין : 20 פיקסלים ;

משקל גופן : נוֹרמָלִי ;

}

תְפוּקָה

זה הכל על מיקוד למחלקת CSS בתוך מחלקת CSS אחרת.

סיכום

כדי למקד למחלקת CSS בתוך מחלקת CSS אחרת, תחילה, גש ל-' הראשי div ' דרך תכונת הכיתה שהוקצתה. לאחר מכן, גש למיכל 'div' אחר על ידי ביצוע אותו הליך. יתר על כן, משתמשים יכולים למקד למחלקת CSS בתוך מחלקת CSS אחרת. פוסט זה הדגים את השיטה למיקוד מחלקת CSS בתוך מחלקת CSS אחרת.