ما هو CSS؟ - تعلم تطوير الويب | MDN

 ما هو CSS؟ - تعلم تطوير الويب | MDN

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

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

الأنماط الافتراضية التي يستخدمها المستعرض

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

لمزيد من المعلومات حول المتصفح / الأنماط الافتراضية ، تحقق من الفيديو التالي:

ما هو CSS؟

كما ذكرنا من قبل ، CSS هي لغة لتحديد كيفية تقديم المستندات للمستخدمين - كيف يتم تصميمها وتخطيطها وما إلى ذلك.

عادة ما يكون المستند عبارة عن ملف نصي منظم باستخدام لغة ترميز - HTML هي لغة الترميز الأكثر شيوعًا ، ولكن قد تصادف أيضًا لغات ترميزية أخرى مثل SVG أو XML.

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

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

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

بناء جملة CSS

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

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

h1 {

    لون احمر؛

    حجم الخط: 5em ؛

}

    في المثال أعلاه ، يتم فتح قاعدة CSS بمحدد. هذا يحدد عنصر HTML الذي سنقوم بتصميمه. في هذه الحالة ، نقوم بتصميم عناوين المستوى الأول (<h1>).

    ثم لدينا مجموعة من الأقواس المتعرجة {}.

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

    يحتوي هذا المثال على إعلانين ، أحدهما للون والآخر لحجم الخط. يحدد كل زوج خاصية للعنصر (العناصر) التي نختارها (<h1> في هذه الحالة) ، ثم القيمة التي نرغب في منحها الخاصية.

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

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

h1 {

    لون احمر؛

    حجم الخط: 5em ؛

}

ص {

    لون أسود؛

}

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

ملاحظة: يمكنك العثور على روابط لجميع صفحات خصائص CSS (جنبًا إلى جنب مع ميزات CSS الأخرى) المدرجة في مرجع MDN CSS. بدلاً من ذلك ، يجب أن تعتاد على البحث عن "mdn css-feature-name" في محرك البحث المفضل لديك كلما احتجت إلى معرفة المزيد من المعلومات حول ميزة CSS. على سبيل المثال ، جرب البحث عن "mdn color" و "mdn font-size"!

وحدات CSS

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

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

للحصول على مثال محدد ، دعنا نعود إلى وحدة الخلفيات والحدود - قد تعتقد أنه من المنطقي تحديد خصائص لون الخلفية ولون الحدود في هذه الوحدة. وأنت على حق.

مواصفات CSS

يتم تحديد جميع تقنيات معايير الويب (HTML أو CSS أو JavaScript وما إلى ذلك) في مستندات عملاقة تسمى المواصفات (أو "المواصفات") ، والتي يتم نشرها بواسطة مؤسسات المعايير (مثل W3C أو WHATWG أو ECMA أو Khronos) وتحديدها بدقة كيف من المفترض أن تتصرف هذه التقنيات.

لا يختلف CSS - تم تطويره بواسطة مجموعة داخل W3C تسمى مجموعة عمل CSS. تتكون هذه المجموعة من ممثلين لبائعي المستعرضات والشركات الأخرى المهتمة بـ CSS. هناك أيضًا أشخاص آخرون ، يُعرفون بالخبراء المدعوين ، يعملون كأصوات مستقلة ؛ لم يكونوا مرتبطين بمنظمة عضو.

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

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

معلومات دعم المتصفح

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

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

تعديل المقال