CSS

مقدمة عن CSS

بعد أن قام Tim Berners-Lee باختراع الويب في نهاية الثمانينات 1989 واختراع لغة HTML في بداية التسعينات 1991 وبعد انتشار…
أكمل القراءة »
بنية لغة CSS

لأن الهدف من CSS هو هيكلة صفحة الويب وإضافة مظهر لعناصر صفحة الويب، لذلك فإن بنية CSS بسيطة إلى حد…
أكمل القراءة »
المحددات في CSS

لانك دائماً تريد تطبيق المظهر (style) على بعض العناصر وليس كل العناصر الموجودة في ملف HTML فلابد من طريقة لتحديد…
أكمل القراءة »
الوراثة في CSS

إذا كان لديك عنصر رئيسي (أب) لبعض العناصر الفرعية (أبناء) وتريد ظهور هذة العناصر الفرعية بنفس حجم الخط(font size)، أو…
أكمل القراءة »
التخصيص في CSS

يمكنك تحديد عناصر html بأكثر من طريقة بإستخدام CSS، هذة الطرق هي المحدادات المختلفة، فإذا كان لديك العنصر التالي: [crayon-673ed35bb5b60076720041/]…
أكمل القراءة »
قيم الألوان في CSS

هدف أساسي من أهداف CSS هو إضفاء مظهر جمالي لصفحات الويب، ولن يتم ذلك من دون استخدام الألوان، لذا فإن…
أكمل القراءة »
وحدات الأبعاد في CSS

قيم الخواص في CSS إما أن تكون مُعرفة مسبقاً يمكن استخدام أياً منها (مثل [text-align: [right | left | center )،…
أكمل القراءة »
إعادة تعيين CSS

يسمى الملف الذي يحتوى على أنماط إعادة التعيين بـ CSS Reset file ما هي أنماط إعادة التعيين؟ وما الحاجة إليها؟…
أكمل القراءة »
خواص النصوص في CSS

تعرفنا في الدرسين السابقين على خواص مختلفة للتحكم في الخط font-*، هناك أيضاً خصائص أخرى للتحكم في النصوص وهي مجموعة…
أكمل القراءة »
خاصية font-family

توفر CSS مجموعة من الخصائص للتحكم في شكل الخطوط. من هذة الخصائص خاصية font-family التي تحدد نوع الخط المستخدم في صفحة…
أكمل القراءة »
الخصائص المتعلقة بالخطوط في CSS

الخاصية Font-size في مقال سابق تحدثنا عن وحدات القياس المختلفة، وسيتم تعيين حجم الخط بإستخدام واحده من وحدات القياس هذة.…
أكمل القراءة »
خاصية font المختصرة في CSS

كما هو الحال في خصائص كثيرة في CSS فإنه يمكن جمعها (اختصارها) في خاصية واحده توفيراً للوقت والجهد، فمثلاً الخواص:…
أكمل القراءة »
الخاصية line-height في CSS

تتحكم الخاصية line-height كما هوا واضح من معناها الحرفي، في ارتفاع الأسطر، ولاحظ أنها تتحكم في إرتفاع الأسطر وليس المسافة…
أكمل القراءة »
مفهوم نموذج العرض الصندوقي (Box Model) في CSS

نموذج العرض الصندوقي ( Box Model ) عبارة عن مجموعة من القواعد rules توضح كيفية بناء صفحات الويب على الإنترنت.…
أكمل القراءة »
الخواص Width, Height في CSS

أبعاد العناصر في HTML يتم تحديدها تلقائياً على حسب محتوى كل عنصر، حيث يتمدد العنصر أفقياً ورأسياً ليتناسب مع محتواه.…
أكمل القراءة »
الخواص Padding, Margin, Border و box-sizing في CSS

كما تحدثنا في المقال الأول لمفهوم الـ box model وقلنا هو عبارة عن مجموعة من القواعد تقوم بتحديد أبعاد العنصر…
أكمل القراءة »
الخاصية display في CSS

تحدثنا في مقال سابق في قسم أساسيات HTML عن أنواع العناصر في HTML وذكرنا أن أنواع العناصر بشكل أساسي اثنين،…
أكمل القراءة »
الخلفيات في CSS

خلفيات العناصر في HTML هو ما يظهر خلف النصوص، وتسمح لك CSS بإضافة خلفيات لجميع عناصر HTML وغالباً ما تضاف…
أكمل القراءة »
الخاصية Float في CSS

في الجزء السابق من هذة السلسلة، قمنا بشرح خصائص الـ box model الخاصة بالعناصر، كيفية تحديد خلفية العناصر، الحدود، الهوامش…
أكمل القراءة »
الخاصية Position في CSS

الخاصية position في CSS من الخواص المتعددة الجوانب والإستخدامات، تمكنك من تحديد موضوع العناصر أو تعديل موضعها، القيمة الإفتراضية لها…
أكمل القراءة »
تدفق العناصر The Flow في CSS

حتى لو لم تقم بإضافة أي تنسيق CSS لصفحة الويب فإن العناصر في HTML لها شكل إفتراضي تظهر به في…
أكمل القراءة »
العناصر الزائقة Pseudo Classes في CSS

على سبيل التذكرة السريعة، نسترجع أنواع المحددات، تعرفنا من قبل على الأنواع الثلاثة الرئيسية للمحددات: المحدد العام Generic Selector، أو…
أكمل القراءة »
أهم محددات العناصر الزائقة Pseudo Classes Selectors

محددات العناصر الزائفة هي المحددات المسبوقة بنقطتين رأسيتين : (colon) ومن أشهرها المحدد :hover وكما ذكرنا لا تستخدم منفرده في…
أكمل القراءة »
محددات العناصر الزائقة المتعلقة بأماكن العناصر وتعتمد النظام العددي

محددات العناصر الزائفة التي تعمتد النظام العددي في تحديد موضع العناصر ستوفر عليك الكثير من الجهد وطرق جديدة لتحديد العناصر…
أكمل القراءة »
المحددات الزائقة العلائقية والمتعلقة بالمحتوى

فهم المحددات الزائفة في CSS يُعد نقطة فاصلة بين مطورين الويب المحترفين غيرهم من المطورين، حيث أن فهمها يجعلك دوماً…
أكمل القراءة »
تأثير الإنتقال Transition في CSS

في هذا الدرس إن شاء الله سنقوم بشرح واحدة من أقوى الخصائص التي تم إضافتها في الإصدار الثالث من CSS…
أكمل القراءة »
الخاصية transform في CSS

الآن وبعد أن تعرفنا على الخاصية transition وكيفية إنتقال العناصر تدريجياً من حالة لأخرى بطريقة سلسة، دعنا نلقي نظرة على…
أكمل القراءة »
الرسوم المتحركة animations في CSS

قبل إضافة الخاصية animation للغة CSS كانت جميع عناصر صفحة الويب تظهر بشكل ثابت بدون أي حركة، وكنا عندما نريد…
أكمل القراءة »

إشترك ليصلك جديد المقالات والدروس!