. و السؤال المنطقي اللدي قد يطرحه أي شخص :

 لمدا نحتاج تقنيتين مختلفتين لتصميم صفحة واحدة؟

إليك الإجابة في هدا الدرس

بداية أرجو منك مراجة الدرس السابق 

شرح أساسيات html للمبتدئين . ج 2

كما رأينا في الدرس السابق توضع السمة أو التنسيق الخاص بالعنصر في style داخل وسم العنصر




على هدا المنوال سنحتاج لنسخ قيمة style نفسها داخل كل عنصر أو وسم نريد إعطائه نفس الخصائص
الأمر اللدي يؤدي لتضخم حجم الصفحة و اللدي يؤدي بدوره لصعوبة التعديل و بطء التحميل





لإصلاح أو حل هده المشكلة تأتي تقنية الأنماط الإنسيابية بفكرة فصل توصيفات style عن كود html
للقيام بدلك قم بتحديد ونسخ كل التوصيفات الموجودة في الـــ style




تم قم فتح ملف جديد في محرر النصوص
ضع الكود التالي داخل الملف الجديد

.mystyle{}

ألصق التوصيفات المنسوخة بداخله بين الرمزين { و }

تم إحفضه في نفس مسار الصفحة بأي إسم من إختيارك مع لاحقة .css





من قائمة language في الأعلى إختر C تم CSS ليتم تلوين النص على هدا الأساس و بالتالي سهولة التعامل معه



قم بالرجوع لصفحة html و إزالة style من الوسم div و إستبدله ب class="mystyle"
ليكون الحاصل :

<div class="mystyle">
نص تجريبي
</div>

ملاحظة : ليس من الضروري تسمية class ب mystyle فقط ينبغي أن يكون نفس الإسم اللدي أدرجت فيه التوصيفات في ملف css

 أضف الرمز التالي لمنطقة الرأس head في الصفحة

<link rel="stylesheet" type="text/css" href="style.css">

مع مراعاة مطابقة style.css لإسم الملف اللدي قمت بحفظ التوصيفات بدالخله

لاحض أن أي عنصر أو خلية يتم إضافة نفس الــ class بداخله ستأخد نفس النمط أو التصميم



قد تلاحض أن الخلايا في النتيجة متلاصقة ( لا توجد فراغات بينها )
لإصلاح دلك نضع في ملف css داخل mystyle السطر التالي

margin-bottom:10px;

لاحض أن التغيير جرى على جميع الخلايا الحامل للكلاس mystyle دفعة واحدة




يمكن إنشاء نمط أو أنماط أخرى داخل ملف css و إختيار إسم مختلف لها ( تأكد من وضع النقطة . أمام إسم النمط )



أي عنصر أو خلية يتم إضافة أو تعديل الكلاس الخاص بها ل style2 ستأخد النمط الجديد ☺



أتمنى أن يكون الدرس واضح


في أمان الله