دليل CSS المضمن - كيفية تصميم علامة HTML مباشرة

لقد كتبت بعض HTML وتحتاج الآن إلى تصميمه باستخدام CSS. إحدى الطرق هي استخدام الأنماط المضمنة ، وهو ما تتناوله هذه المقالة.

This is my first paragraph.

قبل أن ننتقل إلى الفروق الدقيقة في الأنماط المضمّنة - متى ولماذا وكيفية استخدامها - من المهم أن تكون على دراية بالطرق الأخرى لتصميم HTML الخاص بك. بهذه الطريقة ، تختار الخيار الأفضل لرمزك.

فيما يلي ملخص لخياراتك.

ورقة الأنماط الخارجية

عادةً ما يحتفظ المطورون بجميع CSS الخاصة بهم في ورقة أنماط خارجية. في ملف HTML الخاص بك ، استخدم العنصر للربط بورقة الأنماط الخارجية ، والتي تحتوي على CSS الخاص بك.

داخل الملف index.css لدينا قواعد CSS الخاصة بنا.

p { color: red; font-size: 20px; } 

ورقة الأنماط الداخلية

هناك خيار آخر لتصميم CSS وهو استخدام ورقة أنماط داخلية. هذا يعني تحديد قواعد CSS الخاصة بك داخل العنصر في ملف HTML الخاص بك.

  p { color: red; font-size: 20px; }   

الأنماط المضمنة

في كثير من الأحيان ، ستجد نفسك تصل إلى الأنماط المضمنة. لكن لا يزال من المهم معرفتها لأن هناك مناسبات معينة تكون مفيدة فيها.

مع الأنماط المضمنة ، ستضيف النمطإلى علامة HTML متبوعة بـ CSS لتصميم عنصر.

This is my first paragraph.

This is my second paragraph.

لذلك في حالتنا ، يكون نص الفقرة الأولى باللون الأحمر بحجم خط 20 بكسل. الثاني ، ومع ذلك ، لم يتغير.

دعنا نلقي نظرة فاحصة على كيفية ووقت استخدام الأنماط المضمنة. سنكشف أيضًا عن سبب تصميم فقرات واحدة فقط.

ما هي علامة HTML؟

باستخدام الأنماط المضمنة ، يمكنك تطبيق CSS على styleالسمة في علامة HTML الافتتاحية.

تتضمن أمثلة علامات HTML ما يلي:

  • ...
  • ...

  • ...

غالبًا ما تكون علامات الفتح والإغلاق جزءًا من عنصر HTML ، والتي يمكن أن تحتوي على نص أو بيانات أو صورة أو لا شيء على الإطلاق.

هنا ، لدينا عنصر نصي.

This is my first paragraph.

يمكننا استخدام الأنماط المضمنة لتصميم هذا العنصر عن طريق إضافة سمة النمط إلى العلامة الافتتاحية ، متبوعة بأزواج قيمة خاصية CSS.

This is my first paragraph.

This is my second paragraph.

دعنا نتعرف على كيفية استخدامنا للأنماط المضمنة.

كيفية استخدام الأنماط المضمنة

أضف النمط للعلامة التي تريد تصميمها ، متبوعة بعلامة يساوي. ابدأ وقم بإنهاء CSS بعلامات اقتباس مزدوجة.

أضف أزواج خاصية-قيمة إلى سمة النمط. أضف فاصلة منقوطة بعد كل زوج من الخصائص والقيمة.

color: red; font-size: 20px; 

لذلك عندما نجمع كل شيء معًا ، يبدو الأمر كما يلي:

This is my first paragraph.

النقاط الرئيسية التي يجب معرفتها

على عكس أوراق الأنماط الداخلية والخارجية ، لا تحتوي الأنماط المضمنة على أقواس متعرجة أو فواصل أسطر. أي اكتب CSS الخاص بك على نفس السطر عند استخدام الأنماط المضمنة.

أيضًا ، ضع في اعتبارك أن الأنماط المضمنة تؤثر فقط على العنصر المحدد الذي تضيف سمة النمط مع أزواج قيمة خاصية CSS إليه.

على سبيل المثال ، في الكود أدناه ، تم تصميم الفقرة الأولى فقط باللون الأحمر بحجم خط يبلغ 20 بكسل.

This is my first paragraph.

This is my second paragraph.

إذا أردنا تصميم نص كلتا الفقرتين بأنماط مضمنة ، فسنحتاج إلى إضافة CSS إلى سمة النمط إلى الثانية

This is my first paragraph.

This is my second paragraph.

However, if we used an external stylesheet, for example, we could easily style both paragraphs without duplicating our code by using a single CSS selector.

p { color: red; font-size: 20px; } 

This brings us to an important topic: when to use and when not to use inline styles.

When to Use (and when NOT to use) Inline Styles

Say you have an HTML file with ten or more paragraph tags. Can you imagine styling each one individually with inline styles?

Doing so will quickly clutter your code, making it hard to read and maintain.

Besides, inline styles can introduce specificity issues if you’re also using internal or external stylesheets.

That’s because inline styles have a high specificity. This means they'll override most other rules in internal and external stylesheets, except for the !important declaration.

For example, we added inline styles to two paragraph elements. We’ve also added an internal stylesheet.

 My New Webpage p { color: pink; } 

A blue paragraph.

Another blue paragraph.

The CSS from our inline styles override the CSS in the internal stylesheet. So we end up with two blue paragraphs.

External stylesheets are also much easier to maintain when you or someone else needs to make a change. This is because a style from an external or internal stylesheet can apply to multiple elements, while an inline one must be applied to each element individually.

For example, say you need to update a style to ten elements. It’s easier to make the change once in an external stylesheet, instead of ten different times in your HTML file.

In general, it’s often best practice to put your CSS into a separate file. That way, your HTML file contains the structure and content of your website, and your CSS file contains your styles. Doing so makes your code easier to read and manage.

However, there are times when it may make sense to use inline styles:

  • Add a style and see the change quickly, which can be useful for testing.
  • Use the style attribute in JavaScript to apply styling.

Most of the time you’ll want to use external stylesheets. But you’ll occasionally find yourself using inline styles, most commonly in the above situations.

I write about learning to program, and the best ways to go about it on my blog at amymhaddad.com.