הטמעת CSS בקוד HTML5

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

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

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

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

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

הפרדת מאפייני העיצוב לקובץ 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: הקדמה

מדריך CSS: תחביר »

תגיות: CSS | מדריך בניית אתרים