فاصلة
  • CSS
  • ?
    : ترتيب الدرس
  • 13
    عدد الدروس
  • ?
    أخر تحديث

أساسيات لغة CSS

تختلف كل لغة عن الأخري في طريقة كتابة الكود ,ولغة CSS تحتوي علي طريق بسيطة لكتابة الكود تتكون من 3 خطوات , "تحديد العنصر الذي تريد التعديل علية " , "اختيار الخاصية", "تحديد قيمة للخاصية"

العنصر المختار = Selector

الخاصية = Property

قيمة الخاصية = Value


ما هو المقصود بالعنصر؟

العنصر هو الجزء الذي سنقوم بتصميمة في الموقع وقد يكون صورة او نص او أي شيء متوفر في الموقع الخاص بك يسمي بالعنصر وهو نفسة الوسم الموجود في لغة HTML ولكن في لغة CSS يسمي الوسم بالعنصر ,ولتصميم ذلك الوسم يجب تحديدة في لغة CSS .

ما هو المقصود بالخاصية ؟

الخاصية هي الأمر المسؤول عن التغيير الذي سيحدث في العنصر , وهي عبارة عن الأمر المسؤول عن تغيير لون العنصر او الأمر المسؤول عن تغيير حجم العنصر وكل أمر يجري تغيير علي العنصر يسمي بالخاصية

 ما هو المقصود بقيمة الخاصية؟

القيمة هي نتيجة محددة يتم أعطائها للخاصية لتنفيذ الأمر علي العنصر ,ولو أفترضنا بأننا نحتاج الي تغيير لون عنصر ,في تلك الحالة سوف نقوم بتحديد الخاصية المسؤولة عن تغيير لون العنصر ,والقيمة ستكون هي درجه اللون الذي سنعطية للعنصر

selector { property: value }

وفيما يلي مثال علي طريقة تغيير لون عنوان وسم h1 في الموقع الي اللون الأخضر, ستكون الخطوات عبارة عن تحديد العنصر وهو h1 والخطوة الثانية تحديد الخاصية المسؤولة عن تغيير لون النص color والخطوة الأخيرة هي أعطاء قيمة للخاصية باللون الذي تريده للعنصر ,وهو اللون الأخضر 

تحديد العنصر { الخاصية : قيمةالخاصية}

h1 { color : Green }

قمنا يتغيير لون عنوان h1 الي اللون الأخضر عن طريق تحديد h1 وهو الوسم الخاص بالعناوين في لغة HTML ومن ثم قمنا يتحديد الخاصية Color  المسؤولة عن تغيير لون الخط وقمنا بأعطائها القيمة Green لتحويل لون الخط الي اللون الأخضر.

الأن اي وسم h1 في الموقع سيكون باللون الأخضر نتيجة الكود السابق ,ويمكننا اختيار أكثر من عنصر في السطر الواحد كما يلي.

h1, h2, h3, h4, h5, h6 { color: green}

قمنا يتحديد  جميع مقاسات العناوين من h1 الي h6 ,وهي العناوين الكاملة في لغة HTML وقمنا بوضع فاصلة بين كل عنصر ليستوعب المتصفح بأن هناك أكثر من عنصر سوف يتم تغيير اللون الخاص بهم في الموقع , وعند كتابة اي وسم من H1 الي H6 في الموقع سوف يكون باللون الأخضر نتيجة أستخدام الكود السابق.

الأن سوف نعطي مثال علي أكثر من خاصية لعنصر واحد مثل تغيير "حجم الخط" ,"ولون الخط" .

}h1
  ;  color: green
{   ;    font-size: 150px

 

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