מאמרים אחרונים מאמרים אחרונים
23/01/2019 15:14
אנו במיזם גרופ קיבלנו את תו אמון הציבור להגינות בעסקים.
24/10/2018 19:39
מתכנן הקמת חנות מתנות מקוונת? אספנו עבורך כל מה שחשוב לדעת לפני שאתה יוצא לדרך.
15/09/2018 19:27
יש לך עסק למכירת רהיטים או שאתה מתכנן אחד כזה בקרוב? קרא איך הקמת חנות וירטואלית למכירה של רהיטים בא...
06/09/2018 18:05
מחשבים זו אהבת חייך? האם חשבת למכור מחשבים, טלפונים סלולריים, קונסולות משחק וציוד היקפי באינטרנט? המ...
24/08/2018 13:39
הקמת פורטל בריאות באנגלית
תגובות אחרונות תגובות אחרונות
בניית חנות וירטואלית
29/08/2018 13:50
חברה לבניית אתר וחנות וירטואלי...
שפת שרת מול שפת לקוח
04/07/2018 15:45
היי, השפות PHP ו-PYTHON שתי...
שפת שרת מול שפת לקוח
04/07/2018 14:10
מה ההבדל בין php ל python

הטמעת CSS

»
»
הטמעת 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
או מלא את הטופס להלן: