מאמרים אחרונים מאמרים אחרונים
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
אחלה מאמר! ערך מעולה!

הטמעת CSS

  1. דף הבית
  2. מדריך HTML5
  3. הטמעת CSS

כיצד מטמיעים מאפייני עיצוב בקוד HTML?

קוד ה-html או ה-xhtml מתאר מידע פונקציונאלי וסמנטי על האתר שלנו. את מאפייני העיצוב נהוג להפריד מן הקוד. בעבר, היו תגיות עיצוב שמהוות חלק מקוד ה-html (למשל: תגית font המגדירה את סוג הגופן שבשימוש), אך כיום הדרך הנכונה היא שלא להשתמש בתגיות אלו, שכן ערבוב בין קוד ועיצוב הוא בעייתי מסיבות רבות (הקוד הנוצר הוא מנופח ומגושם, קשה לשנות את העיצוב בעתיד, מהירות הטעינה של הדפים איטית, ועוד).

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

שימוש בקובץ CSS חיצוני

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

<head>
    <link rel="stylesheet" href="/style.css" type="text/css"/>
</head>

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

המלצתנו היא להשתמש תמיד ועד כמה שניתן בקובץ CSS חיצוני.

הטמעת CSS בתגית head

במקום להפריד את קובץ ה-CSS לחלוטין מקוד ה-html, ניתן להטמיע את מאפייני העיצוב ישירות בתוך בלוק style ייחודי שישב בתוך תגית ה-head. נעשה זאת באופן הבא:

<head>
    <style type="text/css">
    ... style definitions are here ...
    </style>
</head>

נבהיר כי בתקן xhtml 1.1 נקבל הודעת שגיאה על הטמעת CSS ישירות ב-html, והמלצתנו היא תמיד לבצע הפרדה בין השניים לקבצים שונים.

שימוש במאפייני style בתוך הקוד

במקום להשתמש בקובץ CSS חיצוני, ניתן להגדיר מאפייני עיצוב בתוך הקוד כחלק מתגיות ה-html (מה שמכונה inline). דוגמא:

<p style="text-align:right;direction:rtl;">
    ... some text to align to right ...
    <div style="text-decoration:underline;">
        ... some underlined text ...
    </div>
</p>
<p style="text-align:left;direction:ltr;">
    ... some text to align to left ...
    <div style="font-weight:bold;">
        ... some bold text ...
    </div>
</p>

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

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

 

הוספת תגובה

קישור ל-CSS

03/01/2016 13:26
דוד כהן
היי,
בדוק שההפניה לקובץ ה-CSS היא נכונה וכי ה-CSS יושב במקום. אני צריך להבין מה אתה עושה במדוייק כדי לעזור...
דוד

לא מטמיע

10/09/2015 23:01
איתמר כהן
אני לא מצליח להטמיע את הקובץ ccs ב html

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

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

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

 

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

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