تصميم صفحات التنسيق النمطية CSS

تصميم صفحات التنسيق النمطية CSS

تصميم صفحات التنسيق النمطية CSS

28/01/2025 Computer And Technology

تصميم صفحات التنسيق النمطية CSS

 

لإنشاء صفحة إلكترونية كاملة الوظائف، تحتاج إلى الدمج بين :

  • لغة HTML .
  • ملف صفحات التنسيق النمطية ( Cascading Style Sheets - CSS )
  • لغة البرمجة النصية جافا سكريبت ( Javascript - JS )

يُستخدم كل واحد منها لسبب مختلف في الصفحة الإلكترونية .

HTML : تستخدم لإعداد الهيكل العام للصفحة، ويمكن اعتبارها العمود الفقري للصفحات الإلكترونية .

 

صفحات التنسيق النمطية : هي لغة أنماط تستخدم لوصف طريقة عرض نص مكتوب بلغة HTML .

 

جافـا سـكريبت : هي لغـة برمجـة نصيـة تسـتخدم لإضافـة محتـوى تفاعـلي للصفحـة الإلكترونيـة، وتحسـين وظائفهـا، والتحكـم في عمل العناصر الأخرى .

 

كل لغة برمجة تعد طبقة منفصلة في الموقع وتؤدي غرضاً مختلفاً لذلك يفضل العمل باللغات الثلاث المستخدمة في الصفحة الألكترونية بشكل منفصل، وحفظ المقطع البرمجي على شكل ملفات مستقلة، ثم الدمج بين هذه اللغات باستخدام ربط الصفحات في HTML مع صفحات التنسيق النمطية وجافا سكريبت .

 

مقدمة إلى صفحات التنسيق النمطية :

صفحات التنسيق النمطية ( CSS ) تستخدم للتحكم في مظهر النص المكتوب بلغة HTMLوهذا يمنحك القدرة على تعديل مظهر الصفحة الألكترونية بشكل خاص والموقع بشكل عام .
 

مزايا استخدام صفحات التنسيق النمطية :

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

بناء جملة صفحات التنسيق النمطية :

h1, h2, p { color:yellow; font-family:Arial; }

 

أنواع ملفات صفحات التنسيق النمطية :

  • ملفات صفحات التنسيق النمطية المضمنة .
  • ملفات صفحات التنسيق النمطية الداخلية .
  • ملفات صفحات التنسيق النمطية الخارجية .

صفحات الأنماط المضمنة :

يستخدم لتطبيق نمط واحد لعنصر واحد فقط، حيث تستخدم خاصية النمط ( style )للعنصر ذو الصلة

<p style="color:green;">

<p/> الهدف من حضور الجمهور في هذه اللعبة هو تشجيع اللاعبين أثناء المباراة

النتيجة : 

الهدف من حضور الجمهور في هذه اللعبة هو تشجيع اللاعبين أثناء المباراة

صفحات الأنماط الداخلية :

تستخدم عندما يكون للصفحة الألكترونية تنسيق منفصل، وهذا يطبق إذا أردت تنفيذ التنسيق على صفحة واحدة وليس على الموقع الألكتروني بكامله. يتم تعريف الأنماط الداخلية داخل عنصر < style > و داخل قسم < head > الموجود في صفحة HTML

 

<!DOCTYPE html>

<html dir="rtl" lang="ar">

<head>

<title> Football Fan Page</title>

<meta charset="UTF-8" />

<style>

p { color: green; font-weight:bold; background-color:rgb(161, 161, 161); } </style>

</head>

صفحات الأنماط الخارجية :

ملف CSS منفصل يمكن الوصول إليه عن طريق إنشاء ارتباط داخل قسم < head > بالصفحة الألكترونية. ويمكن تكرار استخدام نفس ملف CSS مع الصفحات الأخرى بنفس الطريقة بوضع الأرتباط دخل قسم
< head > لكل صفحة منها.

تُعد صفحة الأنماط الخارجية مثالية عندما يتم تطبيق النمط على العديد من الصفحات. يمكنك تغيير نمط الموقع بالكامل عن طريق تغير ملف واحد فقط , يتم ربط كل صفحة إلكترونية بصفحة الأنماط باستخدام
الوسم < link > الموجود داخل قسم < head >

 

لمعاينة باقي الدرس في المتصفح :

انقر هنا 

لتحميل الدرس للطباعة من نوع pdf : 

انقر هنا

لمشاهدة الشرح والتطبيق العملي عبر قناتنا على اليوتيوب : 

انقر هنا

 

 

التعليقات (0)
لا توجد تعليقات متاحة
تسجيل الدخول أو إنشاء حساب لترك التعليقات

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