تصميم صفحات التنسيق النمطية | الوحدة الثالثة | الدرس الثاني
تصميم صفحات التنسيق النمطية هو عنوان الدرس الثاني من الوحدة الثالثة التي تحمل اسم “البرمجة المتقدمة باستخدام لغة ترميز النص التشعبي” في الفصل الدراسي الأول من مقرر “تقنية رقمية 2”.
سنتعرف في هذا الموضوع على تصميم صفحات التنسيق النمطية (CSS)، من خلال تمييز استخداماتها، وفهم بنيتها، وأنواعها، بالإضافة إلى ربطها مع لغة ترميز النص التشعبي (HTML)، وتنسيق النصوص باستخدام خصائصها الأساسية.
لذا قم بقراءة نواتج التعلُّم بعناية، ثم أعد قراءتها بعد انتهائك من دراسة الموضوع وتأكَّد من تحصيلها جميع محتوياتها.
نواتج التعلُّم
- تمييز استخدامات صفحات التنسيق النمطية (CSS).
- فهم بنية صفحات التنسيق النمطية (CSS)
- معرفة أنواع ملفات صفحات التنسيق النمطية (CSS).
- ربط صفحة HTML وملف (CSS).
- تمييز محددات (CSS).
- تنسيق النص باستخدام خصائص (CSS) الأساسية.
هيا لنبدأ!
إنشاء صفحة إلكترونية
لإنشاء صفحة إلكترونية كاملة الوظائف، تحتاج إلى الدمج بين:
- لغة HTML.
- ملف صفحات التنسيق النمطية (Cascading Style Sheets – CSS).
- لغة البرمجة النصية جافا سكريبت (JavaScript – JS).
يتم استخدام كل منها لسبب مختلف في الصفحة الإلكترونية.
HTML: يتم استخدامها لإعداد الهيكل العام للصفحة، ويمكن اعتبارها العمود الفقري للصفحات الإلكترونية.
صفحات التنسيق النمطية هي لغة أنماط يتم استخدامها لوصف طريقة عرض نص مكتوب بلغة HTML.
جافا سكريبت هي لغة برمجة نصية يتم استخدامها لإضافة محتوى تفاعلي للصفحة الإلكترونية، وتحسين وظائفها، والتحكُّم في عمل العناصر الأخرى.
كل لغة برمجة تعدُّ طبقة منفصلة في الموقع وتؤدي غرضًا مختلفًا؛ لذلك يفضل العمل باللغات الثلاث المُستخدَمة في الصفحة الإلكترونية بشكلٍ منفصل، وحفظ المقطع البرمجي على شكل ملفاتٍ مستقلة، ثم الدمج بين هذه اللغات باستخدام ربط الصفحات في HTML مع صفحات التنسيق النمطية وجافا سكريبت.
مقدمة إلى صفحات التنسيق النمطية
تم استخدام لغة HTML سابقًا لإضافة محتوى إلى الصفحة الإلكترونية الخاصة بك، وتنسيقها باستخدام وسوم HTML التي توفِّر تنسيقًا محدودًا.
ستتعلم الآن كيفية استخدام صفحات التنسيق النمطية لإظهار الصفحة بشكل أفضل.
صفحات التنسيق النمطية (CSS) يتم استخدامها للتحكُّم في مظهر النص المكتوب بلغة HTML، وهذا يمنحك القدرة على تعديل مظهر الصفحة الإلكترونية بشكل خاص والموقع بشكل عام.
مزايا استخدام صفحات التنسيق النمطية:
- سهولة التعديل على الصفحات الإلكترونية، بحيث يمكِن التحكُّم في مظهر الصفحة بواسطة ملف CSS خارجي واحد، بل وإجراء التعديل على نمط الصفحات الإلكترونية في الموقع من خلال تغيير ملف واحد فقط بدلًا من تحرير عدة نقاط في كل صفحة من صفحات الموقع.
- حجم أصغر للملف، حيث أن كل ما يتعلق بالتنسيق يتم كتابته مرة واحدة فقط للصفحة بأكملها.
- تحميل أسرع للصفحات، فعند استخدام ملف CSS خارجي، يحفظ المتصفح صفحة من الموقع في ذاكرة التخزين المؤقت، وبهذا لا يضطر إلى تحميلها كلما تصفح المُستخدِم الموقع مرة أخرى.
لمعرفة المزيد من المعلومات عن صفحات التنسيق النمطية، قم بالاطّلاع على الرابط التالي:
بنية صفحات التنسيق النمطية
بناء جُملة صفحات التنسيق النمطية
أنواع ملفات صفحات التنسيق النمطية
- ملفات صفحات التنسيق النمطية المضمنة (Inline CSS).
- ملفات صفحات التنسيق النمطية الداخلية (Internal).
- ملفات صفحات التنسيق النمطية الخارجية (External CSS).
صفحات الأنماط المضمنة (Inline Style)
يتم استخدامها لتطبيق نمط واحد لعنصر واحد فقط، حيث يتم استخدام خاصية النمط (Style) للعنصر ذو الصلة.
بإمكانك مراجعة محتوى موضوع “تصميم صفحات التنسيق النمطية” حتى هذه النقطة، من خلال الرابط التالي:
صفحات الأنماط الداخلية (Internal Style Sheets)
يتم استخدامها عندما يكون للصفحة الإلكترونية تنسيق منفصل، وهذا يطبق إذا أردت تنفيذ التنسيق على صفحة واحدة وليس على الموقع الإلكتروني بكامله.
يتم تعريف الأنماط الداخلية داخل عنصر <style>، وداخل قسم <head> الموجود في صفحة HTML.
صفحات الأنماط الخارجية (External Style Sheets)
صفحات الأنماط الخارجية هي ملف CSS منفصل يمكِن الوصول إليه عن طريق إنشاء ارتباط داخل قسم < head > بالصفحة الإلكترونية.
ويمكِن تكرار استخدام نفس ملف CSS مع الصفحات الأخرى بنفس الطريقة بوضع الارتباط داخل قسم <head> لكل صفحة منها.
تعدُّ صفحة الأنماط الخارجية مثالية عندما يتم تطبيق النمط على العديد من الصفحات.
يمكِنك تغيير نمط الموقع بالكامل عن طريق تغيير ملف واحد فقط. يتم ربط كل صفحة إلكترونية بصفحة الأنماط باستخدام الوسم <link> الموجود داخل قسم <head>.
الربط بين صفحة HTML وملف CSS
بنفس الطريقة التي أنشأت بها ملف HTML، يمكِنك إنشاء ملف CSS بامتداد .css في اسمه.
لإنشاء ملف CSS جديد:
- من قسم Explorer (المستكشف)، وفي المجلد الذي تم فتحه اختر New File (ملف جديد).
- اكتب الاسم بالامتداد .css
- يمكِنك الآن إضافة المحتوى للمستند.
يجب عليك الآن ربط ملف CSS بالصفحة الإلكترونية الخاصة بك. لربط الملف، ضع هذا السطر في قسم <head> في مقطع برمجي HTML الخاص بك.
محددات CSS
يمكِنك اختيار الوسوم المراد تنسيقها من خلال محددات CSS (CSS Selectors)، والتي هي أساسًا عبارة عن بعض القواعد التي توفِّر مرونة كبيرة وتمكِّن المتصفح من فهم ما تريد تطبيقه عند الكتابة في كل مرة. ومن أمثلة هذه المحدِّدات:
بإمكانك مراجعة محتوى موضوع “تصميم التنسيق النمطية” بدايةً من عنوان “صفحات الأنماط الداخلية” وحتى نهاية هذا القسم، من خلال الرابط التالي:
خصائص CSS الأساسية المرتبطة بتنسيق النص
اللون (Color)
تتيح لك خاصية اللون تحديد لون النص داخل عنصر ما. يتم تحديد اللون في CSS بثلاث طرق:
حجم الخط (font-size)
خاصية حجم الخط تسمح لك بتحديد حجم الخط الذي تستخدمه. يمكِنك تحديد حجم الخط إما بوحدة البكسل أو بالنسبة المئوية.
عائلة الخطوط (font-family)
تتيح لك خاصية عائلة الخطوط تحديد عائلة الخط التي تريد استخدامها لأي نص داخل العناصر.
يجب أن يتم تثبيت عائلة الخطوط التي تم تحديدها لاستخدامها في الموقع، وكذلك يجب أن يتم تثبيتها على جهاز زوار الموقع.
لهذا السبب؛ يتم تحديد قائمة الخطوط مفصولة بفواصل بحيث إذا لم يكن لدى المُستخدِم أول نوع خط مثبَّت فإن المتصفِح سيستخدِم النوع التالي.
نمط الخط (font-style)
تسمح لك خاصية نمط الخط بإنشاء نص مائل. تتعدَّد قيم هذه الخاصية ما بين الخط عادي (normal) أو مائل (italic or oblique).
عرض الخط (font-weight)
تسمح لك خاصية عرض الخط بإنشاء نص غامق، يوجد قيمتان لهذه الخاصية: غامق (bold) أو عادي (normal).
زخرفة النص (text-decoration)
تسمح لك خاصية زخرفة النص بتطبيق العديد من التأثيرات على النص.
تأخذ هذه الخاصية القيم التالية:
بإمكانك مراجعة محتوى “تصميم صفحات التنسيق النمطية” بدايةً من عنوان “خصائص CSS الأساسية المرتبطة بتنسيق النص” وحتى نهاية الموضوع، من خلال الرابط التالي:
https://www.youtube.com/watch?v=14a5q–vGEY
إلى هنا يكون قد انتهى موضوع “تصميم صفحات التنسيق النمطية”، لا تنسوا مراجعة نواتج التعلُّم أعلى المقال، وانتظرونا في الموضوع القادم!