מאמרים אחרונים מאמרים אחרונים
22/06/2020 16:11
בניית חנות וירטואלית למכירת שולחנות וכדורי פינג פונג
21/06/2020 18:08
בניית חנות מקוונת למכירת שטיחים בשתי שפות
21/06/2020 17:52
בניית חנות וירטואלית למוצרי שיער, מכשירי תספורת וציוד למספרות
17/06/2020 18:48
הקמה של חנות באינטרנט למכירה של מדבקות קיר מעוצבות
04/06/2020 16:01
בניית חנות באינטרנט למכירת מוצרי סלולר ומחשבים
תגובות אחרונות תגובות אחרונות
עיצוב רווחים ושוליים
21/04/2020 12:37
היי, קוד ה-CSS יכול להרשם בכל...
עיצוב רווחים ושוליים
02/04/2020 6:24
את העיצוב בשפת css כותבים בדף ...
תהליך בניית אתרים
17/10/2019 13:13
אחלה מאמר! ערך מעולה!

תגיות div, span ומאפיינים חשובים

  1. דף הבית
  2. מדריך HTML5
  3. תגיות div, span ומאפיינים חשובים

תגית div, תגית span ומאפיינים מיוחדים שחשוב להכיר: id, class, style, title.

תגית div ומאפייני id ו-class

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

כל תגית (בין אם תגית div או כל תגית אחרת), ניתן לאפיין באמצעות המאפיין id או המאפיין class. מאפיין id הינו בעל ערך יחודי לכל אלמנט, כלומר, לא יתכנו בקוד 2 אלמנטים שונים עם מאפיין id בעל אותו ערך. לעומת id, נוכל לאפיין מספר אלמנטים שונים באמצעות המאפיין class עם אותו הערך.

דוגמא:

<div id="main_menu">
    <div class="button">
        <div id="home">
        </div>
    </div>
    <div class="button">
        <div id="about">
        </div>
    </div>
    <div class="button">
        <div id="contact">
        </div>
    </div>
</div>

בדוגמא זו יצרנו "תפריט" עם 3 כפתורים. כל לחצן מאופיין באמצעות המחלקה (ה- class) שערכו button. כלומר יש 3 אלמנטים שהם עם class זהה. כל כפתור מאופיין בערך של id שיחודי רק לו.

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

תגית span

תגית זו מגדירה חלק מאלמנט על מנת לעצבו.

<div class="topic">
    This is example number <span class="number">seven</span> in the tutorial
</div>

כעת, ניתן להתייחס ספציפית למילה seven המאופיינת במחלקה number (למשל: נוכל ב-CSS לעצב מילה זו בכחול כהה).

מאפייני title, style

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

מאפיין title הינו מאפיין המקשר תאור לאלמנט. שימוש בו עבור אלמנט נתון, יוסיף ערך tool tip לאלמנט, באופן שהתאור יוצג בעת מעבר עכבר על אלמנט זה.

<div class="button" title="press this button to continue">
</div>

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

<div class="button" title="press this button to continue" style="color:#ff0000; background-color:#ffff00; text-align:center; font-size:18px;">
</div>

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

 

הוספת תגובה

רוצה שנקפיץ גם את העסק שלך?

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

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

 

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

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