اذهب إلى المحتوى

CSS

التصنيفات الفرعية

  1. Sass

    6
    مقالات البرمجة

  2. إطار عمل Bootstrap

    19
    مقالات البرمجة

التنسيق المتقدم لاستمارات الويب

بواسطة ابراهيم الخضور، في CSS، ‏

نناقش في هذا المقال استخدام لغة CSS في تنسيق بعض عناصر التحكم التي يصعب تنسيقها في استمارة الويب. وكما رأينا في المقال السابق أن معظم العناصر سهلة التنسيق مثل الحقول النصية والأزرار، وبعضها اﻵخر صعب أو يسبب مشاكل أثناء التنسي…
تعرفنا في مقال سابق على طريقة تنسيق استمارات الويب بشكل متقدم واستعرضنا أمثلة على بعض الحالات التي نستخدم فيها أصناف التنسيق الزائفة pseudo-classes مثل checked: لاستهداف صندوق التحقق في الحالة التي يكون فيها مفعّلًا. وسنتابع …

تنسيق استمارات الويب باستخدام CSS

بواسطة ابراهيم الخضور، في CSS، ‏

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

البدء باستخدام استعلامات الحاوية في لغة CSS

بواسطة Omar Kall، في CSS، ‏

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

الأساليب القديمة في تخطيط صفحات الويب

بواسطة ابراهيم الخضور، في CSS، ‏

يُعد استخدام الشبكة Grid ميزة من ميزات تخطيط الصفحات اعتمادًا على CSS. لكن ما جرى قبل ظهور هذه الخاصية هو اعتماد أسلوب تعويم العناصر float أو استخدام ميزات أخرى. إذًا كان عليك أن تتخيل مثلًا صفحتك بعدة أعمدة ( 4 أو 6 أو 12 وه…

دليلك إلى استعلامات الوسائط Media Queries في CSS

بواسطة ابراهيم الخضور، في CSS، ‏

سنوضح في مقال اليوم طريقة التعامل مع استعلام الوسائط Media Query في CSS والتي توفر طريقة لتطبيق تنسيقات معينة على عناصر HTML عندما تحقق بيئة العرض في جهاز أو متصفح معايير أوشروط محددة، كأن يكون اتساع نافذة العرض أكبر من 480 ب…

التصميم المتجاوب لصفحات الويب Responsive Web Design

بواسطة ابراهيم الخضور، في CSS، ‏

يُعد مفهوم التصميم المتجاوب للويب responsive web design واختصارًا RWD نهجًا يسمح للصفحة أن تغيّر تخطيطها ومظهرها لتلائم الاتساعات المختلفة لشاشات الأجهزة والدقات المختلفة لها، وضمان الاستخدام الأمثل للمحتوى. لهذا سنساعدك في ه…

التخطيط متعدد الأعمدة باستخدام CSS

بواسطة ابراهيم الخضور، في CSS، ‏

التخطيط متعدد الأعمدة هو أسلوب لترتيب العناصر في صفحات الويب ضمن أعمدة كما تُرتب أعمدة الصحف، وهذا ما سنشرحه في هذا المقال. عليك قبل البدء في قراءة هذا المقال أن: تطلع على أساسيات HTML. تتفهم أساسيات عمل C…

ضبط تموضع العناصر في صفحات ويب باستخدام CSS

بواسطة ابراهيم الخضور، في CSS، ‏

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

الخاصية float: تعويم عناصر الصفحة في CSS

بواسطة ابراهيم الخضور، في CSS، ‏

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

تخطيط الصندوق المرن Flexbox في صفحات الويب

بواسطة ابراهيم الخضور، في CSS، ‏

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

مدخل إلى تخطيط صفحات الويب باستخدام CSS

بواسطة ابراهيم الخضور، في CSS، ‏

نراجع في هذا المقال بعض ميزات تخطيط الصفحات في CSS مثل القيم المختلفة للخاصية display وبعدها سنتعرف على بعض المفاهيم التي نغطيها تباعًا في سلسلة المقالات هذه، ونستعرض بإيجاز الخطوط العامة لتقنيات تخطيط الصفحات والتي نتوسع فيه…

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

بواسطة ابراهيم الخضور، في CSS، ‏

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

تنسيق الروابط باستخدام CSS

بواسطة ابراهيم الخضور، في CSS، ‏

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

تنسيق القوائم في CSS

بواسطة ابراهيم الخضور، في CSS، ‏

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