CSS
CSS
CSS (أوراق الأنماط المتتالية)
أوراق الأنماط المتتالية هي في الأساس طريقة تُمكّنك من كتابة قواعد توضّح كيف تريد تنسيق جميع الفقرات، أو كيف تريد تنسيق جميع العناوين، أو كيف تريد تنسيق بعض الصور.
وهي طريقة موحّدة لتعريف أنماط عناصر HTML، مما يجعل التنسيق متناسقًا وقابلًا لإعادة الاستخدام.
وتُكتب القواعد بهذه الطريقة:
أولًا، تقوم بتحديد المُحدِّد (Selector)، والمُحدِّد يوضّح أي عنصر أو عناصر HTML تريد تطبيق التنسيق عليها.
إضافة التنسيق (Adding Style):
بما أن وسوم التنسيق (مثل <font>) تم الاستغناء عنها في HTML لصالح CSS، أصبح التنسيق يتم باستخدام خاصية style.
تُكتب التعليقات في CSS بين /* و */.
يتم تعريف التنسيق داخل وسم <head>،
وتُكتب القواعد داخل وسم <style>.
الأنماط المعرّفة داخليًا (Internal Styles) تُطبَّق على جميع العناصر المطابقة لها داخل ملف الـ HTML نفسه.
ورقة أنماط خارجية (External Style Sheet):
طريقة عمل ورقة الأنماط الخارجية هي أنك تضع قواعد التنسيق في ملف منفصل.
فتقوم بإنشاء ملف جديد وتقوم بحفظه باسم مثل mystyle مع امتداد .css.
وبذلك يفهم المتصفح أن كل ما يوجد في ملف HTML هو المحتوى، وكل ما يوجد في ملف CSS هو التنسيق (الشكل والتخطيط).
وعند إنشاء ورقة أنماط خارجية، فإنها تبدو تمامًا مثل التنسيق الداخلي (Internal Style)،
لكن دون استخدام وسم <style>.
يتم وضع رابط ورقة الأنماط داخل وسم <head>.
ماذا لو تم تعريف نفس المُحدِّد (Selector) في ملفين خارجيين؟
في هذه الحالة، القاعدة الموجودة في الملف الذي تم ربطه مؤخرًا هي التي يكون لها الأولوية.
اللون (Color):
إحدى الطرق لإضافة اللون هي ببساطة استخدام اسم اللون باللغة الإنجليزية مثل:
Blue، Red، Yellow، وغيرها.هذه الطريقة تعمل بشكل جيد وتظهر الألوان بشكل صحيح على الصفحة.
يُعد النظام السداسي العشري (Hexadecimal) من أكثر الطرق شيوعًا لاستخدام الألوان.
كما يمكن استخدام نظام RGB مثل:
(0,0,1)، (1,0,0)، (1,1,0).
عائلة الخط (Font Family):
هي أنماط أو أنواع الخطوط المستخدمة في النص.
الخطوط المخصّصة (Custom Fonts):
للتوسّع خارج الخطوط الآمنة للويب (Web-safe fonts) يمكن استخدام @font-face.
نمط الخط (Font Style):
يُستخدم لتحديد شكل الخط (مثل عادي أو مائل).
تنويعة الخط (Font Variant):
normal (عادي)
small-caps (أحرف كبيرة صغيرة)
حجم الخط (Font Size):
لديك عدة خيارات لتحديد حجم الخط، مثل:
extra-extra-small، extra-small، small، smaller.
كما يمكنك استخدام:
medium، large، extra-large، xx-large، larger.
ويمكنك أيضًا تحديد حجم الخط باستخدام البكسل (pixels).
خاصية العرض (Display) هي المفتاح لتخطيط الصفحة:
كل عنصر في الصفحة يُعتبر بمثابة صندوق (Box).
طريقة عرض العنصر (Display) تؤثّر على جميع العناصر المجاورة له في الصفحة.
من أكثر القيم شيوعًا لخاصية العرض:
block و inline.
عند الحديث عن خاصية display، هناك قيم شائعة جدًا يستخدمها الجميع، أو تكون هي القيم الافتراضية، وغالبًا ما تكون قد استخدمتها دون أن تشعر.
العناصر من نوع inline تظهر بجانب العناصر الأخرى، وتأخذ فقط القدر اللازم من العرض والارتفاع، ولا أكثر من ذلك، عند وضعها في الصفحة.
أما عناصر block فهي تفرض كسر سطر (line break)، وتأخذ بشكل افتراضي كامل العرض الأفقي المتاح وارتفاعًا يكفي لمحتواها فقط.
ويمكنك ضبط الارتفاع والعرض لهذه العناصر يدويًا.
في حالة inline، يأخذ العنصر مساحة كافية فقط، ولا يمكنك تغيير أبعاده.
أما في حالة block، فلديك مرونة أكبر في التحكم بالحجم، لكن المشكلة أنك تحجز مساحة كبيرة من الصفحة.
inline-block:
العناصر التي يكون لها display: inline-block تتصرف مثل عناصر inline من حيث أنها يمكن أن تظهر بجانب بعضها البعض،
لكن في نفس الوقت يمكن تحديد الارتفاع (height) والعرض (width) لها.
none:
تُستخدم display: none; لإخفاء العنصر تمامًا.
وعند تطبيقها على عنصر في الصفحة، يتصرف المتصفح وكأن هذا العنصر غير موجود أصلًا،
فلا يظهر ولا يحجز أي مساحة في الصفحة.
float و clear:
تسمح لك خاصية float بإعادة تموضع العناصر.
فعندما تقول float: right فهذا يعني وضع العنصر إلى أقصى اليمين الممكن،
وعندما تقول float: left فهذا يعني وضعه إلى أقصى اليسار الممكن.
العناصر الأخرى تكون على دراية ببعضها البعض، وعند استخدام float لن تتداخل العناصر معًا،
لكن قد يبدو التخطيط فوضويًا بعض الشيء.
وعند إضافة خاصية float لعنصر ما، فإنك تؤثّر على العناصر المجاورة له، لأن هذه العناصر تحتاج إلى معرفة مكانه الجديد.
ولهذا السبب توجد خاصية إضافية تُسمّى clear.
أحيانًا أثناء البرمجة تريد التأكد من أن لا شيء يطفو (float) على يسارك أو يمينك،
وترغب في الحصول على المساحة كاملة لنفسك،
وفي هذه الحالة يمكنك استخدام:
clear: left أو clear: right أو clear: both.
clear: left: للتأكد من عدم وجود عناصر عائمة على اليسار.
clear: right: للتأكد من عدم وجود عناصر عائمة على اليمين.
clear: both: يعني ألا يوجد أي عنصر عائم بجانبك على الإطلاق.
overflow:
يمكن استخدام خاصية overflow لتحديد كيفية وصول المستخدمين إلى المحتوى الزائد،
أو ما إذا كان بإمكانهم الوصول إليه من الأساس أم لا.
القيم الأربع لخاصية overflow:
visible:
يكون المحتوى مرئيًا، وقد يتجاوز حدود العنصر ويتداخل مع عناصر أخرى.
hidden:
يُخفي أي محتوى يتجاوز حدود الصندوق (Bounding Box)،
وقد يسبب ذلك مشاكل، فمثلًا إذا قام المستخدم بزيادة حجم الخط في المتصفح فقد لا يتمكن من رؤية المحتوى.
scroll:
يضيف أشرطة تمرير أفقية وعمودية دائمًا.
auto:
يضيف أشرطة التمرير فقط عند الحاجة.
display: table:
طريقة عمل العرض كجدول هي أنك لا تنشئ جدولًا فعليًا باستخدام HTML،
ولا تستخدم وسم <table>،
ولكنك تخبر المتصفح أنك تريد تنظيم المحتوى وكأنه جدول.
لذلك، يمكنك جعل أي عنصر حاوٍ يستخدم:
display: table
وأي عناصر تريد محاذاتها في أعمدة مرتبة تستخدم لها:
display: table-cell.
الارتفاع والعرض (Height and Width):
العناصر من نوع inline يكون عرضها افتراضيًا مناسبًا لمحتواها فقط.
أما العناصر التي ليست inline، مثل block و inline-block وما شابهها،
فيمكن تحديد خصائص height و width لها.
الحدود (Border):
إحدى أسهل الطرق لوضع العناصر في أماكن محددة على الصفحة بشكل استراتيجي هي إضافة حدود (Borders) حولها.
الهامش (Margin):
الهامش هو المساحة الموجودة خارج الحد (border).
عند إعطاء العنصر هامشًا موجبًا، فهذا يعني أنك تحرّك العنصر إلى اليمين أو إلى الأسفل.
أما عند إعطائه هامشًا سالبًا، فإنك تجعله يقترب من العنصر المجاور،
أي يتحرك إلى اليسار أو إلى الأعلى.
التعبئة الداخلية (Padding):
التعبئة الداخلية هي المساحة بين محتوى العنصر وحدوده (Border).
تعطي العنصر مساحة إضافية داخليًا.
عند إعطاء عنصر padding، فهذا يضيف مساحة بين المحتوى والحدود.
إذا أعطيت العنصر padding سلبي، فإن الحد يقترب من العناصر المجاورة، وربما يتداخل معها أحيانًا.
حجم الصندوق (Box-sizing):
تُسهّل هذه الخاصية حساب العرض والارتفاع الكلي للعنصر.
الخيارات:
content-box: القيمة الافتراضية؛ العرض والارتفاع يشملان المحتوى فقط.
border-box: العرض والارتفاع يشملان المحتوى + التعبئة الداخلية (padding) + الحدود (border).
تنسيق الروابط والقوائم (Styling Links and Lists):
تنسيق الروابط:
ترتيب استخدام pseudo-classes للروابط يجب أن يكون كالتالي:
:link, :visited, :hover, :active.
ويجب أن تأتي a:visited و a:active بعد a:hover.
هذا الترتيب يضمن التسلسل الصحيح عند تنسيق صفحاتك.
تنسيق القوائم (Styling Lists):
يمكن تنسيق القوائم باستخدام خصائص مثل: list-style-type, list-style-position, وغيرها.
لتنسيق قوائم HTML (<ul> و <ol>)، توفر CSS خصائص إضافية تتجاوز الخطوط والهامش، وأهمها:
list-style-type: تحدد نوع العلامة أو الرمز للقائمة (مثل: disc، circle، decimal، lower-roman).
list-style-position: تحدد موقع العلامة بالنسبة للمحتوى، داخل العنصر أو خارجه (inside أو outside).
list-style-image: تستبدل العلامة الافتراضية بصورة مخصصة.
يمكن أيضًا دمج هذه الخصائص باستخدام الخاصية المختصرة list-style.
المراجع والموارد (References & Resources):
يوفر هذا القسم روابط مختارة لدروس وأدوات خارجية عالية الجودة لتعميق فهمك لأنظمة تخطيط CSS المتقدمة.
1. Flexbox
دورة فيديو: "What The Flexbox?!" – سلسلة فيديو مجانية مناسبة للمبتدئين تشرح مفاهيم Flexbox بشكل شامل من خلال أمثلة عملية.
الرابط: https://flexbox.ioمثال تفاعلي على CodePen: عرض عملي يوضح خصائص Flexbox الأساسية وسلوكها داخل حاوية فعلية.
الرابط: https://codepen.io/justd/pen/yydezNالوصف: مثال بصري ممتاز يوضح الميزات الرئيسية لـ Flexbox مثل:
justify-content، align-items، وتحديد أحجام العناصر المرنة.
2. CSS Grid
دورة فيديو: "CSS Grid" – دورة مجانية كاملة مخصصة لإتقان نظام تخطيط CSS Grid، بدءًا من الأساسيات وحتى التقنيات المتقدمة.
الرابط: https://cssgrid.io
3. التدريب والتجربة (Practice & Experimentation)
محررات الشيفرة على الإنترنت: لممارسة وتجربة CSS (بما في ذلك Flexbox و Grid)، يمكنك استخدام المنصات التالية:
CodePen: codepen.io
JSFiddle: jsfiddle.net
MDN Front-end Editor: متاح ضمن مقالات MDN Web Docs.
بواسطة Remocolla Academy
في
فبراير 12, 2026
تقييم:
ليست هناك تعليقات: