وثائق CSS
مرجع موجز ومدعّم بأمثلة للغة CSS. اقرأ المفهوم، شاهد الكود، ثم تدرّب عليه في رحلة Coddy.
ابدأ الدورةالبداية
- Inline CSSتضع Inline CSS التصريحات مباشرة على العنصر عبر السمة style. تعلّم الصيغة، ومتى تكون الأنماط المضمّنة الخيار الصحيح، وكيف تتغلب على ملفات الأنماط، وكيف تقارن بـ CSS الداخلية والخارجية.
- External CSSتعيش External CSS في ملف .css تربطه كل صفحة عبر <link rel="stylesheet">، أما Internal CSS فتوجد في عنصر <style> داخل صفحة واحدة. تعلّم الاثنين، وكيف تعمل مسارات الملفات، وأي قاعدة تفوز حين تلتقيان.
- التعليقات في CSSفي CSS صيغة تعليق واحدة، /* ... */، لسطر واحد أو لعدة أسطر. تعلّم أين يمكن وضع التعليقات، وكيف تعطّل قاعدة بالتعليق، ولماذا تُفسد // والتعليقات المتداخلة القاعدة التالية بصمت.
- !important في CSSتجعل !important التصريح يفوز على التصريحات العادية مهما كانت خصوصيتها. تعلّم بالضبط على ماذا تتغلب، وما الذي يتغلب عليها، وكيف تعمل الخصوصية في الخلفية، والطرق الأنظف لحسم تعارض الأنماط.
- متغيرات CSSمتغيرات CSS (الخصائص المخصصة) تخزّن قيمة مرة واحدة وتعيد استخدامها عبر var(). تعلّم كيف تعرّفها في :root، وكيف تحدد نطاقها وتتجاوزها، وتضع قيمًا احتياطية، وتبدّل السمات بـ JavaScript، وتتجنب فخ القيمة غير الصالحة.
المحددات
- المحددات في CSSمحدد CSS يختار العناصر التي تنسقها القاعدة. تعلّم كل أنواع المحددات، والمُركِّبات الأربعة (السليل، الابن، الأخ المجاور، الأخ العام)، ومحددات السمات، والتجميع، وجرّب المحددات مباشرة.
- محدد class في CSSمحدد الفئة (.name) ينسق كل عنصر يحمل تلك الفئة، ومحدد المعرّف (#name) ينسق العنصر الوحيد الذي يحمل ذلك الـ id. تعلّم الصيغة، والفئات المتعددة والمتسلسلة، والفرق بين class وid، وقواعد التسمية، وتبديل الفئات بـ JavaScript.
- الفئات الزائفةالفئات الزائفة تختار العناصر حسب موضعها أو حالتها: :nth-child() و:first-child و:not() و:focus و:checked و:has() وغيرها. تعلّم الصيغة، ومعادلة an+b مع أداة تجربة مباشرة، والفرق بين nth-child وnth-of-type.
- ::before و::afterيُدرج ::before و::after محتوى مولَّدًا كأول ابن وآخر ابن للعنصر، مباشرة من CSS. تعلّم الخاصية content، ولماذا يلزم content فارغ، وكيف تضبط موضعهما، وتلميحات attr()، والعدّادات، والأماكن التي لا يعملان فيها.
- hover في CSSالفئة الزائفة :hover تنسق العنصر ما دام المؤشر فوقه. تعلّم تأثيرات التمرير على الأزرار والبطاقات، والانتقالات السلسة، وألوان الروابط بـ :link و:visited و:hover و:active بالترتيب الصحيح، وhover على الشاشات اللمسية.
نموذج الصندوق
- نموذج الصندوقكل عنصر صندوق من أربع طبقات: المحتوى، والحشو padding، والحد border، والهامش margin. تعلّم كيف تضيف كل طبقة إلى الحجم، وكيف تغيّر box-sizing: border-box الحساب، وشاهد كل طبقة مقيسة مباشرة.
- padding في CSSالحشو padding هو المسافة داخل العنصر، بين محتواه وحده. تعلّم اختصار padding بقيمة إلى أربع قيم، وخصائص الجانب الواحد، والحشو المنطقي، والنسب المئوية، وكيف يغيّر الحشو حجم العنصر.
- margin في CSSالهامش margin هو المسافة الشفافة خارج حد العنصر التي تدفع العناصر الأخرى بعيدًا. تعلّم اختصار margin، والتوسيط بـ margin: 0 auto، والهوامش السالبة، وmargin auto في flexbox، ولماذا تنهار الهوامش العمودية.
- margin وpaddingالحشو padding مسافة داخل حد العنصر، والهامش margin مسافة خارجه. شاهد الاثنين على الصندوق نفسه، جنبًا إلى جنب وبشكل مباشر، ثم تعلّم أيهما تستخدم للخلفيات، ومساحة النقر، والمسافة بين العناصر، والتوسيط.
- border في CSSترسم الخاصية border خطًا حول حشو العنصر. تعلّم اختصار border، وكل أنماط الحدود، والألوان والجوانب المفردة، والزوايا المستديرة بـ border-radius، والفرق بين الحدود والإطار الخارجي outline.
- width وheightتضبط width وheight حجم صندوق العنصر. تعلّم الأحجام الثابتة والنسب المئوية، ولماذا لا تفعل height: 100% شيئًا غالبًا، وmin-height وmax-width للتخطيطات المرنة، والفرق بين auto و100%، والكلمات المفتاحية fit-content.
النص والخطوط
- حجم الخط font-sizeتضبط الخاصية font-size حجم النص. تعلّم الوحدات التي تقبلها (px وrem وem و% والكلمات المفتاحية وvw)، وكيف تغيّر حجم الخط في HTML، ولماذا rem هي الخيار الآمن الافتراضي، وكيف تتضاعف أحجام em.
- font-weight في CSSتجعل الخاصية font-weight النص عريضًا أو رفيعًا أو أي شيء بينهما. تعلّم المقياس الرقمي من 100 إلى 900، وnormal وbold، والقيمتين النسبيتين bolder وlighter، ولماذا لا يظهر أحيانًا أي تغيير.
- line-height في CSSتضبط line-height ارتفاع كل سطر من النص، وبالتالي المسافة بين الأسطر. تعلّم لماذا الرقم بلا وحدة هو الخيار الافتراضي الصحيح، وكيف تُورَّث قيم px وem و% بشكل مختلف، والقيم الجيدة لنص الجسم والعناوين.
- لون النصالوسم <font color> ملغى؛ لون النص في HTML يُضبط بخاصية CSS المسماة color. تعلّم كيف تلوّن صفحة كاملة، أو كلمة واحدة، أو رابطًا، أو عنوانًا، بالألوان المسماة وhex وrgb، وكيف تبقي النص مقروءًا.
- التسطير في CSSسطّر النص بـ text-decoration، ثم تحكم في الخط: لونه ونمطه وسماكته وبعده عن النص. وأيضًا كيف تزيل الخط من تحت الروابط، ومتى يجب ألا تفعل ذلك.
- ظل النص text-shadowترسم text-shadow ظلًا أو أكثر خلف النص. تعلّم القيم الأربع (الإزاحة الأفقية، الإزاحة العمودية، التمويه، اللون)، وكيف تكدّس الظلال لتأثيرات التوهج والحدود والأبعاد الثلاثة، وكيف تستخدم الظل لإبقاء النص مقروءًا فوق الخلفيات المزدحمة.
الألوان والخلفيات
- الألوان في CSSكل طرق كتابة اللون في CSS: الألوان المسماة، ورموز hex، وrgb() وrgba()، وhsl()، والشفافية بقناة ألفا، وcurrentColor، والدالتان الأحدث oklch() وcolor-mix(). لكل منها مثال حي وأداة تحويل.
- لون الخلفيةتملأ background-color صندوق العنصر بلون. تعلّم كيف تضبط لون خلفية صفحة كاملة، أو div، أو صف في جدول، أو كلمة واحدة، وكيف تعمل الشفافية، ولماذا bgcolor ملغاة، وما الفرق بين background-color والاختصار background.
- صورة الخلفيةتضع background-image صورة أو تدرجًا لونيًا خلف محتوى العنصر. تعلّم url() والتدرجات، وbackground-size (cover وcontain)، وbackground-position، وbackground-repeat، وتكديس عدة خلفيات، والاختصار background.
- التدرج اللونيالتدرجات اللونية في CSS صور يرسمها المتصفح من الألوان. تعلّم radial-gradient (الشكل والحجم والموضع)، وlinear-gradient (الاتجاه والزوايا)، وconic-gradient، ونقاط توقف الألوان، والتوقفات الحادة للخطوط، والتدرجات المتكررة، والنص المتدرج.
- ظل الصندوقترسم box-shadow ظلالًا حول صندوق العنصر. تعلّم القيم الخمس (x وy والتمويه والانتشار واللون)، والظلال الداخلية inset، وتكديس عدة ظلال لعمق واقعي، وحلقات التركيز المصنوعة بالانتشار، والأخطاء التي تجعل الظلال باهتة.
التخطيط
- display في CSSتقرر الخاصية display كيف يشارك العنصر في التخطيط. تعلّم block وinline وinline-block مع صناديق مقيسة جنبًا إلى جنب، والفرق بين display none وvisibility hidden، وأين تقع flex وgrid وflow-root وcontents.
- position في CSSتضع position: absolute العنصر عند إحداثيات دقيقة داخل أقرب سلف مُموضَع. تعلّم كيف تعمل absolute مع position: relative، ثم fixed وsticky، وخصائص top/right/bottom/left وinset، ولماذا لا يلتصق sticky أحيانًا.
- z-index في CSSتقرر z-index أي العناصر المتداخلة يُرسم في الأمام. تعلّم على أي عناصر تعمل، وكيف تجمع سياقات التراكب العناصر بحيث يمكن أن تخسر z-index 9999، وما الذي ينشئ سياق تراكب، وكيف تصلح z-index التي لا تعمل.
- overflow في CSSتقرر overflow ما يحدث للمحتوى الذي لا يتسع في صندوقه: عرضه، أو قصّه، أو إضافة أشرطة تمرير. تعلّم visible وhidden وscroll وauto وclip، وoverflow-x وoverflow-y، وعلامة الحذف للنص، والآثار الجانبية لـ overflow على التخطيط.
- float في CSSتدفع float العنصر إلى جانب واحد وتترك النص يلتف حوله، كما تضع المجلات الصور. تعلّم float left وright وinline-start، وclear، ولماذا ينهار الأب حول العناصر العائمة وكيف تصلحه display: flow-root، ولماذا لم تعد العناصر العائمة تُستخدم لتخطيط الصفحات.
- توسيط divكل طرق توسيط div أفقيًا أو عموديًا أو في الاتجاهين: flexbox، وgrid، وmargin auto، والموضع المطلق مع transform، وinset مع margin auto، وalign-content. كل طريقة تعمل مباشرة وتقيس توسيطها بنفسها، مع جدول يوضح متى تستخدم كلًا منها.
- توسيط صورةالعنصر <img> سطري، لذلك يتوسط كالنص: text-align: center على أبيه. أو اجعله block مع margin: 0 auto، أو وسّطه باستخدام flexbox أو grid، بما في ذلك عموديًا. كل طريقة تعمل مباشرة وتقيس النتيجة.
Flexbox وGrid
- Flexbox في CSSيرتّب Flexbox العناصر في صف أو عمود ويتحكم في كيفية تقاسمها المساحة واصطفافها. تعلّم display: flex، والمحور الرئيسي والمحور العرضي، وكل خصائص الحاوية، وflex-grow وflex-shrink وflex-basis، مع ساحة تجربة حية تقيس أين يستقر كل عنصر.
- justify-content في CSSتضع justify-content عناصر flex على المحور الرئيسي، وتضعها align-items على المحور العرضي. شاهد كل القيم جنبًا إلى جنب مع القياس، وشبكة محاذاة قابلة للنقر، وalign-self، وأسباب عدم عمل justify-content أحيانًا.
- flex-wrap في CSSتقرر flex-wrap هل تنضغط عناصر flex في سطر واحد أم تنتقل إلى السطر التالي، وتقرر flex-direction هل تنساب في صف أم في عمود. تعلّم الاثنتين بأمثلة حية، والاختصار flex-flow، وalign-content، وصف بطاقات متجاوب من دون استعلامات وسائط.
- CSS Gridيرتّب CSS grid العناصر في صفوف وأعمدة في الوقت نفسه. تعلّم display: grid، وgrid-template-columns، ووحدة fr، وrepeat() وminmax()، والفرق بين auto-fill وauto-fit، ووضع العناصر بـ grid-column، وgrid-template-areas، مع شبكة حية تعدّلها وتقيسها.
التصميم المتجاوب
- استعلامات الوسائطيطبّق استعلام الوسائط CSS فقط حين يكون شرط ما صحيحًا، مثل حد أدنى لعرض الشاشة أو سمة لونية داكنة أو مؤشر فأرة. تعلّم صيغة @media، ونقاط التوقف بنهج الهاتف أولًا، وصيغة النطاق، وprefers-color-scheme، وmatchMedia في JavaScript، واستعلامات الحاوية.
- الوحدات rem وemالوحدة rem نسبية إلى حجم خط الجذر، وem إلى حجم خط العنصر الحالي، وpx ثابتة، و% تعتمد على الخاصية. شاهد كل وحدة مقيسة في مثال متداخل، ولماذا تتضاعف em، ومتى تستخدم كلًا منها، وكيف تعمل vw وvh وdvh.
- clamp() في CSSتعيد clamp(MIN, PREFERRED, MAX) القيمة المفضلة لكنها لا تقل أبدًا عن MIN ولا تزيد على MAX. تعلّم كيف تجعل أحجام الخطوط والمسافات مرنة من دون استعلامات وسائط، وكيف تحسب القيمة الوسطى، وما علاقة min() وmax() بها.
- calc() في CSSتتيح calc() إجراء العمليات الحسابية في CSS وخلط الوحدات، مثل 100% ناقص شريط جانبي ثابت بعرض 200px. تعلّم قواعد الصيغة (المسافات مهمة)، وcalc() مع متغيرات CSS، والتخطيطات الشائعة التي تحلها، ولماذا تُتجاهل calc() غير الصالحة بصمت.
الانتقالات والتأثيرات
- transition في CSSيحرّك الانتقال في CSS خاصية من قيمتها القديمة إلى الجديدة حين تتغير، مثلًا عند التمرير. تعلّم الاختصار transition، وكل دوال التوقيت جنبًا إلى جنب، وما يمكن تحريكه وما لا يمكن، وحل height: auto، وتقليل الحركة.
- animation في CSSتحرّك الحركات في CSS العنصر عبر الخطوات التي تعرّفها في @keyframes، من تلقاء نفسها وبعدد المرات الذي تريده. تعلّم صيغة @keyframes، وخصائص animation الثماني كلها، وfill-mode وdirection، ومؤشرات التحميل، والإيقاف المؤقت، وكيف تحترم تقليل الحركة.
- transform في CSSتحرّك الخاصية transform العنصر وتغيّر حجمه وتديره وتميله من دون تغيير التخطيط حوله. تعلّم كل دوال التحويل، ولماذا يهم ترتيب الدوال، وtransform-origin، والخصائص المنفصلة translate وscale وrotate، وحيلة التوسيط translate(-50%, -50%).
- التدوير rotateدوّر عنصرًا بـ transform: rotate(45deg) أو بالخاصية الأحدث rotate. تعلّم وحدات الزوايا (deg وturn وrad)، والتدوير حول زاوية بـ transform-origin، وتدوير النص والأيقونات، ومؤشر تحميل دوّار، والتدوير ثلاثي الأبعاد بـ rotateX وrotateY.
- الشفافية opacityتجعل opacity العنصر كله وكل ما بداخله شفافًا، من 0 (غير مرئي) إلى 1 (معتم). تعلّم القيم، ولماذا تبهت opacity النص أيضًا وكيف تجعل الخلفية وحدها شفافة، والفرق بين opacity: 0 وvisibility وdisplay، والتلاشي عند التمرير.
- التمويه blurتموّه filter: blur(5px) العنصر، وتموّه backdrop-filter: blur() ما خلفه. تعلّم كل دوال المرشحات (brightness وcontrast وgrayscale وsepia وsaturate وhue-rotate وinvert وdrop-shadow) مع منزلقات حية، وكيف تجمع بينها، ومشكلة الحواف المموهة.
