انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #2 من درس: كيفية إستخدام لغة CSS

CSS Inline Style طريقة Inline Style في لغة CSS

ستتعرف علي طريق كتابة CSS المختلفة وهي في ملف HTML أو في ملف منفصل CSS والطرق الثلاثة CSS External Style - CSS Internal Style - CSS Inline Style.

1 صفوف تعليمية
لغة CSS
4,812 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تُكتب Inline Style في سمة style بعلامة البداية للعنصر. هي طريقة صحيحة ومفيدة لبعض التنسيقات الخاصة بعنصر واحد أو المتولدة برمجيًا، لكن تكرارها في صفحات كثيرة يصعّب الصيانة مقارنة بقواعد مشتركة.

  • لا تكرر سمة style في العنصر نفسه.
  • اكتب تصريحات مثل color: red; background: yellow; داخل قيمة السمة، وافصل بين الخاصية والقيمة بالنقطتين : وبين التصريحات بـ ;.
  • لا تكتب محددًا أو أقواس { } داخل قيمة style.
  • لا يحتاج كل عنصر إلى سمة style؛ يمكن أن يأتي تنسيقه من قواعد داخلية أو خارجية أو من الوراثة.

inline style syntax

طريقة كتابة inline style في لغة CSS.

HTML 
<h1 style="color:red">This is a heading</h1>
جرّب بنفسك

multi style attribute

طريقة كتابة أكثر من خاصية style لنفس العنصر تُعد طريقة خاطئة.

HTML 
<h1 style="color:red" style="background:yellow">This is a heading</h1>
جرّب بنفسك

Style with multiple declarations

نكتب تصريحين داخل سمة style واحدة، ويفصل بينهما ;، فيصبح النص أحمر والخلفية صفراء.

HTML 
<h1 style="color:red;background:yellow">This is a heading</h1>
جرّب بنفسك

multi style for each element

إستخدام خاصية style لكل عنصر لعمل تنسيق مختلف في لغة CSS.

HTML 
<h1 style="color:red">This is a heading</h1>
جرّب بنفسك

جميع فقرات هذا الدرس (كيفية إستخدام لغة CSS)