Facebook
Twitter
RSSמדריך CSS – הוספת CSS ל- HTML
בפרק הזה נכיר מספר דרכים שונות להגדיר סגנון עיצובי על אלמנטי 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>
שבהרצה בדפדפן נראה כך:
אפשרות 1 – inline: הוספת style בתוך האלמנט
כמעט לכל אלמנט ב- HTML ניתן להגדיר מאפיין Style ובו לקבוע את הסגנון העיצובי. למשל, כדי להפוך את הטקסט בפסקה הראשונה לאדום, נשנה את ה- HTML לקוד הבא:
<body>
<p style="color:red">This is text 1</p>
<p>This is text 2</p>
</body>
הרצת הדף בדפדפן תתן את התוצאה הבאה:
נשים לב כי רק הטקסט של הפסקה הראשונה צבוע באדום כיוון שה- Style מיושם רק על תגית הפסקה הראשונה.
תוך כדי הגדרת מאפיין ה- Style על האלמנט, בוודאי שמתם לב ש- WebMatrix מציג את רשימת המאפיינים שניתן להגדיר אותם. תכונה זו מאפשרת לכם לחפש מאפייני עיצוב בקלות יותר וכן לגלות אלמנטים אחרים שתוכלו להשפיע עליהם.
אפשרות 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 בעמוד הנוכחי, ומגדירה כי צבע הטקסט בהן יהיה אדום. התוצאה תהיה:
אפשרות 3 – קובץ CSS חיצוני
כשנרצה להגדיר סגנונות שיתפסו לא רק לגבי לאלמנט בודד או דף בודד, אלא לקבוצת דפים או אפילו אתר שלם, נשתמש בקובץ CSS חיצוני.
ב- WebMatrix, לחצו על הכפתור New בסרגל הכלים העליון כדי להוסיף קובץ חדש לאתר.
בחרו בסוג קובץ CSS ותנו שם לקובץ החדש – למשל main.css.
בסיום הפעולה יתווסף קובץ חדש בשם main.css לאתר.
בקובץ ה- 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. הסגנונות יהיו הרבה יותר נגישים לסיגנון ועיצוב.
ועכשיו כשאנו יודעים את היסודות בואו נלמד איך עושים את זה.
תגובות בפייסבוק