ما هي لغة CSS ؟ .. الفرق بينها وبين HTML .. مميزاتها مع شرح أكواد عملي

أوراق الأنماط المتتالية أو ما يعرف اختصارا باسم (CSS)، هي لغة أنماط تستخدم لإضافة (التصميم) إلى لغات الترميز وعلى رأسهم (لغة HTML).

بشكل آخر فإن CSS هي من تحدد الطريقة التي يتم عرض بها عناصر HTML وكيف تظهر على صفحات الويب.

لغة CSS : كيف تجعل تصميم مواقع الويب أكثر جمالا، صورة بالذكاء الاصطناعي من مايكروسوفت copilot، خاصة بالمعرفة للدراسات.

نغطي لكم في هذا التقرير التعليمي عن CSS المفاهيم الأساسية والمتقدمة لتلك اللغة، بما في ذلك الخصائص والوظائف والمحددات واستعلامات الوسائط والمزيد من ذلك.

ما هي لغة SCC ؟:

• يشير SCC إلي Cascading Style Sheets وتعني بالعربية أوراق الأنماط المتتالية.

إذا ما أردنا أن نعرض مستند مكتوب بلغة HTML أو XML فإن لغة CSS تكون هي الحل.

يشمل ذلك عرض المستندات المكتوبة بلهجات XML المختلفة مثل (SVG أو MathML أو XHTML).

ويشمل ذلك أيضا أي مكان سيتم عرض فيه عناصر مكتوبة بلغة HTML .. مهما كان الشكل أو الصيغة التي ستعرض به.

هذا وتعتبر لغة SCC واحدة من اللغات الأساسية للويب المفتوح والتي تلبي متطلبات جميع أنواع متصفحات الويب المختلفة وفقا للمواصفات الموضوعة من رابطة الشبكة العالمية (W3C) أهم منظمة مختصة بوضع معايير عمل الإنترنت على مستوي العالم.

ما هو الفارق بين HTML و CSS ؟:

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

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

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

وهكذا فمن خلال CSS نتمكن من تحويل صفحة الويب الأساسية إلي تجربة جذابة بصريًا وسهلة الاستخدام.

مميزات لغة CSS:

من كل ما سبق، تبدو أهمية لغة CSS واضحة في هذه النقاط:

أولا: تحسين جودة الموقع:

عندما تمنحنا ميزة كبيرة في تحسين فرص الموقع الذي نقوم بتصميمه لتصدر محركات البحث وأهمها محرك البحث جوجل.

هذه هي النقطة التي يبحث عنها جميع أصحاب المواقع أيا كان مجالها، لتأمين جذب أعداد كبيرة من الزوار وتحقيق الأرباح من مواقعهم.

إذ تعتمد محركات البحث حاليا على العديد من المعايير في ترتيب المواقع، ومن أهمها معيار (تجربة المستخدم) وخصوصا بالنسبة للأجهزة الجوالة.

ثانيا: توفير الوقت والمجهود:

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

ثالثا: حل مشاكل HTML:

عندما ابتكر السير (تيم بيرنرز لي) عالم الكمبيوتر الانجليزي لغة الترميز HTML لم يكن لديه أي نية في أن تحتوي لغته على أي علامات لتنسيق صفحات الويب.

فكما أوضحنا في تقريرنا عنها، جاءت لغة HTML من أجل وصف محتوي صفحة الويب، برموز مثل:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

لكن لغة HTML تطورت بمرور الوقت ، وعندما تمت إضافة علامات مثل <font> وسمات اللون إلى مواصفات HTML 3.2 .. كان ذلك الأمر بمثابة الكابوس بالنسبة لمطوري الويب.

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

ماذا ينبغي أن تعرفه عن CSS؟:

إذا كنت مبرمجا وقررت العمل على لغة الأنماط (أوراق الأنماط المتتالية) والمعروفة اختصارا CSS فإن هناك العديد من الأشياء التي يجب أن تعرفها.

وكعادتنا .. نعرضها بطريقة خطوة بخطوة:

الخطوة الأولى: مقدمة عن CSS:

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

ومن بين هذه الأساسيات:

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

الخطوة الثانية: معرفة كتل بناء CSS:

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

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

الخطوة الثالثة: تصميم النص:

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

النقاط الأساسية هنا هي أساسيات تصميم النص، بما في ذلك ضبط الخط، والخط العريض، والخط المائل، والتباعد بين السطور والأحرف، والظلال المنسدلة، وأي مميزات أخرى في النص الذي يظهر للقراء.

يشمل ذلك أيضا التصميمات التي ستظهر بها القوائم والروابط.

الخطوة الرابعة: تخطيط CSS:

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

الآن يكون الوقت قد حان من أجل أن تعرف كيفية وضع المربعات في أماكنها الصحيحة بالنسبة إلى نافذة العرض، وبالنسبة إلى بعضها البعض.

يشمل ذلك معرفتك بأدوات التخطيط الحديثة مثل flexbox، وCSS Grid، جنبا إلى جنب مع بعض التقنيات القديمة التي قد لا تزال تحتاج إلي معرفتها.

كيف تضيف CSS إلي HTML ؟:

هناك ثلاث طرق مختلفة لإضافة أنماط CSS إلى مستند HTML، وهي:

ال CSS المضمن:

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

ال CSS الداخلي:

في هذه الحالة يضع المبرمج أنماط CSS داخل علامة <style> الموجودة في ملف HTML، <head> وعادة ما يكون ذلك داخل قسم.

ال CSS الخارجي:

هنا يقوم المبرمج بإنشاء ملف CSS منفصل بامتداد .css، ثم يقوم بربط هذا الملف بملف HTML وذلك باستخدام علامة <link>.

باستخدام ملف جدول أنماط خارجي CSS يمكنك على سبيل المثال تغيير مظهر موقع ويب بالكامل.

وستجدون في الجزء التالي من هذا الموضوع أمثلة عملية على تلك الطرق.

أمثلة عن أكواد CSS:

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

ولدينا آخر مثال لكودين من أكواد CSS نشرح فيهما الفارق بين طريقتين من طرق إضافة أكواد CSS داخل HTML.

الكود الأول بطريقة ال CSS الداخلي:

<!-- File name: index.html -->
<!DOCTYPE html>
<html>

<head>

      <!-- Importing External CSS -->
    <link rel="stylesheet" href="style.css" />
   
      <!-- Using Internal CSS -->
    <style>
        h2 {
            color: green;
        }
    </style>
</head>

<body>
 
    <!-- Using Inline CSS -->
    <h2 style="text-align: center;">
          Welcome To GFG
     </h2>
 
    <p>CSS Tutorial - GeeksforGeeks</p>
</body>

</html>

الكود الثاني بطريقة ال CSS الخارجي:

/* External CSS */
/* File name: style.css */
p {
      text-align: center;
}

تصميم صفحة HTML واحدة باستخدام أنماط متعددة من CSS:

باستخدام أنماط CSS يمكنك أن تختار اللون وشكل التصميم وحجم الخط في صفحة الويب، سواء كان خط العناوين أو الكتابة العادية.

كذلك وبواسطة تلك الأنماط يمكن تقسيم المحتوي الخاص بك إلي عدة أعمدة أو حتى إضافة رسوم متحركة وميزات زخرفية أخرى.

تنويه: هناك بعض الصفحات التي قد لا تحتاج فيها لاستخدام أي أنماط من CSS ويطلق عليها No Styles أو no stylesheet.