هذا الدرس من الدورة التدريبية: دورة تدريبية لغة CSS لإنشاء تصاميم وتنسيق صفحات الإنترنت
الدرس: كيفية تجاوز الخصائص في CSS وأولوية التنسيق – فهم ترتيب تطبيق التنسيقات
المدة: 5 دقائق
وصف مختصر:
تعلم كيفية تجاوز خصائص CSS للعناصر باستخدام ملفات التنسيق الخارجية وعلامات النمط الداخلية، وفهم أولوية الأنماط التي يتم تطبيقها على عناصر HTML.
وصف الدرس
مقدمة: تجاوز خصائص CSS وأولوية الأنماط
CSS هو أساس تصميم صفحات الويب المخصصة والجذابة. واحدة من المهارات الهامة التي يجب على كل مطور ويب تعلمها هي كيفية تجاوز الأنماط المطبقة على العناصر وفهم الأولويات في تحميل الأنماط من مصادر مختلفة مثل ملفات CSS الخارجية أو علامات النمط الداخلية داخل الصفحة.
في هذا الدرس، سنتناول كيفية تجاوز خصائص CSS التي يتم تطبيقها على العناصر في صفحة HTML، وسنشرح كيفية التحكم الكامل في تطبيق الأنماط باستخدام ملفات CSS أو من خلال علامات النمط الموجودة في أماكن مختلفة في الكود.
كيفية تجاوز خصائص CSS؟
عند تصميم صفحة ويب، قد تحتاج في كثير من الأحيان إلى تجاوز الأنماط الافتراضية أو الأنماط المطبقة في مكان آخر من الكود. يمكن تحقيق ذلك باستخدام CSS بطرق مختلفة:
- استخدام ملف CSS خارجي: هذا هو أول مكان يتم تحميل الأنماط منه. إذا قمت بتطبيق أنماط لعناصر HTML من خلال ملف CSS خارجي، فسيتم تحميلها أولاً.
- علامات النمط الداخلية في بداية الصفحة: بعد تحميل ملف CSS الخارجي، يمكنك تجاوز تلك الأنماط باستخدام علامة
<style>
داخل جزء<head>
أو داخل جزء<body>
. - علامات النمط في نهاية الصفحة: إذا أردت أن تضمن أن يتم تطبيق نمط معين بعد كل الأنماط الأخرى، يمكنك استخدام علامة
<style>
داخل جزء<body>
قبل إغلاق العلامة.
مثال على تجاوز خصائص CSS
html
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<style>
h1 {
color: blue;
}
</style>
<h1>مرحبا بالعالم!</h1>
<style>
h1 {
color: red;
}
</style>
</body>
في هذا المثال، نبدأ بتحميل نمط من ملف CSS خارجي يطبق لونًا على العنوان
h1
. ثم نقوم بتجاوز هذا النمط باستخدام علامة <style>
داخل جزء <body>
. وفي النهاية، يتم تجاوز كل الأنماط السابقة بتطبيق نمط جديد قبل إغلاق علامة <body>
.فهم أولوية الأنماط في CSS
أولوية الأنماط في CSS تتبع ترتيبًا محددًا بناءً على مكان تطبيق النمط:
- الأنماط المطبقة من ملفات CSS الخارجية: هذه هي الأنماط التي يتم تحميلها أولاً ولديها الأولوية الأقل.
- الأنماط المطبقة من علامات النمط داخل
<head>
: هذه الأنماط تأتي بعد ملفات CSS الخارجية. - الأنماط المطبقة من علامات النمط داخل
<body>
: هذه الأنماط لديها الأولوية الأعلى لأنها تأتي في النهاية.
خاتمة
تعلم كيفية تجاوز خصائص CSS وأولوية الأنماط هو خطوة هامة نحو تحقيق تنسيقات احترافية ودقيقة لصفحات الويب الخاصة بك. من خلال فهم كيفية تحميل الأنماط من مصادر متعددة وتجاوزها عند الحاجة، يمكنك التحكم الكامل في مظهر صفحاتك.
انضم إلى دورتنا الآن وتعلم جميع أساسيات CSS بما في ذلك كيفية تجاوز الخصائص وأولوية الأنماط، واحصل على شهادة معتمدة في تطوير الويب!
الفيديوهات
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات
فيديو الدرس التعليمي كيفية تجاوز الخصائص في CSS وأولوية التنسيق – فهم ترتيب تطبيق التنسيقات
المصادر
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و المصادر
أوامر بناء صفحة إنترنت مستخدمة في هذا الدرس
أوامر تنسيق مستخدمة في هذا الدرس
ملحقات ال PDF
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و ملحقات ال PDF
ملف الشرح المرجعي وصول لعناصر صفحات الإنترنت وتنسيقها
الدروس والاختبارات لتعلم هذه الدورة التدريبية : دورة تدريبية لغة CSS لإنشاء تصاميم وتنسيق صفحات الإنترنت