يمكنك تضمين كود CSS في الصفحة بأربع طرق: في نص المستند، قم بتضمين الكود في جزء الرأس من الصفحة ( header)، قم بتوفير رابط لملف خارجي، وقم أيضًا باستيراد ملف CSS.
في الحالة الأولى، يتم تطبيق الأنماط مباشرة على عنصر HTML. بدلاً من الإعلان عن جميع الأنماط مرة واحدة ثم تطبيقها مع تقدم التعليمات البرمجية الخاصة بك، يمكنك تصميم كل عنصر على حدة.
مثال:
أنماط HTML مع CSS
عرض العرض التوضيحي
تعتبر Inline CSS طريقة سريعة ومريحة لتصميم مستندات HTML، ولكن لا يجب الإفراط في استخدامها. يؤدي استخدامه إلى تعقيد صيانة موقع الويب بشكل كبير. قد تؤدي الحاجة إلى إجراء تغيير طفيف إلى إعادة كتابة الكود بالكامل.
هذه الطريقة اتصالات CSSإلى HTML يعني أنك تضيف كل أكواد التصميم الضرورية في قطعة واحدة كبيرة. يتيح لك هذا تصميم أي عنصر في الصفحة. يمكن تنفيذ نهج مماثل عن طريق تضمين كود CSS باستخدام
سيبدو رمز صفحة HTML كما يلي:
عرض العرض التوضيحي
تعد الأنماط الخارجية إحدى الطرق الأكثر شيوعًا لتضمين أنماط CSS.
يتضمن إنشاء ملف منفصل يحتوي على كود CSS. تتم بعد ذلك الإشارة إلى هذا الملف بواسطة صفحات HTML. عادة، يتم استخدام ملف واحد لتصميم الموقع بأكمله.
لإضافة أنماط خارجية إلى صفحة ويب، استخدم العلامة تحديد سمات href وrel = "stylesheet":
يسمح لك بتحديد الأنماط للصفحة بأكملها مرة واحدة.
تم تنسيق هذه الفقرة باستخدام فئة.
الآن لا توجد معلومات في ملف HTML بخصوص تصميم العناصر. بفضل الاتصال ملف CSSجميع الأنماط لا تسبب فوضى في رمز ترميز الصفحة.
عرض العرض التوضيحي
يمكنك أيضًا استخدام قاعدة @import CSS للاستيراد طاولات خارجيةالأنماط. للقيام بذلك، استخدم العلامة
يستخدم هذا نفس الأنماط المستخدمة في الأمثلة السابقة، ولكن يتم استيرادها باستخدام @import :
يسمح لك بتحديد الأنماط للصفحة بأكملها مرة واحدة.
تم تنسيق هذه الفقرة باستخدام فئة.
عرض العرض التوضيحي
يرجى ملاحظة ذلك هذه الطريقةروابط خطوط CSSقد يؤثر سلباً على أداء الموقع، لذا ينصح باستخدامه .
ومع ذلك، يمكن استخدام قاعدة @import داخليًا ملف خارجيأوراق الأنماط لتضمين كود CSS واحد داخل رمز آخر دون التأثير على الأداء.
غير موجود قواعد صارمةفيما يتعلق بالطرق التي يجب استخدامها. من الأفضل أن تبدأ من حالة محددةواختيار الأكثر أفضل الممارساتعناصر التصميم.
تم إعداد ترجمة المقال "كيفية إضافة CSS إلى صفحة ويب" بواسطة فريق المشروع الودود.
يمكن إضافة أوراق الأنماط إلى صفحة الويب بثلاث طرق: طرق مختلفةوالتي تختلف في قدراتها.
الأقوى و طريقة ملائمةتحديد الأنماط والقواعد الخاصة بالموقع. يتم تخزين الأنماط في ملف منفصلوالتي يمكن استخدامها لأية صفحات ويب. لتوصيل جدول الأنماط ذات الصلةيتم استخدام العلامة في عنوان الصفحة (مثال 1).
مثال 1: توصيل ورقة أنماط مرتبطة
يمكن أن يكون المسار إلى ورقة الأنماط نسبيًا أو مطلقًا، كما هو موضح في في هذا المثال.
يتم تعريف النمط في المستند نفسه وعادةً ما يكون موجودًا في رأس صفحة الويب. من حيث المرونة والقدرات، فإن طريقة استخدام النمط هذه أدنى من الطريقة السابقة، ولكنها تتيح لك أيضًا وضع جميع الأنماط في مكان واحد. في في هذه الحالة، مباشرة في نص المستند. يتم تحديد تعريف النمط بواسطة العلامة