دروس CSS: تعلم CSS من سكراتش

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

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

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

ما هو CSS؟

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

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

استكشف دوراتنا التدريبية الشهيرة في هندسة البرمجيات

فيما يلي بعض المزايا المهمة الأخرى لـ CSS:

• سرعة محسنة:

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

• سهولة الصيانة: -

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

• توافق الجهاز: -

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

ما هي أنواع CSS المختلفة؟

• CSS مضمن: -

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

• CSS داخلي: -

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

• CSS خارجي: -

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

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

بناء الجملة في CSS

يشير بناء الجملة في CSS إلى قواعد أو عناصر التصميم المختلفة التي يفسرها المستعرض أثناء تصميم صفحة الويب. فيما يلي العناصر الأساسية الثلاثة لـ CSS:

• المحدد: -

  يمكنك فهم المحدد في CSS كعلامة في HTML تحدد العنصر الفردي الذي يتم تطبيق قواعد التصميم عليه. فيما يلي الأنواع المختلفة من المحددات في CSS:

• المحدد العام: -

  لا تحدد العناصر على أساس النوع. بدلاً من ذلك ، يتم تحديد جميع العناصر التي تحمل الاسم نفسه.

• محدد السليل: -

  تُستخدم هذه المحددات لتطبيق قاعدة نمط على عنصر فقط عندما يكون موجودًا داخل عنصر معين آخر.

• محددات الفئة: -

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

• محددات الهوية: -

  تطبق هذه المحددات قواعد التصميم بناءً على معرّف مشابه.

• ملكية:-

  تتم الإشارة إلى خصائص CSS إلى السمات أو الميزات المتنوعة لعلامات HTML مثل اللون والحجم والحد والمحاذاة.

• قيمة:-

  هذه هي القيم المعينة لخصائص CSS. على سبيل المثال ، يجب أن يكون للون أو الحجم المعين القيمة # A2A2.

رموز ألوان CSS

يتم تعيين قيمة أو رمز معين للألوان المختلفة المستخدمة في لغة CSS. يمكّن مصمم موقع الويب من تعيين ألوان معينة لعناصر مثل الخلفية أو النص أو الحدود. فيما يلي التنسيقات المختلفة لتعيين قيم الألوان في CSS:

• الرموز السداسية: -

  هذه رموز مكونة من ستة أرقام تستخدم لتمثيل قيمة اللون. يمثل الرقمان الأوليان من الكود (RR) قيمة اللون الأحمر متبوعة بقيمتين للأخضر (GG) وآخر قيمتين للأزرق (BB). يمكنك استخدام القيم السداسية العشرية من برامج الرسومات المختلفة مثل Adobe و Advanced Paint Brush. من المهم ملاحظة أن الرموز السداسية العشرية في CSS تبدأ بعلامة التجزئة.

• قيم RGB: -

  في هذه الخاصية ، توجد قيمة محددة لكل لون من الألوان الثلاثة ، وهي الأحمر والأخضر والأزرق.

كيفية تعيين لون الخلفية باستخدام CSS؟

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

<p style = "background-color: blue ؛">. سيعطي هذا النص المعين أو العلامة لون خلفية أزرق. وبالمثل ، تحتاج إلى استخدام الخاصية "background-image" لتعيين صورة الخلفية. لتكرار الصورة في الخلفية ، يمكنك استخدام الخاصية "تكرار الخلفية".

فيما يلي خصائص CSS المختلفة المستخدمة لتصميم الخطوط:

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

خصائص CSS لتصميم النص والصور

يحتوي CSS أيضًا على خصائص مختلفة لتصميم نص عنصر.

• تحدد خاصية "اللون" اللون ، بينما يتم استخدام خاصية direction لتحديد نمط "اتجاه" النص.
• يتم استخدام خصائص المسافة البادئة للنص ومحاذاة النص لتعيين المسافة البادئة للنص ومحاذاة النص ، على التوالي.
• تساعد خاصية letter-space على زيادة أو تقليل المسافة بين الكلمات.
• يمكنك استخدام خاصية زخرفة النص لتسطير النص أو يتوسطه خط.
• تساعد خاصية تحويل النص في تحويل النص من أحرف صغيرة إلى أحرف كبيرة والعكس صحيح.
• يمكنك أيضًا استخدام خاصية ظل النص لترتيب الظل حول النص.

يمكن تصميم صور صفحة الويب باستخدام خصائص CSS التالية.

• تحدد خصائص الارتفاع والعرض ارتفاع الصورة وعرضها ، على التوالي.
• يمكنك استخدام خاصية border لتعيين عرض حدود الصورة.
• تساعد خاصية -moz-opacity على إصلاح شفافية الصورة أو تعتيمها.

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

• تساعد خاصية List-style-type في تعيين شكل التعداد النقطي أو الرقم أو أي علامة أخرى.
• يمكنك أيضًا استخدام خاصية list-style-image بدلاً من الخاصية أعلاه لإضافة الصور بدلاً من الرموز النقطية أو الأرقام.
• تتحكم خاصية List-style-position في محاذاة أو مسافة بادئة لنقاط مختلفة.

اقرأ مقالاتنا الشهيرة المتعلقة بتطوير البرمجيات

استنتاج

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

إذا كنت ترغب في ممارسة مهنة في تصميم مواقع الويب ، يمكنك متابعة درجة الماجستير في العلوم في دورة علوم الكمبيوتر من upGrad.