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

 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
היי, ראיתי בכל מיני אתרים שמש...

הטמעת CSS בקוד HTML5

  1. דף הבית
  2. מדריך HTML5 למתכנת המתחיל
  3. הטמעת CSS בקוד HTML5
כיצד מטמיעים מאפייני עיצוב בקוד 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

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