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

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

 
מאמרים אחרונים מאמרים אחרונים
15/02/2022 22:51
ככה תיבנו חנות וירטואלית מותאמת סלולר שתשפר את חוויית המשתמש ותגדיל את ההמרות.
03/02/2022 0:06
תקן HTML5 לצד הלקוח באתרי אינטרנט הוא התקן המוביל בימינו. קראו על היתרונות של התקן.
31/01/2022 15:40
בניית אתר אינטרנט בשפת צד השרת PHP היא בחירה חכמה בשפת פיתוח ותיקה, מובילה ומהירה.
תגובות אחרונות תגובות אחרונות
מדריך CSS - מתחילים
17/01/2022 19:35
היי, עיצוב עושים עם CSS, ולא ...
מדריך CSS - מתחילים
16/01/2022 20:41
האם יש אפשרות לעצב רקע בתוך דף...
מדריך CSS - מתחילים
18/11/2021 10:18
היי ינון, אתה צריך את הטקסט ש...
תגובות אחרונות פוסטים אחרונים בפורום
27/06/2022 23:53
שלום רב, ישנה בעיה קטנה בא...
27/06/2022 23:51
שלום! הבעיה שלי אסביר אותה הר...
27/06/2022 23:49
הי,כיצד כדאי להשקיע בשיווק של ...

הטמעת 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
YouTube previewPlay

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

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

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

 

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

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