السلام عليكم و رحمة الله و بركاته
في هدا الدرس سنركز على دراسة تقنية الأنماط الإنسيابية CSS بشكل موسع

و سنتطرق لمعظم الخصائص اللتي يمكن للغة CSS إعطائها لصفحة html








هدا الدرس ليس تعريفا لهده التقنية أو طريقة عملها
لمعرفة دلك يمكنك قرائة الدرس السابق

شرح إستخدام الأنماط الإنسيابية CSS في صفحات html

بداية لابد من التدكير بطريقة كتابة الأنماط داخل ملف css

يتكون كل نمط داخل ملف css من ثلاثة أجزاء رئيسية



و هي حسب الترتيب في الصورة 
1 العنصر
2 السمة
3 القيمة

و يمكن كثابة أكتر من سمة للعنصر الواحد كما يمكن إدراج أي عدد من العناصر تباعا داخل ملف css






يمكن للسمة أن تظم أكثر من قيمة واحدة





1 / أنواع العناصر

العناصر في css تنقسم ل 3 أنواع رئيسية

1 الوسوم
أي وسوم html . فيمكن تحديد نوع من أنواع وسوم html لإعطائه مجموعة من السمات

في هدا المثال سيتم تلوين جميع الخلايا div في صفحة html بخلفية زرقاء

div{    background-color:#0000ff;   }

يمكن إستبدال div بأي وسم html و في هده الحالة يكتب الوسم كما هو بدون أي إضافات

2 الكلاسات
يعطى الكلاس لأي مجموعة عناصر في html سواء خلية أو رابط أو صورة أو غيرها  بهدا الشكل

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

و يكتب في ملف css بإضافة نقطة . قبله

.mystyle{   background-color:#f1f1f1;  }

و يمكن إضافة الكلاس لمجموعة وسوم من نفس النوع أو أنواع مختلفة . فيمكن متلا إعطاء الكلاس mystyle للخليا div و الروابط a على حد سواء

3 المعرفات id
يستخدم المعرف id مرة واحدة فقط و لا يمكن تكراره على أي عنصر آخر

<div id="maindiv">نص تجريبي</div>

و يكتب في css بإضافة الرمز # قبله

#maindiv{    background-color:#0000ff;   }

عادة ما يستخدم id مع العناصر اللتي تتعامل مع javascript  لدا لا ينصح بإستخدامه في الوضع العادي أو من قبل المبتدئين


2 / رموز الألوان

يمكن إدراج قيمة اللون داخل السمة بكثابة إسمه باللغة الإنجليزية

.mystyle{   background-color:red;  }

أو إستخدام الرمز hex للون

.mystyle{   background-color:#f1f1f1;  }

يتكون الرمز hex للون من # متبوعة بستة محارف [0-9] و [a-f]
و هده المحارف الستة تمثل قيمة ثلاتة ألوان أساسية

#ff0000: الأحمر
#00ff00: الأخضر
#0000ff: الأزرق

يمكن الحصول على رمز hex للون بعدة طرق منها هدا الموقع

https://www.color-hex.com



3 / إستدارة الحواف

يمكن إنشاء خلية أو عنصر مع حواف مستديرة هكدا ببساطة

border-radius:10px;

تمثل القيمة 10px حجم الإستدارة .





يمكن جعل هده الإستدارة مختلفة من رأس إلى آخر بهده الطريقة

 border-radius:0px 5px 10px 15px;

4 / الضلال

يمكن إنشاء ضل للخلية أو العنصر عن طريق السمة box-shadow

نمودج:

box-shadow : 5px 3px 8px 0px #000000;

أمام سمة box-shadow توجد أربعة قيم بكسلية بالإضافة لرمز اللون الأسود
القيمتين الأولتين لإتجاه الظل أفقيا و عموديا . يمكن وضع قيمة سالبة -



القيمة الثالتة لشدة التلاشي





أما القيمة الرابعة فهي الفرق بين الأبعاد للعنصر و الضل الخاص به
القيمة صفر 0 تعني أن يكون الضل مساويا في حجمه للخلية أو العنصر التابع له و يمكن أن يتضمن قيمة سالبة -





يمكن إضافة كلمة inset قبل القيم الأربعة التي رأينا من أجل جعل الضل داخلي
داخل الخلية و ليس خارجها

box-shadow : inset -6px -5px 10px 0px #000000;

5 / صورة الخلفية

يمكن تحديد خلفية العنصر كصورة بدلا من اللون

background-image: url("ba.png");

طبعا مع مراعاة تغيير ba.png بإسم صورة الخلفية اللتي من المفترض أنك وضعتها في نفس مسار الصفحة





6 / الكلاسات المتعدد

يمكن إضافة أكثر من كلاس للعنصر الواحد و دلك بالفصل بينهم بالفراغات

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

تظهر أهمية هدا الإجراء  عند وجود بعض السمات المشتركة للعناصر

مثال :

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





7 / الأولوية 

عند تعارض بعض السمات مع بعضها يتم إعطاء الأولوية لآخر سمة

في هدا المثال قمنا بتلوين لون الحافة السفلية بالأحمر 1 تم قمنا بتحديد لون الحواف بالأسود 2



لإظهار الحافة السفلية باللون الأحمر يكفي تبديل مكاني السطرين




8 / المحاداة

1 . المحادات الخارجية
تستخدم المحاداة الخارجية margin لترك مسافة أو مساحة بين العنصر و العناصر الخارجية

مثال :

margin:10px;

2 . المحاداة الداخلية
تستخدم المحاداة الداخلية padding لترك مساحة بين حواف الخلية و المحتويات الموجودة بداخلها

   padding:10px

لكلا نوعي المحاداة إمكانية إستخدام القيم المتعددة
مثال ;

padding:10px 2px 0px 20px;

أو يمكن تحديد المحاداة لجانب واحد فقط عن طريق السمة المخصصة left ; top ; bottom ; right

مثال :

padding-left:10px;

9 / نمط العرض

يمكن تغيير نمط العرض لمجموعة عناصر ما لتكون بشكل أفقي أو عمودي حسب رغبتك

مثال:

العرض الأفقي

display:inline-block;

العرض العمودي

display:block;

10 / التموضع


يتموضع كل عنصر نقوم بإدراجه في html إفتراضيا حسب الترتيب اللدي جاء به ( بعد العنصر اللدي قبله )
لكن يبقى بإمكاننا تغيير الموضع عن طريق سمة position في css


مثال :





11 / الطبقات

في المثال السابق أخدت الخلية التانية طبقة أعلى من الأولى و بالتالي حجبت جزئا منها
يمكن التحكم بالطبقات ( أي عنصر يظهر فوق الآخر ) من خلال سمة z-index

.index1{  z-index:-1;  }

لاحض أن الخلية الأولى أصبحت فوق التانية





12 / الشفافية 

يمكن التحكم بدرجة شفافية عنصر للسماح بضهور العناصر اللتي تحته ( حسب درجة الشفافية )

opacity: 0.8;

13 / حالة مرور المؤشر


يمكن تغيير أنماط العنصر عند مرور مؤشر الفأرة فوقه و دلك بكتابة إسم العنصر مرة أخرى في css متبوعا ب :hover

مثال :

.fixed:hover{ opacity: 1; }

مع صعوبة حفظ جميع التوصيفات يمكنك دائما إستخدام المراجع المتوفرة على شبكة الإنترنت
فمثلا أتناء كثابتي لهدا الدرس كنت في حاجة للرجوع لموقع https://www.w3schools.com/


---------------------------
إنتهى الدرس...