יצירת קשר עם חברת בניית אתרים צור קשר

 077-7644819
חייגו או השאירו הודעתכם

 
מאמרים אחרונים מאמרים אחרונים
09/08/2023 17:16
בניית חנות באינטרנט למכירה של מוצרים לחיות מחמד
12/03/2023 22:03
במאמר זה נסקור את התפתחות שפת צד השרת PHP מראשית ימיה, לכל אורך גירסאותיה השונות עד לאן שהיא הגיעה ב...
08/01/2023 23:40
הקמת אתר מכירות לדלתות פנים וחוץ לבתים פרטיים ולעסקים וציוד פירזול
תגובות אחרונות תגובות אחרונות
עיצוב רקע - background
12/06/2023 19:52
היי תמר, עושים את זה באמצעות ...
עיצוב רקע - background
28/05/2023 21:36
אני רוצה ליצור כפתור שהרקע שלו...
עיצוב רקע - background
15/12/2022 20:22
איך עושים שיראו את כל התמונת ר...
תגובות אחרונות פוסטים אחרונים בפורום
08/11/2022 19:11
היי, יש לי אתר קצת מורכב. הוא...
08/11/2022 19:09
היי, אני עוסק בענף הטניס ויש ...
08/11/2022 19:03
היי, ראיתי בכל מיני אתרים שמש...

סלקטור class לעיצוב אלמנטים

  1. דף הבית
  2. מדריך HTML5 למתכנת המתחיל
  3. סלקטור class לעיצוב אלמנטים
שימוש במזהה class כדי לעצב קבוצת אלמנטים באתר.

הגדרת class ב- HTML5

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

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

<p class="citation">To be or not to be</p>

עיצוב class ב- CSS

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

במקרה שבדוגמה, נגדיר שהפסקה תהיה ממורכזת והפונט יהיה 14 פיקסלים באופן הבא:

p.citation {
        font-size:14px;
        text-align:center;
}

העיצוב שיוגדר ב-CSS עבור מחלקה זו, יחול על כל הפסקאות שב-html יש להן את המאפיין class=citation בתוך התגית p. באמצעות סלקטור class ניתן גם להחיל את מאפייני העיצוב הללו באופן דומה על אלמנטים שאינם פסקאות (למשל bullets או רשימה ממוספרת עם ציטוטים). כדי לעשות זאת יש להוסיף את המאפיין class בתגיות הרצויות, למשל בתוך תגית li (נרשום li.citation במקום p.citation בדוגמא).

אפשרות נוספת היא להגדיר ב-CSS כי כל האלמנטים שקיים בהם מאפיין זה (ולא משנה סוגם, בין יהיו p או li או כל דבר אחר), יעוצבו בפונט 14 ויהיו ממורכזים. נעשה זאת באופן הבא:

.citation {
        font-size:14px;
        text-align:center;
}

כפי שציינו בפרק הקודם, אין להשתמש בספרות בתחילת שם המחלקה. השילוב הזה לא עובד בכל דפדפני הרשת.

 

הוספת תגובה
YouTube previewPlay

שנקפיץ יחד את העסק שלך לגבהים חדשים?

בניית חנות אינטרנטית של מיזם גרופ תעזור לך ביצירת סיסטם עוצמתי שמגדיל מכירות.

ההצלחה מבוססת על בניית חנות וירטואלית בחוד החנית עם הקמת מערך שיווק אפקטיבי שמגדיל חשיפה והמרות.

 

אל תהססו! מלאו את הטופס או התקשרו עכשיו 077-7644819

 
WhatsApp
שנקפיץ לך את העסק?
לחץ כאן
התקשר עכשיו 077-7644819
או מלא את הטופס להלן: