יישום של CSS בעמודי HTML

ישנן 3 דרכים ליישם CSS בתוך עמודי HTML.

יישום רציף של CSS

סגנונות רציפים באים לידי ביטוי ישירות בקוד ה – HTML על ידי שימוש בתכונה style. דוגמא ליישום רציף של CSS :

  1. <p style="color: red">מדריך CSS למתחילים</p>

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

אבל, אם אתה זוכר, המלצתי לך בעבר להשאיר את עמודי ה – HTML נקיים מ – CSS ולכן תשתדל להימנע מיישום רציף של CSS בתוך עמודי HTML.

יישום פנימי של CSS

סגנונות פנימיים של CSS באים לידי ביטוי בתוך תגית ה – head והן מתייחסים לעמוד ספציפי ( ולא לכל האתר ).דוגמא ליישום פנימי של CSS :

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4. <title>CSS מדריך</title>
  5. <style type="text/css">
  6.     p {
  7.         color: red;
  8.     }
  9.     a {
  10.         color: blue;
  11.     }
  12. </style>
  13. ....

בדוגמא הנ"ל, הטקסט בכל פיסקה יקבל צבע אדום וכל הלינקים יהיו בצבע כחול.

בדומה ליישום רציף של CSS, עדיף להשאיר את עמודי ה – HTML נקיים מ – CSS ועל כן האופציה המועדפת היא...

יישום חיצוני של CSS

סגנונות עיצוב חיצוניים הם הצורה העדיפה, הנכונה והטובה ביותר לעבודה !
סגנונות עיצוב חיצונייים יושבים בקובץ CSS חיצוני אשר מוגש בצורה חיצונית. סגנונות עיצוב מסוג זה מתייחסים לכל האתר או לעמוד ספציפי ( לפי הגדרה ). דוגמא ליישום חיצוני של CSS :

  1.     p {
  2.         color: red;
  3.     }
  4.     a {
  5.         color: blue;
  6.     }

את הטקסט הנ"ל עליך לשמור בקובץ נפרד, למשל myfile.css, ולקשר בינו לבין עמוד ה – HTML שלך בצורה הבאה :

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4.     <title>CSS מדריך</title>
  5.     <link rel="stylesheet" type="text/css" href="myfile.css" />
  6. ...

במדריך ה- CSS למתקדמים, אציג לך דרכים אחרות לקישור הנ"ל אך לבנתיים נעבוד בצורה הנ"ל.

על מנת שתוכל להפיק את המירב ממדריך זה, כדאי שתתנסה בקוד תוך כדאי קריאה, לכן פתח קובץ בעורך הטקסט שלך ( אפשר גם NotePad ) ושמור אותו בשם myfile.css. במקביל צור קובץ HTML חדש והכנס את השורות הבאות :

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4.     <title>CSS מדריך</title>
  5.     <link rel="stylesheet" type="text/css" href="myfile.css" />
  6. ...

שמור את קובץ ה- HTML שלך. כרגע קובץ ה – HTML שלך מקושר לקובץ CSS ריק, אך אל תדאג בהמשך המדריך תוכל למלא אותו בכל טוב, קצת סבלנות.

עמודים רלוונטים

רפרנס

  • תכונות נפוצות ( כולל style )
  • התגית style
  • התגית link