Devenia تعلّم / القاموس
افهم تنسيق CSS
يتحكم CSS في شكل محتوى HTML، بما في ذلك الخطوط والألوان والمسافات والتخطيط والسلوك المتجاوب. استخدم هذا الدليل لفهم ما يمكن للتنسيق تغييره وما لا يستطيع إصلاحه.
ابدأ برسالة بريد إلكتروني. أرسل الصفحة أو سؤالك، وسنجيبك بوضوح.
استخدم CSS كطبقة للعرض.
في قائمة مقهى، يحدد HTML العنوان والأطباق والأسعار. ويحدد CSS الخط والمسافات والمحاذاة. في الشاشة الواسعة، يمكن لـ CSS وضع عمودي القائمة جنبًا إلى جنب ثم ترتيبهما فوق بعضهما في الهاتف، مع بقاء الأطباق والأسعار كما هي.
ما الذي يمكن للتنسيق تغييره
لا يمكن لعنوان أكبر أن يعوّض عن وقت فتح مفقود أو يشرح عرضًا غير واضح. صحّح الكلمات أولًا، ثم استخدم التنسيق لتسهيل العثور عليها. للاطلاع على أول مثال برمجي، راجع مقدمة MDN إلى CSS.
لماذا يتغلب تنسيق على آخر
قد تنطبق قواعد متعددة على العنصر نفسه. تحدد السلسلة القاعدية القيمة التي يستخدمها المتصفح عند تعارض القواعد. مثلًا، قد ينطبق على رابط في القائمة كل من لون الروابط على مستوى الموقع ولون منفصل لروابط التنقل.
إذا لم يظهر أي أثر لتغيير اللون، افحص العنصر في أدوات المطوّر في المتصفح. تعرض لوحة Styles القواعد المطابقة والتعريفات المشطوبة. تحقق من القاعدة الفائزة قبل إضافة تجاوز آخر.
تحقق من قدرة الناس على استخدام الصفحة
بعد تغيير التنسيق، اختبر الصفحة بمحتوى حقيقي. قد تكشف العناوين الطويلة والقوائم والأسعار مشكلات يخفيها النص القصير المؤقت.
يساعد التنسيق الجيد الزوار على القراءة واتخاذ الإجراء. لكنه لا يضمن ترتيبًا أفضل في نتائج البحث. إرشادات Google حول تجربة الصفحة توضّح أن التجربة الجيدة وحدها لا تضمن الوصول إلى المرتبة الأولى.
CSS: أسئلة شائعة
العودة إلى المعجم.
ما معنى CSS؟
CSS اختصار لـ Cascading Style Sheets، أي أوراق الأنماط المتتالية. وهو يتحكم في شكل عناصر HTML، مثل الخطوط والألوان والمسافات والتخطيط.
ما الفرق بين HTML وCSS؟
يوفر HTML البنية والمعنى، مثل العناوين والفقرات والقوائم. ويوفر CSS طريقة العرض، أي شكل هذه العناصر.
هل أحتاج إلى تعلم CSS لبناء موقع إلكتروني؟
لا. يمكن أن يوفر القالب أو المحرر المرئي أدوات للتحكم في اللون والخط والتخطيط. استخدم هذه الأدوات أولًا للحفاظ على اتساق الصفحات المرتبطة. تعلّم CSS عندما تحتاج إلى فهم قاعدة عرض لا تغطيها الأدوات المتاحة أو تغييرها.
ما هو التصميم المتجاوب؟
التصميم المتجاوب يعني أن الموقع يتكيف مع أحجام الشاشات المختلفة. يغيّر CSS التخطيط والمسافات للهواتف والأجهزة اللوحية وأجهزة الكمبيوتر.
هل يؤثر CSS في تحسين محركات البحث؟
يمكن أن يؤثر CSS في طريقة عرض الصفحة وتحميلها، لكن تغيير الألوان أو المسافات لا يحسن الترتيب وحده. حافظ على إتاحة المحتوى المفيد، وتحقق من تخطيط الهاتف وسلوك التحميل عند تغيير الأنماط.
هل لديك سؤال عملي عن CSS؟
أرسل عنوان الصفحة، والعنصر الذي يبدو غير صحيح، وحجم الشاشة الذي تظهر فيه المشكلة. اذكر أيضًا ما توقعت رؤيته حتى نحدد تغيير التنسيق المطلوب.