الحسام لتعليم لغات البرمجة al-hassam.blogspot.com: تعرّف على أساسيات CSS

تعرّف على أساسيات CSS (الجزء الأول)

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

تُعد CSS من أهم التقنيات التي تحدد شكل موقع الويب وما يظهر للمستخدم.

في هذا الدرس سنتعرف على أساسيات CSS، وسنغطي المحاور التالية:

• ماهي لغة CSS؟
• تعريف قوانين التصميم
• التعليقات في CSS
• تجميع المنتقى

ماهي لغة CSS؟

تُستخدم HTML لبناء هيكل الصفحة، بينما تُستخدم CSS لتصميم هذا الهيكل وتنسيقه.

📌 مثال توضيحي: HTML = هيكل المنزل CSS = الطلاء والديكور

تسمح CSS بتحديد:

• الألوان
• الخطوط
• المسافات
• مواقع العناصر

مثال: يمكنك جعل جميع عناصر

باللون الأخضر، أو تغيير خلفية الفقرات.

تعريف قوانين التصميم

الصيغة الأساسية:

selector { property: value; }

🔹 الشرح:

• selector: العنصر الذي سيتم تطبيق التصميم عليه
• property: الخاصية (مثل اللون)
• value: قيمة الخاصية

📌 مثال:

p { margin: 5px; font-family: Arial; color: blue; }

سيتم تطبيق:

• هامش 5px
• خط Arial
• لون أزرق

التعليقات في CSS

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

/* في هذه الكود أساسيات المنتقى */ 
selector { 
  property1: value; 
  property2: value; 
  property3: value; 
}

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

selector { 
  property1: value; 
  /* property2: value; 
  property3: value; */ 
}

تعتبر هذه الطريقة مفيدة جداً خاصة إذا كنت تفحص أي جزء تريد أن يتم تطبيقه. والجزء الذي لا تريده ضعه ضمن تعليق أفضل من حذفهم ثم احفظ شِفرة CSS وأعد تحميل صفحة HTML لمُعاينة النتيجة.

تحتوي لغة CSS على نظام التعليق المتعدد الأسطر وهذا بخلاف بقية اللغات الأخرى أي أنها لا تحتوي على تعليق بسطر واحد. في حال أردت إدراج تعليق بسطر واحد فقط ضع بداية ونهاية التعليقات /* و */.

تجميع المنتقى

يمكنك أيضاً جمع أكثر من منتقى مختلف. نريد تعيين التصميم إلى

و

فيمكنك كتابة التصميم كما في المثال التالي:

h1 { 
  color:red; 
} 
p { 
  color:red; 
}

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

h1, p { 
  color:red; 
}

هناك العديد من المنتقى المختلف في كل مطابقة جزء مختلف في الترميز. الأنواع الثلاثة الأساسية والتي ستصادفك كثيراً هم:

• منتقى العنصر p ويطابق على جميع العناصر الموجودة بالصفحة كما شرحنا سابقاً.
• الصنف example. وهو يدل على اسم صنف (class)، ويتم تطبيق جميع القيم في التصميم للعنصر الذي يحمل هذا الصنف.
• المعرّف example# وهو يدل على اسم معرّف (ID) ويتم تطبيق جميع القيم في التصميم للعنصر الذي يحمل هذا الاسم.

استخدام منتقى CSS متقدم

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

حيث يوجد أنواع أخرى من المنتقى والتي تسمح لك باختيار عنصر وتطبيق تصميم عليه بأكثر تخصيص:

المنتقى العام

يمكن استخدام لاختيار جميع العناصر في الصفحة.

المنتقى الفرعي

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

المنتقى الابن

يمكنك استخدام هذا النوع في حال أردت اختيار عنصر محدّد والتي تعتبر كأبناء للعناصر الأصلية.

المنتقى التسلسلي

يمكنك استخدام هذا النوع في حال اخترت عنصر محدّد والتي تنحدر بتسلسل ضمن تلك العناصر (ليست متسلسلة بشكل مباشر ولكنها متسلسلة كشجرة العائلة أيضاً يمكن استخدام هذا النوع)

المنتقى الشقيق

يمكن استخدام هذا النوع في حال أردت اختيار عنصر محدّد والذي يتبع عنصر محدد آخر.

المحدّد Pseudo-classes

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

العناصر Pseudo-elements

تسمح لك بالتصميم على جزء من العناصر وليس جميع العناصر (أي الحرف الأول ضمن العنصر). كما تسمح أيضاً بإدراج محتوى قبل أو بعد عناصر محددة.

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

من الأفضل أن تبدأ باستخدام أول ثلاثة أنواع المنتقى ومع الوقت تستخدم البقية.

المنتقى العام

ببساطة يحدد المنتقى العام كل عنصر في الصفحة ويُطبق التصميم عليه. على سبيل المثال: تقول القاعدة التالية بأنه يجب تقديم 1 بكسل بلون أسود كإطار لجميع العناصر في الصفحة.

* { 
  border: 1px solid #000000; 
}

المنتقى الفرعي

يسمح المنتقى الفرعي باختيار العناصر التي تعتمد على لواحقها. على سبيل المثال: يمكنك اختيار جميع وسوم والتي تحتوي اللاحقة alt كما في المثال:

img[alt] { 
  border: 1px solid #000000; 
}

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

المنتقى الإبن

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

إلي اللون الأزرق. أي فقط لذلك العنصر وليس لأي عنصر آخر:

h3 > strong { 
  color: blue; 
}

المنتقى التسلسلي

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

 
  hello 
  
In this paragraph I will say goodbye.
 

في المثال السابق يعتبر العنصر

الأب لجميع الوسوم الأخرى حيث أنه لديه إبنان وهما وأيضاً

. والعنصر

لديه إبن واحد فقط وهو .

يمكنك اختيار المنتقى الابن لاختيار العنصر مباشرة داخل العنصر

مثل:

div > em { 
  ... 
}

يمكنك استخدام الطريقة التالية في حال أردت اختيار المنتقى التسلسلي كالتالي:

div em { 
  ... 
}

وفي هذه العملية سيتم تحديد كلاً من العنصرين .

المنتقى الشقيق

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

فمثلاً اذا أردت اختيار جميع عناصر

والتي تأتي مباشرة بعد جميع عناصر

فقط وليس

بمفرده فيمكنك استخدام هذا النوع كالتالي:

h2 + p { 
  ... 
}

المحدّد Pseudo-classes

تستخدم تقنية Pseudo-classes لتصميم حالات متنوعة من العناصر وليس لعناصر محددة فقط.

اشهر طريقة في استخدام هذا النوع النوع هو تطبيق تصميم على الروابط التشعبية.

تشرح القائمة التالية الأنواع المختلفة من Pseudo-classes كما تشرح حالة الروابط التي يتم تطبيق التصميم عليها.

• link: — التصميم الطبيعي والافتراضي لجميع الروابط في الصفحة.
• visited: — وهي الروابط التي تم فتحها وزيارتها في المتصفح التي تستخدمه حالياً.
• focus: — وهي الروابط (متضمنة حقول النماذج) التي تضغط عليها ولم تحرّر مؤشر الماوس منها.
• hover: — وهي الروابط التي تمرّر مؤشر الماوس عليها.
• active: — وهي الروابط التي تم النقر عليها.

يشرح كود CSS في المثال التالي ما قمنا بشرحه مسبقاً.

a:link { 
  color: blue; 
} 
a:visited { 
  color: gray; 
} 
a:hover, a:focus { 
  text-decoration: none; 
} 
a:active { 
  font-weight: bold; 
}

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

يعتبر أيضاً focus: مفيد بسبب مرونة استخدامه مع النماذج. فمثلاً يمكنك التشديد على حقل الإدخال والذي تقوم بتعبئة البيانات فيه سيتغير لونه مباشرة.

سنشرح تالياً first-child: — حيث يقوم باختيار العنصر الابن مباشرة بعد عنصر الأب.

سنقوم في المثال التالي باختيار أول عنصر من القائمة (سواء أكانت القائمة مرقّمة أو منقوطة) وجعله نصّاً غامقاً.

وأخيراً وباختصار نذكر lang: pseudo-class والتي تقوم باختيار العناصر التي تحتوي على اللاحقة lang أي اللغة.

العناصر Pseudo-elements

تمتلك العناصر Pseudo elements هدفان أساسيان.

أولاً: يمكنك اختيار هذا النوع لاختيار الحرف الأول أو السطر الأول من النص داخل العنصر المحدد.

يمكنك استخدام القاعدة التالية في حال أردت إنشاء حرف كبير للحرف الأول من كل فقرة.

والآن أصبح الحرف الأول في بداية كل فقرة غامقاً وحجمه أكبر 300% من الحجم الطبيعي كما أن لون الخلفية أحمر.

يمكنك استخدام الطريقة التالية لجعل السطر الأول من الفقرة غامق.

الاستخدام الثاني للعنصر pseudo-elements هو إدراج محتوى من خلال CSS وذلك معقد جداً.

يمكنك التحديد بأن المحتوى يجب أن يُدرج قبل أو بعد عنصر معين من خلال استخدام before: أو after: ثم يمكنك اختيار ما تريد إدراج قبل أو بعد العنصر المحدّد.

ولتبسيط ذلك يمكنك مشاهدة المثال التالي وهو إضافة صور تزيينية بعد كل رابط في الصفحة.

يمكنك أيضاً استخدام الدّالة ()attr لإدراج قيم معينة للواحق العناصر بعد عنصر معيّن.

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

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

وتعتبر هذه الميّزة مفيدة لأنها تقوم بإخفاء القوائم في حال الطباعة لأن المستخدم لا يمكنه فعل ذلك يدوياً.

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

اختزال CSS

سنشرح في هذا القسم نوع جديد من من التصميم وهو اختزال CSS.

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

سنشرح في هذا القسم الخاصيات التي يمكن اختزالها في عالم CSS.

استخدمت سابقاً في هذا الدرس جزءاً من اختزال CSS لكنني لم أذكره وهو border: 2px solid black وهذا في طبيعة الحال جزءاً مختصراً من قاعدة أطول.

مقارنة القيم الفردية والمختزلة

شاهد هذا المثال الذي يشرح الهوامش الخارجية (يتم اختزال الهوامش الداخلية والحدود بنفس الطريقة).

و بهذه الطريقة يمكن اختزالها كالتالي:

اختزال القيم بخاصية واحدة يسمح الاختزال بدمج أربع قيم بخاصية واحدة، كما يمكن أن يأخذ الاختزال أقل مع أربع قيم حسب القائمة التالية.

يتم ترتيب النتيجة حسب رقم القيمة المطلوبة:

• تطبيق نفس القيمة لجميع الجوانب الأربعة مثل margin: 2px.
• يمكن تطبيق القيمة الأولى للجانب العلوي والسفلي أما الثانية فلليمين واليسار مثل: margin: 2px 5px.
• يمكن تطبيق القيمة الأولى والثالثة للقسم العلوي والسفلي بينما القيمة الثانية لقسم اليمين واليسار مثل: margin: 2px 5px 1px.
• إذا كانت القيمة مفردة كما في رقم 1 فإنها على الترتيب من القسم العلوي فاليمين فالأسفل فاليسار.

من الأفضل استخدام الطرق الأربع للاختزال في CSS وهذا أيضاً يطبّق على الهوامش الداخلية padding.

أيهما يجب اختياره الخاصية المفردة أم القيمة المختزلة؟

تستخدم خاصيات الهوامش margin وpadding على نطاق واسع ولكن هناك بعض الحالات التي يتوجب عليك تجنّب استخدام القيم المختزلة أو استخدامهم بحذر كما في الحالات التالية:

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

مراجع الاختزال

تم شرح مسبقاً الأنواع المختلفة لاختزال الحدود.

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

تعمل الهوامش والحدود margin ،padding ،border بنفس الطريقة كما تعلمنا في الفقرة السابقة.

اختزال أنواع النص font

حيث يمكنك تحديد حجم الخط ومدى غمقته وشكله وعائلة الخطوط التي ينتمي إليها.

لكن أيضاً يمكنك اختزال جميع ذلك بسطر واحد.

اختزال الخلفية

حيث يمكنك تحديد لون الخلفية وصورة الخلفية ومكان الصورة وتكرار الصورة.

أيضاً يمكنك اختزال جميع ذلك بسطر واحد.

اختزال تصميم القوائم

أيضاً يمكنك تحديد نوع التسلسل للقائمة الغير مرقّمة والمكان والصورة.

أيضاً يمكنك اختزال جميع جميع ذلك بسطر واحد.

لاحظ بأن أيضاً شكل اللون يمكن اختزاله من حيث نوعه وهو الوحدة الستة عشرية #000 وهو مختزل من شكله المطوّل وهو #000000.

وكمثال أكثر تعقيداً مثل #6C9 وهو اختزال للشكل المطوّل #66CC99.

إدراج CSS مع HTML

يوجد ثلاثة أنواع لإدراج CSS مع صفحات HTMLهم: الإدراج الداخلي، الإدراج المضمر والتصميم الخارجي.

ينصح بشدّة استخدام النوع الثالث وهو استخدام الإدراج الخارجي (أي في ملف تصميم منفصل) ما لم يكن لديك سبباً لاستخدام أول نوعين.

الإدراج الداخلي

يمكنك تطبيق التصميم على عنصر معيّن من خلال استخدام اللاحقة style كما في المثال:

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

يمكنك مشاهدة مصدر هذا المثال.

يمكنك مشاهدة المثال عبر استخدام المتصفح كما ستلاحظ بأن الفقرة التي قمنا بتطبيق تصميم داخلي فيها أصبح النص باللون الأبيض وأيضاً خلفية النص أصبحت باللون الأزرق كما في الشكل 1.

الإدراج المضمر

تقع التصميمات المضمرة ضمن الوسم في صفحة HTML وبداخل وسم التصميم