النصائح والحيل التي تم التغاضي عنها في CSS لتصميم الويب

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

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

CSS أو Cascading Style Sheet هي اللغة المستخدمة لعرض صفحات الويب على موقع الويب والتي تتضمن استخدام الألوان وتخطيط صفحة الويب والخطوط. يتيح العرض التقديمي المتوافق مع موقع الويب على أدوات مختلفة من الشاشات الصغيرة والكبيرة أو حتى عندما يتعلق الأمر بعملية الطباعة. لا يعتمد CSS على HTML ولكن يمكن استخدامه مع أي لغة مرمزة قائمة على XML. يساعد هذا الاستقلالية عن HTML CSS في القيام بمهمة صيانة مواقع الويب ومشاركة أوراق الأنماط عبر الصفحات وتحرير الصفحات إلى سمات وبيئات مختلفة. يعتبر هذا بشكل عام بمثابة فصل للبنية أو المحتوى عن العرض التقديمي. مع مرور الوقت ، أصبحت CSS الطريقة الأكثر تفضيلاً لتصميم الويب والتي تفيد المصممين بطرق مختلفة.

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

1. الترقيم التلقائي

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

2. الإبداع مع تسطير

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

3. الاقتباسات على الموقع

لقد جعلنا HTML متحررين من كتابة علامات الاقتباس المنحنية الصحيحة لأن علامة "" تشير إلى الاقتباسات المضمنة. لكن دعنا نفترض أنك تريد أن يحتوي عرض الأسعار الخاص بك على أكثر من علامات اقتباس مزدوجة أو أن يكون لديك مستوى أعلى من الاقتباس المتداخل في سطر ، فإنك تواجه حاجزًا في هذا الموقف. ولكن من خلال خاصية اقتباسات CSS2 ، لم تعد الحواجز مشكلة بالنسبة لك حيث يمكنك تحديد تفضيل عرض الأسعار بها. ، مما يجعل الاقتباس بالطريقة التي تريدها تمامًا.

4. إدارة الجدول

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

5. اجعلها مرئية

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

6. تشكيل النص

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

7. تعليم الحقول

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

8. من الصعب إرضاءه مع الألوان

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

9. التحقق من خانة الاختيار

أحيانًا يكون من الصعب التحقق مما إذا كنت قد حددت خانة اختيار أم لا فقط من خلال الإشارة إلى علامة تحديد صغيرة في المربع حيث توجد عدة خيارات معطاة على صفحة الويب. يمكن أن يكون مفيدًا جدًا للمستخدمين الحصول على مؤشر آخر إلى جانب إجراء فحص صغير على صفحة الويب ، مما سيجعل موقع الويب أكثر سهولة في الاستخدام أيضًا. يغطي CSS هذا الجانب أيضًا بخاصيته لخيار "check class". لا يشير فقط بواسطة علامة الاختيار الصحيحة ولكن يمكنك أيضًا إنشاء المحتوى الاختياري بجانب مربع التأشير المميز باللون الذي يحدده المستخدم ، بحيث لا توجد أخطاء في ترك خيار بسبب عدم الرؤية.

10. جعل موقع الويب الخاص بك على أساس موضوع

إنه أمر جذاب للغاية عندما يعتمد موقع الويب على موضوع مثل كتاب القصة ، حيث يكون له خطوطه وميزاته تمامًا مثلما تفتح قصة تبدأ بـ "ذات مرة" التي يكون لها حرف O أكبر من الأحرف الأخرى. يمكنك جعل موقع الويب الخاص بك يبدو أجمل من خلال CSS باستخدام خاصية "الحرف الأول" ، والتي تستهدف الحرف الأول من السطر وتجعله أكبر حجمًا باستخدام الخط الكبير تمامًا مثل كتب القصص التي اعتدنا قراءتها.

11. توفير تنسيقات الملفات للروابط

ربما تكون قد شاهدت مستندًا مرتبطًا بصورة أو موقع ويب للتنزيل أو لنقل المستخدم إلى موقع ويب آخر ، فقد يتطلب الأمر العديد من الأدوات من أجل تصحيح هذه الخطوة. لكن CSS جعلت هذه الخطوة أسهل أيضًا. يمكنك ربط الويب الخاص بك بخاصية "content: url ()" من CSS وإضافة رابط المستند الذي تريده.

12. إضافة تأثير المنظر

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

أثرت CSS أو Cascading Style Sheet على طريقة تصميم الويب بشكل كبير مما يجعلها أكثر كفاءة وتأثيرًا. لقد قدم لنا العديد من الميزات التي يميل الناس إلى تجاهلها في بعض الأحيان ، ولكن إذا احتفظت بهذه الميزات والخصائص في الاعتبار واستخدمتها جيدًا ، فإن تصميم موقع الويب الخاص بك سوف يتفوق على مواقع الويب الأخرى ، ويكون سهل الاستخدام وجذابًا في نفس الوقت.