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

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

في هذه المقالة التعليمية ، ستتعلم جميع أساسيات CSS لبدء إنشاء التطبيقات اليوم.

متى تستخدم طرق تنفيذ CSS المختلفة

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

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

استخدام مثال Inline CSS

العنوان الرئيسي

instagram viewer

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

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

استخدام مثال CSS الداخلي



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

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

استخدام مثال CSS خارجي


إدخال سطر الكود أعلاه في ملف علامة ملف HTML الخاص بك ستسهل تصميم صفحة الويب الخاصة بك باستخدام طريقة CSS الخارجية. الجانب الوحيد من الكود أعلاه الذي سيتغير هو القيمة المخصصة لملف href الخاصية ، والتي يجب أن تكون دائمًا اسم ملف CSS (بما في ذلك امتداد .css).

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

h2 {
اللون الأصفر؛
}

استكشاف البنية الأساسية لـ CSS

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

المحدد

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

إعلان بداية ونهاية

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

الملكية

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

فاصل الخاصية / القيمة

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

القيمة

تمثل قيمة خاصية CSS النمط الدقيق الذي ترغب في تطبيقه على خاصية معينة. تعتمد القيم المتاحة للاستخدام على نوع الخاصية. على سبيل المثال ، الخاصية المستخدمة في الهيكل أعلاه هي اللون، مما يعني أن هناك نوعًا واحدًا فقط من القيم يمكن تطبيقه على هذه الخاصية ، وهو اسم اللون. أ اللون يمكن تقديم القيمة بأحد الأشكال الأربعة: قيمة كلمة (كما في المثال أعلاه) ، أو قيمة سداسية عشرية ، أو قيمة HSL (Hue ، أو Saturation ، أو Lightness) ، أو قيمة RGB (أحمر ، أخضر ، أزرق).

فاصل الإعلان

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

ما هي الهويات والفصول؟

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

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

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

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

استكشاف الأنواع المختلفة من المحددات

هناك ثلاثة أنواع أساسية من المحددات - مفردة ومتعددة ومتداخلة. حتى الآن ، غطت هذه المقالة على نطاق واسع المحددات الفردية.

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

مثال على قالب HTML الأساسي






وثيقة




أهلا بك


Lorem ipsum dolor sit amet consectetur، adipisicing elit. يندرج odit voluptates
الكرامة voluptatibus tenetur. Repudiandae ، animi corporis! مهندس معماري
tima voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!




عن


Lorem ipsum dolor sit amet consectetur، adipisicing elit. يندرج odit voluptates
الكرامة voluptatibus tenetur. Repudiandae ، animi corporis! مهندس معماري
tima voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!




عنوان


Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur velicta quibusdam!
Ea delectus sit، labouriosam eos aperiam asperiores؟ في ad labourum illo Inventore quos est dolores
إجبار ، fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi،
perferendis in earum iure dolorum labouriosam enim reiciendis! هذا هو سبب الفساد
mollitia ، minima ، magni في iusto id الضرورة ، من حيث المبدأ ، ipsum doloremque deleniti ex eligendi
إيمنتيد هيك ماكسيم؟ Eius modi optio ad، nisi tempora sapiente؟




عنوان


Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur velicta quibusdam!
Ea delectus sit، labouriosam eos aperiam asperiores؟ في ad labourum illo Inventore quos est dolores
إجبار ، fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi،
perferendis in earum iure dolorum labouriosam enim reiciendis! هذا هو سبب الفساد
mollitia ، minima ، magni في iusto id الضرورة ، من حيث المبدأ ، ipsum doloremque deleniti ex eligendi
إيمنتيد هيك ماكسيم؟ Eius modi optio ad، nisi tempora sapiente؟






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

استخدام مثال محددات متعددة


#About، .content {
اللون الابيض؛
لون الخلفية: darkcyan ؛
}

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

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

استخدام أمثلة المحددات المتداخلة

#Welcome p span {
لون احمر؛
}

المحدد المتداخل أعلاه يحتوي على ملف هوية شخصية وعنصري HTML. كما ترى من المثال أعلاه ، يوفر لك المحدد المتداخل القدرة على استهداف عنصر معين داخل مجموعة.

لذلك ، فقط ملف فترة قسم في علامة من شعبة مع ال ترحيب معرف سوف تكون مطلية باللون الأحمر.

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

يحتوي تعليق CSS على شرطتين مائلتين للأمام وعلامتين نجميتين وقسم تعليق.

/ * هذه هي الطريقة التي تكتب بها تعليق سطر واحد في CSS * /

/*
هذه هي الطريقة التي تكتب بها
تعليق متعدد الأسطر
في CSS
*/

ماذا بعد؟

تزودك هذه المقالة بالمكونات الأساسية لـ CSS. يمكنك الآن استخدام التعريف:

  • أي طريقة من طرق تنفيذ CSS الثلاثة
  • جميع العناصر في إعلان CSS
  • الأنواع الثلاثة الأساسية للمحددات
  • تعليق CSS

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

يشاركسقسقةبريد الالكتروني
مقارنة Tailwind CSS. Bootstrap: ما هو أفضل إطار؟

عند اختيار إطار عمل CSS ، من المهم العثور على الإطار الذي يلبي متطلباتك.

اقرأ التالي

مواضيع ذات صلة
  • برمجة
  • CSS
  • تصميم المواقع
  • تطوير الشبكة
  • دروس الترميز
نبذة عن الكاتب
قاديشا كين (تم نشر 22 مقالة)

قاديشا كين مطور برامج متكامل وكاتب تقني / تقني. لديها قدرة مميزة على تبسيط بعض المفاهيم التكنولوجية الأكثر تعقيدًا ؛ إنتاج مادة يمكن لأي مبتدئ في مجال التكنولوجيا فهمها بسهولة. إنها شغوفة بالكتابة وتطوير البرامج الشيقة والسفر حول العالم (من خلال الأفلام الوثائقية).

المزيد من Kadeisha Kean

اشترك في نشرتنا الإخبارية

انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!

انقر هنا للاشتراك