וובמאסטר - תיכנות ובניית אתרים

מדריך CSS – הוספת CSS ל- HTML

גיא בורשטיין/‏ 14 נובמבר, 2002
F+
F-

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

לצורך הדוגמא נתחיל מעמוד ה- HTML הבסיסי הבא:

<!DOCTYPE html>
<
html
>
<
head>
<title>CSS Sample</title
>
</
head
>
<
body>
<p>This is text 1</p>
<p>This is text 2</p
>
</
body
>
</
html
>

שבהרצה בדפדפן נראה כך:

הוספת CSS  ל- HTML

 

אפשרות 1 – inline: הוספת style בתוך האלמנט

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

<body>
<p style="color:red">This is text 1</p>
<p>This is text 2</p
>
</
body
>

הרצת הדף בדפדפן תתן את התוצאה הבאה:

הוספת CSS  ל- HTML

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

תוך כדי הגדרת מאפיין ה- Style על האלמנט, בוודאי שמתם לב ש- WebMatrix מציג את רשימת המאפיינים שניתן להגדיר אותם. תכונה זו מאפשרת לכם לחפש מאפייני עיצוב בקלות יותר וכן לגלות אלמנטים אחרים שתוכלו להשפיע עליהם.

הוספת CSS  ל- HTML

אפשרות 2 – הגדרת CSS בראש הדף

ניתן להגדיר בלוק Style בראש הדף ובו לשלב הגדרות CSS. בראש הדף, בתוך איזור ה- Head נפתח תגית Style ובה נרשום את כל הגדרות ה- CSS הרלוונטיות לעמוד זה בלבד.

לדוגמא:

<!DOCTYPE html>
<
html
>
<
head>
    <title>CSS Sample</title>
    <style type="text/css">
        p {
            color: red;
        }
    </style
>
</
head
>
<
body>
    <p>This is text 1</p>
    <p>This is text 2</p
>
</
body
>
</
html
>

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

הוספת CSS  ל- HTML

אפשרות 3 – קובץ CSS חיצוני

כשנרצה להגדיר סגנונות שיתפסו לא רק לגבי לאלמנט בודד או דף בודד, אלא לקבוצת דפים או אפילו אתר שלם, נשתמש בקובץ CSS חיצוני.

ב- WebMatrix, לחצו על הכפתור New בסרגל הכלים העליון כדי להוסיף קובץ חדש לאתר.

הוספת CSS  ל- HTMLבחרו בסוג קובץ CSS ותנו שם לקובץ החדש – למשל main.css.

הוספת CSS  ל- HTML

בסיום הפעולה יתווסף קובץ חדש בשם main.css לאתר.

הוספת CSS  ל- HTML

בקובץ ה- CSS החדש, נחליף את תוכן הקובץ בתוכן הבא:

p {
    color: red;
}

כעת, אחרי שהגדרנו את קובץ ה- CSS עם הגדרת הסגנון הויזואלי, נרצה לקשר אותו לדף ה- HTML ולמעשה להחיל את סגנון העיצוב על האלמנטים שבדף ה- HTML.

כדי לעשות זאת, נוסיף הפניה מדף ה- HTML לדף ה- CSS באופן הבא:

<head>
    <title>CSS Sample</title>
    <link rel="stylesheet" type="text/css" href="main.css" 
/>
</
head
>

נשים לב שההפניה לקובץ ה- CSS החיצוני נמצאת באיזור ה- Head של דף ה- HTML.

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


סדרי עדיפויות

מה יקרה כאשר יקבע יותר מסגנון אחד לאותו אלמנט?
הערך יקבע על פי העדיפות:

1. הגדרת CSS inline, כלומר הגדרת Style ספציפי על האלמנט - מכריע ללא עוררין.

2. CSS פנימי בקובץ - קובע רק אם אין סתירה ב-inline.

3. CSS בקובץ חיצוני - קובע רק אם אין סתירה בפנימי או ב-inline.

אז מה כדאי?

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

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

Inline - בעד ונגד
סגנונות inline הם בזבזניים, קשים לניהול ואינם ניתנים לשימוש חוזר ולכן מומלץ להשתמש בהם כמה שפחות. דפי HTML שבהם כתובים סגנונות רבים ב-inline, הופכים להיות בדיוק מה שלא רצינו שיהיו: עיצוב, תוכן ותיכנות בעירבוביה. ולכן בכל פעם שאתה מתפתה לשים סגנון בתוך הBODY, תחשוב שוב אם אינך יכול לעשות זאת באופן שונה, בין אם שימוש בCLASS או בID. הסגנונות יהיו הרבה יותר נגישים לסיגנון ועיצוב.

ועכשיו כשאנו יודעים את היסודות בואו נלמד איך עושים את זה.

גיא בורשטיין

גיא בורשטיין הוא מומחה טכנולוגיות פיתוח בחברת מיקרוסופט ואחראי על הקשר בין מיקרוסופט לקהילת המפתחים בארץ.
תגיות: CSS‏  /  מדריך‏  /  בניית אתרים‏  

תגובות בפייסבוק

תגובות למאמר



תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות