תיעוד CSS עם דוגמאות להרצה: Inline CSS

Q: מה זה Inline CSS?

Inline CSS הוא CSS שנכתב במאפיין style של אלמנט, כמו . ההצהרות חלות רק על האלמנט הזה, בלי סלקטור.

Q: מהן 3 הדרכים להוסיף CSS ל-HTML?

Inline, עם המאפיין style על אלמנט; פנימי, עם אלמנט בדף; וחיצוני, עם קובץ .css נפרד שמחובר באמצעות בתוך . קבצים חיצוניים הם הבחירה הרגילה לאתר שלם.

Q: האם Inline CSS דורס CSS חיצוני?

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

Q: האם Inline CSS הוא הרגל רע?

לעיצוב של אתר שלם, כן: הוא חוזר על עצמו, לא יכול להשתמש ב-:hover או ב-media queries, וקשה לדרוס אותו. הוא בסדר לערכים חד-פעמיים שנקבעים על ידי JavaScript או תבנית, כמו רוחב של סרגל התקדמות או צבע שהמשתמש בחר.

Q: אפשר להשתמש ב-hover ב-Inline CSS?

לא. המאפיין style מקבל רק הצהרות, ולכן אי אפשר לכתוב בו פסאודו-קלאסים כמו :hover, פסאודו-אלמנטים כמו ::before וכללי @media. שימו אותם באלמנט או בגיליון סגנונות.

Inline CSS: המאפיין style ו-3 דרכים להוסיף CSS

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

בדף הזה יש עורכים שאפשר להריץ - לערוך, להריץ ולראות את הפלט מיד.

מאת Kevin Spektor, מייסד שותף ו-CTO

פורסם ב-Sep 24, 2026

מה זה Inline CSS

Inline CSS הוא CSS שנכתב ישירות על אלמנט HTML בעזרת המאפיין style. הערך הוא רשימה של הצהרות, property: value;, והן חלות רק על האלמנט הזה.

<p>A normal paragraph.</p>

<p style="color: #2563eb;">A blue paragraph.</p>

<p style="color: #16a34a; font-weight: bold; font-size: 20px;">
  Green, bold and 20px.
</p>

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

תחביר

<element style="property: value; property: value;">

חלק	דוגמה	הערות
מאפיין	`style="..."`	מאפיין גלובלי: מותר על כל אלמנט HTML
הצהרה	`color: #2563eb;`	אותו תחביר כמו בתוך כלל בגיליון סגנונות
כמה הצהרות	`padding: 8px; border: 1px solid #e5e7eb;`	מופרדות ב-`;`
מירכאות בפנים	`style="font-family: 'Courier New', monospace;"`	השתמשו במירכאות בודדות בתוך מאפיין שעטוף במירכאות כפולות

כל מה שאינו הצהרה אסור. ל-:hover, ל-::before, ל-@media ולסלקטורים אין מקום במאפיין style.

3 הדרכים להוסיף CSS ל-HTML

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

שיטה	איפה ה-CSS נמצא	היקף	שימוש נפוץ
Inline	מאפיין `style` על אלמנט אחד	האלמנט הזה	ערכים חד-פעמיים, ערכים שנקבעים ב-JavaScript
פנימי	אלמנט `<style>` בדף	הדף הזה	הדגמות של דף אחד, תבניות אימייל, CSS קריטי
חיצוני	קובץ `.css`, מחובר עם `<link>`	כל דף שמחבר אותו	עיצוב של אתר שלם

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Three ways</title>
  <!-- External: <link rel="stylesheet" href="styles.css"> -->
  <style>
    /* Internal: one rule styles every matching element */
    .note {
      background: #e5e7eb;
      padding: 8px 12px;
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <p class="note">Styled by the internal rule.</p>
  <p class="note">Same rule, second paragraph.</p>
  <p class="note" style="background: #f59e0b;">Inline background wins here.</p>
</body>
</html>

הפסקה השלישית שומרת את הריפוד ואת הרדיוס מהכלל .note ומחליפה רק את הרקע, כי הסגנון ה-inline מגדיר רק את המאפיין האחד הזה.

למה סגנונות inline מנצחים

כשכלל בגיליון סגנונות וסגנון inline מגדירים את אותו מאפיין, הסגנון ה-inline מנצח. לא משנה כמה ספציפי הסלקטור: גם סלקטור ID מפסיד.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline wins</title>
  <style>
    #title { color: #16a34a; }
    p { color: #111827; }
  </style>
</head>
<body>
  <p id="title" style="color: #2563eb;">Blue: the inline style beats the ID selector.</p>
</body>
</html>

היוצא מן הכלל היחיד הוא !important. הצהרה בגיליון סגנונות שמסומנת !important מנצחת הצהרת inline רגילה, ו-!important ב-inline מנצח את שתיהן. זו הסיבה שסגנונות inline מקשים על תחזוקת האתר: כדי לשנות אותם מגיליון סגנונות צריך !important, וזה מתחיל הסלמה. הדף על !important מכסה את הסדר המלא.

מתי Inline CSS הוא הכלי הנכון

סגנונות inline מתאימים כשהערך הוא נתון ולא עיצוב: הוא משתנה מאלמנט לאלמנט ונכתב על ידי תבנית או על ידי JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Progress</title>
  <style>
    .track { background: #e5e7eb; border-radius: 999px; height: 12px; }
    .bar { background: #2563eb; height: 100%; border-radius: 999px; }
  </style>
</head>
<body>
  <p>Upload</p>
  <div class="track"><div class="bar" style="width: 35%;"></div></div>
  <p>Download</p>
  <div class="track"><div class="bar" style="width: 80%;"></div></div>
</body>
</html>

המראה (צבעים, גובה, רדיוס) נמצא בגיליון הסגנונות. רק הרוחב, ששונה בכל סרגל, הוא inline. JavaScript כותב את אותו מאפיין דרך element.style:

<button id="btn">Make it amber</button>
<p id="msg">Watch this text.</p>
<script>
  document.getElementById('btn').addEventListener('click', () => {
    const msg = document.getElementById('msg');
    msg.style.color = '#f59e0b';
    msg.style.fontWeight = 'bold';
  });
</script>

אחרי הלחיצה, ה-HTML של הפסקה הוא style="color: rgb(245, 158, 11); font-weight: bold;". שמות מאפיינים עם מקף הופכים ל-camelCase ב-JavaScript (font-weight הוא fontWeight).

משתנה CSS הוא לרוב דרך הביניים הנקייה ביותר: הגדירו inline רק את המשתנה, style="--progress: 35%", ותנו לגיליון הסגנונות להשתמש בו. ראו משתני CSS.

איפה Inline CSS לא מספיק

אין מצבים ואין פסאודו-אלמנטים. אי אפשר לכתוב :hover, :focus או ::before במאפיין style.
אין media queries. רוחב inline לא יכול להשתנות בטלפון.
חזרתיות. עשרה כפתורים עם אותו סגנון inline הם עשרה מקומות לערוך.
קשה לדרוס. רק !important בגיליון סגנונות מנצח אותו.
Content Security Policy. CSP קפדני בלי 'unsafe-inline' ב-style-src חוסם מאפייני style שנכתבו ב-HTML.

טעויות נפוצות

לכתוב סלקטור או סוגריים בתוך style. style="p { color: red }" נזנח. רק הצהרות נכנסות לשם.
להשתמש ב-= במקום :. כותבים color: red, לא color=red.
לקנן מירכאות כפולות. style="font-family: "Arial"" סוגר את המאפיין מוקדם מדי. השתמשו במירכאות בודדות בפנים.
לשכוח יחידות. style="width: 200" נזנח; כתבו 200px. אורך 0 הוא היחיד שמותר לו לוותר על היחידה.
לעצב אתר שלם ב-inline. העבירו סגנונות שחוזרים על עצמם למחלקה בגיליון סגנונות ושמרו את סגנונות ה-inline לערכים שונים בכל אלמנט.

שאלות נפוצות

מה זה Inline CSS?

Inline CSS הוא CSS שנכתב במאפיין style של אלמנט, כמו <p style="color: red;">. ההצהרות חלות רק על האלמנט הזה, בלי סלקטור.

מהן 3 הדרכים להוסיף CSS ל-HTML?

Inline, עם המאפיין style על אלמנט; פנימי, עם אלמנט <style> בדף; וחיצוני, עם קובץ .css נפרד שמחובר באמצעות <link rel="stylesheet" href="styles.css"> בתוך <head>. קבצים חיצוניים הם הבחירה הרגילה לאתר שלם.

האם Inline CSS דורס CSS חיצוני?

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

האם Inline CSS הוא הרגל רע?

לעיצוב של אתר שלם, כן: הוא חוזר על עצמו, לא יכול להשתמש ב-:hover או ב-media queries, וקשה לדרוס אותו. הוא בסדר לערכים חד-פעמיים שנקבעים על ידי JavaScript או תבנית, כמו רוחב של סרגל התקדמות או צבע שהמשתמש בחר.

אפשר להשתמש ב-hover ב-Inline CSS?

לא. המאפיין style מקבל רק הצהרות, ולכן אי אפשר לכתוב בו פסאודו-קלאסים כמו :hover, פסאודו-אלמנטים כמו ::before וכללי @media. שימו אותם באלמנט <style> או בגיליון סגנונות.

מושגים קשורים