CSS أو أوراق الأنماط المتتالية هي ما يستخدم في تصميم موقع الويب الحديث لتطبيق المظهر المرئي على الصفحة. بينما ينشئ HTML بنية الصفحة ويمكن لجافا سكريبت التعامل مع السلوكيات ، فإن مظهر موقع الويب وأسلوبه هو مجال CSS. عندما يتعلق الأمر بهذه الأنماط ، يتم تطبيقها غالبًا باستخدام أوراق الأنماط الخارجية ، ولكن يمكنك أيضًا تطبيق أنماط CSS على عنصر واحد محدد باستخدام ما يُعرف باسم "الأنماط المضمنة".
الأنماط المضمنة هي أنماط CSS يتم تطبيقها مباشرة في HTML الخاص بالصفحة. هناك مزايا وعيوب على حد سواء لهذا النهج. أولا ، دعونا ننظر بالضبط كيف تتم كتابة هذه الأنماط.
كيف تكتب انلاين ستايل
لإنشاء نمط CSS مضمّن ، تبدأ بكتابة خاصية النمط مشابهة للطريقة التي تستخدمها في ورقة أنماط ، ولكن يجب أن تكون جميعًا في سطر واحد. افصل بين خصائص متعددة بفاصلة منقوطة تمامًا كما تفعل في ورقة أنماط.
خلفية: #CCC. اللون: # الاتحاد الفرنسي. الحد: أسود خالص 1px؛
ضع هذا الخط من الأنماط داخل سمة النمط للعنصر الذي تريد تنسيقه. على سبيل المثال ، إذا أردت تطبيق هذا النمط على فقرة في HTML ، فسيبدو هذا العنصر كما يلي:
في هذا المثال ، ستظهر هذه الفقرة المعينة بخلفية رمادية فاتحة (وهذا ما سيعرضه #ccc) ، والنص الأسود (من اللون # 000) ، وبحدود سوداء صلبة 1 بيكسل حول الجوانب الأربعة للفقرة .
مزايا الأنماط الداخلية
بفضل سلسلة أنماط الأنماط المتتالية من ورقة الأنماط المتتالية ، يكون لها أعلى أولوية أو خصوصية في المستند. وهذا يعني أنها سوف يتم تطبيقها بغض النظر عن ما تمليه في ورقة الأنماط الخارجية الخاصة بك (مع وجود استثناء واحد هو أي أنماط يتم إعطاؤها للإعلان المهم في تلك الورقة ، ولكن هذا ليس شيئًا يجب القيام به في مواقع الإنتاج إذا كان يمكن تجنبها).
الأنماط الوحيدة التي لها أسبقية أعلى من الأنماط المضمنة هي أنماط المستخدم المطبقة من قِبل القراء أنفسهم. إذا كنت تواجه مشكلة في تطبيق التغييرات ، يمكنك محاولة تعيين نمط مضمّن على العنصر. إذا كنت لا تزال لا تعرض الأنماط باستخدام نمط مضمّن ، فأنت تعرف أن هناك شيئًا آخر يحدث.
تكون الأنماط المضمنة سهلة وسريعة للإضافة ولا داعي للقلق بشأن كتابة محدد CSS المناسب حيث أنك تقوم بإضافة الأنماط مباشرة إلى العنصر الذي تريد تغييره (هذا العنصر يستبدل بشكل أساسي المحدد الذي تكتبه في ورقة أنماط خارجية ). لا تحتاج إلى إنشاء مستند جديد تمامًا (كما هو الحال في أوراق الأنماط الخارجية) أو تحرير عنصر جديد في رأس المستند (كما هو الحال في أوراق الأنماط الداخلية). كل ما عليك هو إضافة سمة النمط الصالحة في كل عنصر HTML تقريبًا. هذه كلها أسباب تجعلك تميل إلى استخدام أنماط مضمنة ، ولكن يجب أن تكون على دراية ببعض العيوب الهامة جدًا لهذا النهج.
عيوب الأنماط المضمن
نظرًا لأن الأنماط المضمنة هي الأكثر تحديدًا في السلسلة المتسلسلة ، فيمكنها أن تفرط في الأشياء التي لم تكن تنوي استخدامها. كما أنها تفسد أحد أقوى جوانب CSS - القدرة على تصميم الكثير والكثير من صفحات الويب من ملف CSS رئيسي واحد لجعل التحديثات المستقبلية وتغييرات النمط أكثر سهولة في الإدارة.
إذا كان عليك فقط استخدام أنماط مضمنة ، فستصبح المستندات الخاصة بك منتفخة بسرعة ويصعب الحفاظ عليها. هذا لأن الأنماط المضمنة يجب تطبيقها على كل عنصر تريده. لذا إذا كنت تريد أن تحتوي كل فقراتك على عائلة الخطوط "Arial" ، فيجب عليك إضافة نمط مضمّن لكل علامة
في المستند. يؤدي ذلك إلى إضافة كل من أعمال الصيانة للمصمم ووقت التنزيل للقارئ نظرًا لأنك ستحتاج إلى تغيير ذلك عبر كل صفحة في موقعك لتغيير عائلة الخطوط هذه. بدلاً من ذلك ، إذا كنت تستخدم ورقة أنماط منفصلة ، فقد تتمكن من تغييرها في مكان واحد والحصول على كل صفحة تتلقى هذا التحديث.
بصدق ، هذه خطوة إلى الوراء في تصميم الويب - مرة أخرى في أيام العلامة!
عيب آخر على الأنماط المضمنة هو أنه من المستحيل وضع عناصر زائفة و -classes معهم. على سبيل المثال ، باستخدام أوراق الأنماط الخارجية ، يمكنك تكوين لون الزائر ، التمرير ، النشط ، والارتباط لعلامة الارتساء ، ولكن مع نمط مضمّن ، كل ما يمكن أن يكون هو النمط نفسه هو الارتباط ، لأن هذا هو سمة السمة المرتبطة به .
في نهاية المطاف ، نوصي بعدم استخدام أنماط مضمنة لصفحات الويب الخاصة بك لأنها تسبب مشاكل وتجعل من الصفحات الكثير من العمل للحفاظ على. المرة الوحيدة التي نستخدمها هي عندما نريد التحقق من نمط بسرعة أثناء التطوير. وبمجرد أن ننظر إلى هذا العنصر الصحيح ، فإننا ننتقل إلى ورقة الأنماط الخارجية الخاصة بنا.
الأصل من قبل جينيفر كرينين. حرره جيريمي جيرار.