تكنولوجيا المعلومات والاتصالات (بالعربية) الصف الثاني الإعدادي، الأسبوع 9: ملف تنسيق واحد لصفحات كثيرة

CSS: مظهر صفحة الويب

الأسبوع 9 · الدرس ٢ «تنسيق صفحات الويب»: لغة CSS وفوائدها وبنيتها وطرق إضافتها وملف CSS خارجي · 3 دروس

ملف تنسيق واحد لصفحات كثيرة

ICT Prep 2 Term 1, Unit 2, Lesson 2: pp. 59–66

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

كلمات جديدة

تنسيق مضمَّن (inline) · قاعدة مكتوبة داخل عنصر واحد وتخصّ هذا العنصر فقطتنسيق داخلي (internal) · قواعد مكتوبة في رأس صفحة واحدة وتخصّ هذه الصفحة فقطتنسيق خارجي (external) · قواعد محفوظة في ملف منفصل ترتبط به صفحات كثيرةالرابط (link) · السطر في رأس الصفحة الذي يربطها بملف التنسيق

الشرح

هناك ثلاث طرق لإضافة CSS. التنسيق المضمَّن يُكتب داخل عنصر واحد ويغيّر هذا العنصر فقط. والتنسيق الداخلي يوضع في رأس صفحة واحدة ويغيّر هذه الصفحة فقط. والتنسيق الخارجي يعيش في ملف منفصل ينتهي بـ .css وتستطيع صفحات كثيرة أن ترتبط به، فهو الأفضل للموقع كله. ويوضع سطر الرابط في الرأس: يعطي الجزء href اسم الملف، ويقول rel="stylesheet" ما نوع الملف. انظر إلى الصفحتين في الصور. كلتاهما ترتبط بملف التنسيق نفسه. لذلك يكون العنوانان أخضر داكنًا وتكون حروف الفقرتين بحجم 18px. وإذا غيّرت قيمة واحدة في ملف التنسيق تغيّرت الصفحتان معًا، وهذا ما يقوله جدول الفوائد.

الطريقة	أين تُكتب	ما تغطيه
مضمَّن	داخل عنصر واحد	هذا العنصر فقط
داخلي	في رأس صفحة	هذه الصفحة وحدها
خارجي	في ملف .css منفصل	كل صفحة ترتبط به

أمثلة محلولة

Html

1<html>
2<head>
3  <link rel="stylesheet" href="style.css">
4</head>
5<body>
6  <h1>يوميات حديقة الصف</h1>
7  <p>زرعنا الفول اليوم.</p>
8</body>
9</html>

الصفحة الأولى يوميات حديقة الصف، والثانية حيوانات الصف الأليفة. وفي الصفحتين سطر الرابط نفسه. ويقول ملف التنسيق إن h1 أخضر داكن وإن p حجمه 18px. فتأخذ الصفحتان المظهر نفسه.

Css

1h1 {
2  color: darkgreen;
3}
4p {
5  font-size: 18px;
6}
7

ملف التنسيق المشترك هو style.css. وللصفحة الثانية سطر الرابط نفسه، ولا يختلف إلا كلام العنوان والفقرة («حيوانات صفنا الأليفة»، «يحب صفنا القطط»). مهمة توقّع: إذا تغيّرت القيمة darkgreen إلى darkred في style.css فماذا يحدث؟ يتحول العنوانان إلى الأحمر الداكن لأن الصفحتين ترتبطان بالملف نفسه.

نشاط الفصل

انسخ ملف التنسيق على الورق وغيّر قيمة واحدة. ثم ارسم كيف تبدو الصفحة الأولى والثانية قبل التغيير وبعده. واكتب جملة واحدة تبدأ بـ «لأن الصفحتين ترتبطان بالملف نفسه…». لا حاجة إلى جهاز.

تدرّب

أي نوع من CSS هو الأفضل لموقع كبير ولماذا؟

ماذا يفعل سطر الرابط في الرأس؟

في سطر الرابط، ما href وما rel="stylesheet"؟

توقّع: الصفحتان ترتبطان بـ style.css وتتغير قيمة واحدة. كم صفحة تتغير؟