مقدمه فى . . . Introduction to CSS


في الجزء الاول    HTML & CSS Tutorial - Part 1
وفى الجزء الثانى  نشر الموقع على الانترنت .... HTML & CSS Tutorial - Part 2
أنشأنا ونشرنا أول موقع لنا .نعم ان الموقع  الذى انشأناه يحتوي على محتوى قليل جدا ولا يبدو حتى الآن جذاب بشكل خاص
نحن نريد تغيير هذا الآن. في هذا الجزء سوف تتعلم كيف يمكننا استخدام  ال  css 

Structure and Style   البناء او الهيكل .  و النمط او الشكل


فقط للتذكير: يصف  HTML  هيكل صفحه الوب . . .  فى حين يحدد   CSS   مظهر الصفحه

فصل هيكل الصفحه اى ملف HTML  عن صفحه   css  هو أسلوب فيه العديد من المزايا، كما سنرى.

انها ليست إلزامية، و لكن   هو الأفضل أن تكتب  HTML  و   CSS  في ملفات منفصلة.
 مع العلم انه يمكن تضمين تعليمات  CSS  فى  أى ملف  HTML  بثلاث طرق
الطريقة الأولى: 
انشاء ملف  CSS  منفصل خارجي  ومن خلال هذا ىيم  تطبيق تعليمات ملف CSS على عدة صفحات في الموقع، كما يمكنك تغيير مظهر ويب بأكمله عن طريق تغيير ملف واحد، يتم ذلك من خلال ربط  ملف  CSS  في الصفحات من خلال tag اسمه <link> يوضع في جزء الـ head
ويمكنك تحرير ملف الـ CSS الخارجي بواسطة أي محرر نصوص على أن تقوم بإعطاءه الإمتداد " css. " 
  <link rel="stylesheet" href="main.css">
حيث ان  main.css هو اسم ملف css الذى نريد ربطه بالصفحه
لاحظ أن:ملف الـ CSS يجب ألا يحتوي على أي وسم من وسوم الـ HTML .
هذه الطريقه تسمى  External Style Sheet 
الطريقة الثانية:
 يمكنك استخدام خصائص الـ css من خلال صفحة الـ html بوضع الكود في الـ head من خلال العلامة <style> 
مثال على ذلك 


وتسمى النمط   الداخلى  Internal Style Sheet  و هي تعني التضمين          " الإدراج " داخل رأس الصفحة ، و يجب عليك استخدام النمط الداخلي في حالة تطبيقه على مستند وحيد ، حيث تقوم بتحديد النمط في رأس الصفحة " head " عن طريق استخدام الوسم <style> 

 الطريقة الثالثة: 
وهي طريقة تضمين خصائص الـ css من خلال عنصر الـ html مباشرة.
  وتسمى النمط   الخطى Inline Styles

في هذه الطريقة يتم إدراج أوامر CSS داخل أكواد HTML مباشرة ، فعلى سبيل المثال يمكنك أن تختار فقرة ما أو سطر ما داخل صفحة HTML لتطبق عليها التنسيق ، و تستخدم هذه الطريقة لإدراج تنسيق خاص لا يتكرر كثيراً أو لتغيير التنسيق المدرج في صفحة الأنماط الخارجية ، و سوف يتم استخدام كلمة style كمنتقى يرسل المتغير و القيمة مع الوسم المراد تنسيقه .
مثال على ذلك 
<p style="color: red;"> MODOUNTIY </p>
في المثال السابق قمنا بإنشاء فقرة عن طريق الأمر p داخل ملف HTML ، و تم إدراج خاصية style و تم تحديد المتغير color و الذي يحدد اللون ، ثم تم اختيار القيمة red و هي تعني الأحمر، و بذلك تظهر تلك الفقرة ملونة باللون الأحمر
***
ملحوظه
تعدد الأنماط:
و السؤال الذي يتبادر إلى الذهن الآن ماذا يحدث لو تم استخدام أكثر من نمط داخل الموقع الواحد كأن يتم إنشاء ملف CSS مستقل و يتم تضمينه داخل الصفحة ، و في ذات الوقت يتم إدارج نمط CSS embedded style sheet ضمن رأس الصفحة ، و كذلك أوامر CSS داخل وسم HTML بطريقة inline . في هذه الحالة سيتم إعطاء أولوية لتنفيذ الكود inline أولاً ، ثم يليه يتم تطبيق embedded style sheet أي أوامر css ضمن رأس الصفحة ، ثم سيطبق أوامر css في الملف الخارجي ، هذه هي أولوية التنفيذ، يجب أن تتذكرها دائماً . .  
ملف CSS هو ملف نصي عادي مع الامتداد  CSS  وسوف نستخدم طريقه انشاء ملف خارجى External Style Sheet
نقوم بإنشاء ملف جديد في مجلد .Portfolio   باسم  main.css ملف نصى  باستخدام اى محرر نصوص . , لاحظ الامتداد css
الآن أفتح  ملف   index.html
نقوم بأضافه رابط لملف  CSS  فى القسم  head
 رابط لملف CSS
< link rel="stylesheet" href="main.css" >
مع ملاحظه ان الخاصيه  href  يجب ان تحتوى على المسار الصحيح للملف CSS
يكون ملف   ndex.html  كالاتى :



 **************
قواعد   CSS
قمنا بعمل ملف  CSS و ربطناه بملف ال   html الر ئيسى  
ولكن لايزال ملف CSS  فارغ ... الان نبد بكتابه اول تعليمات  واول سطور CSS
 على سبيل المثال، سوف نقوم بتغيير لون الخلفية ولون النص من العنوان الثاني. كتابة الأسطر التالية في ملف CSS الخاص بنا
main.css



والنتيجه تكون كالاتى :


لقد قمنا بتغييرلون الخلفيه  للعنوان الثانى <h2> و ذلك باستخدام تعليمات css     
لتتّضح الأمور أكثر سنجرب كتابة كود فعلي لنرى كيف تكون النتيجة
{ ;  P  { font: arial 
هذا الكود سيجعل نوع الخط الموجود في أي وسم <p> في الصفحة يتحول إلى نوع Arial، ويمكننا كتابة أكثر من تنسيق ولكن مع نهاية كل تنسيق لابد من كتابة فاصلة منقوطة “;” وتسمى Semicolon، مع العلم أنه يمكنك ألا تكتبها إذا كنت تكتب تنسيقًا واحدًا، ولكن لابد من كتابتها إذا كنت تكتب أكثر من تنسيق، والأفضل كتابتها دائمًا حتى تعتاد عليها ولا تنساها


************
الالوان فى   CSS
يتم إنشاء الألوان على الشاشة من خلال مزيج من أجزاء مختلفة من الأحمر والأخضر والأزرق (RGB). ويمكن التعبير عن مزيج من الأحمر والأخضر والأزرق في CSS بطريقتين: كقيم RGB أو كقيم ستعشرية  و هو الأكثر شيوعا.

وغالبا ما تحددة الألوان في CSS باحد هذه الطرق :
الطريقه الاولى : اسم اللون صحيح - مثل " red "
الطريقه الثانيه : قيمة RGB -  مزيج من الأحمر والأخضر والأزرق ـ مثل "  ( RGB (255، 0، 0 "
الطريقه الثالثه : قيمة HEX  اى القيمه العدديه بالعدد الست عشرى - مثل " FF0000 # "

دعونا ننظر في مثالنا مع لون الخلفية زرقاء و رمادية :
وضعنا اللون كقيمه ست عشريه :  "  607d8b  # "
فى النظام الست عشرى يجب ان نلاحظ ان  أول رقمين تمثل اللون الاحمر، والحرفين المتوسطة تمثل اللون الاخضر، وآخر حرفين تمثل اللون الازرق.
كما يمكن ان نضعه كقيمه (  RGB   )   مثل :   للون الاحمر

(background-color:rgb(255,0,0  
العمل مع رموز اللون
التعبير عن الألوان  بالقيم الست عشرية تحظى بشعبية كبيرة لأنه مع ذلك يمكن ان تحصل على عدد ضخم من تركيبات الألوان (أكثر من 16.7 مليون). ومع ذلك، فإنه من الصعب إلى حد ما للعمل مع هذا النظام  . في معظم الحالات، سوف تحتاج إلى منتقي الألوان   color picker.
اذا كنت تستخدم محرر نصوص مثل  Brackets editor به منتقى الوان مدمج  بالمحرر هذا يجعل الامر سهل . . واما اذا كنت  محررنصوص عادى ـ  مثلى ـ حيث انى استخدم 
فانه يوجد كثير من منتقى الالوان على الشبكه و يمكنك أن تتقل إلى العديد من محددات اللون على الانترنت مثل :
ـ  
                      او غيرها
************
لوحات اللون على الانترنت  Online Color Palettes
في معظم الحالات سوف تحتاج إلى أكثر من لون واحد فقط لموقع الويب الخاص بك. عليك ان تحصل على لوحة الألوان. مع مجرد لون منتقى الوان بسيط من الصعب جدا لاختيار الألوان التي تعمل معا بشكل جيد.

هناك العديد من الأدوات التي تجعل العثور على لوحة الألوان أسهل. وفيما يلي بعض الأمثلة:
 لوحات الألوان  محددة مسبقا
  • Colour Lovers
  • Design Seeds
  • Google Color Palette






في

ليست هناك تعليقات:

إرسال تعليق