logo

أنواع CSS

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

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

دون استخدام CSS ، لن يبدو الموقع جذابًا. هناك 3 انواع من CSS وهي أدناه:

  • مضمنة CSS
  • CSS داخلي/مضمن
  • CSS الخارجية
أنواع CSS

1. CSS الداخلي

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

يمكننا استخدام CSS الداخلي باتباع الخطوات التالية:

1. أولاً، افتح لغة البرمجة الصفحة وتحديد موقع

2. ضع الكود التالي بعد

 

3. أضف قواعد من CSS في السطر الجديد.

مثال:

 body { background-color: black; } h1 { color: white; padding: 50px; } 

4. أغلق علامة النمط.

 

بعد إضافة CSS الداخلي، يبدو ملف HTML الكامل كما يلي:

 body { background-color: black; } h1 { color: red; padding: 50px; } <h2>CSS types</h2> <p>Cascading Style sheet types: inline, external and internal</p> 

يمكننا أيضًا استخدام المحددات (الفئة والمعرف) في ورقة الأنماط.

مثال:

 .class { property1 : value1; property2 : value2; property3 : value3; } #id { property1 : value1; property2 : value2; property3 : value3; } 

إيجابيات CSS الداخلية

    CSS الداخليلا يمكن تحميل ملفات متعددة عندما نضيف الكود مع صفحة HTML.

سلبيات CSS الداخلية:

  • إضافة الكود في لغة البرمجة الوثيقة سوف تقلل من مقاس الصفحه و وقت التحميل من صفحة الويب.

2. CSS الخارجية

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

لاستخدام CSS الخارجي، اتبع الخطوات الموضحة أدناه:

1. إنشاء جديد .CSS ملف مع محرر النص ، و أضف ورقة الأنماط المتتالية القواعد أيضا.

على سبيل المثال:

 .xleftcol { float: right; width: 35%; background:#608800; } .xmiddlecol { float: right; width: 35%; background:#eff3df; } 

2. إضافة إشارة إلى الخارجية .CSS الملف مباشرة بعد علامة في قسم من ورقة HTML :

 

إيجابيات CSS الخارجية:

  • تتميز ملفاتنا بهيكل أنظف وأصغر حجمًا.
  • نحن نستخدم نفس الشيء .CSS ملف لصفحات ويب متعددة في CSS الخارجية.

سلبيات CSS الخارجية:

  • لا يمكن تسليم الصفحات بشكل صحيح قبل تحميل CSS الخارجي.
  • في CSS الخارجي، يمكن أن يؤدي تحميل العديد من ملفات CSS إلى زيادة وقت تنزيل موقع الويب.

3. CSS مضمنة

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

في المثال التالي، استخدمنا CSS المضمّن في

قوائم المغلق
و

سيكون مفيدا هنا.

إيجابيات CSS المضمنة:

  • يمكننا إنشاء قواعد CSS على صفحة HTML.
  • لا يمكننا إنشاء وتحميل مستند منفصل في CSS المضمّن.

سلبيات CSS المضمنة:

  • إضافة CSS مضمنة CSS قواعد لعناصر HTML هي استهلاك الوقت و عبث حتى هيكل HTML.
  • يقوم بتصميم عناصر متعددة في نفس الوقت مما قد يؤثر على حجم الصفحة ووقت تنزيل الصفحة.