كيف يمكنك استخدام CSS - نصائح وحيل تصميم الويب للمبتدئين

حتى يمكنك تعلم كيفية استخدام CSS لتصميم صفحات الويب الخاصة بك باستخدام نصائح CSS هذه للمبتدئين.

لست بحاجة إلى معرفة أي شيء عن كود الكمبيوتر. كل ما تحتاج إلى معرفته هو كيفية النسخ واللصق.

لكن أولاً ، ما هو CSS؟

أوراق الأنماط المتتالية (CSS) عبارة عن رمز لغة ورقة أنماط يستخدمه مطورو السمات لوصف العرض التقديمي أو مظهر مستند HTML وتغييره.

ماذا تفعل CSS؟

بعبارات بسيطة ، يجعل ملف CSS صفحات HTML تبدو رائعة.

بغض النظر عن نظام التدوين الذي تستخدمه ، يمكنك تغيير خصائص CSS لجعل مدونتك تبدو أفضل.

لا يهم ما هي منصة التدوين التي تستخدمها.

سيكون لديك خيار في إعدادات السمة الخاصة بك لـ Custom CSS أو CSS الإضافي .

ربما لم تنظر أبدًا إلى هذا الخيار.

أو ، إذا كان لديك ، فقد تعتقد أنه من الصعب جدًا تعلم كيفية البرمجة.

لكنها سهلة للغاية.

لا أعرف شيئًا عن تطوير الويب أو بناء جملة CSS ، لكن يمكنني تغيير سمة النمط في ثوانٍ.

كل ما عليك فعله هو استخدام أدوات المطور لمتصفح Chrome أو Firefox وتعلم بعض الحيل والنصائح البسيطة لـ CSS.

دعونا نلقي نظرة على مدى سهولة ذلك.

لماذا تريد معرفة كيفية تحرير CSS لمدونتك؟

من المحتمل أن يكون لديك الكثير من الإعدادات في موضوع مدونتك.

لكن هناك العديد من العناصر الأصغر التي قد تكون مفقودة.

حتى في السمات المميزة لـ WordPress ، لا تتوفر بعض الخيارات في الخيارات القياسية.

هذا هو السبب في أنه يمكنك مساعدة CSS على العمل بشكل أفضل من خلال إجراء التعديلات والتغييرات الخاصة بك.

من خلال تغيير ورقة أنماط خارجية ، يمكنها الرجوع إلى جميع صفحات HTML الخاصة بك.

إذا قمت بإجراء تغيير على عناوين HTML الخاصة بك في صفحة واحدة ، فسيؤدي ذلك إلى تغيير علامة HTML في جميع صفحاتك.

يسمى المرجع عنصر زائف.

هذا يعني أنه إذا قمت بتغيير مظهر عنوان H2 الخاص بك ، فسيتم تغيير جميع عناوين H2 على موقعك.

لكنك لست بحاجة إلى معرفة كل شيء عن هذه المضاعفات.

كل ما تحتاج إلى معرفته هو أنه يعمل وأنه يمكنك تصميم مدونتك بالشكل الذي تريده بالضبط دون معرفة أي شيء على الإطلاق عن الترميز.

لنبدأ ببعض نصائح CSS السهلة للمبتدئين.

كيفية تغيير CSS المضمنة بسهولة

تتمثل الخطوة الأولى في فتح مدونتك في Firefox أو Chrome أو Microsoft Edge.

في الأمثلة أدناه ، لقد استخدمت Firefox. أجده أكثر ملاءمة للاستخدام من Chrome.

لكن كلاهما يعمل بطريقة مماثلة.

افتح مدونتك في علامة تبويب أو نافذة جديدة. يمكنك الانتقال إلى الصفحة التي تريد تغييرها.

افتح الآن أدوات المطور ، المفتش ، من قائمة الأدوات في Firefox أو قائمة العرض في Chrome.

انقر فوق المفتش لفتح جزء الأدوات.

يمكنك تحديد أي عنصر نمط مضمن في صفحتك باستخدام سهم المحدد في أعلى يسار جزء الأدوات.

حرك المؤشر عبر صفحتك لتحديد عنصر. أو يمكنك النقر فوق العناصر الفردية في القائمة.

سترى كل عنصر تحدده مظللًا باللون الأزرق في عرض المتصفح لصفحة الويب الخاصة بك.

أنت الآن جاهز لإجراء تغييرات على طريقة ظهور صفحتك.

استخدام محدد CSS

في المثال الخاص بي ، سأقوم بتغيير مظهر عنصر عنوان H2.

يمكنك اختيار تغيير عنصر H1 أو نص أساسي أو تسمية توضيحية للصورة.

أريد أن أبدأ بتغيير حجم الخط. كل ما عليك فعله هو النقر فوق حجم خط علامة النمط ، وتغيير الرقم.

لقد غيرت الحجم من 33 بكسل إلى 56 بكسل. يمكنك أن ترى أن حجم العنوان أكبر الآن.

لا تقلق. لم تقم بتغيير صفحة المدونة الحية الخاصة بك. ما تراه في جزء المستعرض الخاص بك هو مجرد معاينة للتغييرات التي أجريتها.

يمكنك اللعب بقدر ما تريد مع أي عنصر HTML.

كل ما تراه في جزء المتصفح هو مجرد معاينة للشكل الذي ستبدو عليه تغييراتك على قاعدة CSS.

الآن أريد تغيير لون النص.

إذا قمت بالنقر فوق نقطة اللون بين علامة اللون والرقم ، فإنك تفتح محدد اللون.

الآن ببساطة اختر اللون الذي تريد استخدامه.

من السهل تغيير لون سمة HTML. لقد تغيرت هنا من الأسود إلى الأزرق.

يبدو جيدًا ، لكن ارتفاع الخط يمكن أن يكون أفضل. سوف أغيره.

الإعداد الحالي هو 1.2 ، وهو عبارة عن مسافة كبيرة جدًا بين السطور. اريد الخطوط اقرب من بعضها

لذا ، سأغيره إلى 1.0.

هذا يبدو أفضل بكثير.

لقد أجريت ثلاثة تغييرات على كيفية ظهور عنوان H2 في وضع المعاينة. لقد قمت بتغيير حجم الخط واللون وتباعد الأسطر.

حان الوقت الآن لإضافة هذه التغييرات إلى موقعي المباشر.

كيف تحصل على الكود الخاص بموقعك

تحتاج إلى نسخ سطور التعليمات البرمجية التي قمت بتعديلها.

حدد وانسخ كل الكود. تأكد من نسخ جميع الأسطر ، بما في ذلك القوس الأخير.

الآن قم بلصقه في محرر نصوص. يمكنك استخدام برنامج Notepad على جهاز كمبيوتر شخصي أو محرر نصوص على جهاز Mac.

التغيير الآخر الذي أجريناه كان على اللون. نحتاج إلى نسخ هذا السطر أيضًا.

ما عليك سوى نسخ خط اللون.

يمكنك أن ترى أن عنصر H2 بخط غامق في الصورة أعلاه. هذا يعني أنه نفس العنصر الزائف مثل كودنا الأول. حتى تتمكن من استخدامها معًا.

انسخ الخط.

الآن أضف السطر إلى محرر النصوص الخاص بك.

قد تحتاج إلى إضافة أو حذف بعض المسافات بحيث يتم وضع مسافة بادئة لخط اللون بنفس المسافة البادئة.

أنت الآن جاهز لإضافة هذه التغييرات الثلاثة إلى موقعك المباشر.

أضف الكود إلى موقعك

انتقل إلى خيارات السمات الخاصة بك وحدد خيارات CSS الخاصة بك.

في قوالب WordPress ، يوجد في Theme Customizer ويسمى CSS إضافي أو CSS مخصص.

سيتم تسميته شيئًا مشابهًا على منصات التدوين الأخرى.

الآن انسخ كل الكود من محرر النصوص الخاص بك ، والصقه في علامة تبويب Customizer.

بمجرد لصق الرمز ، سيعرض لك العارض التغييرات التي أجريتها.

انقر فوق نشر ، وقمت بذلك.

فيما يلي مقارنة قبل التغييرات التي أجريتها وبعدها.

يمكنك أن تفعل أكثر من ذلك بكثير

نصائح CSS الخاصة بي للمبتدئين مقدمة خطوة بخطوة لتحرير نمط HTML CSS الخاص بك هي البداية فقط.

يمكنك فعل الكثير إذا كنت ترغب في التجربة ومحاولة تغيير العناصر الأخرى.

من السهل إضافة حدود أو ظلال إلى الصور ، أو نقل النص إلى اليسار أو اليمين ، أو تغيير حجم عرض النص الأساسي.

يمكنك نقل الهوامش أو تقليل المساحة المتروكة أو زيادتها وتعديل المحاذاة.

هناك المئات من الخيارات التي يمكنك اختيارها للتعديل.

تذكر أنه عندما تعمل في Developer Tools ، فلن تؤثر على موقعك.

أي تغييرات تجريها هي معاينة ومرئية فقط داخل نافذة المتصفح تلك.

لا يهم ما تحاول ، أو ما إذا كان يعمل أم لا.

فكر في الأمر على أنه ملعب لتتعلم أكثر من ذلك بكثير يمكنك القيام به لتصميم موقعك على الويب أو مدونتك.

كن فضوليًا ، وستستمتع بتعلم هذه المهارة الجديدة باستخدام هذه النصائح حول CSS للمبتدئين.

نصيحة إضافية كبيرة باستخدام أدوات المطور

الآن بعد أن أصبح إطار أدوات المطور الخاص بك مفتوحًا ، هناك شيء واحد أنيق للغاية يمكنك القيام به.

يمكنك اختبار سرعة موقعك.

كل ما عليك فعله هو النقر فوق علامة التبويب الشبكة.

ثم انقر فوق CTRL + R.

سترى وقت سرعة صفحتك المحملة بالكامل باللون الأحمر على السطر الموجود في الأسفل موضحًا بالسهم.