البحث في الموقع
المحتوى عن 'css styling the web'.
-
من الضروري لأي مصمم مواقع ويب أن يتم بتصميم موقعه بشكل يتوافق مع احتياجات وتفضيلات الجمهور المستهدف. وفي مقال اليوم نناقش كيفية تحقيق ذلك وإظهار الموقع بشكل مقبول على مجموعة متنوعة من المتصفحات، بما في ذلك الإصدارات القديمة، مما يضمن تجربة مرضية لجميع الزوار. عليك قبل البدء في قراءة سلسلة المقا... -
يُعد استخدام الشبكة Grid ميزة من ميزات تخطيط الصفحات اعتمادًا على CSS. لكن ما جرى قبل ظهور هذه الخاصية هو اعتماد أسلوب تعويم العناصر float أو استخدام ميزات أخرى. إذًا كان عليك أن تتخيل مثلًا صفحتك بعدة أعمدة ( 4 أو 6 أو 12 وهكذا) ومن ثم العمل على ترتيب المحتوى ضمن هذه الأعمدة التخيلية. ما ستكتشفه في... -
.png.2ec52827e4517445e7ee877ff73228ea.png)
سنوضح في مقال اليوم طريقة التعامل مع استعلام الوسائط Media Query في CSS والتي توفر طريقة لتطبيق تنسيقات معينة على عناصر HTML عندما تحقق بيئة العرض في جهاز أو متصفح معايير أوشروط محددة، كأن يكون اتساع نافذة العرض أكبر من 480 بكسل. إن هذا النمط من الاستعلام هو المفتاح لتصميم الويب المتجاوب Respon... -
يُعد مفهوم التصميم المتجاوب للويب responsive web design واختصارًا RWD نهجًا يسمح للصفحة أن تغيّر تخطيطها ومظهرها لتلائم الاتساعات المختلفة لشاشات الأجهزة والدقات المختلفة لها، وضمان الاستخدام الأمثل للمحتوى. لهذا سنساعدك في هذا المقال على فهم بعض التقنيات التي تحتاجها لتتقن التصميم المتجاوب. نن... -
التخطيط متعدد الأعمدة هو أسلوب لترتيب العناصر في صفحات الويب ضمن أعمدة كما تُرتب أعمدة الصحف، وهذا ما سنشرحه في هذا المقال. عليك قبل البدء في قراءة هذا المقال أن: تطلع على أساسيات HTML. تتفهم أساسيات عمل CSS. مثال تمهيدي نختبر في هذا المثال التخطيط المتعدد الأعمدة والذي... -
تسمح لنا فكرة ضبط موقع العناصر بلغة CSS بإخراج عنصر من التخطيط الاعتيادي للمستند وتغيير سلوكه، كأن نقرر بأن يظهر فوق عنصر آخر أو يبقى دائمًا في نفس المكان ضمن نافذة عرض المتصفح. لهذا نشرح في هذا المقال القيم المختلفة للخاصية position وكيفية استخدامها. ملاحظة: يمكنك أن تنجز تمارين المقال على حاس... -
استُخدمت الخاصية float بشكل أساسي لتعويم الصور ضمن كتل نصية، لكن شاع استخدامها كثيرًا في إنشاء تخطيطات متعددة الأعمدة لصفحات ويب. لكن مع ظهور الخاصيتين flex و Grid عاد استخدام تلك الخاصية إلى الغاية الأساسية منه كما سنوضح في هذا المقال: عليك قبل البدء في قراءة هذا المقال أن: تطلع على أس... -
تخطيط الشبكة Grid هو أسلوب تخطيط ثنائي الاتجاه يستخدم لترتيب عناصر صفحة الويب، إذ يسمح بتوضع المحتوى ضمن أسطر وأعمدة ويقدم ميزات عدة تسمح بتنفيذ التخطيطات المعقدة بأسلوب مباشر. وسنقدم لك في هذا المقال كل ما تحتاجه لتبدأ العمل على تخطيط الصفحات باستخدامه. قبل البدء في قراءة هذا المقال يتوجب عليك... -
الصندوق المرن Flexbox هو أسلوب تخطيط وحيد الاتجاه لترتيب العناصر في صفحة الويب سواء على سطر واحد أو ضمن عمود واحد. إذ تتمتد العناصر لتشغل مساحة أوسع، أو تتقلص لتتلائم مع مساحة أقل. سنتطرق في هذا المقال إلى جميع الأساسيات التي تغطي هذا المفهوم. عليك قبل البدء في قراءة هذا المقال أن: تطلع... -
يشرح هذا المقال الانسياب الاعتيادي للعناصر أو الطريقة التي تُرتّب فيها تلك العناصر ضمن صفحة الويب أي المواضع التي ستأخذها بشكل تلقائي إن لم يتغير تخطيطها. عليك قبل البدء في قراءة هذا المقال أن تكون على اطلاع بالمفاهيم التالية: أساسيات HTML. أساسيات عمل CSS. تُرتب العناصر ف... -
نراجع في هذا المقال بعض ميزات تخطيط الصفحات في CSS مثل القيم المختلفة للخاصية display وبعدها سنتعرف على بعض المفاهيم التي نغطيها تباعًا في سلسلة المقالات هذه، ونستعرض بإيجاز الخطوط العامة لتقنيات تخطيط الصفحات والتي نتوسع فيها مقالاتنا اللاحقة. عليك قبل البدء في قراءة هذا المقال أن: تطل... -
تحدثنا في مقال سابق عن التنسيقات الأساسية للنصوص وخطوط الكتابة في CSS، وسنتعمق في مقالنا هذا في استكشاف خطوط الكتابة المستخدمة في الويب وتفاصيلها، وكيفية استخدام خطوط مخصصة في صفحاتك لتجعلها أكثر تنوعًا وخصوصية. ننصحك قبل إكمال قراءة المقال أن تطلع على أساسيات لغة HTML ومقال التنسيقات الأساسية... -
نناقش في هذا المقال طريقة تنسيق الروابط في لغة CSS ونعرفك على طرق مختلفة لتحسين مظهرها على موقع الويب الخاص بك، ونعرفك على الحالات المختلفة للروابط وطريقة تنسيقها بفعالية أكبر بالاستفادة من آلية استخدام الأصناف الزائفة pseudo classes في CSS، ونناقش تنسيق الروابط في المواضع المألوفة المختلفة مثل رواب... -
لا تختلف القوائم lists في سلوكها عن النصوص في المجمل، لكنك ستجد بعض خاصيات CSS مخصصة للقوائم لا بد من الإطلاع عليها، والاطلاع على أفضل الممارسات في تنسيقها وهذا ما سيعرضه هذا المقال. ننصحك قبل إكمال قراءة المقال أن تطلع على أساسيات لغة HTML ومقال التنسيقات الأساسية للنصوص وخطوط الكتابة في CSS.... -
نحاول في هذا المقال أن نضعك على الطريق الصحيح لإتقان تنسيق النصوص باستخدام CSS. لهذا سنطلعك تدريجيًا وبالتفصيل على أساسيات التنسيق بما في ذلك ضبط حجم الخط وعائلته وتنسيقاته، إضافةً إلى الخاصيات المختصرة، ومحاذاة النصوص وغيرها من التأثيرات، كما سنتعلم ضبط التباعد بين الأسطر والحروف. ننصحك قبل إك... -
تنظيم شيفرة CSS حالما تبدأ العمل على ملفات تنسيق ضخمة ومشاريع كبيرة ستكتشف أن صيانة ومتابعة ملفات التنسيق الضخمة ليس أمرًا سهلًا، لهذا سنلقي نظرةً في هذا المقال على بعض أفضل الممارسات التي ينبغي اتباعها في كتابة تنسيقات CSS لتسهيل الصيانة والتعديل وبعض الحلول التي يستخدمها الآخرون وتحسّن القدرة... -
قد تجد أن شيفرة CSS أحيانًا لا تنفّذ ما هو متوقع منها، فقد تعتقد أن محددّا ما لا بد وأن يطابق العنصر الذي تريده، لكن لا شيء يحدث، أو قد يكون الحجم الذي تريده لصندوق ما أكبر مما هو متوقع. لهذا سنرشدك في هذا المقال كيف تتعامل وتنقح اخطاءً كهذه في CSS، كما سنتحدث عن طريقة استخدام أدوات مطوري ويب DevToo... -
لن يكون تنسيق الجداول أمرًا مهمًا، لكن علينا فعل ذلك أحيانًا، لهذا سنوّفر لك في هذا المقال دليلًا لتعرض جداول HTML بأسلوب أنيق إضافة إلى تطبيق بعض التقنيات الخاصة في تنسيقها. ننصحك قبل المتابعة في قراءة هذه المقال أن: تطلع على أساسيات العمل مع HTML. تطلع على أساسيات العمل مع الجدا... -
نلقي نظرةً في هذا المقال على الطريقة التي تُنسّق فيها بعض العناصر الخاصة باستخدام لغة CSS، إذ تُعد الصور والوسائط المتعددة والنماذج من العناصر التي تسلك سلوكًا مختلف قليلًا عن الفكرة النمطية للصناديق من ناحية القدرة على تنسيقها باستخدام CSS. لهذا من المهم أن تعرف ما هو ممكن وما هو غير ممكن عند تنسيق... -
تحدثنا في مقالات سابقة عن طرق عديدة لتحجيم الأشياء ضمن صفحة الويب باستخدام CSS، فمعرفة التأثيرات التي ستُحدثها الميزات المختلفة على تصميمك أمرٌ مهمٌ جدًا، لهذا نلخص في هذا المقال الطرق المختلفة التي يمكن تحديد حجم الأشياء في CSS ونعرّف بعض المصطلحات التي ستساعدك مستقبلًا عن التحجيم sizing. ننصح... -
تُسند إلى كل خاصية من خواص CSS قيمةٌ من نوع محدد تُعرّف مجموعة القيم التي يمكن أن تأخذها هذه الخاصية. لهذا سنتطرق في هذا المقال إلى أنواع القيم الأكثر استخدمًا إضافة إلى هذه القيم ووحدات قياسها. ننصحك قبل المتابعة في قراءة هذه المقال أن: تطلع على أساسيات استخدام الحاسوب وتصفح الويب.... -
يحدث طفحان المحتوى overflow عندما يكون حجم المحتوى أكبر من أن يتسع له العنصر، لهذا سنتعلم في هذا المقال عن ماهية الطفحان وكيفية إدارته. ننصحك قبل المتابعة في قراءة هذه المقال أن: تطلع على أساسيات استخدام الحاسوب وتصفح الويب. تحضّر بيئة عمل بسيطة كما تحدثنا مسبقًا في المقال تثبيت ا... -
لقد تعاملنا حتى اللحظة مع خصائص CSS المتعلقة بالأبعاد الفيزيائية لشاشة العرض، مثل الحواف التي أنشأناها على جوانب صندوق العنصر، وقد تلاحظ أن هذه الأبعاد الفيزيائية مرتبطة أو مخصصة للتعامل مع المحتوى الذي يُعرض أفقيًا فقط، كما أن الويب يميل إلى دعم اللغات التي تكتب من اليسار إلى اليمين مثل الإنجليزية... -
سنلقي نظرةً في هذا المقال على بعض الحيل الذكية التي يمكنك اتباعها لتنسيق خلفية صفحة ويب وحوافها، مثل إضافة ألوان متدرجة إلى الخلفية أو إضافة الصور إليها وإظهار زوايا دائرية وغيرها من الأفكار التي يتساءل عن طريقة تنفيذها الكثيرون. ننصحك قبل المتابعة في قراءة هذه المقال أن: تطلع على أساسي... -
يحيط صندوق بكل شيء في تنسيقات CSS وفهم طبيعة هذه الصناديق هو المفتاح لإنشاء تخطيطات وإضافة تنسيقات باستخدام CSS، أو لمحاذاة العناصر مع بعضها. سنلقي نظرة معمقة في هذا المقال على نموذج الصندوق في CSS لكي تكون قادرًا على بناء تخطيطات أكثر تعقيدًا وفهم آلية عملها والمصطلحات المتعلقة بها. ننصحك قبل...
