ما هو CSS؟

نشرت: 2019-03-08

آخر تحديث في 22 أبريل 2020

Cascading Style Sheets for the web في شبكة الويب العالمية (www) ، CSS هي اختصار لـ Cascading Style Sheets. CSS هي لغة ورقة أنماط تُستخدم لوصف تقديم مستند مكتوب بلغة ترميزية ، عادةً HTML. تحكم CSS كيفية عرض تخطيط صفحة الويب ومحتواها على شاشة أو ورقة أو في وسائط أخرى. يوفر CSS الكثير من العمل لأنه يتحكم في تخطيط العديد من صفحات الويب دفعة واحدة.

عادةً ما يكون المستند عبارة عن ملف نصي منظم باستخدام لغة ترميزية مثل HTML. يعني تقديم مستند تحويله إلى نموذج قابل للاستخدام يتم تقديمه بشكل مرئي على شاشة الكمبيوتر من خلال متصفح ويب مثل Chrome و Firefox و Opera و Microsoft Edge وغيرها. تطبق مستعرضات الويب قواعد CSS على مستند ما للتأثير على كيفية عرضها.

هذه المدونة عبارة عن مقدمة عامة إلى Cascading Style Sheets (CSS) ، وتحدد ماهيتها ، ولماذا يتم استخدامها على الويب. هذه مقدمة تجيب على الأسئلة الأساسية حولها دون الخوض في أعماق عالم CSS الرائع والمثير للاهتمام.

الذي - التي! تقدم الشركة خدمات تصميم الويب الجذابة والفعالة للوكالات في جميع أنحاء العالم. تعرف على المزيد حول خدمات White Label Web Design وكيف يمكننا مساعدتك أنت وعملائك في إنشاء أو تحسين وجودهم على الويب. ابدأ اليوم!

بدأ CSS في 1994. تم إنشاؤه وصيانته بواسطة W3C. تقوم مجموعة عمل CSS التابعة لـ W3C بإنشاء مستندات تسمى المواصفات. بعد مناقشة المواصفات والتصديق عليها رسميًا من قبل أعضاء W3C ، تصبح توصية.

خرجت أوراق الأنماط المتتالية (Cascading Style Sheets) المستوى 1 (CSS1) من W3C كتوصية في ديسمبر 1996. وأصبحت CSS2 توصية من W3C في مايو 1998. ولا يزال المستوى 3 من CSS ، الذي بدأ في عام 1998 ، قيد التطوير. CSS3 عبارة عن مجموعة من مواصفات CSS2 ومواصفات جديدة تسمى الوحدات النمطية. يتم تشكيل مواصفات CSS من مجموعة من الخصائص ، والتي لها قيم معينة لتحديث كيفية عرض محتوى HTML.

جاء CSS لتبسيط عملية تقديم مستندات لغة الترميز الخاصة بنا. يمكنك التحكم في مجموعة متنوعة من الخصائص مثل:

  • لون النص
  • نمط الخطوط
  • التباعد بين الفقرات ،
  • كيف يتم تحديد حجم الأعمدة ووضعها ،
  • صور الخلفية أو الألوان ،
  • تصميمات التخطيط
  • اختلافات في العرض حسب أحجام الشاشة (Media Queries).

كيف نطبق CSS؟

Cascading Style Sheets for the web هناك أربع طرق لتطبيق الأنماط على مستندات HTML الخاصة بنا. أكثر الطرق شيوعًا هي ملفات CSS الخارجية المضمنة في عنصر <style> داخل مستند HTML الخاص بنا. إذا تم تحديد أنماط ورقة مختلفة ، فإن الأنماط ستتتالي إلى أنماط جديدة بالأولوية التالية (كلما كان الرقم أقل أهمية):

الأولوية 4: المتصفح الافتراضي

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

That! Company White Label Services

الأولوية 3: ملف ورقة الأنماط الخارجية

يمكن استخدام عنصر <link> لتضمين ملف ورقة أنماط خارجي في مستند HTML الخاص بك. ورقة الأنماط الخارجية هي ملف نصي منفصل بامتداد ".css". نحدد جميع قواعد النمط في هذا الملف النصي ثم نقوم بتضمين هذا الملف في أي مستند HTML داخل علامات <head>… </head> باستخدام عنصر <link>.

 <link rel = "stylesheet" type = "text / css" href = "style.css" />

الأولوية 2: مضمن في مستند HTML

يمكننا وضع قواعد CSS الخاصة بنا في مستند HTML باستخدام عنصر <style> لاحتواء القواعد. يتم وضع العلامات <style>… </style> داخل علامات <head>… </head>.

 <ستايل>
 المحدد {
 الملكية: القيمة ؛
 }
 </style>

الأولوية 1: مضمنة في عناصر HTML الخاصة بنا

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

 <p> أهلاً بالعالم! </ p>

تجاوز قواعد CSS

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

أي ورقة أنماط مضمنة لها الأولوية القصوى. لذلك ، ستتجاوز أي قاعدة محددة في علامات أو قواعد <style>… </style> أو قواعد محددة في أي ملف ورقة أنماط خارجي.

ستلغي أي قاعدة محددة في علامات <style>… </style> القواعد المحددة في أي ملف ورقة أنماط خارجي.

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

محددات CSS

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

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

بناء جملة CSS Rule

يتكون بناء جملة قاعدة CSS من محدد وإعلان للممتلكات والقيمة:

 المحدد {الخاصية: القيمة؛ }

يشير المحدد إلى عنصر HTML إلى النمط.

تحتوي كتلة التعريف (بأقواس معقوفة) على تعريف واحد أو أكثر مفصولة بفواصل منقوطة.

يتضمن كل إعلان اسم خاصية CSS وقيمة مفصولة بنقطتين.

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

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

اقرأ أكثر

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

مدرسة W3C

MDN

دروس CSS