Angular Academy · درس

الأنماط الخاصة بنطاق المكوّن

أبقوا الأنماط محليةً للمكوّن

الأنماط الخاصة بنطاق المكوّن درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.

الأنماط تنتمي إلى المكوّنات

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

مصفوفة الأنماط المضمّنة

يمكنك تعريف الأنماط داخل السطر في مصمم @Component باستخدام مصفوفة styles.

@Component({
  selector: "app-card",
  template: "<div class='card'>Hello</div>",
  styles: [".card { padding: 16px; border: 1px solid #ccc; }"]
})
export class CardComponent {}

styleUrls الخارجية

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

@Component({
  selector: "app-card",
  templateUrl: "./card.component.html",
  styleUrls: ["./card.component.css"]
})
export class CardComponent {}

اختصار styleUrl

بالنسبة إلى ورقة أنماط واحدة، يدعم Angular الحديث الخاصية المفردة styleUrl.

@Component({
  selector: "app-card",
  templateUrl: "./card.component.html",
  styleUrl: "./card.component.css"
})
export class CardComponent {}

النطاق المحصور عمليًا

لن يتسرّب تعريف .card في أحد المكوّنات إلى مكوّن آخر يستخدم الفئة card أيضًا. فكل منهما معزول.

/* card.component.css */
.card { color: navy; }
/* this navy color stays inside CardComponent only */

كيفية عمل حصر النطاق

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

<!-- generated markup -->
<div class="card" _ngcontent-abc>Hello</div>

/* generated css */
.card[_ngcontent-abc] { color: navy; }

الأنماط لا تتسرّب إلى الداخل

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

الأنماط العامة

بالنسبة إلى الأنماط على مستوى التطبيق، استخدم الملف العام styles.css المدرج في angular.json. ولا تكون هذه الأنماط محصورة النطاق.

/* src/styles.css - global */
body { font-family: system-ui; }

أوراق أنماط متعددة

يمكن للمكوّن تحميل عدة أوراق أنماط بإدراجها في المصفوفة.

@Component({
  selector: "app-page",
  styleUrls: ["./base.css", "./layout.css"]
})
export class PageComponent {}

استخدام روابط class

تتكامل الأنماط المحصورة النطاق بصورة طبيعية مع روابط class لتطبيق القواعد بشكل مشروط.

<div class="card" [class.featured]="isFeatured"></div>

/* card.component.css */
.featured { border-color: gold; }

لماذا يفيد حصر النطاق

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

تحقق سريع

اختبروا مدى فهمكم للتنسيقات الخاصة بالمكوّن.

مراجعة

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

الأسئلة الشائعة

هل درس «الأنماط الخاصة بنطاق المكوّن» مجاني؟

نعم — نص درس «الأنماط الخاصة بنطاق المكوّن» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.

ماذا ستتعلم في «الأنماط الخاصة بنطاق المكوّن»؟

أبقوا الأنماط محليةً للمكوّن تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟

لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «الأنماط الخاصة بنطاق المكوّن»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟

نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Angular Academy