CSS

أنواع CSS


تصف (CSS (Cascading Style Sheet عناصر HTML التي يتم عرضها على الشاشة أو في وسائط أخرى , أنه يوفر الكثير من الوقت ويتحكم في تخطيط صفحات الويب المتعددة في وقت واحد. يقوم بتعيين حجم الخط وعائلة الخط واللون ولون الخلفية على الصفحة. يسمح لنا بإضافة تأثيرات أو رسوم متحركة إلى الموقع. نحن نستخدم CSS لعرض الرسوم المتحركة مثل الأزرار ، والتأثيرات ، ولوادر التحميل ، والخلفيات المتحركة أيضًا. بدون استخدام CSS ، لن يبدو موقع الويب جذابًا. هناك 3 أنواع من CSS وهي أدناه:

  • Inline CSS
  • Internal/ Embedded CSS
  • External CSS
  1. CSS داخلي (Internal/ Embedded CSS)
    تحتوي CSS الداخلية على علامة في قسم <head> من مستند HTML. يعد نمط CSS هذا طريقة فعالة لتصميم الصفحات الفردية. يستغرق استخدام نمط CSS لصفحات ويب متعددة وقتًا طويلاً لأننا نطلب وضع النمط على كل صفحة ويب. يمكننا استخدام CSS الداخلي باتباع الخطوات التالية:
    – أولاً ، افتح صفحة HTML وحدد موقع <head>
    – ضع الكود التالي بعد <head>

<style type="text/css">
Code language: HTML, XML (xml)

-أضف قواعد CSS في السطر الجديد
مثال :

body { background-color: black; } h1 { color: white; padding: 50px; }
Code language: CSS (css)

أغلق علامة <style/>

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

<!DOCTYPE html> <html> <head> <style> body { background-color: black; } h1 { color: red; padding: 50px; } </style> </head> <body> <h2>CSS types</h2> <p>Cascading Style sheet types: inline, external and internal</p> </body> </html>
Code language: HTML, XML (xml)

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

.class { property1 : value1; property2 : value2; property3 : value3; } #id { property1 : value1; property2 : value2; property3 : value3; }
Code language: PHP (php)
  • إيجابيات CSS الداخلية
    لا يمكن لـ CSS الداخلية تحميل ملفات متعددة عندما نضيف الكود مع صفحة HTML.
  • سلبيات CSS الداخلية:
    ستؤدي إضافة رمز في مستند HTML إلى تقليل حجم الصفحة ووقت تحميل صفحة الويب.

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

  1. قم بإنشاء ملف .css جديد باستخدام محرر نصوص ، وأضف قواعد ورقة الأنماط المتتالية أيضًا.
    مثال :
.xleftcol { float: right; width: 35%; background:#608800; } .xmiddlecol { float: right; width: 35%; background:#eff3df; }
Code language: CSS (css)

2.أضف مرجعًا إلى ملف .css الخارجي مباشرةً بعد علامة في قسم <head> في ورقة HTML

<link rel="stylesheet" type="text/css" href="style.css" />
Code language: HTML, XML (xml)
  • إيجابيات CSS الخارجية:
    تتميز ملفاتنا ببنية أنظف وأصغر حجمًا.
    نستخدم نفس ملف .css لصفحات ويب متعددة في CSS خارجي.
  • سلبيات CSS الخارجية:
    لا يمكن تسليم الصفحات بشكل صحيح قبل تحميل CSS الخارجية.
    في CSS الخارجية ، يمكن أن يؤدي تحميل العديد من ملفات CSS إلى زيادة وقت التنزيل لموقع الويب.

CSS مضمنة (Inline CSS)
يتم استخدام CSS المضمن لتصميم عنصر HTML معين. أضف سمة نمط إلى كل علامة HTML بدون استخدام المحددات. قد تكون إدارة موقع ويب صعبة إذا استخدمنا CSS مضمنة فقط. ومع ذلك ، فإن Inline CSS في HTML مفيد في بعض المواقف. لم نصل إلى ملفات CSS أو لتطبيق أنماط على عنصر.
في المثال التالي ، استخدمنا CSS المضمن في العلامة <h1> <p>

<!DOCTYPE html> <html> <body style="background-color:white;"> <h1 style="color:Red;padding:20px;">CSS Tutorials</h1> <p style="color:blue;">It will be useful here.</p> </body> </html>
Code language: HTML, XML (xml)
  • إيجابيات CSS المضمنة: يمكننا إنشاء قواعد CSS على صفحة HTML. لا يمكننا إنشاء وتحميل مستند منفصل في CSS المضمنة.
  • سلبيات CSS المضمنة: إن إضافة قواعد CSS إلى عناصر HTML تستغرق وقتًا طويلاً وتؤدي إلى إفساد بنية HTML. يقوم بتصميم عناصر متعددة في نفس الوقت مما قد يؤثر على حجم الصفحة ووقت تنزيل الصفحة.

اظهر المزيد

مقالات ذات صلة

شاهد أيضاً
إغلاق
زر الذهاب إلى الأعلى

أنت تستخدم إضافة Adblock

الاعلانات هي مصدرنا الوحيد لدفع التكلفة التشغيلية لهذا المشروع الريادي يرجى الغاء تفعيل حاجب الأعلانات