مثال على تعليق CSS - كيفية التعليق على CSS

تستخدم التعليقات في CSS لشرح كتلة من التعليمات البرمجية أو لإجراء تغييرات مؤقتة أثناء التطوير. لا يتم تنفيذ الكود المعلق.

تبدأ التعليقات الفردية ومتعددة الأسطر في CSS بـ /*وتنتهي بـ */، ويمكنك إضافة أي عدد تريده من التعليقات إلى ورقة الأنماط الخاصة بك. فمثلا:

/* This is a single line comment*/ .group:after { content: ""; display: table; clear: both; } /* This is a multi-line comment */

يمكنك أيضًا جعل تعليقاتك أكثر قابلية للقراءة من خلال تبسيطها:

/* *** * SECTION FOR H2 STYLE *** * A paragraph with information * that would be useful for someone * who didn't write the code. * The asterisks around the paragraph * help make it more readable. *** */

تنظيم CSS مع التعليقات

في المشاريع الكبيرة ، يمكن أن تنمو ملفات CSS بسرعة في الحجم وتصبح من الصعب صيانتها. قد يكون من المفيد تنظيم CSS في أقسام مميزة مع جدول محتويات لتسهيل العثور على قواعد معينة في المستقبل:

/* * CSS TABLE OF CONTENTS * * 1.0 - Reset * 2.0 - Fonts * 3.0 - Globals * 4.0 - Color Palette * 5.0 - Header * 6.0 - Body * 6.1 - Sliders * 6.2 - Imagery * 7.0 - Footer */ /*** 1.0 - Reset ***/ /*** 2.0 - Fonts ***/ /*** 3.0 - Globals ***/ /*** 4.0 - Color Palette ***/ /*** 5.0 - Header ***/ /*** 6.0 - Body ***/ h2 { font-size: 1.2em; font-family: "Ubuntu", serif; text-transform: uppercase; } /*** 5.1 - Sliders ***/ /*** 5.2 - Imagery ***/ /*** 7.0 - Footer ***/

المزيد حول CSS: CSS Syntax and Selectors

عندما نتحدث عن بناء جملة CSS ، فإننا نتحدث عن كيفية وضع الأشياء. هناك قواعد حول ما يتم الانتقال إليه ، بحيث يمكنك كتابة CSS باستمرار ويمكن لبرنامج (مثل المتصفح) تفسيره وتطبيقه على الصفحة بشكل صحيح.

هناك طريقتان رئيسيتان لكتابة CSS.

مضمنة CSS

تفاصيل حول خصوصية CSS: حيل CSS

يطبق Inline CSS النمط على عنصر واحد وتوابعه ، حتى يتم اكتشاف نمط آخر يتخطى الأول.

لتطبيق CSS المضمن ، أضف سمة "style" إلى عنصر HTML الذي ترغب في تعديله. علامات الاقتباس الداخلية ، قم بتضمين قائمة مفصولة بفاصلة منقوطة لأزواج المفتاح / القيمة (كل منها مفصول بنقطتين) للإشارة إلى الأنماط المراد تعيينها.

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

 One Two Three 

CSS داخلي

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

يحتوي CSS الداخلي على أنماطه المحددة في العلامة ، وهو مضمن في العلامة.

فيما يلي مثال له تأثير مشابه للمثال "المضمن" أعلاه ، باستثناء أنه تم استخراج CSS إلى منطقته الخاصة. ستتطابق الكلمتان "واحد" و "اثنان" مع divالمحدد ويكونان نصًا أحمر على خلفية صفراء. ستطابق الكلمتان "ثلاثة" و "أربعة" divالمُحدد أيضًا ، لكنهما أيضًا تطابق .nested_divالمحدد الذي ينطبق على أي عنصر HTML يشير إلى تلك الفئة. يتجاوز هذا المحدد الأكثر تحديدًا الأول ، وينتهي به الأمر بالظهور كنص سماوي على خلفية خضراء.

 div { color: red; background: yellow; } .nested_div { color: cyan; background: green; } One Two Three Four 

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

فيما يلي مثال نحدد فيه نمطًا يجب تطبيقه فقط على divالعناصر التي هي تابعة مباشرة divلعناصر أخرى . والنتيجة هي أن "اثنين" و "ثلاثة" سيظهران كنص أحمر على خلفية صفراء ، لكن "واحد" و "أربعة" سيظلان غير متأثرين (وعلى الأرجح نص أسود على خلفية بيضاء).

 div > div { color: red; background: yellow; } One Two Three Four 

CSS خارجي

كل الأنماط لها وثيقة خاصة بها مرتبطة بالعلامة. امتداد الملف المرتبط هو.css