פרק 3: הכנסת CSS למסמך HTML

בפרק זה נלמד על:

CSS פנימי
CSS חיצוני
CSS בתוך תגיות HTML

CSS פנימי

CSS פנימי (Internal CSS) מכניסים את הקוד של CSS בתוך תגית <style> בתוך <head> של המסמך HTML.

          
            <!DOCTYPE html>
            <html lang="he">
            <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>CSS פנימי</title>
              <style>
                body {
                  background-color: lightgray;
                }
                p {
                  color: blue;
                }
              </style>
            </head>
            <body>
              <p>זוהי דוגמה ל-CSS פנימי.</p>
            </body>
            </html>

CSS חיצוני

CSS חיצוני (External CSS) הוא דרך לשמור את קוד ה-CSS בקובץ נפרד ולהפנות אליו מהמסמך HTML באמצעות תגית <link>.

          
            <!DOCTYPE html>
            <html lang="he">
              <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>CSS חיצוני</title>
                <link rel="stylesheet" href="styles.css">
              </head>
              <body>
                <p>זוהי דוגמה ל-CSS חיצוני.</p>
              </body>
              </html>

קובץ ה-CSS החיצוני (styles.css) ייראה כך:

          
            body {
              background-color: lightyellow;
            }
            p {
              color: green;
            }

CSS בתוך תגיות HTML

ניתן גם להוסיף CSS ישירות בתוך תגיות HTML באמצעות מאפיין style.

          
            <h1 style="color: blue; text-align: center;">שימוש ב-CSS בתוך תגיות</h1>

פרק 3: הכנסת CSS למסמך HTML

CSS פנימי

CSS חיצוני

CSS בתוך תגיות HTML

תגובות

מאמרים אחרונים