
تصميم صفحات التنسيق النمطية CSS
تصميم صفحات التنسيق النمطية CSS
لإنشاء صفحة إلكترونية كاملة الوظائف، تحتاج إلى الدمج بين :
يُستخدم كل واحد منها لسبب مختلف في الصفحة الإلكترونية .
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 :
لمشاهدة الشرح والتطبيق العملي عبر قناتنا على اليوتيوب :
الدروس الشائعة
02/02/2025
17/12/2024
30/11/2024
13/01/2025
18/11/2024
المراحل الدراسية
التعليقات (0)