في هذا الدرس 6تصفّح المواضيع
بعد أن تعلّمت صياغة قواعد CSS واختيار محدداتها، يبرز السؤال العملي الأهم: أين نضع هذه القواعد لكي يقرأها المتصفح؟ تدعم جميع المتصفحات ثلاث طرق قياسية لإدراج الأنماط في صفحة HTML:
- الملف الخارجي — External CSS: حفظ القواعد في ملف مستقل بامتداد
.cssوربطه عبر وسم<link>، وهو الخيار الاحترافي الأول للمشاريع الحقيقية. - النمط الداخلي — Internal CSS: كتابة القواعد داخل وسم
<style>في منطقة<head>للتجارب السريعة أو الصفحة المنفردة. - النمط السطري — Inline CSS: كتابة التصريحات مباشرةً داخل سمة
style="..."على الوسم نفسه في حالات استثنائية نادرة.
في طريقة الملف الخارجي، تنشئ ملفاً نصياً مستقلاً مثل styles.css تكتب بداخله قواعد CSS الصافية فقط — إياك وكتابة وسم <style> داخل ملف .css! ثم تربطه داخل قسم <head> في صفحاتك بواسطة الوسم الفردي <link> مع تحديد العلاقة rel="stylesheet" ومسار الملف href="styles.css".
عندما تشترك مئة صفحة في هذا الملف الواحد، فإن تعديل سطر وحيد بداخله يحدّث مظهر الموقع بأكمله فوراً:
<head>
<meta charset="UTF-8">
<title>Site Home</title>
<link rel="stylesheet" href="styles.css">
</head>تعتمد طريقة الأنماط الداخلية على كتابة قواعد التنسيق داخل زوج الوسوم <style>...</style> ضمن قسم <head> في ملف HTML نفسه.
تُعد هذه الطريقة عملية جداً في ساحات التجريب السريعة، أو التقارير المستقلة المرسلة في ملف واحد، غير أن قواعدها تظل حبيسة تلك الصفحة ولا يمكن مشاركتها تلقائياً مع ملفات أخرى:
<head>
<style>
h1 { color: navy; }
.note { color: darkgreen; }
</style>
</head>
<body>
<h1>Internal Style Block</h1>
<p class="note">Scoped to this file.</p>
</body>يطبّق النمط السطري تصريحات التنسيق مباشرةً داخل وسم الفتح لعنصر واحد عبر السمة style="...". لاحظ أن السمة السطرية تُكتب دون محدد ودون أقواس معقوفة، لأنها تستهدف ذلك الوسم بعينه فقط.
يتجنب المطورون المحترفون الاعتماد على الأنماط السطرية في صفحات المواقع لأنها تعيد خلط البنية بالمظهر، وتطغى بأولويتها العالية على ملفات الأصناف المنظمة:
| طريقة الإدراج | موضع كتابة القواعد | النطاق العملي الأنسب |
|---|---|---|
خارجي <link> | ملف .css مستقل | المواقع المتكاملة والمشاريع الإنتاجية |
داخلي <style> | داخل وسم <head> | الأمثلة التعليمية والصفحات المنفردة |
سطري style="" | سمة داخل وسم العنصر | استثناءات ضيقة جداً أو قوالب البريد |
<h1 style="color: crimson;">Urgent Alert</h1>
<p style="color: navy;">Direct inline color.</p>
<p style="font-size: 20px;">Larger line.</p>
<p>Unstyled default paragraph.</p>توفر لغة CSS أيضاً قاعدة التوجيه @import url("typography.css"); لاستدعاء ملف أنماط فرعي من داخل ملف أنماط آخر. ويشترط المحلل النحوي كتابة أوامر @import في أعلى الملف قبل أي قاعدة تنسيق عناصر، ولا يجوز أن يسبقها سوى تصريح @charset.
ومن زاوية سرعة الأداء، يُفضَّل استخدام وسوم <link rel="stylesheet"> في HTML بدلاً من @import؛ لأن المتصفح يحمّل ملفات <link> بالتوازي في اللحظة نفسها، بينما يسبب @import تأخيراً متسلسلاً إذ يضطر المتصفح لتنزيل الملف الأول وتحليله قبل أن يكتشف وجود الملف الثاني. قارن بين الخيارات عملياً في المختبر التالي:
ماذا تفعل إذا كتبت قواعد سليمة تماماً في ملف خارجي ولم يظهر أي تنسيق على الصفحة؟ افتح أدوات المطور وانتقل إلى تبويب الشبكة — Network، ثم اختر مرشح CSS وأعد تحميل الصفحة لفحص ثلاث إشارات حاسمة:
- رمز حالة الاستجابة: تأكد من حصول الملف على الحالة
200 OKبدلاً من الخطأ404 Not Foundالناتج غالباً عن خطأ في كتابة مسارhref. - رأس نوع المحتوى فحصاً دقيقاً: تحقّق من إرسال الخادم لرأس الاستجابة
Content-Type: text/css؛ ففي الوضع القياسي الحديث يرفض المتصفح تطبيق ملف الأنماط الخارجي إذا أُرسل بنوع محتوى خاطئ. - سلامة المصادر الخارجية: عند ربط ملف أنماط مستضاف على شبكة توزيع محتوى موثوقة، يساعد التحقق من بصمة الملف على حماية الواجهة من أي تعديل غير مصرح به أثناء النقل.
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
قارنت في هذا الدرس بين الملف الخارجي عبر <link> والنمط الداخلي بوسم <style> والسمة السطرية style="..."، وعرفت سبب تفوق التحميل المتوازي على @import وكيفية فحص رأس Content-Type: text/css في الشبكة. في الخطوة التالية ننتقل إلى درس التعليقات في لغة CSS لتعلم توثيق القواعد وتعطيل الأسطر مؤقتاً أثناء الاختبار.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 External Stylesheet ورقة الأنماط الخارجية
- ملف مستقل بامتداد .css يُربط بصفحات HTML عبر وسم <link> لتوحيد تصميم الموقع بالكامل.
- للمراجعة
- 02 Internal Stylesheet ورقة الأنماط الداخلية
- قواعد تنسيق تُكتب داخل وسم <style> في قسم <head> وتنطبق على تلك الصفحة وحدها.
- للمراجعة
- 03 Inline Style النمط السطري
- تصريحات تنسيق تُكتب مباشرةً داخل سمة style في وسم الفتح لعنصر واحد دون محدد أو أقواس.
- للمراجعة
- 04 Sequential Waterfall التحميل المتسلسل المتأخر
- التأخر الزمني الناتج عن انتظار اكتمال تنزيل الملف الأب قبل بدء طلب الملف المستورد بقاعدة @import.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 FOUC FOUC
- Flash of Unstyled Content
- وميض لحظي يظهر فيه النص غير منسق عند تأخر الأنماط، ويُتفادى بوضع وسم الربط داخل <head>.
- للمراجعة
- 02 MIME MIME
- Multipurpose Internet Mail Extensions
- معيار تصنيف أنواع الملفات عبر الشبكة والذي يعرّف ملفات الأنماط بالصيغة text/css.
- للمراجعة
- 03 CDN CDN
- Content Delivery Network
- شبكة توزيع محتوى موزعة جغرافياً لتسريع تسليم الملفات الثابتة مثل أوراق الأنماط الخارجية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح محرر تجربة الأنماط الداخلية وأضف القاعدة .highlight { color: crimson; } داخل <style> ثم امنح الصنف لفقرة جديدة داخل الجسم.
-
تنقّل بين التبويبين الأول والثاني في المختبر التفاعلي لمقارنة التحميل المتوازي عبر <link> بالتأخير المتسلسل لقاعدة @import.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.