ما هو CSS: كيف يعمل وكل ما يجب معرفته

جدول المحتويات إخفاء

ما هو CSS
كيف تعمل CSS؟
أنواع CSS
أهمية CSS
ما الفرق بين الحشو والهامش؟
ما هو هامش CSS
نصائح لاستخدام الهوامش والحشو
ما هو CSS ولماذا يتم استخدامه؟
ما هو الفرق بين HTML و CSS؟
ما هو CSS للمبتدئين؟
ما هي أنواع CSS الثلاثة؟
هل CSS مهم؟
لماذا يصعب تعلم CSS؟
هل يمكنك تعلم CSS بنفسك؟
وفي الختام
مقالات ذات صلة
مراجع حسابات

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

ما هو CSS

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

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

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

يمكنك أيضًا دمج التأثيرات أو الرسوم المتحركة في موقع الويب الخاص بك باستخدام لغة ورقة الأنماط هذه. يمكنك الاستفادة منه لعرض بعض الرسوم المتحركة لـ Cascading Style Sheets ، مثل تأثيرات زر النقر ، وأزرار التحميل أو التحميل ، والخلفيات المتحركة.

لن يبدو موقع الويب الخاص بك مثل أي شيء سوى صفحة HTML عادية بدون CSS.

كيف تعمل CSS؟

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

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

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

يحتوي Cascading Style Sheets على بناء جملة يعتمد على اللغة الإنجليزية وتحكمه مجموعة من القواعد. كما ذكرنا سابقًا ، لم يكن الغرض من عناصر النمط مطلقًا استخدامها مع HTML ؛ فقط ترميز الصفحة كان. تم تصميمه فقط لتقديم ملخص للمحتوى.

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

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

أنواع CSS

# 1. أوراق الأنماط المتتالية الداخلية

لا يمكنك استخدام CSS الداخلية أو المضمنة دون إضافة style> tag إلى العنوان> قسم مستند HTML الخاص بك. تُعد ورقة الأنماط المتتالية طريقة عملية لتصميم صفحة واحدة. ومع ذلك ، فإن استخدام هذا النمط للعديد من الصفحات يستغرق وقتًا لأنه يجب عليك إضافة قواعد CSS إلى كل صفحة من صفحات موقع الويب الخاص بك.

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

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

# 2. الطريقة الخارجية

باستخدام CSS الخارجي ، يمكنك ربط صفحات موقع الويب الخاص بك بملف a.css الذي تم إنشاؤه باستخدام أي محرر نصوص على جهازك ، مثل Notepad ++. يمكن تصميم موقع ويب كبير بشكل أكثر فاعلية باستخدام هذا النوع من CSS. يمكن تغيير موقعك بالكامل مرة واحدة عن طريق إجراء تغييرات على ملف single.css.

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

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

يمكن أن تؤدي ملفات CSS المتعددة إلى إبطاء تنزيل موقع الويب الخاص بك إذا قمت بتحميلها أو الارتباط بها. هذا يلتزم بفكرة أن العرض التقديمي والمحتوى الخاص بك يجب أن يكونا منفصلين. عند استخدام CSS خارجي ، سيكون نمطك في ملف Cascading Style Sheets مختلف ، يُعرف أيضًا باسم ورقة الأنماط. يجب أن تحتوي كل صفحة HTML على ارتباط إلى ورقة أنماط خارجية إذا كنت تريد استخدام واحدة.

# 3. النمط المضمن لـ CSS

تم تصميم عنصر HTML محدد باستخدام CSS مضمنة. يجب أن تحتوي كل علامة HTML على سمة النمط المضافة إليها لاستخدام نمط CSS هذا ؛ المحددات ليست ضرورية.

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

ولكن هناك بعض الحالات التي يمكن أن يكون فيها CSS المضمن لـ HTML مفيدًا. على سبيل المثال ، عندما تحتاج إلى تطبيق أنماط على عنصر واحد فقط وليس لديك حق الوصول إلى ملفات CSS.

فقط عناصر معينة مع النمط> علامة دعم مضمنة. قد لا تكون الطريقة الأكثر فاعلية أو سرعة للتعامل مع CSS لأن كل مكون يحتاج إلى أن يكون منمقًا. ومع ذلك ، قد يكون مفيدا. قد لا يكون لديك حق الوصول إلى ملفات Cascading Style Sheets أو قد تحتاج فقط إلى معاينة سريعة للتغييرات التي تم إجراؤها على عنصر واحد.

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

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

أهمية CSS

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

# 1. فصل المحتوى والعرض

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

# 2. سهولة الوصول إلى مواقع الويب

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

# 3. تجربة مستخدم أفضل

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

# 4. التوافق مع الجوال

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

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

# 5. سرعة تطوير أكبر

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

# 6. تغييرات تنسيق بسيطة

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

# 7. سرعة أسرع للصفحة

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

# 8. ترميز أقل

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

# 9. خيارات تصفيف إضافية

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

ما الفرق بين الحشو والهامش؟

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

في CSS ، يشير الحشو إلى المسافة بين محتوى الحاوية والحدود ؛ على النقيض من ذلك ، يصف الهامش المساحة حول حدود الحاوية.

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

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

ما هو هامش CSS

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

الهامش له نفس خيارات التكوين مثل المساحة المتروكة ، بما في ذلك الطول والنسبة المئوية وقيم التوريث. بالإضافة إلى ذلك ، فهي تشجع:

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

الهوامش في CSS: كيفية إضافتها

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

نصائح لاستخدام الهوامش والحشو

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

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

ما هو CSS ولماذا يتم استخدامه؟

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

ما هو الفرق بين HTML و CSS؟

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

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

HTML ، أ لغة برمجة يستخدم للتعليق على المستندات ، ويستخدم لإنشاء مواقع ويب ثابتة. من ناحية أخرى ، CSS هي لغة ورقة أنماط تُستخدم لتحديد الهوية المرئية والتصميم العام للملفات المختلفة وعناصر الصفحة في لغة ترميزية مثل HTML.

ما هو CSS للمبتدئين؟

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

ما هي أنواع CSS الثلاثة؟

CSS المضمنة والداخلية والخارجية هي ثلاثة أنواع مختلفة من CSS.

هل CSS مهم؟

من خلال فصل المحتوى عن التصميم ، تعد HTML أداة مفيدة للغاية تتيح للمستخدمين التحكم بسهولة في كيفية عرض صفحات الويب وتخطيطها. ينظم CSS الخطوط والنصوص والألوان والخلفيات والهوامش والتخطيط.

لماذا يصعب تعلم CSS؟

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

هل يمكنك تعلم CSS بنفسك؟

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

وفي الختام

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

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